jquery基本选择器大全！看懂这个再也不用愁怎么获取jquery节点了！，jquery简直太简单了！

注:需自己复制粘贴看具体效果，因为后台打印的缘故，不能更具体的呈现出来结果，望见谅！

还有需要事先安装并载入jquery(3.0以上版本)在你的软件里。

(内容选择器实例)

html:

 <div>lan kang</div>
    <div>kang</div>
    <div>lan</div>
    <div>an</div>
    <div>
        <p>hong</p>
    </div>
    <div></div>

js(jquery):

		console.log("包含文本", $("div:contains('lan')"));
        console.log("包含匹配元素", $("div:has('p')"));
        console.log("空标签", $("div:empty"));
        console.log("包含子元素或者文本的元素", $("div:parent"));

(属性选择器实例):
html:

<ul>
        <li class="a">a</li>
        <li class="b">b</li>
        <li class="ab">ab</li>
        <li class="ba">ba</li>
        <li class="cb">cb</li>
        <li class="ca">ca</li>
    </ul>

js(jquery):

		 console.log("有class",$("[class]")); //所有有class的都有；
        console.log("class==a",$("[class=a]")); //class只等于一个a的；
        console.log("class包含 a",$("[class*=a]")); //class里有一个a就行；
        console.log("class开头 a",$("[class^=a]")); //class开头有a；
        console.log("class结尾 a",$("[class$=a]")); //class结尾是a；
        console.log("class不是只有一个a",$("[class!=a]"));//打印全部标签，只显示不是只有一个a的；

（子元素实例）:
html:

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

    <ul>
        <li>22</li>
    </ul>

js(jquery):

 		 console.log($("ul li:first-child"));//第一个孩子；
        console.log($("li:first-of-type"));//第一个；
        console.log($("ul>li:last-child"));//最后一个孩子；
        console.log($("ul>li:last-of-type"));//最后一个；
        console.log($("ul>li:nth-child(3)"));//正数第三个；
        console.log($("ul>li:nth-last-child(2)"));//倒数第二个；
        console.log($("ul>li:nth-last-of-type(3)"));//倒数第三个；
        console.log($("ul>li:nth-of-type(2)"));//正数第二个；
        console.log($("ul>li:only-child"));//只有一个子元素才会打印；
        console.log($("ul>li:only-of-type"));//倒数第一个；

(层级选择器实例)
html:

 <ul id="ul">
        <li>111</li>
        <li id="two">222</li>
        <li>333</li>
        <li>444</li>
    </ul>

js(jquery):

	    var li1 = $("#ul li") //正常打印下面的所有li；
        console.log(li1);


        var li2 = $("#two+li") //只打印下面的第一个兄弟；
        console.log(li2);

        var li3 = $("#two~li") //打印他的id的下面的所有兄弟,包括自己；
        console.log(li3);

(基本筛选选择器实例)
html:

<ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li class="x">6</li>
    </ul>

js(jquery)：

 		console.log($("ul>li:first")); //打印第一个li；
        console.log($("ul>li:last")); //打印最后一个；
        console.log($("ul>li:eq(4)")); //打印eq后面的下标；
        console.log($("ul>li:gt(3)")) //打印大于下标3的所有li；
        console.log($("ul>li:lt(4)")); //打印小于下标4的所有li；
        console.log($("ul>li:even()")); //打印所有偶数下标；
        console.log($("ul>li:odd()")); //打印所有奇数下标；
        console.log($("ul>li:not('.x')")); //除了class是x的打印所有；
        console.log($(":root")); //打印根标签如html；