jquery选择器的使用方法

html：

<div id="div1">我是div1</div>
<div id="div2" class="div2">我是div2</div>
<div id="div3">我是div3</div>
<div id="div4" class="div4">我是div4</div>
<div id="div5" class="div5">我是div5</div>
 <div class="div6"></div>
<div id="div6">我是div6</div>

<div id="content">
    <div id="div_1">我是后代div1</div>
    <div id="div_2">我是后代div2</div>
    <div id="div_3" class="div3">我是后代div3</div>
    <div id="div_4"></div>
    <div id="div_5" style="display: none">我是后代div3</div>
    <p>我是p标签</p>
</div>

script：

//****************       jquery元素选择器    ************************

$(function(){
    /*-------------- 基本选择器 ---------------*/
    console.log("-------------- 基本选择器 ---------------");
    //获取id选择器
    var div2 = $("#div2");
    console.log(div2[0]);
    //标签选择器
    var divs = $("div");
    console.log(divs);
    //类选择器
    var div5 = $(".div5");
    console.log(div5);
    //通配选择器
    var all = $("*");
    console.log(all);
    //多选择器
    var mutiple = $("div.div4,p,p#div2");
    console.log(mutiple);
    /*-------------- 层级选择器 ---------------*/
    console.log("-------------- 层级选择器 ---------------");
    //后代选择器
    var parent = $("#content div");
    console.log(parent);
     //子代选择器
    var child = $("#content>div");
    console.log(child);
    //相邻选择器
    var  next = $("#div_1+div ");
    console.log(next);
    //兄弟选择器
    var brother = $("#div_1~div");
    console.log(brother);
    /*-------------- 伪类选择器 ---------------*/
    console.log("-------------- 伪类选择器 ---------------");
    var content = $("div");
    //first 获取结果集的第一个元素
    var first = content.first();
    console.log(first);
    //last  获取结果集的第二个元素
    var last = content.last();
    console.log(last);
    //not
    var result = $("input:not(:checked)");
    console.log(result);
    //even   获取“索引”值为偶数的节点
    var even = $("#content>div:even");
    console.log(even);
    //odd   获取“索引”值为奇数的节点
    var odd = $("#content>div:odd");
    console.log(odd);
    //eq    获取指定索引的元素
    var eq = $("#content>div:eq(2)");
    console.log(eq);
    //gt    获取大于指定索引的元素
    var gt = $("#content>div:gt(1)");
    console.log(gt);
    //lt    获取小于指定索引的元素
    var lt = $("#content>div:lt(3)");
    console.log(lt);
    /*-------------- 内容选择器 ---------------*/
    console.log("-------------- 内容选择器 ---------------");
    var contains = $("#content>div:contains('1')");
    console.log(contains);
    //匹配所有不包含子元素或者文本的空元素
     var empty = $("#content>div:empty");
    console.log(empty);
    //匹配所有选择器所匹配的元素的元素
    var has = $("#content>div:has('p')");
    console.log(has);
    //匹配所有子元素或者文本元素
    var parent = $("#content>div:parent");
    console.log(parent);
    /*-------------- 可见性选择器 ---------------*/
    console.log("-------------- 可见性选择器 ---------------");
    //匹配所有不可见元素
     var hidden = $("#content>div:hidden");
    console.log(hidden);
    //匹配所有可见元素
    var visible = $("#content>div:visible");
    console.log(visible);
    /*-------------- 属性选择器 ---------------*/
    console.log("-------------- 属性选择器 ---------------");
    //attribute[]
    var attriId = $("#content>div[id]");
    console.log(attriId);
    var attriCla = $("#content>div[class]");
    console.log(attriCla);
    var attriSty = $("#content>div[style]");
    console.log(attriSty);
    //attribute[=]   匹配给定的属性是某个特定值的元素
    var attribute = $("#content>div[id='div_1']");
    console.log(attribute);
    //attribute[!=]  匹配所有不含有指定的属性，或者属性不等于特定值的元素。
    var attribute2 = $("#content>div[id!='div_2']");
    console.log(attribute2);
    //attribute[^=]  匹配给定的属性是以某些值开始的元素
    var attribute3 = $("#content>div[id^='div']");
    console.log(attribute3);
    //attribute[$=]  匹配给定的属性是以某些值结尾的元素
    var attribute4 = $("#content>div[id$='3']");
    console.log(attribute4);
    //attribute[*=]  匹配给定的属性是以包含某些值的元素
    var attribute5 = $("#content>div[id*='div_1']");
    console.log(attribute5);
    //attribute[][]  复合属性选择器，需要同时满足多个条件时使用。
    var attribute6 = $("#content>div[id][style$='none']");
    console.log(attribute6);