JQuery官方学习资料(译):选择元素
- 选择元素
- 通过ID选择元素
$( "#myId" ); |
- 通过Class选择元素
$( ".myClass" ); |
- 通过Attribute选择元素
$( "input[name='first_name']" ); |
- 通过复合CSS选择器选择元素
$( "#contents ul.people li" ); |
- 伪选择器
$( "a.external:first" ); $( "tr:odd" ); // 选择#myForm中的所有input元素 $( "#myForm :input" ); $( "div:visible" ); // 除了前三的div $( "div:gt(2)" ); // 所有当前为animated的div。 $( "div:animated" ); |
- 选择器的选择
// 寻找所有的rel属性以"thinger"结尾的<a>元素 $( "a[rel$='thinger']" ); |
- 判断选择器是否包含任何元素
// 这无法运行 if ( $( "div.foo" ) ) { ... } |
// 测试选择器是否包含了元素 if ( $( "div.foo" ).length ) { ... } |
- 保存选择器
var $divs = $( "div" ); |
- 精炼和过滤选择器
// 精炼选择器 $( "div.foo" ).has( "p" ); // div.foo元素包含的<p>标签 $( "h1" ).not( ".bar" ); // 没有class为bar的h1元素 $( "ul li" ).filter( ".current" ); // class为current的unordered list子项 $( "ul li" ).first(); // 第一个unordered list的子项 $( "ul li" ).eq( 5 ); // 第六个子项 |
- 选择表单元素
- :button
使用:button伪选择器指向任意<button>元素和type="button"的元素。
$( "form :button" ); |
- :checkbox
使用:checkbox伪选择器指向任意type="checkbox"的<input>元素。
$( "form :checkbox" ); |
- :checked
不要与:checkbox混淆,:checked仅仅指向checked的复选框和单选框。当使用了复选框和单选框时,:checked伪选择器才会工作。
$( "form :checked" ); |
- :disabled
使用:disabled伪选择器指向任意带有disabled属性的元素。
$( "form :disabled" ); |
- :enabled
与:disabled伪选择器相反,:enabled伪选择器指向任意不带有disabled属性的元素。
$( "form :enabled" ); |
- :file
使用:file伪选择器指向任意type="file"的<input>元素。想要在浏览器中获得更好的性能,使用[type="file"]取代:file伪选择器。
$( "form :file" ); |
- :image
使用:image伪选择器指向任意type="image"的<input>元素。想要在浏览器中获得更好的性能,使用[type="image"]取代:image伪选择器。
$( "form :image" ); |
- :input
使用:input伪选择器指向任意<input>、<textarea>、<select>和<button>元素。
$( "form :input" ); |
- :password
使用:password伪选择器指向任意type="password"的<input>元素 。想要在浏览器中获得更好的性能,使用[type="password"]取代:password伪选择器。
$( "form :password" ); |
- :radio
使用:radio伪选择器指向任意type="radio"的<input>元素。想要在浏览器中获得更好的性能,使用[type="radio"]取代:radio伪选择器。
$( "form :radio" ); |
选择一组相关的radio如下:
$( "form input[name='gender']:radio" ); |
- :reset
使用:reset伪选择器指向任意type="reset"的<input>元素 。想要在浏览器中获得更好的性能,使用[type="reset"]取代:reset伪选择器。
$( "form :reset" ); |
- :selected
使用:selected伪选择器指向任意<option>中的被选择元素。
$( "form :selected" ); |
- :submit
使用:submit伪选择器指向任意<button>元素或者type="button"的<input>元素。想要在浏览器中获得更好的性能,使用[type="submit"]取代:submit伪选择器。
$( "form :submit" ); |
:submit伪选择器适用于<button>元素和<input>元素,一些浏览器(例如IE)默认情况下不会自动设置<button>元素的type="submit"。
- :text
使用:text伪选择器指向任意type="text"的<input>元素 。想要在浏览器中获得更好的性能,使用[type="text"]取代:text伪选择器。
$( "form :text" ); |
JQuery官方学习资料(译):选择元素的更多相关文章
- JQuery官方学习资料(译):使用JQuery的.index()方法
.index()是一个JQuery对象方法,一般用于搜索JQuery对象上一个给定的元素.该方法有四种不同的函数签名,接下来将讲解这四种函数签名的具体用法. 无参数的.index() < ...
- JQuery官方学习资料(译):遍历
一旦你通过JQuery创建了选择器,你就可以对此进行更为深入的遍历.遍历可以分为三个基本组成部分,父节点.子节点和兄弟节点.JQuery为这些部分提供了许多丰富易用的方法. <div c ...
- JQuery官方学习资料(译):JQuery对象
每当创建一个新的元素(或者选择一个已经存在的元素)时,JQuery将返回一个元素的集合.大部分的开发人员新接触JQuery的时候,都把这个集合当做数组.这个集合中的DOM元素有从零开始的索引, ...
- JQuery官方学习资料(译):遍历JQuery对象和非JQuery对象
JQuery提供了一个对象遍历的Utility方法$.each()和一个JQuery集合遍历方法.each(). $.each() $.each()是一个通用的方法用来遍历对象和数组, ...
- JQuery官方学习资料(译):操作元素
获取和设置元素的信息 有很多种方式可以改变现有的元素,最常见的是改变HTML内容或者元素的属性.JQuery提供了简单的夸浏览器的方法来帮助你实现元素信息的获取和设置. .html():获 ...
- JQuery官方学习资料(译):Utility方法
JQuery提供了一些utility方法在$命名空间里,这些方法对完成常规的编程任务非常有帮助. $.trim() 删除前后部的空白内容. // 返回 "lots of ex ...
- JQuery官方学习资料(译):CSS
JQuery提供了一个处理方法,可以获取或设置元素的CSS属性. // 获取 CSS 属性 $( "h1" ).css( "fontSize" ); / ...
- JQuery官方学习资料(译):类型
类型 JavaScript提供了多个内置数据类型.除了这些,这份文档还将介绍一些虚拟类型,例如选择器.伪类.事件等. String 在JavaScript中字符串是一个不可变的对象,它包含无. ...
- JQuery官方学习资料(译):Data方法
你可能经常会想需要通过元素来存储一些数据.在JavaScript中你可能需要给元素添加属性来实现这样的功能,但是在某些浏览器中,你可能还需要处理因此造成的内存泄露问题.JQuery提供了一个简 ...
随机推荐
- RabbitMQ 任务分发机制
在上篇文章中,我们解决了从发送端(Producer)向接收端(Consumer)发送“Hello World”的问题.在实际的应用场景中,这是远远不够的.从本篇文章开始,我们将结合更加实际的应用场景来 ...
- Self referencing loop detected for property 错误
EF 序列化返回json时 报错:Self referencing loop detected for property 解决方案:在webapiconfig.cs文件中,增加设置: 1.config ...
- [转]深入理解 GRE tunnel
我以前写过一篇介绍 tunnel 的文章,只是做了大体的介绍.里面多数 tunnel 是很容易理解的,因为它们多是一对一的,换句话说,是直接从一端到另一端.比如 IPv6 over IPv4 的 tu ...
- 如何用kaldi做孤立词识别三
这次wer由15%下降到0%了,后面跑更多的模型 LOG (apply-cmvn[5.2.124~1396-70748]:main():apply-cmvn.cc:162) Applied cepst ...
- 解决Jenkins安装的时区问题
正常情况下,jenkins是Java执行在Java容器,比如tomcat容器之下,只要改了tomcat的时区就行.我这里是为了方便后续的代码可用性测试,用的是Ubuntu中apt在线安装,也只是安装了 ...
- Akka-Cluster(6)- Cluster-Sharding:集群分片,分布式交互程序核心方式
在前面几篇讨论里我们介绍了在集群环境里的一些编程模式.分布式数据结构及具体实现方式.到目前为止,我们已经实现了把程序任务分配给处于很多服务器上的actor,能够最大程度的利用整体系统的硬件资源.这是因 ...
- 面试官问我,Redis分布式锁如何续期?懵了。
前言 上一篇[面试官问我,使用Dubbo有没有遇到一些坑?我笑了.]之后,又有一位粉丝和我说在面试过程中被虐了.鉴于这位粉丝是之前肥朝的粉丝,而且周一又要开启新一轮的面试,为了回馈他长期以来的支持,所 ...
- IM开发基础知识补课(五):通俗易懂,正确理解并用好MQ消息队列
1.引言 消息是互联网信息的一种表现形式,是人利用计算机进行信息传递的有效载体,比如即时通讯网坛友最熟悉的即时通讯消息就是其具体的表现形式之一. 消息从发送者到接收者的典型传递方式有两种: 1)一种我 ...
- Visual Studio 开发(二):VS 2017配置FFmpeg开发环境
在上篇文章Visual Studio 开发(一):安装配置Visual Studio Code 中,我们讲了一下如何配置VS CODE,来编写和调试C的代码.如果你已经使用VS Code回顾和复习好C ...
- django数据库连接快速配置
DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql',#数据库驱动 'NAME': 'login_db',#数据库名字 'US ...