jQuery选择器集锦(读《锋利的jQuery(第二版)》所摘)

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

$("input:not(.myClass)")选取class不是myClass的<input>元素。

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

$(":header")选取网页中所有的<h1>,<h2>,<h3>.

$(":focus")选取当前获取焦点的元素

内容过滤选择器的过滤规则主要体现在他所包含的子元素或文本内容上。

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

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

$("div:parent").css("background","#bbffaa"); 改变含有子元素(包括文本元素)的<div>元素的背景色。

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

:hidden 选取所有不可见的元素。 返回集合元素。

:visible  选取所有可见的元素。。返回集合元素。

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

下面是属性过滤选择器的实例:

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

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

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

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

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

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

$(‘div[title|="en"]‘)选取属性title等于en或以en为前缀(该字符串后跟一个连字符‘-‘)的元素。

$(‘div[title~="uk"]‘)选取属性title用空格分隔的值中包含字符uk的元素。

$("div[id][title$=‘test‘]")选取拥有属性id,并且属性title以"test"结束的<div>元素。

:nth-child()选择器是很常用的子元素过滤选择器,详细功能如下。

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

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

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

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

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

eq(index)只匹配一个元素,而:nth-child将为每一个符合条件的父元素匹配子元素。同时应该注意到 nth-child(index)的

index是从1开始的,而:eq(index)是从0开始的。同理:first和:first-child,:last和:last-child也类似。

表单对象属性过滤选择器,此选择器主要是对所选择的表单元素进行过滤,例如选择被选中的下拉框,多选框等元素。

时间: 2024-10-10 20:08:17

jQuery选择器集锦(读《锋利的jQuery(第二版)》所摘)的相关文章

jquery强大的选择器---来源《锋利的jquery》

一.基本选择器 1.#id  根据给定的id匹配一个元素 2..class  根据给定的类名匹配元素 3.element  根据给定的元素名匹配元素 4.*  匹配所有元素 5.selectore1,.selectore2,#selectore3  将每一个选择器匹配到的元素合并后一起返回 二.层次选择器 6.ancestor descendant  选取ancestor元素里的所有descendant(后代)元素 7.parent>child  选取parent元素下的child(子)元素,与

[ jquery 选择器 :last ] 此方法选取jquery对象中的最后一个对象

此方法选取jquery对象中的最后一个对象,与:first相对 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' content='keyword1,k

JQuery选择器学习系列 【赞】

从零开始学习jQuery (二) 万能的选择器 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery (八

《锋利的jQuery》(第2版)读书笔记4

第9章 jQuery Mobile jQuery Mobile是用来填补jQuery在移动设备应用上的缺憾的一个新项目. 它基于jQuery框架并使用HTML5和CSS3这些新的技术,除了能提供很多基础的移动页面元素开发功能外,框架自身还提供了很多可供扩展的API,以便于开发人员在移动应用上使用. 在移动框架方面,除了jQuery Mobile之外,还有很多移动框架可选. jqMobi是基于jQuery重写的,适用于iOS和Android等移动设备的JavaScript框架,它含有jQuery

JQuery选择器转义说明

JQuery选择器 JQuery选择器规则, 借用了css1-3的规则(css选择器规则), 因为css本身也需要一套规则来索引DOM元素, 进而进行样式渲染,例如div.blue 表示目标DOM为 class属性值为blue的div元素. 同时JQuery添加了一些自己的规则, 例如按照查询连接元素 $("[href]"). 这样就衍生出, 一套元字符, 用于表达选择器 合法格式, 故对于 其他部分例如属性值在选择器中的情况, 例如查询href为 www.baidu.com的 链接,

理解jQuery选择器与Sizzle

什么是jQuery选择器? jQuery选择器通俗来讲就是一个获取html元素的工具.比如,$("p") 选取 <p> 元素,$("p")是jQuery的选择器的写法,这么写就可以获取(选取)html里的<p>元素. jQuery选择器包括元素选择器.属性选择器.CSS选择器.(个人感觉这个分类比较扯淡) 注意:属性选择器的意思并不是选择属性,而是根据属性选择元素. 详细参考:http://www.w3school.com.cn/jquery

[ jquery 选择器 总览 ] jquery选择器总览

选择器是Query的一个核心基础,正是有了各种丰富的选择器,才使得开发人员可以灵活的访问控制html中的各种元素,也让js如鱼得水. 本篇将详细介绍jQuery选择器,从类别上jQuery选择器可以划分为:基本选择器.层次选择器.过滤选择器.表单选择器. 一.基本选择器(Basic) 基本选择器包括5种选择器:#id.element..class.*和selectorl,selector2.selectorN,下面将配合实例分别介绍每种选择器的作用及使用方法. 1.全匹配选择器匹配所有元素的选择

jquery选择器篇

var j = jquery.noConflict(); 让出对变量$的控制权,并将jquery付给别名j jquery.noConflict(true);让出对变量$和jquery的控制权 jQuery(selector, context) selector 表示选择器 <div ><div><input/></div></div> $(div <div <input) $(div).find(div).find(input).eq

锋利的jQuery读书笔记---选择器

前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所以笔记和代码也就写到一起了.下面是选择器的记录: <!DOCTYPE html> <html> <head lang="zh"> <meta charset="UTF-8"> <script type="t