锋利的jQuery 要点归纳（一） jQuery选择器

1 基本选择器

$(#id)
    根据给定的id匹配一个元素
$(.class)
    根据给定的类名匹配元素
$(element)
    根据给定的元素名匹配元素
$(*)
    匹配所有元素
$(selector1,selector2,...,selectorN)
    将每一个选择器匹配到的元素合并后一起返回

2 层次选择器

$("ancestor descendant")
    选取ancestor元素里的所有descendant（后代）元素
$("parent > child")
    只选取parent元素下的child（子层级）元素，与$("ancestor descendant")有区别，前者选择所有后代元素（含且不限于子层级）
$('prev + next')
    选取紧接在prev元素后的next元素
$('prev ~ siblings')
    选取prev元素之后的next元素

3 过滤选择器

3.1 基本过滤选择器

$("selector:first")
    选取第一个元素
$("selector:last")
    选取最后一个元素
$("selector:not(selector2)")
    去除所有与给定选择器匹配的元素
$("selector:even")
    选取索引是偶数的所有元素，索引从0开始
$("selector:odd")
    选取索引是奇数的所有元素，索引从0开始
$("selector:eq(index)")
    选取索引等于index的元素，index从0开始
$("selector:gt(index)")
    选取索引大于index的元素，index从0开始
$("selector:lt(index)")
    选取索引小于index的元素，index从0开始
$(":header")
    选取所有的标题元素，如h1,h2,h3等等
$(":animated")
    选取当前正在执行动画的所有元素

3.2 内容过滤选择器

$(":contains(text)")
    选取含有文本内容为"text"的元素
$(":empty")
    选取不包含子元素或者文本的空元素
$(":has(selector2)")
    选取含有选择器所匹配的元素的元素
$(":parent")
    选取含有子元素或者文本的元素

3.3 可见性过滤选择器

$(":hidden")
    选取所有不可见的元素
$(":visible")
    选取所有可见的元素

3.4 属性过滤选择器

$("selector[attribute]")
    选取拥有此属性的元素
$("selector[attribute=value]")
    选取属性的值为value的元素
$("selector[attribute!=value]")
    选取属性的值不等于value的元素
$("selector[attribute^=value]")
    选取属性的值以value开始的元素
$("selector[attribute$=value]")
    选取属性的值以value结束的元素
$("selector[attribute*=value]")
    选取属性的值含有value的元素
$("selector[selector2][selectorN]")
    用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围，如$("div[id][title$='test']")选取拥有属性id，并且属性title以"test"结束的<div>元素

3.5 子元素过滤选择器

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

3.6 表单对象属性过滤选择器

$("selector:enabled")
    选取所有可用元素
$("selector:disabled")
    选取所有不可用元素
$("selector:checked")
    选取所有被选中的元素（radio,checkbox）
$("selector:selected")
    选取所有被选中的选项元素（select）

4 表单选择器

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

赞 (0)

相关推荐

  • jQuery学习笔记之jQuery选择器的使用

    一.基本选择器: #id   :选择给定ID名的元素 如:$("#id1")为选择id为id1的元素 .class   :选择给定类名的元素 element   :选择给定元素名的所有原色 *  :匹配所有元素 selector1,selector2,......   :选择这些名称的元素,以逗号隔开,可以是类或id名 二.层次选择器: $("ancestor  descendant") :选择ancestor元素下的所有descendant(后代)元素 $(&qu

  • jquery选择器(常用选择器说明)

    基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div")                     选择所有的div标签元素,返回div元素数组 $(".myClass")           选择使用myClass类的css的所有元素 $("*")                        

  • 到处都是jQuery选择器的年代 不了解它们的性能，行吗

    到处都是jQuery选择器的年代 不了解它们的性能，行吗

    最近,我就对jQuery的选择器使用做了一些个小小的实验,用来说明jQuery的不同选择器在不同的情况下,哪个效率更高,更值得使用. 先在每个测试页面的head中引入google提供的jquery文件和用于测试的小插件firejspt. 复制代码 代码如下: <!-- 引入FireJSPT的库文件 --> <script type="text/javascript" src="firejspt.js"></script> <

  • jquery选择器的选择使用及性能介绍

    在写完第一回之后,看到了朋友们的回复,指出了我代码中的一些问题,确实由于时间仓促没有使用IDE,直接搞上了,又由于本人记忆力不好,所以把大小写都忘记了,还好晚上回家,用VS改了一下,呵呵,真是对不住大家了. 从这一讲开始,我们将直正接触一个JQ类库,学习一下JQ的写法,JQ的一些常用的命令等等,今天主要讲的是JQ里的选择器,这也是JQ的一大特点,这从它的名称jQuery中可以看到,主要功力体现在查询上. 前言:对于写在<script></script>中的代码,一般在JS环境,我们

  • jQuery选择器的工作原理和优化分析

    每次申明一个jQuery对象的时候,返回的是jQuery.prototype.init 对象,很多人就会不明白,init明明是jQuery.fn的方法啊,实际上这里不是方法,而是init的构造函数,因为js的prototype对象可 以实现继承,加上js的对象只是引用不会是拷贝,new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的,只是有没有执行到init的不同,这里就不讲原因了,等下一篇再讲为什么会是这样. 当我们使用选择器的时候$(selec

  • Jquery选择器 $实现原理

    但由于工作的原因,很久不曾做过网站项目了,也没有时间去好好研究Jquery的源码,这个疑问也一直没有得到解决了, 今天,空闲之余,打开Jquery的源码看看,才明天它实现的原理,原来在加入jquery的js这个文件时,实际上是执行了一个函数,在这个函数里己经初始化了$和JQuery变量, 实现这个功能源码如下(代码已删减和更改,并不影响说明实现原理): 复制代码 代码如下: (function() { var // Will speed up references to window, and

  • 详解强大的jQuery选择器之基本选择器、层次选择器

    jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器.另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器(即选择器插件,参考上篇:jQuery插件原来如此简单--jQuery插件的机制及实战).正是jQuery强大的选择器功能,让它很容易上手,吸引了大批的开发者,本文就来介绍一下强大的jQuery选择器. jQuery选择器类型 jQuery选择器主要分为四类: 1.基本选择器 2.层次选择器 3.过滤选择器 4.表

  • JQuery选择器特辑 详细小结

    这是看<锋利的jquery>时,整理出来的一些东西,很多方法,需要大家亲自实践一下,才会理解得更加深刻,切莫眼高手低哦-- Jquery选择器分类:基本选择器,层次选择器,过滤选择器,表单选择器 一.基本选择器:jquery中最常用的选择器,也是最简单的选择器.通过元素id.class和标签名等来查找DOM元素. 表-基本选择器 选择器 描述 返回 示例 #id 根据给定的id匹配一个元素 单个元素 $("#test")选取id为test的元素 .class 根据给定的类名

  • jQuery温习篇 强大的JQuery选择器

    在jQuery出世以来,它取得很大的成就和认同.JQuery是一个轻量级的JavaScript框架,它的发布版很小仅16K左右.它能让你方便简洁的写出漂亮的动画效果.实现各种视觉效果,轻松的处理JavaScript的DOM数以及Ajax的交互行为.它的优点在于轻量级.简单易学.易扩展.跨浏览器和网上拥有大量的jQuery插件使用.由于它这一大堆的优点,它已经被微软官方认可加入VS IDE中拥有强大的智能提示,并据官方的统计现在至少有20%的国际性大网站已经加入jQuery作为其脚本. 1:首先是

  • 锋利的jQuery 要点归纳（一） jQuery选择器

    1 基本选择器 $(#id)    根据给定的id匹配一个元素$(.class)    根据给定的类名匹配元素$(element)    根据给定的元素名匹配元素$(*)    匹配所有元素$(selector1,selector2,...,selectorN)    将每一个选择器匹配到的元素合并后一起返回 2 层次选择器 $("ancestor descendant")    选取ancestor元素里的所有descendant(后代)元素$("parent > c

  • 锋利的jQuery 要点归纳（三） jQuery中的事件和动画（上：事件篇）

    一.事件 1 加载DOM 复制代码 代码如下: $(document).ready(function(){//...}) DOM加载完毕后执行,在可重复使用上区别于window.onload=function(){//...} $(window).load(function(){//...}) window内所有对象加载完毕后执行,几等同window.onload=function(){//...}.也可针对selector使用此方法 另:$(document).ready(function()

  • 锋利的jQuery 要点归纳（二） jQuery中的DOM操作（下）

    12 设置和获取HTML.文本和值 $("selector").html() 获取html代码 $("selector").html(html) 设置html代码(替换标签中内容),html()方法不可用于XML文档 $("selector").text() 获取纯文本内容 $("selector").text(text) 设置文本内容(替换标签中内容),text()方法可以用于XML文档 $("selector&q

  • 锋利的jQuery 要点归纳（三） jQuery中的事件和动画（下：动画篇）

    二.动画 1 show()方法和hide()方法 复制代码 代码如下: $("selector").show() 从display:none还原元素默认或已设置的display属性 $("selector").hide() 设置元素的display样式为none,等于$("selector").css("display","none") (注:传入参数后,.show()和.hide()方法同时动画改变元素的

  • jQuery选择器之属性筛选选择器用法详解

    jQuery选择器之属性筛选选择器用法详解

    在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件 <!DOCTYPE html> <

  • jQuery选择器之子元素选择器详解

    jQuery选择器之子元素选择器详解

    本文实例为大家分享了jQuery子元素选择器,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="

  • jQuery UI 实例讲解 - 日期选择器(Datepicker)

    默认功能 日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面上的任意地方(输入框即失去焦点),或者点击 Esc 键来关闭.如果选择了一个日期,则反馈显示为 input 的值. <!doctype html> <html lang="en"> <head> <meta charset="utf-8&

  • jquery表单对象属性过滤选择器实例分析

    本文实例讲述了jquery表单对象属性过滤选择器用法.分享给大家供大家参考.具体分析如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • jQuery表单对象属性过滤选择器实例详解

    jQuery表单对象属性过滤选择器实例详解

    本文实例讲述了jQuery表单对象属性过滤选择器.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>2-11</title> <script src="jquery-1.7.2.min.js" type="t

  • 使用jQuery在对象中缓存选择器的简单方法

    当使用像jQuery这样的库时,开发者通常会使用选择器来访问和操作DOM中的元素.当一个选择在页面上被反复的访问时,把它缓存起来以获得更好的性能是个不错的想法. 让我们看一个例子, jQuery(document).ready(function() { jQuery('#some-selector').on('hover', function() { jQuery(this).fadeOut('slow').delay(400).fadeIn(); console.log(jQuery(this

随机推荐