从零开始学习jQuery-------jQuery元素选择器(三)

下面我们来介绍一下jQuery元素选择器，在Web开发中我们最常用的操作是获取元素，然后对获取的元素进行一系列的操作，jQuery根据获取页面元素的不同，可以将jQuery选择器分为四大类：基本选择器、层次选择器、过滤选择器、表单选择器，其中过滤选择器有可以分为简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤器。

jQuery基本选择器：

选择器	功能描述	返回值
#id	根据给定的ID匹配一个元素	单个元素
element	根据给定的元素匹配所有的元素	元素集合
.class	根据给定的类匹配元素	元素集合
*	匹配所有的元素	元素结合
selector，selector	将每一个匹配到的元素合并一起返回	元素集合

<body>
<div class="classframe">
    <div id="divone">divone</div>
    <div class="classone">classone</div>
    <span>SPAN</span>
    <h4>i am test</h4>
</div>

div
</body>
</html>
<script type="text/javascript">
    $(function(){
        /* 设置class为classframe的div样式 */
        $("div.classframe").css({"width":"200px","height":"200px","background-color":"gray"});
        /* 设置id为divone的div样式 */
        $("div#divone").css({"display":"block","background-color":"#f00"});
        $("div.classone").css({"display":"block","background-color":"#0f0"});
        /* 设置div元素所有的span后代元素样式 */
        $("div span").text("lyq");
        /* 设置 span，h4元素样式 */
        $("span,h4").css("background-color","yellow");
    });
</script>

效果如下：

jQuery层次选择器：

层次选择器通过DOM之间的层次关系获取元素，其主要的层次关系是后代、父子、相邻、兄弟关系，其通过获取某个元素后可以快速的获取与之相关联的元素。

选择器	功能描述	返回值
ancesor descendant	根据祖先元素匹配所有的后代元素	元素集合
parent>child	根据父元素匹配所有的子元素	元素集合
prev+next	匹配所有紧接在prev后的相邻元素	元素集合
prev~siblings	匹配所有的prev之后所有兄弟元素	元素集合

代码：

<ul id="ul1" style="">

    <li><a href=""></a>1</li>

    <li><a href=""></a>2</li>

    <li id="li3"><a href="">test</a>3</li>

    <li><a href=""></a>4</li>

    <li><a href=""></a>5</li>

    <li><a href=""></a>6</li>

    <li><a href=""></a>7</li>

</ul>

  $(function () {

        /* 设置ul元素所有的li子元素的样式 */

           $("ul li").css("font-size","28px");

        /* 设置#li3元素所有的a子元素的样式 */

           $("#li3>a").css("background-color","red");

        /* 设置#li3元素后面的li相邻元素的样式 */

           $("#li3+li").text("相邻元素");

        /* 设置#li3元素之后所有的li兄弟元素的样式 */

           $("#li3~li").css("background-color","gray");

});

效果：

过滤选择器------简单过滤选择器

过滤选择器根据某类规律规则进行元素匹配，书写时都以冒号（：）开头，简单过滤选择器是过滤选择器中使用最广泛的一种，详细规则如下。

选择器	功能描述	返回值
first()或者:first	获取第一个元素	单个元素
last()或者:last	获取最后一个元素	单个元素
:not(selector)	获取除给定选择器外的所有元素	元素集合
:even	获取所有索引值为偶数的，索引从0开始	元素集合
:odd	获取所有索引值为基数的元素	元素集合
:eq(index)	获取指定索引值得元素	单个元素
:gt(index)	获取所有大于指定索引的元素
:header	获取所有标题类的元素比如h1 h2	元素集合
:animated	获取正在执行动画效果的元素	元素集合

<ul id="test">

    <li class="item1"></li>

    <li class="item2"></li>

    <li class="item3"></li>

    <li class="item4"></li>

    <li class="item5"></li>

    <li class="item6"></li>

    <li class="item7"></li>

    <li class="item8"></li>

</ul>

  $(function () {

        /* 查找ul的所有字元素的第一个  */

        $("ul#test li:first").text("i am first");

        $("ul#test li:last").text("i am last");

        $("ul#test li:not(li.item2)").css("background-color","gray");

        $("ul#test li:even").css("background-color","red");

        $("ul#test li:odd").css("background-color","green");

        $("ul#test li:eq(4)").text(" i am 4");

    });

过滤选择器------内容过滤选择器

