jquery中的选择器

Posted 2020-08-09 吴晓尚

jquery中的选择器用于获取文档中的对象。通常的有id选择器，类选择器，element选择器等。其选择器部分与css中的选择器大体上一样，在细微处有点区别。匹配多个元素

1,id选择器，累选择器，element选择器，*选择器（4个）

//html代码
<div id="box"></div>
<div class="content"></div>
<p>this is p</p>

//jquery代码
$("#box");//获取第一个div元素("id="box")
$(".content");//获取第二个div元素（class="content"）
$("p");//获取p元素
&("*");//获取文档中所有的元素

2.匹配多个元素以及祖先下匹配的所有后代元素和子元素（3个）

//html
<div class="wrap">
<p>this is a p</p>
<p calss="another"> this is a p another</p>
<div class=""content>
    <p>this is a p in content</p>
</div>
</div>
<img src="" />
<h1>this is h1</h1>

//jquery
$(".content,img")//匹配<div class=""content><p>this is a p in content</p></div>和<img src="" />
$(".wrap p")//匹配<p>this is a p</p><p calss="another"> this is a p another</p><p>this is a p in content</p>
$(".wrap>p")//匹配<p>this is a p</p><p calss="another"> this is a p another</p>

 3.prev+next,prev~siblings(2个）

//html
<div class="one">
<img src="" />
<p>just a p</p>
<input type="text"/>
<input type="password"/>
</div>
<div>
<p>it‘s a p</p>
</div>

//jquery
$(".one p+input")//<input type="text"/>
$(".one p~input")//<input type="text"/><input type="password"/>

 4.:first,not,even,odd,:last（5个）

//html
<ul class="item">
<li>1</li>
<li class="two">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

//jquery
$(".item li:first")//<li>1</li>第一个
$(".item li:last")//<li>5</li>最后一个
&(".item li:not(.two)//<li>1</li><li>3</li><li>4</li><li>5</li> 
$(".items li:even")//<li>1</li><li>3</li><li>5</li>索引值为偶数，从0开始 
$(".items li:odd")//<li>2</li><li>4</li>索引值为奇数

 5：eq(index),:gt(index)，:lt(index) ,:lang()  （4个）

//html
<ul>
<li>1</li><li lang="en>2</li><li>3</li>
</ul>

//jquery
$("li:eq(0)")//<li>1</li>索引值为0
$("li:gt(0)")//<li>2</li><li>3</li>索引值在0之后的所有相匹配的元素
$("li:lt(2)")//<li>1</li><li>2</li>索引值在2之前的所有相匹配的元素
$("li:lang(en)")//<li>2</li>lang的值为en地li元素 

 6,:header

//html
<h1>it‘s h1</h1>
<p>text</p>
<h2>it‘s h2</h2>
<p>footer</p>

//jquery
$(":header")//<h1>it‘s h1</h1><h2>it‘s h2</h2>匹配所有标题元素h1~h6

 7:animated

//html
<div class="box></div>
<div class="circle"></div>

//jquery
$(".box").animate({maeginLeft:100px},)//.box运动
￥（“div:animated”）//匹配<div class="box></div>

 8,:focus获取当前获得焦点的元素，:root获取元素的根元素，即html，：target选择由文档URI的格式化识别码表示的目标元素。(3个）

//html
<input type="text" autofocus/>//自动获得焦点
<button><button>
<input type="password"/>

//jquery
$(":focus")//<input type="text" autofocus/>获取焦点的元素

 9：contains,:empty:has(selector),:parent,:hidden,:visible(6个)

//html
<div><p>abc  123</p></div>
<div></div>
<p>abc 456</p>
<p></p>
<p><a href="">159</a></p>
<div hidden><img src="" /></div>

//jquery
$("p:contains(‘abc)")//<p>abc  123</p>和<p>abc 456</p>文本节点中包含有字符串abc的p元素
$("div:empty")//<div></div>不包含子元素或文本的空div元素
$("div:has(p)")//<div><p>abc  123</p></div>包含有p元素的div元素
$("p:patent")//<p>abc 456</p>,<p>abc  123</p>,<p><a href="">159</a></p>含有子元素或文本节点的p元素
$("div:hidden")//<div hidden><img src="" /></div>所有隐藏的div元素
￥（“div:vidible”）//<div><p>abc  123</p></div>,<div></div>所有可见得div元素

 10，[attribute],[attribute=value],[attributeQ!=value],[attribute^=value],[attribute$=value],[attribute*=value],[attrSel1][attrSel2]（7个）

//html
<input type="text" name="text1"/>
<input type="text" name="novel2" />
<input type="text" name="text3" />
<input type="text" name="text4"/>
<input type="text" value="text"/>
<input type="text" value="text" class="abc"/>
//jquery
$("input[value)")//<input type="text" value="text"/>含有value属性
$("input[name=‘text1‘]")//<input type="text" name="text1"/>name属性值为text1的input
$("input[name！=‘text1‘]")//<input type="text" name="novel2"/>,<input type="text" name="text3"/>,<input type="text" name="text4"/>,<input type="text" value="text"/>name属性名不为text1的input
$("input[name^=‘text‘]")//<input type="text" name="text1"/>,<input type="text" name="text3"/>,<input type="text" name="text4"/>name属性值以text开头的input元素
$("input[name$=‘2‘]")//<input type="text" name="novel2"/>name属性值以2结尾的input
$("input[name*=‘e‘]")//<input type="text" name="text1"/>,<input type="text" name="novel2"/>,<input type="text" name="text3"/>,<input type="text" name="text4"/>name属性值包含2的input
$("input[class][type=‘text‘]")//<input type="text" value="text" class="abc"/>有class属性且type属性值为text的input

 11，：first-child,:first-of-type,:last-child,:last-of-type,:nth-child,:nth-last-child,:nth-of-type,:nth-of-last-type,:only-of-type,:only-child(10个)

//html
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul><li>no</li></ul>
<p>aaaa</p>
<p>aaaa</p>
<p>aaaa</p>

//jquery
$("ul li:first-child")//<li>1</li>,<li>no</li>
$("ul li:first-of-type")//<li>1</li>,<li>no</li>
$("ul li:last-child")//<li>3</li>,<li>no</li>
$("ul li:last-of-child")//<li>3</li>,<li>no</li>
$("ul li:nth-child(2)//<li>2</li>序号从1开始
$("ul li:nth-of-type(2)//<li>2</li>
$("ul li:nth-last-child(2)//<li>2</li>倒数
$("ul li:nth-last-of-type(2)//<li>2</li>倒数
$("ul li:only-child")//<li>no</li>只有一个
$("ul li:only-of-type")//<li>no</li>

 12.:input,:text,:password,:radio,:checkbox,:submit,:image,:reset,:file,:button(10个)

//html
<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>
    <textarea></textarea>
    <button>Button</button>
</form>
//jquery
$(":input")//<input type="button" value="Input Button"/>,<input type="checkbox" />,<input type="file" />,<input type="hidden" />,<input type="image" />
,<input type="password" />,<input type="radio" />,<input type="reset" />,<input type="submit" />,<input type="text" />,<select><option>Option</option></select>
,<textarea></textarea> ,<button>Button</button>
$(":text")//<input type="text" />
$(":password")//<input type="password" />
$(":radio")//<input type="radio" />
$(":checkbox")//<input type="checkbox" />
$(":submit")//<input type="submit" />
$(":image")//<input type="image" />
$(":resrt")//<input type="reset" />
$(":button")//<button>Button</button>
$(":file")//<input type="file" /> 

13.:enabled,:disabled,:checked,:selected(4个)

//html
<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
  <input type="checkbox" name="newsletter" value="Weekly" />
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
   <option value="1">Flowers</option>
   <option value="2" selected="selected">Gardens</option>
 </form>

//jquery
$("input:enabled")//<input name="id" />,<input type="checkbox" name="newsletter" checked="checked" value="Daily" />,<input type="checkbox" name="newsletter" value="Weekly" />,<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />, <option value="1">Flowers</option>,<option value="2" selected="selected">Gardens</option>
$("input:disabled")//<input name="email" disabled="disabled" />
$("input:checked")//<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
$("option:selected")//<option value="2" selected="selected">Gardens</option>