你的位置:首页 > Java教程

[Java教程]jqueryAPI使用之选择器


好一段时间没有更新博文了。刚学习完JS基础知识后,也进入到了JQ的学习。为了能熟练掌握JQ的使用,最好的方法就是反复多练,讲JQ中的API的每个知识点都练习一遍。如果能做到这个,那么对JQ就没那么陌生了。这一天,先将JQ中的选择器的每个点熟悉一遍。注:记得先将JQ库引入,并且<script></script>里的代码需要用$(function(){jq代码});在这里,我是没有添加这个。

一、基本:

HTML代码:

<p class="p1">p段落</p><h class="h1">h标签</h><div id="div1"><p class="p2">hehehe</p></div>

1、jQuery( "*" )查找文档中的每一个元素(包括 head, body 等)。

$("*").css('background-color','red');

2、jQuery( ".class" )选择给定样式类名的所有元素。

$('.h1').css('background-color','yellow');

3、jQuery( "element" )根据给定(html)标记名称选择所有的元素。

$('h').css('border','1px solid blue');

4、jQuery( "selector1, selector2, selectorN" )将每一个选择器匹配到的元素合并后一起返回。

$('.h1,.p1,#div1').css('color','blue');

5、jQuery( "#id" )选择一个具有给定id属性的单个元素。

$('#div1').css({          width:20,          height:30,          border:'1px solid #ccc',        background:'blue'        });

二、层级

HTML代码:

<ul class="topnav"><li class="item1">Item 1</li><li>Item 2<ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul></li><li>Item 3</li></ul><label>lll:</label><input name="name" value="123"/>

1、jQuery( "parent > child" )选择所有指定“parent”元素中指定的"child"的直接子元素

$("ul.topnav > li").css("border", "3px double red");

