jQuery中的选择器

css选择器

 $("#box")               //id选择器
 $div2 =$(".box");       //class选择器
 $div3 = $("div");       //element选择器
 $div4 = $("#box,.box"); //群组选择器
 $div5 = $("*");         //通配选择器

层级选择器

$li1 = $("#list li");      //后代选择器--祖孙
$li2 = $("#list>li");      //子元素选择器--父子关系
$li3 = $("#first+");       //紧邻同辈选择器,忽略空白文本节点
$li4 = $("#first~");       //相邻的后面的同辈选择器

表单选择器

    // 01 :input 获取表单中所有的input select textarea元素
    console.log( $("#f1 :input") );
    // 02 :text 获取单行输入框
    // 获取id为f1的元素的后代中的单行输入框
    console.log( $("#f1 :text") );
    // 03 :password
    // 04 :radio
    // 05 :checkbox
    // 06 :file
    // 07 :image
    // 08 :reset
    // 09 :submit
    // 10 :button
    // 11 :hidden

基本过滤器

    // 注意：过滤选择器要和其他选择器搭配使用
    // 根据下标来过滤
    // 01 :first
    // 在匹配到的所有li的集合中选取第一个元素
    console.log( $("li:first") );
    // 02 :last
    console.log( $("li:last") );
    // 03 :eq(index) 下标从0开始  ==
    console.log( $("li:eq(1)") );
    // 04 :gt(index) 下标大于index   gt--->great that
    console.log( $("li:gt(2)") );
    // 05 :lt(index) 下标小于index   lt--->litte that
    console.log( $("li:lt(3)") );
    // 06 :odd 奇数
    console.log( $("li:odd") );
    // 07 :even 偶数
    console.log( $("li:even") );
    // 08 :not(指定选择器) 去除与指定选择器匹配的元素
    // 去除id为li2的li元素
    console.log( $("li:not(#li2)") );
    // 09 :header
    // 获取到标题元素的集合
    $(":header").css("background-color","red");
    // 10 :animated 匹配正在执行动画的元素

内容过滤器

    // 01:查找所有的包含指定文本值的元素
    // :contains(指定的文本值)
    console.log( $(":contains(你好)") );
    // 面试题：查找出页面中所有包含“招聘”二字的div，把招聘高亮显示
    // div:contains(招聘)
    // 替换 replace(旧,新)
    var $zpDiv = $("div:contains(招聘)");
    console.log($zpDiv);
    for(var i in $zpDiv){
        // 只能遍历数组 对象
    }
    for (var i = 0; i < $zpDiv.length; i++) {
        var div = $zpDiv[i];//DOM对象
        var cont = div.innerHTML;
        div.innerHTML = cont.replace(/招聘/g,"招聘");
    }
    // 02:has(selector)
    // 查找所有包含指定选择器的子元素的元素
    console.log( $("div:has(p)") );
    // 筛选出含有class为test的子元素的div
    console.log( $("div:has(.test)") );
    // 03 :empty 筛选出空元素
    console.log( $("div:empty") );
    // 04 :parent 筛选出非空元素
    console.log( $("div:parent") );

属性过滤器

    // 01 [attr] 筛选出含有指定属性的元素
    // 筛选出含有placeholder属性的元素
    console.log( $("input[placeholder]") );
    // 02 [attr=value] 筛选出含有指定属性值的元素
    console.log( $("input[type=checkbox]") );
    // 03 [attr!=value] 筛选出属性值不等于指定值的元素
    console.log( $("input[type!=radio]") );
    // 04 ^ [attr^=value] 筛选出属性值以指定值开头的元素
    // $("[class^=banner]").css("background-color","red");
    // $("[class^=banner]").css("height","50px");
    $("[class^=banner]").css({"background-color":"red","height":"100px","width":"100px"});
    // 05 $ [attr$=value] 筛选出属性值以指定值结尾的元素
    $("[class$=div]").css({"width":"50px","height":"50px","background-color":"green"});
    // 06 * [attr*=value]筛选出属性值包含指定值的元素
    $("[placeholder*=密码]").css("background-color","red");
    // 07 [attr1][attr2]...[attrN]
    // 筛选出包含多个指定属性的元素
    console.log( $("input[type][placeholder]") );
    // 含有一个属性 多个属性 []
    // 属性值等于= 不等于!=  以XX开头^=  以XX结尾$= 包含XX *=

子元素过滤器

    // 01 :first-child
    // 匹配那个ul是其父节点的第一个子节点
    console.log( $("ul:first-child") );
    console.log( $("ul:first") );//拿到集合中的第一个
    console.log( $("ul>li:first-child") );
    console.log( $("ul>li:first"));
    console.log( $("#list1 li:first-child"))
    // 02 :last-child
    console.log( $("ul:last-child"));
    // 03 :nth-child(num|even|odd|3n) 下标是从1开始的 
    console.log( $("ul:nth-child(2)"));
    $("tbody tr:first-child").css("background-color","red");
    // 04 :nth-last-child()

可见性过滤选择器

    // 01 :hidden
    console.log( $("div:hidden") ); //2
    // 02 :visible
    console.log( $("div:visible") );//3
    //隐藏的出现 出现的隐藏
    document.getElementById("btn").addEventListener("click",function(){
        $("div:hidden").css("display","block");
        $("div:visible").css("display","none");
    },false)

表单属性过滤选择器

    // 01 :enabled 可用的
    console.log( $(":text:enabled") );
    // 02 :disabled 不可用的
    console.log( $(":text:disabled") );
    // 03 :checked 选中的（单选框 多选框）
    console.log( $(":input:checked") );
    // 04 :selected 选中的（下拉列表）
    console.log( $("option:selected") );
    document.getElementById("btn").onclick = function(){
    console.log( $(":checkbox:checked:not(:eq(3))").length );
  }

重要！！！
DOM对象：根据原生的方法获取到的是DOM对象；DOM树上的节点就是DOM对象
jQuery对象：根据jQuery的选择器获取到的是jQuery对象；
jQuery对象是对DOM对象的包装。
DOM对象---->jQuery对象
$(DOM对象)
jQuery对象-->DOM对象
jQuery对象index
jQuery对象.get(index)
注意：jQuery对象只能使用jQuery中封装的方法，不能使用DOM的对象的方法；同理，DOM对象只能使用DOM的方法不能使用jQuery中封装的方法