内容过滤选择器根据元素中的文字内容或者所包含的子元素特征获取元素，其文字内容可以模糊或者绝对匹配进行元素定位。

选择器	功能描述	返回值:
:contains(text)	获取包含给定文本的元素	元素集合
:empty	获取不包含子元素或者文本为空的元素	元素集合
:has(selector)	获取含有选择器所匹配的元素	元素集合
:parent	获取含有子元素或者有文本的元素	元素集合

<style type="text/css">

        div{

            width: 100px;

            height:20px;

        }

</style>

<div>ABCD</div>

<div><span></span></div>

<div>FH</div>

<div></div>

$("div:contains('A')").css("font-size","20px");

$("div:empty").css("background-color","yellow");

$("div:parent").css("background-color","green");

$("div:has(span)").css("background-color","red");

过滤选择器------可见性过滤选择器

可见性过滤选择器是指在页面中创建一个元素标签，如果我们将元素的display设置为none或者display时，我们可以根据可见性选择器获取元素。

功能描述	功能描述	返回值
:hidden	获取所有不可见的元素	元素集合
:visible	获取所有可见的元素	元素集合

过滤选择器------属性过滤选择器

属性过滤选择器根据元素的某个属性获取元素，如ID或者匹配属性值得内容，以“[]”表示属性。常用的属性有id、class、title等

选择器	功能描述	返回值
[attribute]	获取包含给定属性的元素	元素集合
[attribute=value]	获取等于给定属性值的元素	元素集合
[attribute!=value]	获取不等于给定属性值的元素	元素集合
[attribute^=value]	获取给定属性以某些值开始的元素	元素集合
[attribute$=value]	获取给定属性以某些值结尾的元素	元素集合
[attribute*=value]	获取给定属性以包含某些值的元素	元素集合
[attribute][attribute][attribute]	获取满足多个给定属性的元素	元素集合

比如以下几段代码，属性可以是 id class等

<div id="divid" class="divid"></div>

<div title="a" class="divid"> title a</div>

<div id="divab" title="ab" class="divab"></div>

<div title="abc">tilte abc</div>

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

  $("div[title='ab'][id='divab']").css("background-color","green");

过滤选择器------子元素过滤选择器

在页面开发过程中，常常遇到要突出某行的需求，虽然我们可以通过基本过滤器的”eq(index)”，可以实现任意一个行列的显示，但是还是不能满足大量数据和多个表格的选择需求，为了实现这样的功能，jQuery可以通过子元素过滤选择器获取父元素中指定的某个元素。

选择器	功能描述	返回值
:nth-child(eq\|even\|odd\|index)	获取每个父元素下的特定位置元素，索引号从1开始	元素集合
:first-child	获取每个父元素下的第一个元素	元素集合
:last-child	获取每个父元素下的最后一个字元素	元素集合
:only-child	获取每个父元素下的仅有一个子元素	元素集合

注意only-child只能是父元素下面只有一个字元素才能选择到。

<ul>

    <li>item0</li>

    <li>item1</li>

    <li>item2</li>

    <li>item3</li>

    <li>item4</li>

</ul>

<ul>

    <li>item5</li>

    <li>item6</li>

    <li>item7</li>

    <li>item8</li>

    <li>item9</li>

</ul>

    /*获取所有 ul下的子元素li的偶数列  */

$("ul li:nth-child(even)").css("background-color","red");

    /* 获取第一个ul元素  */

$("ul:first").css("background-color","green");

过滤选择器-------表单对象属性过滤选择器

表单对象属性过滤属性选择器通过表单中的某对象属性特征获取该类元素，如enabled,disabled,checked,selected

选择器	功能描述	返回值
:enabled	获取表单中所有属性为可用的元素	元素集合
:disabled	获取表单中所有属性为不可用的元素	元素集合
:checked	获取表单中所有属性为选中的元素	元素集合
:selected	获取表单中所有属性选中的option的元素	元素集合

表单选择器

无论是提交还是传递数据，表单在页面中的作用还是显而易见的，通过表单进行数据的提交或处理，都在前端页面中占据重要地位，为了让开发者更加方便的、高效的使用表单，jQuery选择器引入了表单选择器，该选择器专为表单量身打造，通过表单选择器可以快速的定位表单元素。

