jQuery选择器笔记

原创 2016年05月31日 17:29:36

选择器是jQuery的根基。
jQuery中的选择器完全继承了css风格。利用jQuery选择器,可以非常便捷快速地找到特定的DOM元素,然后为他们添加相应的行为,而无需担心浏览器是否支持这一选择器。
jQuery选择器有完善的处理机制,使用jQuery获取网页中不存在的元素也不会报错,例如:

<div>text</div>
<script>
    $("#tt").css("color","red");       //这里无需判断$("#tt")是否存在
</script>

需要注意的是,$(“#tt”)获取的永远是对象,即使网页上没有此元素。因此当要用jQuery检测某元素在网页上是否存在时,不能用以下代码:

if($("#tt")){
    //do something
}

而应该根据获取的元素的长度来判断

if($("#tt").length > 0){
    //do something
}

或者转化为DOM对象

if($("#tt")[0]){
    //do something
}

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

基本选择器

根据给定的id匹配一个元素 $("#one").css("background","red");
根据给定的类匹配元素 $(".mini").css("background","black");
根据给定的元素名匹配 $("div").css("background","black");
匹配所有元素 $("*").css("background","black");
将每个选择器匹配到的元素合并后一起返回 $("span,#two").css("background","black");

层次选择器

通过DOM元素之间的层次关系来获取特定元素。
选取所有后代元素 $("body div").css("background","black");
选取所有子元素 $("body > div").css("background","black");
选取class为one的下一个

同辈元素 $(".one + div").css("background","black");
选取id为two的元素后面所有的
同辈元素$("#two~div").css("background","black");
第一、二个选择器比较常用,后面两个可以用更加简单的方法代替:

$(".one + div") 等价于 $(".one").next("div");
$("#two ~ div") 等价于 $("#two").nextAll("div");

过滤选择器

过滤选择器主要是通过特定的规律筛选出所需的DOM元素,选择器以一个冒号(:)开头。分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

1、基本过滤选择器

$("div:first").css("background","black");  //选取所有div中第一个<div>元素改变背景色
$("div:last").css("background","black");   //选取所有div中最后一个<div>元素改变背景色
$("div:not(.one)")  //选取class不为one的<div>(去除所有与给定匹配的元素)
$("input:even")    //选取索引是偶数的<input>元素,索引从0开始
$("input:odd")     //选取索引是奇数的<input>元素,索引从0开始
$("input:eq(index)")  //选取索引值为index的<input>元素
$("input:gt(index)")  //选取索引值大于index的<input>元素(不包括index)
$("input:lt(index)")  //选取索引值小于index的<input>元素(不包括index)
$(":header")    //选取网页中所有的<h1>,<h2>,<h3>,...
$(":animated")  //选取当前正在执行动画的所有元素
$(":focus")   //选取当前获取焦点的元素

2、内容过滤选择器

主要体现在它所包含的子元素或文本内容上。

$("div:contains(id)")      //选取含有**文本内容为id**的元素
$("div:empty")      //选取不包含子元素(包括文本元素)的<div>空元素
$("div:has(p)")/$("div:has('.mini')")     //选取含有<p>元素/class为mini的<div>元素(选取所含选择器所匹配的元素的元素)
$("div:parent")   //选取拥有子元素(包括文本元素)的<div>元素

3、可见性过滤选择器

根据元素的可见或不可见状态选择相应的元素

$(":hidden")   //选取所有不可见的元素
包括**<input type="hidden">,<div style="display:none;">,<div style="visibility:hidden;">**.如果想选取<input>元素,可以使用$("input:hidden")。
$(":visible")   //选取所有可见元素

4、属性过滤选择器

通过元素的属性来获取相应的元素。

$("div[id]")   //选取属性id的元素
$("div[title=test]")   // x选取title为test的<div>元素
[attribute != value]    //选取属性值不等于value元素
$("div[title^=test]")   //选取属性title以“test”开始的div元素
[attribute$=value]      //选取属性值以value结尾的元素
[attribute*=value]      //选取属性值含有value的元素
[attribute|=value]      //选取属性等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符“—”)
[attribute~=value]      //选取属性用空格分隔的值中包含一个给定值的元素
[attribute][attribute2][attributeN]   //用属性选择器合并成一个复合性选择器。满足多个条件

5、子元素过滤选择器

稍微复杂些,不过只要将元素的父元素和子元素区分清楚,另外还要注意它与普通过滤选择器的区别。

:nth-child(index/even/odd/equation)  //选取每个父元素下的第index个子元素或奇偶元素(index从1起算)
:first-child   //选取每个父元素的第一个子元素,$("ul li:first-child"),选取每个<ul>中第一个<li>元素
:last-child   //选取每个父元素的最后一个子元素,$("ul li:last-child"),选取每个<ul>中最后一个<li>元素
:only-child   //选取某个元素是他父元素中唯一的子元素,,如果父元素中含有其他子元素将不会被匹配

:nth-child()很常用,详细功能如下:

nth-child(even)   //选取每个父元素下索引值是偶数的元素nth-child(odd)   //选取每个父元素下索引值是奇数的元素nth-child(2)   //选取每个父元素下索引值是2的元素nth-child(3n)   //选取每个父元素下索引值是3的倍数的元素(n从1开始)nth-child(3n+1)   //选取每个父元素下索引值是(3n+1)的元素(n从1开始)

6、表单对象属性过滤选择器

$("#form1:enabled")   //选取id为“form1”的表单内的所有可用元素
:disabled       //选取所有不可用的元素checked        //选取所有被选中的元素(单选框,复选框)
:selected       //选取所有被选中的选项元素(下拉列表)

表单选择器

为了使用户能够更加灵活地操作表单,jQuery中专门加入了表单选择器。

$(":input")     //选取所有<input>,<textarea>,<select>,<button>元素
$(":text")      //选取所有的单行文本框
$(":password")   //选取所有的密码框
$(":radio")      //选取所有的单选框
$(":checkbox")   //选取所有的多选框
$(":submit")     //选取所有的提交按钮
$(":image")      //选取所有的图形按钮
$(":reset")      //选取所有重置按钮
$(":button")/$(":file")/$(":hidden")  //选取所有按钮、上传域、不可见元素

选择器中的一些注意事项

1、选择器中含有“.”,”#”,”(“,”]”等特殊符号

如果按照普通的方式处理会出错,要使用转移符转义。

$("#id#b");
$("#id[1]");

以上代码不能正确获取元素,正确的写法如下:

$("#id\\#b");
$("#id\\[1\\]");

2、选择器中含有空格

选择器中的空格不容忽视,多一个或少一个也许会有截然不同的结果

$(".test :hidden")   //带空格

以上代码是选取class为test的元素里面的隐藏元素

$(".test:hidden")   //不带空格

选取隐藏的class为test的元素

相关文章推荐

jQuery选择器学习笔记

  • 2012年07月15日 20:15
  • 89KB
  • 下载

Jquery中选择器的使用笔记1

一、基本选择器 1、ID选择器 改变id为one的元素的背景颜色首先在处引入JQuery库文件:然后编辑JQuery代码:1 2 3 $("docu...

JQuery 参考手册 学习笔记(4)-选择器

1. #id   根据给定的ID匹配一个元素。如果选择器中包含特殊字符,可以用两个斜杠转义。 如: id="myDiv"   选择:$("#myDiv"); 描述: 查找含有特殊字符...

jquery 笔记集合1 选择器 CSS样式 函数 事件 节点

//    1.$(' 标签名 / id属性名 / class属性名 / * ')          $('p').css('color','red'); //    2.属性选择器       ...

jQuery 选择器的类型(学习笔记)

根据所获取页面中元素的不同,可以将jQ

jquery学习笔记之选择器

几乎所有的主流浏览器都支持的css选择器有:ID选择器、

jQuery笔记之层次选择器

层次选择器 层次选择器通过DOM元素之间的层次关系来获取元素 //下面通过demo演示上面的理论 $(fu...

jQuery之表单域选择器学习笔记

表单域选择器: 专门用于从文档中选择表单域,均以:开头 表单域指:input,textarea,select,button元素 Input具有各种各样的type属性值:text,password...

新手上路 jquery 选择器篇(三) 代码笔记

  • edtwar
  • edtwar
  • 2017年07月25日 20:46
  • 67
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery选择器笔记
举报原因:
原因补充:

(最多只允许输入30个字)