jQuery技术

jqueryAPI使用之选择器(2)

字号+ 作者:H5之家 来源:H5之家 2016-09-28 15:00 我要评论( )

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

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

<span></span>

<div></div>

<div>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></div>

<div></div>

<div></div>

<div></div>

$("div:visible").click(function () {

$(this).css("background", "yellow");

});

$("button").click(function () {

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

});

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

<div>123</div>

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

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

<input />

<input />

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

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

<input />

<input />

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

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

<input />

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

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

<input type="radio" 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 />

<input />

<input />

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

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

<div>123456</div>

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

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

<input />

<input />

<input />

$('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" value="Hourly" checked="checked">

<input type="checkbox" value="Daily">

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

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

<input disabled="disabled" />

<input />

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

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

<input disabled="enabled" />

<input />

$("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');

 

 

 

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评