jquery选择器总结 转自(永远的麦子)
jQuery选择器共有四大类,分别为基本选择器,层次选择器,过滤选择器和表单选择器。下边就来分别总结一下。
1, 基本选择器?
基本选择器就是jQuery中最常用的选择器,也是最简单的选择器,它通过元素标签名,元素Id,Class来查找DOM元素。基本选择器共有五种,总结如下:
选择器 |
返回 |
示例 |
元素标签选择器 |
集合元素 |
$(“p”)选取所有的<p>元素。 |
Id选择器 |
单个元素 |
$(“#test”)选取Id为test的元素。 |
Class选择器 |
集合元素 |
$(“.test”)选取所有class为test的元素 |
通配符选择器 |
集合元素 |
$(“*”)选取所有的元素。 |
群组选择器 |
集合元素 |
$(“div,span,p.myclass”)选取所有<div>,<span>,和拥有class为myclass的<p>标签的一组元素。 |
2, 层次选择器?
适合于通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相 邻元素和兄弟元素。
选择器 |
返回 |
示例 |
后代元素选择器 |
集合元素 |
$(“div span”)选取<div>里的所有的<span>元素。 |
子元素选择器 |
集合元素 |
$(“div>span”)选取<div>元素下元素名是<span>的子元素。 |
相邻元素选择器 |
集合元素 |
$(“.one+div”)选取class为one的下一个<div>兄弟元素。 |
兄弟元素选择器 |
集合元素 |
$(“#two~div”)选取Id为two的元素后面的所有<div>兄弟元素。 |
注意:$(“prev~siblings”)选择器与siblings()方法的区别。
$(“#prev~div”)选择的是”#prev”元素后面的所有的同辈的div元素。而siblings()方法与 前后位置无关,只要是同辈节点就都能匹配。
3, 过滤选择器?
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS 中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过 滤和表单 对象属性过滤选择器共六种选择器。
这边只总结基本过滤器,其它过滤器在实际的开发过程中需要的时候再查看就可以了。
选择器 |
返回 |
示例 |
:first |
单个元素 |
$(“div:first”)选取所有<div>元素中第1个<div>元素。 |
:last |
单个元素 |
$(“div:last”)选取所有<div>元素中最后1个<div>元素。 |
not(selector) |
集合元素 |
$(“input:not(.myClass)”)选取class不是myClass的<input>元素。 |
:even |
集合元素 |
$(“input:even”)选取索引是偶数的<input>元素。 |
:odd |
集合元素 |
$(“input:odd”)选取索引是奇数的<input>元素。 |
:eq(index) |
单个元素 |
$(“input:eq(1)”)选取索引等于1的<input>元素。 |
:gt(index) |
集合元素 |
$(“input:gt(1)”)选取索引大于1的<input>元素。 |
:lt(index) |
集合元素 |
$(“input:lt(1)”)选取索引小于1的<input>元素。(不包括1) |
:header |
集合元素 |
$(“:header”)选取网页中所有的<h1>,<h2>,<h3>... |
:animated |
集合元素 |
$(“div: animated”)选取正在执行动画的<div>元素。 |
4, 表单选择器?
利用表单选择器我们可以极其方便地获取表单的某个或某类型的元素。
选择器 |
返回 |
示例 |
: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”)选取所有不可见元素。 |
以上就是jQuery选择器的总结,希望大家都能理解并熟练运用它们,谢谢!
jquery选择器总结 转自(永远的麦子)的更多相关文章
- 【jQuery基础学习】01 jQuery选择器
关于CSS选择器 jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离. 同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器. 常用的CSS选择器如下: 标签选 ...
- jquery jquery选择器总结 转自(永远的麦子)
jQuery选择器总结 阅读目录 1, 基本选择器? 2, 层次选择器? 3, 过滤选择器? 4, 表单选择器? jQuery选择器共有四大类,分别为基本选择器,层次选择器,过滤选择器和表单选择器.下 ...
- jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...
- 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
- jQuery-认识JQuery,jQuery选择器
认识JQuery: 1.window.onload与$(document).ready()的区别 window.onload $(document).ready() 执行时机 必须等待网页中的所有内容 ...
- jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1
第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...
- jQuery选择器和选取方法
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮 ...
- jQuery 选择器和JavaScript 选择器的技巧与异常原因
jquery的选择器借鉴了css选择器,核心依然依靠JavaScript的getElementById()和getElementsByTagName()方法,但是他封装了2个方法,让jquery选择器 ...
- 第二章(jQuery选择器)
2.1jQuery选择器是什么 1.CSS选择器 选择器 示例 选择器 示例 标签选择器 a{ } p{ } ul{ } ID选择器 #ID{ } 类选择器 .class{ } 群组选择器 td,p, ...
随机推荐
- 如何用grunt压缩文件
grunt-cli 全局装完之后,就可以给每个项目装grunt了. 1.先把package.json和Gruntfile.js拷到项目下(PS:这两个文件是每个项目装grunt的时候必带的) 2. ...
- poj3461 Oulipo(KMP模板)
Oulipo Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 17795 Accepted: 7160 Descripti ...
- study notes for python
some useful materials Python完全新手教程 http://www.cnblogs.com/taowen/articles/11239.aspx (from taowen, B ...
- Struts2,Spring, Hibernate三大框架SSH的整合步骤
整合步骤 创建web工程 引入相应的jar包 整合spring和hibernate框架 编写实体类pojo和hbm.xml文件 编写bean-base.xml文件 <!-- 1) 连接池实例 - ...
- cf 731f
题意:给你一组数,让你先选一个数,然后把其他数缩小成他的倍数,然后求和,求最大值. 思路:很显然,对于数i,在i*j到i*(j+1)-1之间的数都应该缩小成i*j,又由于数均小于等于200000这个通 ...
- LeetCode之Largest Rectangle in Histogram浅析
首先上题目 Given n non-negative integers representing the histogram's bar height where the width of each ...
- Spring Framework------>version4.3.5.RELAESE----->Reference Documentation学习心得----->使用spring framework的IoC容器功能----->方法一:使用XML文件定义beans之间的依赖注入关系
XML-based configuration metadata(使用XML文件定义beans之间的依赖注入关系) 第一部分 编程思路概述 step1,在XML文件中定义各个bean之间的依赖关系. ...
- position:absolute绝对定位解读
position:absolute绝对定位解读 摘要 用四段代码解释absolute的定位问题,进而从概念的角度切实解决html布局问题. 一.背景 常常遇到这样一些问题,很容易混淆.“浏览器屏 ...
- 尝试一下代码高亮。。成功的话明天写一篇blog
using System; using System.Collections; using UnityEngine; public class Time : MonoBehaviour { // Us ...
- 利用JDK(1.6及以上版本)创建WebService
一.什么是WebService WebService是一个SOA(面向服务的编程)的架构,它是不依赖于语言,不依赖于平台,可以实现不同的语言间的相互调用,通过Internet进行基于Http协议的网络 ...