jQuery day02

浏览器中的顶级对象：window

页面中的顶级对象：document

jquery中的顶级对象: jQuery.方法,jQuery.属性 即$.方法,$.方法 -->

　　

区别：看后面调用的是dom写法 还是 jq 写法，jq几乎都是方法 没有属性

　　

DOM操作麻烦 转jq ， jq没有兼容的地方 转dom

选择器

id选择器 $("#")
$("#btn").click(function(){
    this.value = "123";
    $(this).val("345");
});

标签选择器 $("XX")

$(function(){
    $("p").text("en");
});        
.text()方法 == innerText
对象.text()获取
对象.text(value)   
隐式迭代 本身没有循环操作，jq内部帮我们循环


类选择器 $(".XX")
$("#btn").click(function(){
    $(".cls").css("backgroundColor","pink");
});

交集选择器
$("#btn").click(function(){
    $("p.cls").css("backgroundColor","pink");
});

并列选择器
$("#btn").click(function(){
    $("#btn,div.cls,p.cls,ul").css("backgroundColor","green");
});


层级选择器
$("ul span").css({"backgroundColor":"pink"});    
$("ul>span").css({"backgroundColor":"red"}); 
$("ul~span").css({"backgroundColor":"red"}); 获取后面的兄弟元素
$("ul+span").css({"backgroundColor":"red"}); 获取直接相邻的兄弟元素


索引选择器
:eq(index)
:lt(index)
:gt(index)
   $("ul>li:eq(3)").css("background","red");
 $("ul>li:lt(3)").css("background","red");
 $("ul>li:gt(3)").css("background","red");
 $("ul>li:gt(5):lt(3)").css("background","red");