34.选择器

一、什么是选择器？

jQuery提供获取页面元素一种语法。

二、选择器的组成？

选择器一般由“特殊符号”+“字符串”组成。
比如:“#”代表id “mydiv”是一个字符串，那么整体#mydiv代表,id为mydiv的元素对象。

三、使用选择器获取元素?

$(“选择器”) ， $ (“#mydiv”)

注意：如果通过jQuery方法获取页面中元素，没有查找到，返回值不是null,返回值为一个空数组[]，所以判断是否获取到元素，通过jquery.length!=0来判断。

选择器的使用,以文档为主,下面给部分示例代码

基本选择器

$(function() {
    //1.使用id选择器获取当前DIV元素
    var div = $("#msg");
    console.log(div);
    
    //2.获取所有的li元素并打印数量
    var li = $("li");
    console.log(li.size());
    
    //3:获取所有class为selected的元素,字体颜色改为red
    $(".selected").css("color","red");
    
    //4.问题4:获取id为myul元素中有多少li,学会使用selector和get方法
    console.log($("#myul li").get());//get()取得所有匹配的 DOM 元素集合。
});

层次选择器

$(function() {
    //问题1:获取所有ul下的所有li元素,并分析结果
    var args1 = $("ul li");
    console.log(args1);//实际上 有12个,先找第一层ul中有8个,再找第二层中4个,jQuery中会自动去重
    console.log(args1.size());
    
    //问题2:获取id为myul下的所有子li元素,并分析结果
    console.log($("#myul>li"));
    
    //问题3:获取所有label元素后同级的input元素,并分析结果
    console.log($("label~input"));
    //问题4:获取紧跟着label元素后的input元素,并分析结果
    console.log($("label+input"));
});

过滤选择器

$(function() {
    
    //问题1:获取ul的第一个li元素(:first)
    var v1 = $("ul li:first");
    console.log(v1);
    
    //问题2:获取每一个ul的第一个li元素(:first-child)
    var v2 = $("ul li:first-child");
    console.log(v2);
    
    //问题3:获取每一个ul的最后一个li元素(:last)
    var v3 = $("ul li:last");
    console.log(v3);
    
    //问题4:获取每一个ul的最后一个li元素(:last-child)
    var v4 = $("ul li:last-child");
    console.log(v4);
    
    //问题5:表格隔行变色 even,偶数,从第0个开始数,odd,奇数,从第1个开始数
    $("tbody tr:even").css("background-color","orange");//因为标题栏还有一个tr.所以需要先拿到tbody
    $("tbody tr:odd").css("background-color","yellow");//因为标题栏还有一个tr.所以需要先拿到tbody

    //问题6:获取所有的奇/偶数的li元素(:odd/:even)
    console.log($("li:odd"));//从第1个开始数
    console.log($("li:even"));//从第0个开始数
    
    //问题7:获取每个ul的奇/偶数的li元素(:nth-child(?))
    console.log($("ul li:nth-child(odd)"));//:nth-child从1开始的
    console.log($("ul li:nth-child(even)"));//:nth-child从1开始的
    
    //问题8:获取input元素中id以check开头的元素([attr^=value])
    console.log($("input[id^=check]"));
    
    //问题9:获取input元素中id以1结尾元素$("input[id$=1]")
    console.log($("input[id$=1]"));
});