选择器是jQuery的根基,在jQuery中,对事件处理,遍历DOM和AJAX操作都依赖于选择器
jQuery选择器的优点:
简洁的写法
$("#id") //document.getElementById("id");
$("tagName") //document.getElementByTagName("tagName");
完善的事件处理机制
//若在网页中没有id为"id"的元素,浏览器会报错
//document.getElementById("id").style.color="red";
//需要先判断document.getElementById("id")是否存在
if(document.getElementById("id"))
document.getElementById("id").style.color="red";
//使用jQuery获取网页中的元素即使不存在页也不会报错
$("#id").css("color","red");
基本选择器示例
//改变id为one的元素的背景色为红色
$("#one").css("backgroundColor","red");
//改变元素名为<p>的所有元素的背景色为#bbffaa,字体颜色为red
$("p").css({color:"red",backgroundColor:"#bbffaa"});
//改变第一个<p>元素的背景色为red
$("p").eq(0).css("backgroundColor","red");
//改变所有<h1>元素和id为one的元素的背景色为#bbffaa
$("h1,#one").css("backgroundColor","#bbffaa");
层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器
//选取ancestor的所有descendant(后代)元素
$("ancestor descendant")
//选取parent元素下的child(子)元素,与$("ancestor descendant")有区别,$("ancestor descendant")选择的是后代元素
$("parent>child")
//选取紧接在prev元素后的下一个next元素
$("prev+next")
//选取prev元素后的所有siblings元素
$("prev~siblings")
注:("prev!div")选择器只能选择"#prev"元素后面的同辈元素;而jQuery中的方法siblings()与前后位置无关,只要是同辈节点就可以选取
层次选择器示例
//改变<body>内所有<div>的背景色为#bbffaa
$("body div")
//改变<body>内子<div>的背景色为#bbffaa
$("body>div")
//改变id为one的下一个<div>的背景色为#bbffaa
$("#one+div")
//改变id为two的元素的所有兄弟<div>的元素背景色
$("#two~div")
//改变id为two的元素所有<p>兄弟元素的背景色
$("#two").siblings("p")
过滤选择器
以“:”开头
1、基本过滤选择器
:first //选取第一个元素
:last //选取最后一个元素
:not(selector) //去除所有与给定选择器匹配的元素
:even //选取索引时偶数的所有元素,索引从零开始
:odd //选取索引时奇数的所有元素,索引从零开始
:eq(index)//选取索引等于index的元素,索引从零开始
:gt(index)//选取索引大于index的元素,索引从零开始
:lt(index)//选取索引小于index的元素,索引从零开始
:header//选取所有标题元素,如h1,h2等
:animated//选取当前正在执行动画的所有元素
过滤选择器的示例
//改变第一个div元素
$("div:first")
//改变id不为one的所有p元素
$("p:not('#one')")
//改变索引值为偶数的tr元素
$("tr:even")
//选取索引值大于3且为奇数的元素
$("p:gt(3):odd")
//改变所有标题元素
$(":header")
2、内容过滤选择器
规则主要体现在“他所包含的子元素和文本内容”上
:coneains(text)//选取文本内容含有text的元素
:empty//选取不包含子元素或者文本的空元素
:has(selector)//选取含有选择器所匹配的元素的元素
:parent//选取含有子元素或者文本的元素
//内容选择器示例
//改变含有class为mini元素的p元素
$("p:has(.mini)")
3、可见性过滤选择器
根据元素的可见与不可见选择相应元素
:hidden
:visible
注:hidden不仅包含样式属性display为none的元素,也包含文本隐藏域(<input type="hidden">)和visible:hidden之类的元素
4、属性过滤选择器
属性过滤选择器的过滤规则是“通过元素的属性来获取相应的元素”
[attribute]//选取拥有此属性的元素
[attribute=value]//选取指定属性的值为value的元素
[attribute!=value]//选取指定属性的值不等于value的元素
[attribute^=value]//选取指定属性的值以value开始的元素
[attribute$=value]//选取指定属性的值以value结束的元素
[attribute*=value]//选取指定属性的值含有value的元素
[selector1][selector2]...[selectorN]//用属性选择器合并成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围
5、子元素过滤选择器
:nth-child(index/even/odd/equation)//选取每个父元素下的第index个子元素或者奇偶元素(index从1算起)
:first-child//选取每个父元素下的第一个子元素
:last-child//选取每个父元素下的最后一个子元素
:only-child//选取只有一个子元素的元素
nth-child()选择器详解:
1、:nth-child(even/odd):能选取每个父元素下的索引值为偶(奇)数的元素
2、:nth-child(2):能选取每个父元素下的索引值为2的元素
3、:nth-child(3n):能选取每个父元素下的索引值是3的倍数的元素
4、:nth-child(3n+1)等
6、表单对象属性过滤选择器
:enabled//选取所有可用元素
:disabled//选取所有不可用元素
:checked//选取所有被选中的元素(单选框,复选框)
:selected//选取所有被选中选项元素(下拉列表)
示例:
·利用jQuery对象的val()方法改变表单内可用/不可用<input>元素的值
·利用jQuery对象的length属性获取多选框选中的个数
·利用jQuery对象的text()方法获取下拉框选中的内容
表单选择器
:input//选取所有<input>,<textarea>,<select>和<button>yuans
:text//选取所有单行文本框
:paddword//选取所有密码框元素
:radio//选取所有单选框
:checkbox//选取所有多选框
:submit//选取所有提交按钮
:image//选取所有图像按钮
:reset//选取所有重置按钮
:button//选取所有的按钮
:file//选取所有的上传域
:hidden//选取所有不可见元素
分享到:
相关推荐
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
主要介绍了jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能),想要学习jQuery的可以了解一下。
jQuery实例讲解——通过一些小实例讲解jQuery的应用
JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记
jquery的学习总结笔记 对选择器和常用方法进行总结 有实例
jquery 学习笔记源码 3jquery常规选择器
锋利的JQuery学习笔记
jquery 学习笔记jquery 学习笔记jquery 学习笔记jquery 学习笔记
该学习笔记带有很不错的DEMO,而且笔记中有比较详细的总结,对于初学者来说,可以根据笔记中的实例训练,达到理解jQuery核心——选择器的目的。
javascript jquery 学习笔记 资料
JQUERY学习笔记.doc JQUERY学习笔记.doc JQUERY学习笔记.doc
jquery经验总结——页面加载事件ready(fun)
1.jQuery选择器 1.1jQuery基础选择器 原生js获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统一标准。 $(‘选择器’) //里面选择器直接写css选择器即可,但是要加引号 原创...
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...
第2章. jQuery选择器 4 1. jQuery优点 4 2. 基本选择器 4 3. 层次选择器 4 4. 过滤选择器 5 5. 内容过滤选择器 5 6. 可见性过滤选择器 5 7. 属性过滤选择器 6 8. 子元素过滤选择器 6 9. 表单对象属性过滤选择器 7 10...
NULL 博文链接:https://goyourauntie.iteye.com/blog/745626
JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记
jquery引用文件,jquery.min.js和jquery.js............希望可以帮助到大家
JQuery学习笔记,docx格式,记录了JQuery的一些知识要点,供大家参考。