`
caleb_520
  • 浏览: 247251 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

jQuery选择器归纳

    博客分类:
  • Ajax
阅读更多
总结一下jQuery的选择器使用。当然,这部分内容有些是通过网络进行查找来完成的。

jQuery选择器的分类
(1)基本选择器
(2)层次选择器
(3)基本过滤选择器
(4)内容过滤选择器
(5)可见过滤选择器
(6)属性过滤选择器
(7)表单对象属性过滤选择器
(8)表单选择器
/**===============================================================**/
基本选择器应用,它是使用jQuery的核心。可以说选择器是jQuery中非常重要的一部分。基本选择器使用非常简单,它的语法结构非常类似于CSS语法结构,只要有一定的CSS基础,对于新手上路是比较容易的。

基本选择器使用有如下几种常用的语法
(1)、$(“#id”):根据给定id匹配一个元素
例如:
html代码:<input type="button" id="btn1" value="按钮"></input>
jQuery代码:$("#btn1").val(); //找到id值为“btn1”的html元素,并求出此html元素的值

(2)、$(“.class”):根据给定的类名匹配元素
例如:
html代码:<input type="button" class="btn1" value="按钮"></input>
jQuery代码:$(".btn1").val(); //找到class属性值为“btn1”的html元素,并求出此html元素的值

(3)、$(“*”):选取所有的元素
例如:
html代码:<body>...</body>
jQuery代码:$("*").css("background", "red"); //获取html中所有的元素,并将所有元素的背景色设置为红色

(4)、$(“div,span,p,.myclass”):选取所有<div>、<span>、<p>、<myclass>一组元素
例如:
html代码:<div>一个div元素</div><span>一个span元素</span><p>一个p元素</p>
jQuery代码:$(“div,span,p,.myclass”).css("background","red"); //获取div、span、p、.mylcass元素,并将它们的背景色设置为红色

/**===============================================================**/
层次选择器应用,如果想根据html元素之间的层级关系来查找html元素,那么就可以使用层次选择器

层次选择器使用有如下几种常用的语法

(1)、$(“div span”):选取<div>下面的所有<span>元素,包括后代元素
(2)、$(“div > span”):选取<div>元素下面所有<span>子元素,不包括后代元素
(3)、$(“.one + div”):选取class为one的下一个<div>兄弟元素,即紧接在.one元素后的div元素
(4)、$(“#one ~ div”):选取id为one的元素之后的所有同辈<div>兄弟元素

层次选择器大家可以通过附件下载源码进行学习。谢谢
/**===============================================================**/
基本过滤选择器,它可以根据元素的索引、元素是否在执行动画效果、判断元素是否是<h1>~<h6>标签来查找所要的元素对象。

层次选择器使用有如下几种常用的语法

(1)、$(“div:first”)选取所有<div>元素中第1个<div>元素
(2)、$(“div:last”)选取所有<div>元素中最后1个<div>元素
(3)、$(“div:not(.one)”)选取class不是one的<div>元素
(4)、$(“div:even”)选取索引是偶数的<div>元素
(5)、$(“div:odd”)选取索引时奇数的<div>元素
(6)、$(“div:eq(1)”)选取索引为1的<div>元素
(7)、$(“div:gt(3)”)选取索引大于3的<div>元素
(8)、$(“div:lt(3)”)选取索引小于3的<div>元素
(9)、$(“:header”)选取网页中所有的<h1>、<h2>、<h3>……
(10)、$(“div:animated”)选取正在执行动画的<div>元素
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics