1. 基本选择器

1.1 id选择器:$(#id)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
div {
width: 100%;
height: 20px;
text-align:center;
border: 1px solid #555;
margin: 5px;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="a"></div> <script>
$("#a").html("我选中你了");
</script>
</body>
</html>

执行结果:只选中第一个。

1.2 类型选择器:$(.class)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
div {
width: 100%;
height: 20px;
text-align:center;
border: 1px solid #555;
margin: 5px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="a"></div> <script>
$(".a").html("我选中你了");
</script>
</body>
</html>

执行结果:两个div都会被选中。

1.3 元素选择器:$(element)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
div, span {
width: 100%;
height: 20px;
text-align:center;
border: 1px solid #555;
margin: 5px;
display:block;
}
</style>
</head>
<body>
<div></div>
<div></div>
<span></span>
<span></span> <script>
$("span").html("我选中你了");
</script>
</body>
</html>

执行结果:两个span元素会被选中。

1.4 全部子孙选择器:$(选择器1 *)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
div, span {
width: 100%;
min-height: 20px;
text-align:center;
border: 1px solid #555;
margin: 5px;
display:block;
}
</style>
</head>
<body>
<div><span></span></div>
<div><div></div></div>
<span></span>
<span></span> <script>
$("body *").css("border-color","red");
</script>
</body>
</html>

执行结果:body下的所有子元素(包含子元素的子元素)都被选中。

1.5 多项选择器:$(选择器1,选择器2,选择器3,选择器4)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
div, span {
width: 100%;
min-height: 20px;
text-align:center;
border: 1px solid #555;
margin: 5px;
display:block;
}
</style>
</head>
<body>
<div id="a"></div>
<div class="b"></div>
<span>
<div></div>
<div></div>
</span>
<div></div>
    <script>
$("#a,.b,span *").html("我选中你了");
</script>
</body>
</html>

上例中,$("#a,.b,span *")包含了三个选择器,#a选中id等于a的元素,.b选中class等于b的元素,span *选中所有span下的所有元素。所以执行结果为:前两个div以及span内的两个div会被选中。

1.6 基本选择器的组合应用:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
div, span {
width: 100%;
min-height: 20px;
text-align:center;
border: 1px solid #555;
margin: 5px;
display:block;
}
</style>
</head>
<body>
<div class="a"></div>
<span class="a"></span>
<span id="b"></span>
<span id="c">
<a></a>
<a></a>
</span>
<script>
$("div.a, span#b, span#c *").html("我选中你了");
</script>
</body>
</html>

执行结果:class等于a的div将会被选中,id等于b的span将会被选中,id等于c的所有子元素将会被选中。

2. 层级选择器

2.1 祖孙选择器:$(选择器1 选择器2)

选择“选择器1”的子元素(包含子元素的子元素)中,匹配“选择器2”的所有元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
div, span {
width: 100%;
min-height: 20px;
text-align:center;
border: 1px solid #555;
margin: 5px;
display:block;
}
</style>
</head>
<body>
<a>第1个</a>
<span>
<div>
<a>第2个</a>
<a>第3个</a>
</div>
<a>第4个</a>
<div>
<a>第5个</a>
<span>
<a>第6个</a>
</span>
</div>
</span>
<script>
$("span a").css("color","red");
</script>
</body>
</html>

执行结果:2-6会被选中。

2.2 父子选择器:$(选择器1>选择器2)

选择“选择器1”的子元素(必须是直属父子元素)中,符合“选择器2”的所有元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
div, span {
width: 100%;
min-height: 20px;
text-align:center;
border: 1px solid #555;
margin: 5px;
display:block;
}
</style>
</head>
<body>
<a>第1个</a>
<span>
<div>
<a>第2个</a>
<a>第3个</a>
</div>
<a>第4个</a>
<div>
<a>第5个</a>
<span>
<a>第6个</a>
</span>
</div>
</span>
<script>
$("span>a").css("color","red");
</script>
</body>
</html>

执行结果:4,6会被选中。

2.3 兄弟选择器:$(选择器1+选择器2)

选择“选择器1”下面与“选择器1”同级的且紧接“选择器1”的符合“选择器2”的元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
div {
width: 100%;
min-height: 20px;
text-align:center;
border: 1px solid #555;
margin: 5px;
}
</style>
</head>
<body>
<div id="1" class="a">
<div id="2" class="c"></div>
<div id="3" class="b"></div>
</div>
<div id="4" class="b"></div>
<div id="5" class="d"></div>
<div id="6" class="b"></div> <script>
$(".a+.b").html("我选中你了");
</script>
</body>
</html>

执行结果:id等于4的div将会被选中,而id等于6的div则不会被选中。

2.4 同级选择器:$(选择器1~选择器2)

选择“选择器1”下面与“选择器1”同级的符合“选择器2”的元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
div {
width: 100%;
min-height: 20px;
text-align:center;
border: 1px solid #555;
margin: 5px;
}
</style>
</head>
<body>
<div id="1" class="a">
<div id="2" class="c"></div>
<div id="3" class="b"></div>
</div>
<div id="4" class="b"></div>
<div id="5" class="d"></div>
<div id="6" class="b"></div> <script>
$(".a~.b").html("我选中你了");
</script>
</body>
</html>

执行结果:id等于4的div和id等于6的div都会被选中。

3. 过滤选择器

3.1 基本过滤器

  • 过滤出第一个元素:first
  • 过滤出最后一个元素:last
  • 过滤出基数元素:even
  • 过滤出偶数元素:old
  • 过滤出第几个元素:eq(x),括号内填写序号,从0开始。
  • 过滤出第几个之后的元素:gt(x),括号内填写序号,过滤出来的元素不包含x位
  • 过滤出第几个之前的元素:lt(x),括号内填写序号,过滤出来的元素不包含x位
  • 过滤出所有的标题:header,即h1-h6
  • 过滤出所有的动画元素:animated,注意是jquery动画,html5和css3动画不算。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
div,span {
width: 100%;
min-height: 20px;
text-align:center;
border: 1px solid #555;
margin: 5px;
display:block;
}
</style>
</head>
<body>
<div>
<span id="0">11111</span>
<span id="1">22222</span>
<span id="2">33333</span>
<span id="3">44444</span>
<span id="4">55555</span>
<span id="5">66666</span>
</div> <script>
$("div span:first").css("background-color","red");
$("div span:last").css("background-color","gray");
$("div span:even").css("color","green");
$("div span:odd").css("color","blue");
$("div span:not(#1,#4)").css("font-weight","bold");
$("div span:eq(3)").css("padding-left","100px");
$("div span:gt(4)").css("padding-left","200px");
$("div span:lt(2)").css("padding-left","300px");
</script>
</body>
</html>

执行结果,id=0背景变红,id=5背景变灰,id=0,2,4字体颜色变绿,id=1,3,5字体颜色变蓝,id=0,2,3,5字体加粗,id=3文字右移100px,id=5文字右移200px,id=0,1文字右移300px。剩下两个过滤器不再展示。

3.2 内容过滤器:

  • :contains('x') 过滤出容包含x的元素,模糊匹配。
  • :empty 过滤出内容为空的元素,包含其他元素、包含空格、包含内容都不能算作为空。
  • :has('x') 过滤出包含x子元素的元素。
  • :parent 过滤出内容不为空的元素,包含其他元素、包含空格、包含内容都不能算作为空。(其实就是和empty相反)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script src="jquery-3.0.0.min.js"></script>
    <style>
    div,span {
    width: 100%;
    min-height: 20px;
    text-align:center;
    border: 1px solid #555;
    margin: 5px;
    display:block;
    }
    </style>
    </head>
    <body>
    <div>
    <span id="0">11a11</span>
    <span id="1">22b22</span>
    <span id="2"><a></a></span>
    <span id="3"></span>
    <span id="4"><a>55a55</a></span>
    <span id="5"><label>66a66<label></span>
    </div> <script>
    $("div>span:contains('a')").css("color","red");
    $("div>span:empty").css("background-color","blue");
    $("div>span:has('a')").css("font-size","50px");
    $("div>span:parent").css("border-width","3px");
    </script>
    </body>
    </html>

    执行结果:红色字体id=0,4,5    蓝色背景id=3      大号字体id=4      加粗边框id=0,1,2,4,5

3.3 可见性过滤选择器:

  针对css的display属性有效。

  • :hidden 过滤出不可见元素。
  • :visible 过滤出可见元素。

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
div,span {
width: 100%;
min-height: 20px;
text-align:center;
border: 1px solid #555;
margin: 5px;
display:block;
}
</style>
</head>
<body>
<div id="a">
<div id="0" style="visibility:visible">000</div>
<div id="1" style="visibility:hidden">111</div>
<div id="2" style="display:none">222</div>
<div id="3" style="display:block">333</div>
</div> <script>
$("div#a>div:visible").css("background-color","red");
$("div#a>div:hidden").css("background-color","green");
</script>
</body>
</html>

执行结果:

<div id="a">
<div id="0" style="visibility: visible; background-color: red;">000</div>
<div id="1" style="visibility: hidden; background-color: red;">111</div>
<div id="2" style="display: none; background-color: green;">222</div>
<div id="3" style="display: block; background-color: red;">333</div>
</div>

3.4 属性过滤器

  • [attribute]过滤出包含某个属性的元素。
  • [attribute=value]过滤出某个属性等于某个值的元素(区分大小写)。
  • [attribute!=value]过滤出某个属性不等于某个值的元素(区分大小写)。
  • [attribute^=value]过滤出某个属性以某个值开头的元素(区分大小写)。
  • [attribute$=value]过滤出某个属性以某个值结尾的元素(区分大小写)。
  • [attribute*=value]过滤出某个属性包含某个值的元素(区分大小写)。
  • [属性过滤器1][属性过滤器2]属性过滤器的组合使用(and关系)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
div,span {
width: 100%;
min-height: 20px;
text-align:center;
border: 1px solid #555;
margin: 5px;
display:block;
}
</style>
</head>
<body>
<div>
<input id="1" name="a" value="ABCD"/>
<input id="1" name="b" value="abcd"/>
<input id="2" name="a" value="XYZ"/>
<input id="2" name="b" value="xyz"/>
<input value="哈哈哈"/>
</div> <script>
$("div>input[name]").css("background-color","red");
$("div>input[name=a]").css("font-size","30px");
$("div>input[name!=a]").css("font-size","60px");
$("div>input[value^=a]").css("color","yellow");
$("div>input[value$=z]").css("color","blue");
$("div>input[value*=C]").css("color","green");
$("div>input[value^=a][value$=d").css("border-width","8px");
</script>
</body>
</html>

执行结果:1-4背景红色,1、3是30px字体,2、4、5是60px字体,2是黄色字体,4是蓝色字体,1是绿色字体,2加粗边框。

3.5 子元素过滤器

  • :nth-child(x) 如果某元素是其父元素的第x个子元素,那么该元素将被过滤出来。
  • :first-child 如果某元素是其父元素的第一个子元素,那么该元素将被过滤出来
  • :last-child 如果某元素是其父元素的最后一个子元素,那么该元素将被过滤出来
  • :only-child 如果某元素是其父元素的唯一一个个子元素,那么该元素将被过滤出来
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-3.0.0.min.js"></script>
<style>
div,span {
width: 100%;
min-height: 20px;
text-align:center;
border: 1px solid #555;
margin: 5px;
display:block;
}
</style>
</head>
<body>
<div id="123">
<div>
<div></div><div></div><div></div><div></div><div></div>
</div>
<div>
<div></div><div></div><div></div><div></div><div></div>
</div>
<div>
<div></div><div></div><div></div><div></div><div></div>
</div>
<div>
<div></div><div></div><div></div><div></div><div></div>
</div>
<div>
<div></div><div></div><div></div><div></div><div></div>
</div>
<div>
<div></div>
</div>
</div> <script>
$("div#123 div:nth-child(3)").css("background-color","red");
$("div#123 div:first-child").css("border-width","10px");
$("div#123 div:last-child").css("margin-top","100px");
$("div#123 div:only-child").css("margin-left","100px");
</script>
</body>
</html>

执行结果:各位还是自己去试试看吧。

3.6 表单元素过滤器

  常用的表单元素有:<input/><textarea/><select/><option/>。

  • :enabled 过滤出可用个的表单元素
  • :disabled 过滤出不可用的表单元素
  • :checked 过滤出被勾选了的表单元素
  • :selected 过滤出被选中了的表单元素
  • :input 过滤出所有表单元素
  • :text 过滤出type=text的input元素
  • :password 过滤出type=password 的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元素
  • :file 过滤出type=file 的input元素
  • :hidden 过滤出type=hidden 的input元素

jQuery选择器全解析的更多相关文章

  1. jQuery Ajax 全解析

    转自:http://www.cnblogs.com/qleelulu/archive/2008/04/21/1163021.html 本文地址: jQuery Ajax 全解析 本文作者:QLeelu ...

  2. jQuery Ajax 全解析(转载)

    本文地址: jQuery Ajax 全解析 本文作者:QLeelulu 转载请标明出处! jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写Java ...

  3. jQuery选择器全解

    本篇介绍jQuery的选择器,jQuery选择器按照功能上分为"选择"和"过滤",并且是配合使用的.过滤的主要作用是从前面选定的选择器中选择的内容重进行筛选. ...

  4. jQuery插件开发全解析,类级别与对象级别开发

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  5. jQuery插件开发全解析

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  6. jQuery Ajax 全解析(转)

    <!-- .ajax div{ border: solid 1px red; } --> // <![CDATA[ $(function(){ $("#btnajax&qu ...

  7. jQuery Ajax全解析

    jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 我们先来看一些简单的方法,这些方法都是对jQuery.ajax( ...

  8. (转)jQuery插件开发全解析

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

  9. jQuery插件开发全解析[转]

    jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...

随机推荐

  1. Ubuntu安装Orcale

    Linux_Ubuntu安装oracle总结 ---------转自 https://www.2cto.com/database/201305/215338.html 话说我花了一晚上才在ubuntu ...

  2. git 创建分支并提交代码

    1.查看所有分支 git branch -a 2.查看当前分支 git branch 3.新建一个分支 git branch feature-xx 4.切换到新建分支上面 git checkout f ...

  3. 03.Delphi通过接口实现多重继承的优化

    在上一篇02中,写到的sayhello函数,需要使用2个接口参数,很繁琐.可以使用as参数,把多重继承的子类对象变成需要的对象 uSayHello代码如下 unit uSayHello; interf ...

  4. sed的妙用

    sed 使用-n选项和p可以实现在指定范围内的搜索貌似实现了比grep更精确的搜索

  5. python——字符输出ASCII码

    总是忘记事,赶紧记下来,Python字符转成ASCII需要用到一个函数ord # 用户输入字符 ch = input("请输入一个字符: ") # 用户输入ASCII码,并将输入的 ...

  6. POJ 2823:Sliding Window 单调队列

    Sliding Window Time Limit: 12000MS   Memory Limit: 65536K Total Submissions: 48930   Accepted: 14130 ...

  7. 设置gvim的字体大小

    1.临时设置: 进入命令行模式输入: set guifont=Courier\ New:h10 2.永久设置: 打开安装目录找到defaults.vim在最后一行输入: set guifont=Cou ...

  8. jQuery原理系列-Dom Ready

    ready事件是jquery的一个很重要的功能,在很久很久以前,我们是使用window.onload监听页面加载成功的,onload事件的好处是你不用考虑浏览器兼容性,也不需要依赖任何框架就可以写,但 ...

  9. 12 文件流(Unity3D)

      关于文件操作在脚本中可以通过xml或其他的与文件相关的类中封装的一些方法可读取本地Asset文件夹下的xml文档和json文档到游戏中.但是这样操作文件难免会有拖延,C#提供了一种文件操作的方法, ...

  10. Elasticsearch 教程

    章节 Elasticsearch 基本概念 Elasticsearch 安装 Elasticsearch 使用集群 Elasticsearch 健康检查 Elasticsearch 列出索引 Elas ...