2、jQuery( "ancestor descendant" 选择给定的祖先元素的所有后代元素。一个元素的后代可能是该元素的一个孩子,孙子,曾孙 

等。

$('ul li').css('background-color','aquamarine');

3、jQuery( "prev + next" )选择所有紧接在 “prev” 元素后的 “next” 元素

$("label + input").css("color", "blue");

4、jQuery( "prev ~ siblings" )匹配 “prev” 元素之后的所有 兄弟元素。具有相同的父元素,并匹配过滤“siblings”选择器

$('ul ~ label').css('color','yellow');

三、基本筛选:

HTML代码:

<h1>Header 1</h1><p>Contents 1</p><h2>Header 2</h2><button id="run">Run</button><div></div><div id="mover"></div><div></div><table border="1"><tr><td>123</td><td>123</td><td>456</td></tr><tr><td>123</td><td>123</td><td>456</td></tr><tr><td>123</td><td>123</td><td>456</td></tr><div lang="en-us"></div></table>

1、jQuery( ":animated" )选择所有正在执行动画效果的元素.

 $("#run").click(function(){ $("div:animated").toggleClass("colored");  });  function animateIt(){  $("#mover").slideToggle("slow", animateIt);   }  animateIt();

2、jQuery(":eq(index)"),jQuery( ":eq(-index)" )在匹配的集合中选择索引值为index的元素。

   index: index为正数时要匹配元素的索引值(从0开始计数),index为负数从最后一个元素开始
  倒计数.-1匹配倒数第一个元素

 $("td:eq(2)").css("color", "red");

3、jQuery( ":even" ) 选择所引值为偶数的元素,从 0 开始计数。

 $("td:even").css("background-color", "#bbbbff");

4、jQuery( ":first" )选择第一个匹配的DOM元素。:first伪类选择器相当于:eq(0)

 $("tr:first").css("font-style", "italic");

5、jQuery( ":gt(index)" )选择匹配集合中所有大于给定index(索引值)的元素。

 $( "td:gt(4)" ).css( "backgroundColor", "yellow" );

6、jQuery( ":header" )选择所有标题元素,像h1, h2, h3 等.

$(":header").css({ background:'#CCC', color:'blue' });

7、jQuery( ":lang(language)" )选择指定语言的所有元素。

$( "div:lang(en-us)" ).addClass( "usa" );

8、jQuery( ":last" )选择最后一个匹配的元素。

$("tr:last").css({backgroundColor: 'yellow', fontWeight: 'bolder'});

9、jQuery( ":lt(index)" )选择匹配集合中所有索引值小于给定index参数的元素。

 $("td:lt(4)").css("color", "red");

10、jQuery( ":not(selector)" )选择所有元素去除不匹配给定的选择器的元素。

$("div:not(#mover)").css('background','red');

11、jQuery( ":odd" 选择索引值为奇数元素,从 0 开始计数

$("tr:odd").css("background-color", "#bbbbff");

12、jQuery( ":root" )选择该文档的根元素。

console.log($('p:root'));

四、内容筛选:

1、jQuery( ":contains(text)" ) 选择所有包含指定文本的元素。

<div>George Martin</div><div>Malcom John Sinclair</div><div>J. Ohn</div>

$("div:contains('John')").css("text-decoration", "underline");

2、jQuery( ":empty" )选择所有没有子元素的元素(包括文本节点)。需要注意的一件重要的事情是:empty(和 :parent)的子元素包括文本节点。

<tr><td>TD #0</td><td></td></tr><tr><td>TD #2</td><td></td></tr>

<script>$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');</script>

3、jQuery( ":has(selector)" )选择元素其中至少包含指定选择器匹配的一个种元素。

<div><p>Hello in a paragraph</p></div>

<script>$("div:has(p)").addClass("test");</script>

4、jQuery( ":parent" )选择所有含有子元素或者文本的父级元素。

<table border="1"><tr><td>Value 1</td><td></td></tr><tr><td>Value 2</td><td></td></tr></table>

$("td:parent").css('background', 'red');

五、可见性筛选:

1、jQuery( ":hidden" )选择所有隐藏的元素。
元素可以被认为是隐藏的几个情况:
他们的CSS display值是none。
他们是type="hidden"的表单元素。
它们的宽度和高度都显式设置为0。
一个祖先元素是隐藏的,因此该元素是不会在页面上显示。

<span></span><div></div><div style="display:none;">Hider!</div><div></div>

$("div:hidden").show(3000);

2、jQuery( ":visible" )选择所有可见的元素。
如果元素中占据文档中一定的空间,元素被认为是可见的。可见元素的宽度或高度,是大于零。

元素的visibility: hidden 或 opacity: 0被认为是可见的,因为他们仍然占用空间布局。

<button>Show hidden to see they don't change</button><div></div><div class="starthidden"></div><div></div><div></div><div style="display:none;"></div>

$("div:visible").click(function () {$(this).css("background", "yellow");});$("button").click(function () {$("div:hidden").show("fast");});

六、属性:
1、jQuery( "[attribute|='value']" )选择指定属性值等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符“-” )的
元素。
attribute: 一个属性名.
value: 一个属性值,引号是可选的.可以是一个有效标识符或带一个引号的字符串。

<div id="mover">123</div>

$('div[id|=mover]').css('color','red');

2、jQuery( "[attribute*='value']" )选择指定属性具有包含一个给定的子字符串的元素。(选择给定的属性是以包含某些值的元
素)

<input name="milkman" /><input name="letterman2" />

$('input[name*="man"]').val('has man in it!');

3、jQuery( "[attribute~='value']" )选择指定属性用空格分隔的值中包含一个给定值的元素。

<input name="milk man" /><input name="letterman2" />

$('input[name~="man"]').val('mr. man is in it!');

4、jQuery( "[attribute$='value']" )选择指定属性是以给定值结尾的元素。这个比较是区分大小写的。

<input name="newsletter" />

$('input[name$="letter"]').val('a letter');

5、jQuery( "[attribute='value']" )选择指定属性是给定值的元素。

<input type="radio" name="newsletter" value="Hot Fuzz" />

$('input[value="Hot Fuzz"]').css('background','red');

6、jQuery( "[attribute!='value']" )选择不存在指定属性,或者指定的属性值不等于给定值的元素。

<span>name is newsletter</span><span>name</span>

$('span[name!="newsletter"]').css('color','red');

7、jQuery( "[attribute^='value']" )选择指定属性是以给定字符串开始的元素

<input name="newsletter" /> <input name="milkman" /><input name="newsboy" />

$('input[name^="news"]').val('news here!');

8、jQuery( "[attribute]" )选择所有具有指定属性的元素,该属性可以是任何值

<div id="mover">123456</div>

$('div[id]').css('color','red');

9、jQuery( "[attributeFilter1][attributeFilter2][attributeFilterN]" )选择匹配所有指定的属性筛选器的元素
attributeFilter1: 一个属性过滤器.
attributeFilter2: 另一个属性过滤器, 用于进一步减少被选择的元素。
attributeFilterN: 根据需要有更多的属性过滤器

<input name="milkman" /><input id="letterman" name="new-letterman" /><input name="newmilk" />

$('input[id][name$="man"]').val('only this one');

七、子元素筛选:
1、jQuery( ":first-child" )选择所有父级元素下的第一个子元素。

<div><span>John,</span><span>Karl,</span><span>Brandon</span></div>

$("div span:first-child").css("text-decoration", "underline");

2、jQuery( ":first-of-type" )选择所有相同的元素名称的第一个兄弟元素。

<div><span>John,</span><span>Karl,</span><span>Brandon</span></div><script>

$("span:first-of-type").addClass("fot");

3、jQuery( ":last-child" )选择所有父级元素下的最后一个子元素。

<div><span>John,</span><span>Karl,</span><span>Brandon</span></div>

$("div span:last-child").css({color:"red", fontSize:"80%"});

4、jQuery( ":last-of-type" )选择的所有元素之间具有相同元素名称的最后一个兄弟元素。

<div><span>John,</span><span>Karl,</span><span>Brandon</span></div>

$("div span:last-of-type").css({color:"red", fontSize:"80%"});

5、jQuery( ":nth-child(index/even/odd/equation)" )选择的他们所有父元素的第n个子元素。

<ul><li>John</li><li>Karl</li><li>Brandon</li></ul>

$("ul li:nth-child(2)").append("<span> - 2nd!</span>");

6、jQuery( ":nth-last-child(index/even/odd/equation)" )选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第
一个

<ul><li>Dave</li><li>Rick</li><li>Timmy</li><li>Gibson</li></ul>

$("ul li:nth-last-child(2)").css('color','red');

7、jQuery( ":nth-last-of-type(index/even/odd/equation)" )选择所有他们父级兄弟元素下具有相同的元素名(愚人码头注:标
签名,比如<li>)的倒数第n个子元素,计数从最后一个元素开始到第一个。

<ul><li>Dave</li><li>Rick</li><li>Timmy</li><li>Gibson</li></ul>

$("ul li:nth-last-of-type(2)").css('color','red');

8、jQuery( ":nth-of-type(index/even/odd/equation)" )选择同属于一个父元素之下,并且标签名相同的子元素中的第n个。

<div><span>John</span>,<b>Kim</b>,<span>Adam</span>,<b>Rafael</b>,<span>Oleg</span></div>

$("ul li:nth-of-type(2)").css('color','red');

9、jQuery( ":only-child" )如果某个元素是其父元素的唯一子元素,那么它就会被选中。若父元素有其他子元素,就不会被匹配

<div><button>Sibling!</button></div>

$("div button:only-child")css("border", "2px blue solid");

10、jQuery( ":only-of-type" )选择所有没有兄弟元素,且具有相同的元素名称的元素。如果父元素有相同的元素名称的其他子元
素,那么没有元素会被匹配。

<div><button>Sibling!</button></div><div><button>Sibling!</button><button>Sibling!</button></div>

$("button:only-of-type").css("border", "2px blue solid");

八、表单:
1、jQuery( ":button" )选择所有按钮元素和类型为按钮的元素。

<input type="button" value="Input Button"/><input type="checkbox" />

$(':button').css('background-color','red');

2、jQuery( "input:checkbox" )选择所有类型为复选框的元素。

<input type="button" value="Input Button"/><input type="checkbox" />

$('input:button').css('background-color','red');

3、jQuery( ":checked" )匹配所有选中的元素。

<input type="checkbox" name="newsletter" value="Hourly" checked="checked"><input type="checkbox" name="newsletter" value="Daily">

 $('input:checked').css('background-color','red');

4、jQuery( ":disabled" )选择所有被禁用的元素。

<input name="email" disabled="disabled" /><input name="id" />

$("input:disabled").css('background-color','red');

5、jQuery( ":enabled" )选择所有可用的(未被禁用的)

<input name="email" disabled="enabled" /><input name="id" />

$("input:enabled").css('background-color','red');

6、jQuery( ":file" )选择所有类型为文件(file)的元素

<input type="file" /><input type="hidden" />

$("input:file").css('background-color','red');

7、jQuery( ":image" )选择所有图像类型的元素

<input type="image" />

$("input:image").css('width','200');

8、jQuery( ":input" )选择所有 input, textarea, select 和 button 元素.

<input type="password" /><input type="radio" /><input type="reset" />

$(":input").css('width','200')

9、jQuery( ":password" )选择所有类型为密码的元素。

<input type="password" />

$("input:password").css('bordr-color','green');

10、jQuery( ":radio" )选择所有类型为radio的元素。

<input type="radio" />

$("input:radio").css('bordr-color','green');

11、jQuery( ":reset" )选择所有类型为reset的元素。

<input type="reset" />

$("input:reset").css('bordr-color','green');

12、jQuery( ":selected" )选择所有selected的元素。

<input type="radio" selected /><input type="radio" />

$("input:selected").css('bordr-color','green');

13、jQuery( ":submit" )选择所有类型为sumbit的元素。

<input type="submit" selected /><input type="radio" />

$("input:submit").css('bordr-color','green');

14、jQuery( ":text" )选择所有类型为text的元素。

<input type="text" /><input type="radio" />

$("input:text").css('bordr-color','green');