文档章节

jQuery 选择器使用大全(标签选择器,ID选择器等)

前端老手
 前端老手
发布于 09/21 22:34
字数 1676
阅读 16
收藏 0
jQuery的选择器是CSS 1-3,XPath的结合物。jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言。如果你了解CSS(绝大部分WEB开发者都用到的),那么你学起来就很容易了。

同时使用CSS和XPath

看几个例子:

隐藏所有包含有链接的段落:

$("p[a]").hide();

显示页面的第一个段落:

$("p:eq(0)").show();

隐藏所有当前可见的层元素:

$("div:visible").hide();

获取所有无序列表的列表项:

$("ul/li")

 /* valid too: $("ul > li") */

取得name值为bar的输入字段的值:

$("input[@name=bar]").val();

所有处于选中状态的单选r按钮:

$("input[@type=radio][ @checked]")

如果你对查询语言的工作原理还有疑问,可以订阅这里的邮件列表。

CSS查询器

jQuery完全支持CSS1.3。

关于CSS的一些资料查看下面的连接:
•CSS 1 
•CSS 2 
•CSS 3 

下面列出来的是支持的CSS查询器的列表式语法:
•* 任何元素 
•E 类型为E的元素 
•E:root 类型为E,并且是文档的根元素 
•E:nth-child(n) 是其父元素的第n个类型为E的子元素 
•E:first-child 是其父元素的第1个类型为E的子元素 
•E:last-child  是其父元素的最后一个类型为E的子元素 
•E:only-child  且是其父元素的唯一一个类型为E的子元素 
•E:empty 没有子元素(包括text节点)的类型为E的元素 
•E:enabled 
•E:disabled 类型为E,允许或被禁止的用户界面元素 
•E:checked 类型为E,处于选中状态的用户界面元素(例如单选按钮或复选框) 
•E.warning 类型为E,且class属性值为warning 
•E#myid 类型为E,ID为 "myid"。(至多匹配一个元素) 
•E:not(s) 类型为E,不匹配选择器s 
•E F 在类型E后面的类型为F的元素 
•E > F 为E元素子元素的F元素 
•E + F an F element immediately preceded by an E element 
•E ~ F an F element preceded by an E element 

不同之处

所有的属性选择器都被写成和XPath极其相似(因为所有的属性都以@符号开始)。
•E[ @foo] 拥有foo属性的E元素 
•E[@foo=bar] foo属性的值为bar的E元素 
•E[@foo^=bar] foo属性的值以字符串"bar"开始的E元素 
•E[@foo$=bar] foo属性的值以字符串"bar"结尾的E元素 
•E[@foo*=bar] foo属性的值包含有字符串"bar"结尾的E元素  

不支持的部分
•E:link 
•E:visited an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited) 
•E:active 
•E:hover 
•E:focus an E element during certain user actions 
•E:target an E element being the target of the referring URI 
•E::first-line the first formatted line of an E element 
•E::first-letter the first formatted letter of an E element 
•E::selection the portion of an E element that is currently selected/highlighted by the user 
•E::before generated content before an E element 
•E::after generated content after an E element 

jQuery不支持下列的选择器,因为这些没什么用处。
•E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one 
•E:nth-of-type(n) an E element, the n-th sibling of its type 
•E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one 
•E:first-of-type an E element, first sibling of its type 
•E:last-of-type an E element, last sibling of its type 
•E:only-of-type an E element, only sibling of its type 
•E:lang(fr) an element of type E in language "fr" 

XPath 查询器

XPath是jQuery内置支持的一种表达式语言。jQuery支持基本的XPath表达式。

定位路径
•绝对路径
$("/html/body//p")
 $("/*/body//p")
 $("//p/../div") 
•相对路径
$("a",this) 
 $("p/a",this) 
支持的Axis选择器
•Descendant Element has a descendant element 
 $("//div//p")

•Child Element has a child element 
 $("//div/p")

•Preceding Sibling Element has an element before it, on the same axes 
 $("//div ~ form")

•Parent Selects the parent element of the element 
 $("//div/../p")
支持的谓词
•[@*] 拥有一个属性使用
$("//div[@*]") 
•[@foo] 拥有foo属性
$("//input[@checked]") 
•[@foo='test'] 属性foo值为'test'
 $("//a[@ref='nofollow']") 
