JQuery选择器特辑 详细小结

这是看《锋利的jquery》时,整理出来的一些东西,很多方法,需要大家亲自实践一下,才会理解得更加深刻,切莫眼高手低哦……

Jquery选择器分类:基本选择器,层次选择器,过滤选择器,表单选择器

一、基本选择器:jquery中最常用的选择器,也是最简单的选择器。通过元素id、class和标签名等来查找DOM元素。

表-基本选择器
































选择器

描述

返回

示例

#id

根据给定的id匹配一个元素

单个元素

$(“#test”)选取id为test的元素

.class

根据给定的类名匹配元素

集合元素

$(“.test”)选取所有class为test的元素

element

根据给定的的元素名匹配元素

集合元素

$(“p”) 选取所有的<p>元素

*

匹配所有元素

集合元素

$(“*”)选取所有元素

Selector1,Selector2, ……, SelectorN

将每一个选择器匹配到的元素合并后一起返回

集合元素

$(“div,span,p.myClass”)选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素

二、层次选择器:通过DOM元素之间的层次关系获取特定元素,如后代元素、子元素、相邻元素、兄弟元素等。层次选择器是一个很好的选择

表-层次选择器



























选择器

描述

返回

示例

$(“ancestor  descendant”)

选取ancestor元素里所有descendant(后代)元素

集合元素

$(“div span”)选取<div>里所有的<span>元素

$(“parent>child”)

选取父元素下的子元素

集合元素

$(“div>span”)选取<div>下元素名为<span>的子元素

$(‘prev+next')

选取紧接在prev元素后的next元素

集合元素

$(‘.one+div') 选取class为one的下一个<div>元素(相邻元素)

$(‘prev~siblings')

选取prev元素之后的所有元素

集合元素

$(‘.one+div') 选取class为one的元素后面所有<div>兄弟元素

注意:

$(‘prev+next')选择器与next()方法的等价关系

$(‘.one+div')    等价于     $(“.one”).next(“div”)

$(‘prev~siblings')选择器与nextAll()方法的等价关系

$(‘.one~div')     等价于    $(“.one”).nextAll(“div”)

三、过滤选择器:主要是通过特定的过滤选择器规则来筛选出所需的DOM元素,过滤规则与css中伪类选择器语法相同,即选择器都以一个冒号(:)开头。

按照不同的过滤规则,过滤选择器分为:基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性座率选择器

表1-基本过滤选择器


























































选择器

描述

返回

示例

:first

选取第一个元素

单个元素

$(“div:first”)选取所有<div>元素中第一个<div>元素

:last

选取最后一个元素

单个元素

$(“div:last”)选取所有<div>元素中最后一个<div>元素

:not(selector)

去除所有与给定选择器匹配的元素

集合元素

$(“input:not(.myClass)”) 选取class为不是myClass的<input>元素

:even

选取索引是偶数的所有元素,索引从0开始

集合元素

$(“input:even”) 选取索引是偶数的<input>元素

:odd

选取索引是奇数的所有元素,索引从0开始

集合元素

$(“input:odd”) 选取索引是奇数的<input>元素

:eq(index)

选取索引等于index的元素(index从0开始)

单个元素

$(“input:eq(1)”选取索引为1的<input>元素

:gt(index)

选取索引大于index的元素(index从0开始)

集合元素

$(“input:gt(1)”) 选取索引大于1的<input>元素(注:大于1,而不包括1)

:lt(index)

选取索引小于index的元素(index从0开始)

集合元素

$(“input:gt(1)”) 选取索引小于1的<input>元素(注:小于1,而不包括1)

:header

选取所有的标题元素,例如h1,h2,h3等待

集合元素

$(“:header”)选取网页中所有的<h1>,<h2>,<h3>……

:animated

选取当前正在执行动画的所有元素

集合元素

$(“div:animated”)选取正在执行动画的<div>元素

表2-内容过滤选择器




























选择器

描述

返回

示例

:contains(text)

选取含有文本内容为”text”的元素

集合元素

$(“div:contains(‘我')”)选取含有文本“我”的<div>元素

:empty

选取不包含子元素或者文本的空元素

集合元素

$(“div:empty”)选取不包含子元素(包括文本元素)的<div>空元素

:has(selector)

选取含有选择器所匹配的元素的元素

集合元素

$(“div:has(p)”) 选取含有<p>元素的<div>元素

:parent

选取含有子元素或者文本元素

集合元素

$(“div:parent”) 选取拥有子元素(包括文本元素)的<div>元素

表3-可见性过滤选择器


















选择器

描述

返回

示例

:hidden

选取所有不可见的元素

集合元素

$(“:hidden”)选取所有不可见的元素。包括<input type=”hidden”>,<div style=”disply:none;>和<div style=”visibility:hidden;”>等元素。如果只想选取<input>元素,可以使用$(“input:hidden”)

:visible

选取不包含子元素或者文本的空元素

集合元素

$(“div:visible”)选取所有可见的<div>元素

表4-属性过滤选择器











































选择器

描述

返回

示例

[attribute]

选取拥有此属性的元素

集合元素

$(“div[id]”)选取拥有属性id的元素

[attribute=value]

选取属性的值为value的元素

集合元素

$(“div[title=test]”)选取属性title为”test”的<div>元素

[attribute!=value]

选取属性的值不等于value的元素

集合元素

$(“div[title!=test]”)选取属性title不等于”test”的<div>元素(注意:没有属性的title的<div>元素也会被选取)

[attribute^=value]

选取属性的值以value开始的元素

集合元素

$(“div[title^=test]”)选取属性title以”test”开始的<div>元素

[attribute$=value]

选取属性的值以value结束的元素

集合元素

$(“div[title$=test]”)选取属性title以”test”结束的<div>元素

[attribute*=value]

选取属性值含有value的元素

集合元素

$(“div[title*=test]”)选取属性title含有”test”的<div>元素

[selector1][selector2][selectorN]

用属性选择器合并成一个复合属性选择器,满足多个条件。每个选择一次,缩小一次范围

集合元素

$(“div[id][title$='tets']”)选取拥有属性id,并且属性title以”test”结束的<div>元素

表5-子元素过滤选择器




























选择器

描述

返回

示例

:nth-child(index/even/odd/equation)

选取每个父元素下的第index个子元素或者奇偶元素(index从1算起)

集合元素

:eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0算起

:first-child

选取每个父元素的第一个子元素

集合元素

:first只返回单个元素,而:first-child选择符将为每个父元素匹配第一个子元素

:last-child

选取每个父元素的最后一个子元素

集合元素

:last只返回单个元素,而:last-child选择符将为每个父元素匹配最后一个子元素

:only-child

如果某个元素是它父元素中唯一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配

集合元素


:nth-child()选择器详细功能

(1):nth-child(even)能选取每个父元素下的索引值是偶数的元素。

(2):nth-child(odd) 能选取每个父元素下的索引值是奇数的元素。

(3):nth-child(2)能选取每个父元素下的索引值等于2的元素

(4):nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素,(n从0开始)。

(5):nth-child(3n+1)能选取每个父元素的索引值是(3n+1)的元素。(n从0开始)

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




























选择器

描述

返回

示例

:enabled

选取所有可用元素

集合元素

$(“#form1:enabled”) ;选取id为”form1”的表单内的所有可用元素

:disabled

选取所有不可用元素

集合元素

$(“#form1:disabled”) ;选取id为”form1”的表单内的所有不可用元素

:checked

选取所有被选中的元素(单选框,复选框)

集合元素

$(“input:checked”);选取所有被选中的<input>元素

:selected

选取所有被选中的选项元素(下拉列表)

集合元素

$(“select:selected”);选取所有被选中的选项元素

四、表单选择器

表-表单对象属性过滤示例































































选择器

描述

返回

示例

:input

选取所有可用元素

集合元素

$(“:input”) 选取所有<input>、<textarea>、<select>和<button>元素

:text

选取所有不可用元素

集合元素

$(“:text”) 选取所有的单行文本

:password

选取所有的密码框

集合元素

$(“: password”)选取所有的密码框

:radio

选取所有的单选框

集合元素

$(“:radio”)选取所有的单选框

:checkbox

选取所有的多选框

集合元素

$(“:checkbox”)选取所有的多选框

:submit

选取所有的提交按钮

集合元素

$(“:submit”)选取所有的提交按钮

:image

选取所有的图像按钮

集合元素

$(“:image”)选取所有的图像按钮

:reset

选取所有的重置按钮

集合元素

$(“:reset”)选取所有的重置按钮

:button

选取所有的按钮

集合元素

$(“:button”)选取所有按钮

:file

选取所有的上传域

集合元素

$(:file)选取所有的上传域

:hidden

选取所有不可见元素

集合元素

$(“:hidden”)选取所有不可见元素

紫陌言:吾生也有涯而知也无涯……

(0)

相关推荐

  • jQuery选择器全面总结

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 jQuery选择器使得获得页面元素变得更加容易.更加灵活,从而大大减轻了开发人员的压力.如同盖楼一样,没有砖瓦,就盖不起楼房.得不到元素谈何其他各种操作呢?可见,jQuery选择器的重要性.当然想一下子掌握所有选择器也是很困难的,这个得靠实践和积累. 现在我们正式进入jQuery选择器的学习.我们将jQuery选择器进行分类学习,将jQuery选择器分为以下几种: 1.基本选择器 ◦id                 

  • jQuery Selector选择器小结

    //jQuery 选择器 $ //$(expression,[context]) return jQuery //Unit One //expression 之 CSS 定义符 就是以CSS语法表示所要选择的元素 // $("*"); // 表示页面所有元素标签 // $("th, td") // 表示所有<th><td>元素标签 // $("a") // 表示所有<a>元素标签 // $("div#

  • jQuery的强大选择器小结

    一 基本选择器 $("input") :选择所有是input标签的元素 $("#input1"):选择id为input1的元素 $(".acss"):选择所有包含acss 这个css类样式的 代码 复制代码 代码如下: <body> <a href="">link</a> <input id="input1" class="acss"> &

  • JQuery选择器特辑 详细小结

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

  • jQuery选择器源码解读(四):tokenize方法的Expr.preFilter

    Expr.preFilter是tokenize方法中对ATTR.CHILD.PSEUDO三种选择器进行预处理的方法.具体如下: Expr.preFilter : { "ATTR" : function(match) { /* * 完成如下任务: * 1.属性名称解码 * 2.属性值解码 * 3.若判断符为~=,则在属性值两边加上空格 * 4.返回最终的mtach对象 * * match[1]表示属性名称, * match[1].replace(runescape, funescape)

  • jquery选择器简述

    jQuery选择器使得获得页面元素变得更加容易.更加灵活,从而大大减轻了开发人员的压力.如同盖楼一样,没有砖瓦,就盖不起楼房,得不到元素谈何其他各种操作呢?可见,jQuery选择器的重要性. jquery选择器大方向可以分为这样: 下面我们先来看看基本选择器总的CSS选择器: 1.标签选择器: $("element") 其中,参数element,表示待查找的HTML标记名,如$("div"),标签选择器获取元素的方式是高效的,因为它继承自javascript中的ge

  • jquery选择器大全 全面详解jquery选择器

    选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点:1.简化代码的编写2.隐式迭代3.无须判断对象是否存在其中"$"是选择器不可缺少的部分,在jQuery库中,$就是jQuery的一个简写形式,比如$("#foo")和jQuery("#foo")是等价的,$.ajax和jQuery.ajax是等价的.如果没有特别说明,可以把程序中的$符号都理解为jQuery的简写形式.现在我们正式进入j

  • jQuery 选择器、DOM操作、事件、动画

    Jquery选择器 $(document).ready(function(){}) $(function(){}) 如果获取的对象是jQuery对象,那么在变量前面加上$,例如:var $variable=jQuery对象 选择器 1, 判断页面是否存在某元素:if($("#tt").length>0){} 或者if($("#tt")[0]){}; 2, 基本选择器 $("#test") 选择id为test的元素 $(".test

  • jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结

    这两天在做一个专题的时候遇到了一个通配符的问题 //弹层操作 $(function(){ //视频播放 $("a[href^='#video']").each(function(index, element) { $(this).click(function(){ $(".popDiv,#videoBox1").show(); }); }); //图片 $(".imgs a:not([href^='#video'])").each(functio

  • jquery插件开发注意事项小结

    Jquery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+).jQuery使用户能更方便地处理HTML documents.events.实现动画效果,并且方便地为网站提供AJAX交互.jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择.jQuery能够使用户的

  • jQuery选择器用法实例详解

    本文实例讲述了jQuery选择器用法.分享给大家供大家参考,具体如下: jQuery 使用两种方式来选择 html 的 element,第一种使用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器(如:$("div > ul a")):第二种是用jQuery对象的几个methods(方法).这两种方式还可以联合起来混合使用. 使用 CSS 和 XPath 选择器选择的方法有许多种用法,关于详细的 CSS 选择器可参考本站相关文章. 首先来看通过元素的 ID

  • jQuery选择器全集详解

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器 的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率.本文配合截图.代码和简单的概括对所有jQuery选择器进行 了介绍,也列举出了一些需要注意和区分的地方. 一.基本选择器 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(document).ready(fu

  • JQuery 选择器、过滤器介绍

    今日的学习再结合昨天的JavaScriptDOM的内容,让我对此十分清晰.JQuery原则:"write less, do more.",这句话已充分说明它对简化使用JavaScriptDOM编程的功力! 每位老师都有自己的教学方式,可能根据教授的内容的不同教学方式也有轻微的变化.老佟是一位非常有经验的软件教师,之前他在大连的软件公司做培训.经过多年的总结,他已经有自己一套成熟的教学方式.这个方式让我十分喜欢!至于是什么方式,你自己来体验吧!哈哈~~ 从学习JavaWEB.Struts

随机推荐