jQuery各种选择器总结

首先介绍几个简单的:

id选择器

$('#p1').html('<font color='red'>nihao</font>);

类选择器:表示页面上所有应用了a样式的标签

$('.a').css('color','green');

层次选择器:div下的所有p标签
$('div p')
组合选择器:选择id为btn以及p1和span标签
$('#btn,#p1,span').css('color','red')
标签+类选择器:表示p标签下应用a样式的标签
$('p.a')
层次选择器:div下的所有p标签
$('div p')
只选取div下的子元素p和后代元素p
$('div p')
只选取div下的直接子元素p
$('div>p')
表示div后的所有p兄弟
$('div~p') 等价$('div').nextAll('p')
表示div后的所有兄弟
$('div~*')
表示div后只找紧挨着的的第一个元素,并且这个元素必须是p
$('div+p') 等价$('div').next('p')
 表示选择div前面的所有兄弟p元素
$('div').preAll('p')
表示div前只找紧挨着的的第一个元素,并且这个元素必须是p
$('div').pre('p')
当前元素的所有兄弟元素
siblings();
 
写过滤选择器的时候我们要注意jquery中的另一个特性:链式编程
例如:既可以设置p元素的边框,又可以添加其事件
s('p').text('我们都是p!').css('border','1px').click(function(){

})

但是,类似于prevAll()、nextAll()、prev()、next()、sibings()等这些函数都会破坏链,所以这种情况下不能直接进行链式编程。

例如:

$(this).prevAll().css('backgroundColor', 'yellow').nextAll().css('backgroundColor', 'blue'); //不能链式编程,链已经被破坏了。
end()回到最近的一个"破坏性"操作之前。
基本选择过滤器
$('p:eq(2)');选择出来的索引是2的标签
$('p:even')偶数个
$('p:odd')奇数个
first 选取第一个元素。$("div:first")选取第一个<div>
:last 选取最后一个元素。$("div:last")选取最后一个<div>
:not(选择器) 选取不满足“选择器”条件的元素,$("input:not(.myClass)")选取样式名不是myClass的<input>
jQuery各种选择器总结
:even、:odd,选取索引是偶数、奇数的元素:$("input:even")选取索引是奇数的<input>
:eq(索引序号)、gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素,比如$("input:lt(5)")选取索引小于5的<input>
jQuery各种选择器总结
$(":header")选取所有的h1……h6元素
$("div:animated")选取正在执行动画的<div>元素。
属性选择器
$('input[type=text]').css('clolr',black);
$('input[name^=a]')属性name以a开头的
$('input[name$=a]')属性name以a结尾的
$('input[name*=a]')属性name以包含a的

$('input[name^=a][value] [id]')属性name以a开头的并且包含value和id属性的
$("div[title!=test]")选取title属性不为“test”的<div>
表单对象属性选择器红色竖线是空格
$("#form1.:enabled")选取id为form1的表单所有启用的元素  
$("#form1.:disabled")选取id为form1的表单所有禁用的元素
$(“input:checked”)选取所有选中的元素(Radio、CheckBox),这个中间不能加空格.
$("select.:selected")选取所有选中的选项元素(下拉列表)
$("input[name=names]:checked");获取所有name为names的选中的元素
 
表单选择器
$(“:input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样, $("input")只获得<input>
$(":text")选取所有单行文本框,等价于$("input[type=text]"),$(‘input[type=text]’),$(‘:text’);
$(“:password”)选取所有密码框。
同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。
代替了$(‘input[type=***]’);
 
input[type=radio]→:radio
input[type=checkbox] → :checkbox
input[type=text] → :text
可见性选择器
 
:hidden
选取所有不可见元素包括:(如果直接写:hidden则会包含head\title\script\style….)
1.表单元素type=“hidden”
2.设置css的display:none
3.高度和宽度明确设置为0的元素。
4.父元素时隐藏的,所以子元素也是隐藏的
visibility: hidden 与opacity为0不算,因为还占位所以不认为是hidden.(与之前版本jQuery不太一样,1.3.2之前)
:visible
选取所有可见元素
注意:$(‘.cls :hidden’);与$(‘.cls:hidden’);是不一样的。
内容过滤器:
:contains(text),过滤出包含给定文本的元素。(innerText中包含。)
:empty,过滤出所有不包含子元素或者文本的空元素。
:has(selector),过滤出元素中包含(即子元素中)selector选择器能选择到的元素。
:parent,过滤出可以当做父元素的元素(即该元素有子元素或者元素中包含文本。
 
内容过滤选择器
 
     :contains(text),过滤出包含给定文本的元素。(innerText中包含。)
     :empty,过滤出所有不包含子元素或者文本的空元素jQuery各种选择器总结
     :has(selector),过滤出元素中包含(即子元素中)selector选择器能选择到的元素。
jQuery各种选择器总结
     :parent,过滤出可以当做父元素的元素(即该元素有子元素或者元素中包含文本。
 
子元素过滤器:
取出所有ul下li的第一个li
    :first-child,与:fisrt的区别,:first只能选取第一个,而:first-child,则能选取每个子元素的第一个元素。
    $(‘ul li:first-child’);  //为每个父元素(ul)都返回一个li。
jQuery各种选择器总结
    $(‘ul li:first’);只返回一个li元素。
 
后续还会补充,有不足希望大家及时纠正,谢谢!
上一篇:KEIL5.25生成.bin文件步骤


下一篇:数据调试~~TCP转串口、串口转TCP调试