JQuery总结一:选择器归纳

1、基本选择器

选择符 匹配元素
* 所有元素
id 给定ID的元素
element 给定类型的所有元素
.class 给定类的所有元素
a,b 与a或b匹配的元素
a b a的后代元素中与b匹配的元素
a>b a的直接子元素中与b匹配的元素
a+b a的直接同辈元素中与b匹配的元素
a~b a的同辈元素中与b匹配的元素

2、位置选择器

选择符 匹配元素
a b:nth-child(index) a的子元素中,第index个与b匹配的元素(从1开始计数)
a b:nth-child(even) a的子元素中,第偶数个与b匹配的元素(从1开始计数)
a b:nth-child(odd) a的子元素中,第奇数个与b匹配的元素(从1开始计数)
a b:nth-child(2n+2) a的子元素中,第2n+2个与b匹配的元素(从1开始计数),n为自然数
a b:nth-last-child() 同:nth-child(),从最后一个元素开始计数
a b:first-child a的子元素中,第1个与b匹配的元素
a b:last-child a的子元素中,最后一个个与b匹配的元素
:only-child 作为其父元素唯一一个子元素的元素
a b:nth-of-type() 同:nth-child(),只计同类元素
a b:nth-last-of-type() 同:nth-last-child(),只计同类元素
a b:first-of-type() 同:first-child(),只计同类元素
a b:last-of-type() 同:last-child(),只计同类元素
a b:only-of-type() 没有同名元素的元素

3、属性选择器

选择符 匹配元素
[attr] 带有属性attr的元素
[attr="value"] attr属性值为value的元素
[attr!="value"] attr属性值不为value的元素)
[attr^="value"] attr属性值以value开头的元素
[attr$="value"] attr属性值以value结尾的元素
[attr*="value"] attr属性值包含value字符串的元素
[attr~="value"] attr属性值是空格分隔的字符串,其中一个字符串值是value的元素
[attr|="value"] attr属性值等于value或value后跟一个连字符(-)的元素

4、表单选择器

选择符 匹配元素
:input 所有<input><textarea><select><button>元素
:text type=”text”的<input>元素
:password type=”password”的<input>元素
:file type=”file”的<input>元素
:radio type=”radio”的<input>元素
:checkbox type=”checkbox”的<input>元素
:submit type=”submit”的<input>元素
:image type=”image”的<input>元素
:reset type=”reset”的<input>元素
:button type=”button”的<input>元素
:enabled 启用的表单元素
:disabled 禁用的表单元素
:checked 选中的复选框和单选按钮
:selected 选中的<option>元素

5、过滤选择器

选择符 匹配元素
:root 文档根元素
:header 标题元素,h1~h6
:animated 动画正在运行的元素
:contains(text) 包含文本text的元素
a:empty 不包含子节点的a元素
a:has(b) 至少包含一个b元素匹配的a元素(返回父元素a而非子元素b)
:parent 与:empty相反,返回包含子节点的元素
:hidden 隐藏的元素,包括<input type="hidden">
:visible 可见元素
:focus 获得焦点的元素
:lang(language) 给定语言代码的元素
:target URI标识符指向的目标元素,具体见::target用法

6、用于结果集中的选择器

这类选择器在CSS中不存在,但可以用于JQuery的结果中进行筛选。

选择符 匹配元素
:first 结果集中的第一个元素,对应方法为first(),如$("a b:first")<==>$("a b").first()
:last 结果集中的最后一个元素,对应方法为last(),如$("a b:last")<==>$("a b").last()
:not(a) 结果集中不与a匹配的元素,对应方法为not(),如$("a b:not(c)")<==>$("a b").not(c)
:even 结果集中索引是偶数的元素(从0开始),如$("a b:even")
:odd 结果集中索引是奇数的元素(从0开始),如$("a b:odd")
:eq(index) 结果集中索引是index的元素(从0开始),对应方法是eq(index),如$("a b:eq(2)")<==>$("a b").eq(2)
:gt(index) 结果集中索引大于index的元素(从0开始),如$("a b:gt(2)")
:lt(index) 结果集中索引小于index的元素(从0开始),如$("a b:lt(2)")

