jQuery学习笔记——选择器

mcgtts

浏览: 244194 次
性别:
来自: 天津

最近访客更多访客>>

caojinqin

yhnd685

jianbo620

narukow

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jQuery 浏览器 CSS Ajax

选择器是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学习笔记——DOM操作 | jQuery学习笔记——概述

2010-08-16 08:08
浏览 1126
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论