•[Nodelist] Element contains a node list, for example: 
 $("//div[p]")
 $("//div[p/a]") 

支持的谓词,但与XPath和CSS又不同的
•[last()] or [position()=last()]改为:last
$("p:last") 
•[0] or [position()=0] 改为 :eq(0) or :first
$("p:first")
 $("p:eq(0)") 
•[position() < 5] 改为:lt(5)
$("p:lt(5)") 
•[position() > 2] 改为:gt(2)
$("p:gt(2)") 

定制的选择器

jQuery包含一些在CSS和XPath都不用到的表达式,但我们觉得它们使用起来非常方便,所以包含进来了。

下列的列表式语法基于不同的CSS选择器,但又有非常相似的名字。
•:even 从匹配的元素集中取序数为偶数的元素 
•:odd 从匹配的元素集中取序数为奇数的元素 
•:eq(0) and :nth(0) 从匹配的元素集中取第0个元素 
•:gt(4) 从匹配的元素集中取序数大于N的元素 
•:lt(4) 从匹配的元素集中取序数小于N的元素 
•:first 相当于 :eq(0) 
•:last 最后一个匹配的元素 
•:parent 选择包含子元素(包含text节点)的所有元素 
•:contains('test') 选择所有含有指定文本的元素 
•:visible 选择所有可见的元素(display值为block 或者visible 、visibility 值为visible的元素,不包括hide域) 
•:hidden 选择所有隐藏的元素(非Hide域,且display值为block 或者visible 、visibility 值为visible的元素) 

例: 
 $("p:first").css("fontWeight","bold");
$("div:hidden").show();
$("div:contains('test')").hide();

表单选择器
这是为表单提供的一些选择器:
•:input 选择表单元素(input, select, textarea, button) 
•:text 选择所有文本域(type="text") 
•:password 选择所有密码域(type="password"). 
•:radio 选择所有单选按钮(type="radio"). 
•:checkbox 选择所有复选框(type="checkbox"). 
•:submit 选择所有提交按钮(type="submit"). 
•:image 选择所有图像域 (type="image"). 
•:reset 选择所有清除域(type="reset"). 
•:button 选择所有按钮(type="button"). 

同样也可以使用:hidden,详细说明上面已经介绍过。

$('#myForm :input')

如果你需要指定表单:

$('input:radio', myForm)

这将选择myForm表单中所有单选按钮。选择radio通常是用[@type=radio],但是这样用理精简些。

更多的选择器

jQuery选择器可以用一些第三方部件进行扩充:
•More Selectors Plugin 
•Mike Alsup on Custom Selectors 
•Patch to allow selection by CSS property (full plugin to be released simultaneously with 1.1) 

本文转载自:https://www.mk2048.com/blog/blog.php?id=2ia2a22hj

前端老手
粉丝 10
博文 630
码字总数 0
作品 0
卢湾
技术主管
私信 提问
jQuery 3教程(二):jQuery选择器

原文地址:jQuery 3教程(二):jQuery选择器 Introduction jQuery最方便的地方便是各种选择器。jQuery选择器完美兼容CSS 3选择器,甚至还有更强大的功能。 $ 在jQuery程序中,最常见的就是$符...

aqv
09/29
0
0
提升效率 jQuery选择器大全

提升效率 jQuery选择器大全 在jQuery 中,jQuery 为编写代码者提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery 包装集的形式返回。本文主要对常用的jQuery 选择器进...

daniel-john
2014/04/21
91
0
从零开始学 Web 之 jQuery(二)获取和操作元素的属性

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
2018/07/05
0
0
【jQuery】-----jQuery简介(一)

query在线api文档:http://t.mb5u.com/jquery/ 最新的api文档:http://api.jquery.com 官方网站:http://www.ycku.com 北风网网址:http://www.ibeifeng.com 一.什么是jQuery 1、 什么是DOM...

LYQ1990
2016/06/03
58
0
JQuery常用功能的性能优化

使用最佳选择器 通常比较常用的选择器有以下几个: 1.ID选择器 $("#id") 2.标签选择器 $("td") 3.类选择器 $(".target") 4.属性选择器 $("td[target='target']") 5.伪类选择器 $("td:hidden......

Liebert
2014/03/24
92
0

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
50分钟前
4
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
7
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
10
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
14
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部