时间: 2024-11-03 03:34:07

JQuery总结一:选择器归纳的相关文章

JQuery总结:选择器归纳、DOM遍历和事件处理、DOM完全操作和动画

JQuery总结一:选择器归纳 1.基本选择器 选择符 匹配元素 * 所有元素 id 给定ID的元素 element 给定类型的所有元素 .class 给定类的所有元素 a,b 与a或b匹配的元素 a b a的后代元素中与b匹配的元素 a>b a的直接子元素中与b匹配的元素 a+b a的直接同辈元素中与b匹配的元素 a~b a的同辈元素中与b匹配的元素 2.位置选择器 选择符 匹配元素 a b:nth-child(index) a的子元素中,第index个与b匹配的元素(从1开始计数) a b:

jQuery中的选择器

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html PUBLIC "-//W3C//DTD

jQuery基础知识--选择器与效果

$(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class="test"的元素 $("#test").hide()--隐藏所有id="test"的元素 文档就绪函数 $(document).ready(function() {     ---------jQuery function go here----

非常easy学习的JQuery库 : (二) 选择器

作用 选择器同意您对元素组或单个元素进行操作. 在前面的章节中,我们介绍了一些有关怎样选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是怎样准确地选取您希望应用效果的元素. jQuery 元素选择器和属性选择器同意您通过标签名.属性名或内容对 HTML 元素进行选择. 选择器同意您对 HTML 元素组或单个元素进行操作. 在 HTML DOM 术语中: 选择器同意您对 DOM 元素组或单个 DOM 节点进行操作. 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元

HTML5移动开发之路(34)——jQuery中的选择器

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(34)--jQuery中的选择器 一.jQuery是什么? jQuery是由美国人John Resig创建,至今吸引了来自世界各地的众多JavaScript高手加入其中. jQuery的创始人和技术领袖,目前在Mozilla担任JavaScript工具开发工程师.著有<Pro JavaScript Techniques>(即<精通JavaScript>)等经典JavaScript书籍. jQu

[ jquery 属性 .selector ] 此选择器返回传给jQuery()的原始选择器

返回传给jQuery()的原始选择器:换句话说,就是返回你用什么选择器来找到这个元素的.可以与context一起使用,用于精确检测选择器查询情况.这两个属性对插件开发人员很有用 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my pag

很容易学习的JQuery库 : (二) 选择器

一.作用 选择器允许您对元素组或单个元素进行操作. 在前面的章节中,我们介绍了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素. jQuery 元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择. 选择器允许您对 HTML 元素组或单个元素进行操作. 在 HTML DOM 术语中: 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作. 二.元素选择器 jQuery 使用 CSS 选择器来选取 HT

第一百六十五节,jQuery,过滤选择器

jQuery,过滤选择器 学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似与 CSS3 (http://t.mb5u.com/css3/)里的伪类,可以让不支持 CSS3 的低版本浏览器也能支持.和常规 选择器一样,jQuery 为了更方便开发者使用,提供了很多独有的过滤器. 一.基本过滤器 过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素,和 CSS 中的伪类的语法类 似:使用冒号

jQuery中的选择器深入浅出

随着JavaScript的不断发展,各种各样的为了方便给jQuery变成的库应运而 生,Prototype,YUI,Extjs,bindows,JSVM(国内的),而目前较为流行的是jQuery ,这是一个轻量级的JavaScript库,它的诸多的优点:开源,兼容各种浏览器,继承css ,html,javascript,ajax等,据统计,目前世界上前10000个访问量最高的网站中,有 超过60%都使用的是jQuery,不得不说,在现在的前端界,如果你说你不会jQuery, 那么估计很多人就会对

Jquery简介之选择器

前言 Jquery是一种js框架(程序代码的一种有机结合)是程序开发过程中的一种半成品:类似的框架有EXTJS. 依赖库:jquery-XXX.js 语法:$() 正文 5种基本的选择器 id选择器 $("#id值") 例子:$(#span1).css("color","red"); 标签选择器 $("标签名称") Class选择器 $(".class的值") 群组选择器 $("标签名称1,标签名