选择器	功能描述	返回值
:input	获取所有的input、textarea、select	元素集合
:text	获取所有的单行文本框	元素集合
:password	获取所有的密码框	元素集合
:radio	获取所有的单选按钮	元素集合
:checkbox	获取所有的复选框	元素集合
:submit	获取所有的提交按钮	元素集合
:image	获取所有的图像域	元素集合
:reset	获取所有的重置按钮	元素集合
:button	获取所有的按钮	元素集合
:file	获取所有的文件域	元素集合

从零开始学习jQuery-------jQuery元素选择器(三)的更多相关文章

jquery子元素选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
一个样例看清楚JQuery子元素选择器children()和find()的差别
近期在我们的hybrid app项目开发中定位出了一个问题.通过这个问题了解下JQuery选择器find()和children()的差别.问题是这种:我们的混合app是一个单页面应用(main.htm ...
jQuery层级元素选择器
第一个: 1:空格表示所有 2:> 第一层 3:+/- 同级 +:之后的第一个元素 -:之后所有同级 d 代码示例: <!DOCTYPE html PUBLIC "-//W3C/ ...
jquery1.9学习笔记之层级选择器(三)
下一个相邻选择器(“prev + next”) 描述:选择所有给出祖先选择器的子孙选择器. 例子: <!doctype html> <html lang='zh'> <h ...
前端学习 -- Css -- 兄弟元素选择器
为一个元素后边的元素设置css样式: 语法:前一个 + 后一个. 作用:可以选中一个元素后紧挨着的指定的兄弟元素. 为一个元素后边的所有相同元素设置css样式: 语法:前一个 ~ 后边所有. < ...
前端学习笔记之CSS选择器
阅读目录一基本选择器二后代选择器.子元素选择器三兄弟选择器四交集选择器与并集选择器五序列选择器六属性选择器七伪类选择器八伪元素选择器九 CSS三大特性一基本选择器 ...
从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式一.摘要本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
从零开始学习jQuery (三) 管理jQuery包装集
本系列文章导航从零开始学习jQuery (三) 管理jQuery包装集一.摘要在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...
从零开始学习jQuery (二) 万能的选择器
本系列文章导航从零开始学习jQuery (二) 万能的选择器一.摘要本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...

随机推荐

C#DataTable操作
] 在DataSet中添加DataTable DataSet.Tables.Add(DataTable) 实例: DataSet ds=new DataSet(); DataTable table=n ...
ICE学习第二步-----从第一个程序了解ICE（HelloWorld）
ICE(Internet Communications Engine)是一种面向对象的中间件平台,主要用于网络通讯.它为面向对象的“客户端-服务器”模型的应用提供了一组很好的工具和API接口.目前在全 ...
QQ弹窗代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
windows server 2012安装.net framework3.5失败解决方法
1.点击开始运行,输入 gpedit.msc,打开“组策略”2.“计算机配置”---“管理模板”---“windows 组件”---“windows 更新”,然后双击“指定 Intranet Micr ...
NSSet与NSArray区别
NSSet与NSArray区别 NSSet到底什么类型,其实它和NSArray功能性质一样,用于存储对象,属于集合: NSSet , NSMutableSet类声明编程接口对象,无序的集合, ...
ios新特征 ARC详解
IOS ARC 分类: IOS ARC2013-01-17 09:16 2069人阅读评论(0) 收藏举报目录(?)[+] 关闭工程的ARC(Automatic Reference Co ...
BZOJ 1009 GT考试
Description 阿申准备报名参加GT考试,准考证号为N位数X1X2....Xn(0<=Xi<=9),他不希望准考证号上出现不吉利的数字.他的不吉利数学A1A2...Am(0< ...
BZOJ 1014 火星人prefix
Description 火星人最近研究了一种操作:求一个字串两个后缀的公共前缀.比方说,有这样一个字符串:madamimadam,我们将这个字符串的各个字符予以标号:序号: 1 2 3 4 5 6 7 ...
Nashorn 在JDK 8中融合Java与JavaScript之力
从JDK 6开始,Java就已经捆绑了JavaScript引擎,该引擎基于Mozilla的Rhino.该特性允许开发人员将JavaScript代码嵌入到Java中,甚至从嵌入的JavaScript中调 ...
One git command may cause you hacked(CVE-2014-9390)
0x00 背景 CVE-2014-9390是最近很火的一个漏洞,一个git命令就可能导致你被黑,我不打算深入探讨这个漏洞的细节,官方已经在https://github.com/blog/1938-gi ...

从零开始学习jQuery-------jQuery元素选择器(三)

从零开始学习jQuery-------jQuery元素选择器(三)的更多相关文章

随机推荐

热门专题