jQuery选择器

js–>jq Dom互转

<div id="one">
	<ul>
		<li id="one"></li>
		<li class="two"></li>
		<li class="three"></li>
		<li class="two"></li>
	</ul>
</div>
<div id="three">3333</div>

		console.log("jq", $("#one"));
        console.log("jq-->js", $(".two")[0]);  //jq-->js
        console.log("jq-->js", $("#one").get(0));  //jq-->js
        console.log("js", document.getElementById("three")); //js
        console.log("js-->jq", $(document.getElementById("three")));  //js-->jq

基础选择器

<div>
	<ul id="ul">
		<li id="one"></li>
		<li class="two"></li>
		<li class="three"></li>
		<li class="two"></li>
	</ul>
	<ul>
		<li>啊啊啊</li>
		<li>bbbb</li>
		<li>dddd</li>
		<li>层叠SV</li>
	</ul>
</div>

 		//获取 id==one
        console.log("id==one 元素", $("#one"));
        //获取 class==two
        console.log("class==two 元素", $(".two"));
        //获取 所有li元素
        console.log("li元素", $("li"));
        //获取 所有元素
        console.log("所有元素", $("*"));
        //获取 id==one  class==three
        console.log("id==one  class==three 元素", $("#one,.three"));

层级选择器
ancestor祖先 descendant后代 后代选择器
parent>child 子选择器
prev上一个 + next下一个 下一个兄弟(紧挨着的)
prev上一个 ~ sibling 兄弟姐妹 下面所有兄弟

<div id="one">
	<ul>
		<li id="one"></li>
		<li class="two"></li>
		<li class="three"></li>
		<li class="two"></li>
	</ul>
</div>

 		console.log("后代",$("div li"));
        console.log("子集",$("ul>li"));
        console.log("子1",$("#ul li"));
        console.log("子2",$("div>li"));  //0
       
        console.log("下一个1",$("#one + li"));
        console.log("下一个2",$("#one ~ li"));

基本筛选器

<ul>
	<li>aaa</li>
	<li>bbb</li>
	<li>ccc</li>
	<li>ddd</li>
	<li>eee</li>
	<li>fff</li>
</ul>
<form>
	<input type="text">
	<input type="text">
</form>

			/*:root   根元素  <永远是html>
            :first  第一个
            :last   最后一个
            :eq(index)   下标 等于  
            :gt(index)   下标 大于
            :lt(index)   下标 小于
            :even  下标 偶数
            :odd   下标 奇数
            :not(selector)  除了
            :focus  获取焦点元素*/
       
        $("input").click(function(){
            console.log($(":focus"));
        })
        console.log("根元素",$(":root"));
        console.log("ul 下的第一个",$("ul>li:first"));
        console.log("ul 下的最后一个",$("ul>li:last"));
        console.log("ul 下的下标等于2",$("ul>li:eq(2)"));
        console.log("ul 下的下标大于2",$("ul>li:gt(2)"));
        console.log("ul 下的下标小于2",$("ul>li:lt(2)"));
        console.log("ul 下的下标是偶数",$("ul>li:even"));
        console.log("ul 下的下标是奇数",$("ul>li:odd"));
        console.log("ul 下的下标除了2",$("ul>li:not(ul>li:eq(2))"));

内容选择器

<div>啊啊啊</div>
<div id="x"></div>
<div id="y">

</div>
<div>
	<p id="a">111111啊1</p>
</div>
<div>777啊999</div>

		/*:contains(text)  匹配包含给定文本的元素
		:empty    匹配所有不包含子元素或者文本的空元素
		:has(selector)    匹配含有子元素或者文本的元素
		:parent           含有选择器匹配的元素*/
      
       console.log("获取包含 啊 的 div", $("div:contains(啊)"));   
       console.log("获取 空 div", $("div:empty"));
       console.log("获取 有内容或子元素的 div", $("div:parent"));
       console.log("获取 div 里有id=a  的div", $("div:has(#a)"))

属性选择器

	<ul>
        <li id="one" class="two">111--two &id=one</li>
        <li class="xtwo">222--xtwo</li>
        <li class="twox" ssss>333--twox</li>
        <li class="two three">444--two three</li>
        <li id class="three two">555--three two</li>
    </ul>

[attribute]             包含某个属性   
[attribute=value]       包含属性是某个特定值的元素 ( 属性=value)
[attribute!=value]      不包含指定的属性   (属性 不等于 value)
[attribute^=value]      包含开头是某个值的元素   (属性  开头=value)
[attribute$=value]      包含结尾是某个属性值的元素   (属性  末尾=value)
[attribute*=value]      所有包含某个属性值的元素   (属性 所有=value)
[attrSel1][attrSel2][attrSelN]     同时包含几个属性的元素
	console.log("包含id属性的li元素 :>>",$("[id]"));
    console.log("包含class属性  且class值开头是two :>>",$("[class ^=two]"));
    console.log("包含class属性  且class结尾是two :>>",$("[class $=two]"));