jQuery选择器

页面导航:首页 > 网络编程 > JavaScript > jQuery选择器

jQuery选择器

来源: 作者: 时间:2016-01-19 18:32 【

基本选择器:基本选择器可以通过id、class等元素来查找DOM元素,例如:di选择器:$( divOne) css(background-color,blue);该功能是将id为divOne的元素背景颜色设置为蓝色。class选择器:$( classTwo)

基本选择器:

基本选择器可以通过id、class等元素来查找DOM元素,例如:

 

di选择器:$(#divOne).css(background-color,blue);

该功能是将id为divOne的元素背景颜色设置为蓝色。

 

class选择器:$(.classTwo).css(background-color,red);

该功能是将class为classTwo的元素背景颜色设置为红色。

 

element选择器(遍历html元素): $(p).css(background-color,yellow);

该功能是将p标签背景颜色设置为黄色。

 

* 选择器(遍历所有元素):$(div *).css(color,white);

该功能是将div下所有的元素字体统统设置为白色。

 

他们的源代码如下:

 

<%@ page language=java import=java.util.* pageEncoding=gbk%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
%>
> <script type=text/javascript src = JS/jquery-1[1].3.2.js></script><script type=text/javascript> $(function(){ //id选择器 $(#divOne).css(background-color,blue); //class选择器 $(.classTwo).css(background-color,red); // * 选择器(遍历所有元素) $(div *).css(color,white); //element选择器(遍历html元素) $(p).css(background-color,yellow); }); </script>
two

three


运行的结果:

 

\

 

并列选择器:$(p,a,span).css(background-color,blue);

该功能是将并列的三个元素的背景颜色统一设置为蓝色。

 

源代码:

 

<%@ page language=java import=java.util.* pageEncoding=gbk%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
%>
> <script type=text/javascript src = JS/jquery-1[1].3.2.js></script><script type=text/javascript> $(function(){ //并列选择器 $(p,a,span).css(background-color,blue); }); </script>
two

three


运行的结果:

 

\

 

层次选择器:

层次选择器可以通过DOM元素之间的层次关系来获取特定的元素,如后代元素、子元素、相邻元素和兄弟元素

 

parent > child(直系子元素):$(div>span).css(background-color,blue);

该功能是选择div下的所有span元素,并将其背景颜色设置为蓝色

 

prev + next(下一个兄弟元素,等同于next()方法):$(.span+div).css(background-color,red);

该功能是选择span类下面的div元素,并将其背景颜色设置为红色。

 

prev ~ siblings(prev元素的所有兄弟元素,等同于nextAll()方法):$(.classOne~div).css(color,white);

该功能是选择类classOne之外的所有的div兄弟元素,并将其字体设置为白色。

 

下面是其源代码:

 

<%@ page language=java import=java.util.* pageEncoding=gbk%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
%>
> <script type=text/javascript src = JS/jquery-1[1].3.2.js></script><script type=text/javascript> $(function(){ //parent > child(直系子元素) $(div>span).css(background-color,blue); // prev + next(下一个兄弟元素,等同于next()方法) $(.span+div).css(background-color,red); //prev ~ siblings(prev元素的所有兄弟元素,等同于nextAll()方法) $(.classOne~div).css(color,white); }); </script>
one
two
three

运行的结果:

 

\

 

过滤选择器:

过滤选择器主要是通过特定的过滤规则来筛选出特定的DOM元素,过滤规则与CSS中的伪类选择器语法相同,选择器以(:)开头。

 

基本过滤选择器:

 

:first和:last过滤选择器(取第一个元素或最后一个元素):

 

$(div:first).css(background-color,blue);
$(div:last).css(background-color,red);
该功能是将第一个div元素的背景颜色设置为蓝色,将第二个div的背景颜色设置为红色。

 

 

源代码:

 

<%@ page language=java import=java.util.* pageEncoding=gbk%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
%>
> <script type=text/javascript src = JS/jquery-1[1].3.2.js></script><script type=text/javascript> $(function(){ //first和:last(取第一个元素或最后一个元素) $(div:first).css(background-color,blue); $(div:last).css(background-color,red); }); </script>
one
two
three

运行结果:

 

\

 

:not(取非元素):$(div:not('#divTwo')).css(background-color,blue);

该功能是将id为divTwo之外的所有的div元素背景颜色统统设置为蓝色。

 

源代码:

 

<%@ page language=java import=java.util.* pageEncoding=gbk%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
%>
> <script type=text/javascript src = JS/jquery-1[1].3.2.js></script><script type=text/javascript> $(function(){ //:not(取非元素) $(div:not('#divTwo')).css(background-color,blue); }); </script>
one
two
three

运行结果:

 

\

 

:even和:odd选择器(取偶数索引或奇数索引元素,索引从0开始,even表示偶数,odd表示奇数):

$(tr:even).css(background-color,blue);
$(tr:odd).css(background-color,red);

该功能是将偶数行的背景颜色设置为蓝色,将奇数行的背景颜色设置为红色。

 

源代码:

 

<%@ page language=java import=java.util.* pageEncoding=gbk%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
%>
> <script type=text/javascript src = JS/jquery-1[1].3.2.js></script><script type=text/javascript> $(function(){ //:even和:odd选择器 $(tr:even).css(background-color,blue); $(tr:odd).css(background-color,red); }); </script>
1
2
3
4

运行的结果:

 

\

 

:eq(x)选择器:
$(tr:eq(0)).css(background-color,blue);
$(tr:eq(2)).css(background-color,yellow);
$(tr:odd).css(background-color,red);

该功能是将第一行和第三行的背景颜色分别设置为蓝色和黄色。

 

源代码:

 

<%@ page language=java import=java.util.* pageEncoding=gbk%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
%>
> <script type=text/javascript src = JS/jquery-1[1].3.2.js></script><script type=text/javascript> $(function(){ //:eq(x)选择器 $(tr:eq(0)).css(background-color,blue); $(tr:eq(2)).css(background-color,yellow); $(tr:odd).css(background-color,red); }); </script>
1
2
3
4

运行结果:

 

\

 

:gt(x)和:lt(x)(取大于x索引或小于x索引的元素)过滤选择器:

$(tr:gt(2)).css(background-color,blue);
$(tr:lt(2)).css(background-color,red);

该功能主要是获取大于2的索引元素,然后将其背景颜色设置为蓝色,将获取索引值小于2的元素背景颜色设置为红色。

 

源代码:

 

<%@ page language=java import=java.util.* pageEncoding=gbk%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
%>
> <script type=text/javascript src = JS/jquery-1[1].3.2.js></script><script type=text/javascript> $(function(){ //:gt(x)和:lt(x)(取大于x索引或小于x索引的元素) $(tr:gt(2)).css(background-color,blue); $(tr:lt(2)).css(background-color,red); }); </script>
1
2
3
4
5

运行的结果:

 

\

 

:header过滤选择器:$(:header).css(color,blue);

该功能主要是将获取的全部标题字体颜色设置为蓝色。

 

源代码:

 

<%@ page language=java import=java.util.* pageEncoding=gbk%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
%>
> <script type=text/javascript src = JS/jquery-1[1].3.2.js></script><script type=text/javascript> $(function(){ //:header过滤选择器 $(:header).css(color,blue); }); </script>

1

2

3

4

5

运行的结果:

 

\

 

内容过滤选择器:

 

:contains(text)(取包含text文本的元素):$(span:contains('one')).css(color,blue);

该功能是选取包含one文本内容的span标签,将其字体颜色设置成蓝色。

 

源代码:

 

<%@ page language=java import=java.util.* pageEncoding=gbk%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
%>
> <script type=text/javascript src = JS/jquery-1[1].3.2.js></script><script type=text/javascript> $(function(){ // :contains(text)(取包含text文本的元素) $(span:contains('one')).css(color,blue); }); </script>hello,nihao,你好
21,123,123456
one,TWO,Three

运行的结果:

 

\

 

:empty(取不包含子元素或文本为空的元素):$(span:empty).html(nothing);

该功能是将span为空的元素添加新的内容nothing。

 

源代码:

 

<%@ page language=java import=java.util.* pageEncoding=gbk%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
%>
> <script type=text/javascript src = JS/jquery-1[1].3.2.js></script><script type=text/javascript> $(function(){ //:empty(取不包含子元素或文本为空的元素) $(span:empty).html(nothing); }); </script>hello,nihao,你好
21,123,123456
one,TWO,Three

运行的结果:

 

\

 

:has(selector)(取选择器匹配的元素):$(div:has('span')).css(background-color,blue);

该功能是将含有span元素的div元素背景颜色设置成蓝色。

 

源代码:

 

<%@ page language=java import=java.util.* pageEncoding=gbk%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
%>
> <script type=text/javascript src = JS/jquery-1[1].3.2.js></script><script type=text/javascript> $(function(){ // :has(selector)(取选择器匹配的元素) $(div:has('span')).css(background-color,blue); }); </script>hello,nihao,你好
21,123,123456

运行的结果:

 

\

 

:parent(取包含子元素或文本的元素):$(p:parent).css(background-color,blue);

该功能是将含有子元素的P元素的背景颜色设置为蓝色。

 

源代码:

 

<%@ page language=java import=java.util.* pageEncoding=gbk%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
%>
> <script type=text/javascript src = JS/jquery-1[1].3.2.js></script><script type=text/javascript> $(function(){ // :parent(取包含子元素或文本的元素) $(p:parent).css(background-color,blue); }); </script>

 

21,123,123456


运行的结果:

 

\

 

:hidden(取不可见的元素):$(input:hidden);

jQuery至1.3.2之后的:hidden选择器仅匹配display:none或的元素,而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素,像visibility:hidden或opactity:0的元素占据了空间,会被排除在外。
 

所以说上述代码的功能是选择含有111display: none的元素与含有“333hidden”的元素。

 

源代码:

 

<%@ page language=java import=java.util.* pageEncoding=gbk%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
%>
> <script type=text/javascript src = JS/jquery-1[1].3.2.js></script><script type=text/javascript> $(function(){ //:hidden(取不可见的元素) $(input:hidden).each(function(){ alert($(this).val()); }); }); </script>
运行的结果:

 

 

由于这三个元素都是隐藏的,所以说此时我们需要在debug模式下查看各元素的占位空间情况,我们知道,有占位空间的元素是不会被选中的,所以说通过查看占位空间情况我们就可以了解到底是选中了哪些元素。

 

当光标选中元素一时:

\

如上所示,无占位空间,也就是说会被选中。

 

当光标选中元素二时:

\

有占位空间,所以说此时元素不被选中。

 

当光标选中元素三时:

\

无占位空间,也就是说该元素也被选中。

 

由于在源程序中添加了alert()功能,所以说被选中的会弹窗,弹窗结果如下:

 

元素1内容被弹出:

\

 

元素三内容被弹出:

\

 

:visible(取可见的元素): $(input:visible)

该功能是将页面中可见的元素或拥有占位符的元素筛选出来。

 

 

<%@ page language=java import=java.util.* pageEncoding=gbk%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
%>
> <script type=text/javascript src = JS/jquery-1[1].3.2.js></script><script type=text/javascript> $(function(){ //:visible(取可见的元素) $(input:visible).each(function(){ alert($(this).val()); }); }); </script>
运行的结果:

 

如图一:

\

 

如图二:

\

 

属性过滤选择器:

 

[attribute](取拥有attribute属性的元素):$(div[class]).css(background-color,blue);

该功能是将含有class属性的元素取出来,然后给其背景颜色标注为蓝色。

 

源代码:

 

<%@ page language=java import=java.util.* pageEncoding=gbk%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
%>
> <script type=text/javascript src = JS/jquery-1[1].3.2.js></script><script type=text/javascript> $(function(){ //[attribute](取拥有attribute属性的元素) $(div[class]).css(background-color,blue); }); </script>
One
Two
Three

运行的结果:

 

\

 

根据Id获取属性:$(#divThee).attr(class);

该功能是将id为divThee的元素的属性class取出来。

 

源代码:

 

<%@ page language=java import=java.util.* pageEncoding=gbk%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
%>
> <script type=text/javascript src = JS/jquery-1[1].3.2.js></script><script type=text/javascript> $(function(){ //根据Id获取属性 var divAttr=$(#divThee).attr(class); alert(divAttr); }); </script>
One
Two
Three

运行的结果:

 

\

 

[attribute = value]和[attribute != value](取attribute属性值等于value或不等于value的元素):

//[attribute = value]

$(div[class=classOne]).css(background-color,blue);

$(div[class=classTwo]).css(background-color,red);

//[attribute != value]

$(div[class!=classTwo]).css(color,white);

 


源代码:
<%@ page language=java import=java.util.* pageEncoding=gbk%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+://+request.getServerName()+:+request.getServerPort()+path+/;
%>
> <script type=text/javascript src = JS/jquery-1[1].3.2.js></script><script type=text/javascript> $(function(){ // [attribute = value]和[attribute != value](取attribute属性值等于value或不等于value的元素) //[attribute = value] $(div[class=classOne]).css(background-color,blue); $(div[class=classTwo]).css(background-color,red); //[attribute != value] $(div[class!=classTwo]).css(color,white); }); </script>
One
Two
Three

运行的结果:

 

\

 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<