jQuery学习-------jQuery选择器

基本选择器:

id选择器:$("#id")

标签选择器:$("tag")

类选择器:$(".classname")

通配选择器:$("*")

组选择器:$("selector1,selector2,...,selectorN")

层次选择器:

包含选择器:$("ancestor descendant")

子选择器:$("parent>child")

相邻选择器:$("prev+next")

兄弟选择器:$("prev~siblingsa")

简单的伪类选择器:

:first 例子:$("p:first")//匹配第一个p元素

:last  例子:$("p:last")//匹配最后一个p元素

:eq(index) 例子:$("p:eq(1)")//匹配索引值为1的p元素

index从0开始。

:even  例子:$("h1:even")//匹配所有索引值为偶数的h1元素

:odd   例子:$("h1:odd")//匹配所有索引值为奇数的h1元素

:gt(index) 例子:$("h1:gt(1)")//匹配所有索引值大于1的h1元素(不包含1)

:lt(index) 例子:$("h1:lt(2)")//匹配所有索引值小于2的h1元素(不包含2)

:not(selecor) 例子:$("p:not(p:eq(1)")//匹配索引不是1的p元素

:animated  //匹配动画元素

:header  //匹配标题元素

与内容相关的伪类选择器:

:contains  例子:$("p:contains(‘test1‘)")//匹配包含test1文本的p元素

:empty     例子:$("div:empty")//匹配不包含子元素或者文本的div元素

:has       例子:$("div:has(p)")//匹配含有p元素的div元素

:parent    例子:$("div:parent")//匹配含有子元素或者文本的div元素

与元素显示状态有关的伪类选择器:

:hidden    例子:$(div:hidden)//匹配所有不可见的div元素

:visible   例子:$(div:visible)//匹配所有可见的div元素

匹配子元素的伪类选择器

:nth-child    匹配其父元素下的第N个子或奇偶元素(nth-child:是从1开始的)

例子:$(":nth-child(even)")//匹配偶数位元素

$(":nth-child(odd)")//匹配奇数位元素

$(":nth-child(3n)")

$(":nth-child(2)")

$(":nth-child(3n+1)")

$(":nth-child(3n+2)")

:first-child  例子:$("p:first-child")//匹配属于其父元素的首个子元素的每个 p 元素

:last-child   例子:$("p:last-child")//匹配属于其父元素的最后一个子元素的每个 p 元素

:only-child   例子:$("p:only-child")//匹配这样的p元素,他的父元素只包含他一个元素

与表单对象有关的伪类:

:input //匹配所有input、textarea、select、button对象

:text  //匹配单行文本框

:password  //匹配所有密码框

:radio     //匹配所有单选按钮

:checkbox  //匹配所有复选框

:submit    //匹配所有提交按钮

:reset     //匹配所有重置按钮

:image     //匹配所有图像域

:button    //匹配所有按钮

:file      //匹配所有文件域

:hidden    //匹配所有不可见元素

与表单属性相关的伪类选择器

:enable

:disable

:checked     //匹配所有选中的元素(不包括option)

:selected    //匹配所有选中的option元素

属性选择器:

[attribute]  //匹配所有含有给定属性的元素

例:$("p[id]") //匹配含有id属性的p元素

[attribute=value]  //匹配属性等于特定值的元素

[attribute!=value]   //匹配属性不等于特定值的元素

[attribute^=value]   //匹配属性值以某些值开始的元素

[attribute$=value]   //匹配属性值以某些值结尾的元素

[attribute*=value]   //匹配属性值包含某些值的元素

[selector1][selector2][selectorN] //匹配满足所有匹配条件的元素

jQuery学习-------jQuery选择器,布布扣,bubuko.com

时间: 2024-12-24 19:43:01

jQuery学习-------jQuery选择器的相关文章

jQuery学习--------jQuery过滤器

each() 方法规定为每个匹配元素规定运行的函数. 过滤: 下标过滤: eq(index) //获取第index个元素 类过滤: hasClass(class)  //检查当前元素是否含有某个特定的类,如果有,返回true 例如:$("div").hasClass("div1") //含有div1类的div元素 表达式过滤: filter(expr)  //筛选出与指定表达式expr匹配的元素集合,用逗号分隔多个表达式 filter(fn)    //筛选出与指定

JQuery学习笔记-选择器-(一)

选择器的简单使用 <%-- Created by IntelliJ IDEA. User: cxspace Date: 16-8-25 Time: 下午2:29 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html&

JQuery学习笔记-选择器-1

在jQuery中 $()方法等价于jQuery()方法,前者比较常用,是后者的简写.一般只有在$()与其它语言冲突时才会使用jQuery()方法. parent > child选择器的范围,它所选择的目标是子集元素,相当于一个家庭中的子辈们,但不包括孙辈,它的调用格式:$("parent > child"),child参数获取的元素都是parent选择器的子元素,它们之间通过">"符号来表示一种层次关系. prev + next选择器就可以查找与&

jQuery学习之选择器

jQuery选择器总结:http://www.cnblogs.com/onlys/articles/jQuery.html

jQuery学习- 子选择器与可见性选择器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>子选择器与可见性选择器</title> <script src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ //出现在其父元

jQuery学习- 内容选择器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>内容选择器</title> <script src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ //利用:contains获

jQuery学习&lt;五&gt; — — 选择器(下)

七.子元素过滤选择器 :nth-child : $("ul li:nth-child(2)") 将所有ul中第二个li作为Dom对象放进jQuery包装集并返回 $("ul li:nth-child(odd)") 将所有ul中第奇数个li(从1开始)元素作为Dom对象放进jQuery包装集并返回,注意这里是从1开始.基本过滤器中eq是从0开始 :first-child : $("ul li:first-child") 将所有ul中的第一个li元素

jQuery学习- 层叠选择器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>层叠选择器</title> <script src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ //基准节点 +空格 +目标

jQuery学习之------选择器

a.id选择器 <div id="test1"></div> var div1=$("#test1");                //同css的写法一样id选择器用#号实现 div1.css('color','red'); b.class选择器: <div class="test2"></div> var div2=$(".test2");