当前位置:首页 > 编程教程 > jQuery技术文章 > jquery选择器大全 全面详解jquery选择器

分享jquery选择器大全

  • 发布时间:
  • 作者:码农之家
  • 点击:114

这篇文章主要知识点是关于jquery、jquery选择器、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Bootstrap与jQuery UI框架设计
  • 类型:jQuery大小:180 MB格式:PDF作者:肖睿//吴振宇
立即下载

jquery选择器大全 全面详解jquery选择器

选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似。选择器具有如下特点:
1.简化代码的编写
2.隐式迭代
3.无须判断对象是否存在
其中“$”是选择器不可缺少的部分,在jQuery库中,$就是jQuery的一个简写形式,比如$("#foo")和jQuery("#foo")是等价的,$.ajax和jQuery.ajax是等价的。如果没有特别说明,可以把程序中的$符号都理解为jQuery的简写形式。
现在我们正式进入jQuery选择器的学习。根据选择器的功能习惯将选择器进行分类,下面将不同类型的分类器进行分类,并且分别进行解释说明,使读者达到掌握程度。
一、基本选择器
基本选择器包括5种选择器:#id、element、.class、*和selectorl,selector2.selectorN,下面将配合实例分别介绍每种选择器的作用及使用方法。
1.#id选择器
#id选择器根据给定的ID匹配一个元素。如果选择器中包含特殊字符,可以用两个斜杠转义,其返回值为Array<Element>。
2.element选择器
element选择器是一个用于搜索的元素。指向DOM节点的标签名。其返回值为Array<Element(s)>。
3.class选择器
.class选择器根据给定的类匹配元素,是一个用以搜索的类。一个元素可以有多个类,只要有一个符合就能被匹配到,其返回值为Array<Element(s)>。

举例:

 

<input type="text" id="ID" value="根据ID选择" />
<a>根据元素名称选择</a>
<input type="text" class="classname" value="根据元素css类名选择" />
jQuery("#ID").val();
jQuery("a").text();
jQuery(".classname").val();

即可分别得到元素的值。以上三种为最常见的选择器,其中ID选择器是效率最高的,在可能的情况下应该尽量使用它。

 

4.*选择器
*选择器多用于结合上下文来搜索,匹配所有元素的选择器。其返回值为Array<Element(s)>。
5.selector1,selector2,selectorN选择器
这类选择器选择器即将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内,其返回值为:Array<Element(s)>。在下例中通过对选择的项进行CSS操作来使读者清晰地了解selector1,selector2,selectorN选择器的作用。
二、层级选择器
层级选择器包括5种形式:ancestor、descendant、parent > child、prev + next和prev ~ siblings。下面配合实例分别详细介绍每种选择器的作用及使用方法。
1.ancestor descendant选择器
其指在给定的祖先元素下匹配所有的后代元素,作为参数的ancestor代表任何有效的选择器,而descendant则用以匹配元素的选择器,并且它是第一个选择器的后代。其返回值为:Array<Element(s)>。
2.parent>child选择器
parent>child选择器代表在给定的父元素下匹配所有的子元素。两个参数分别代表的意思如下:parent代表任何有效选择器;child用以匹配元素的选择器,并且它是第一个选择器的子元素。其返回值为Array<Element(s)>。
3.prev+next选择器
这类选择器的作用是匹配所有紧接在prev元素后的next元素。两个参数分别代表的意思如下:prev代表任何有效选择器;next代表一个有效选择器并且紧接着第一个选择器。其返回值为Array<Element(s)>。
4.prev ~ siblings选择器
prev ~ siblings选择器代表匹配prev元素之后的所有siblings元素。两个参数分别代表的意思如下:prev代表任何有效选择器;siblings代表一个选择器,并且它作为第一个选择器的同辈。其返回值为Array<Element(s)>。

举例:

 

<div id="divTest">
        <input type="text" value="投资" />
        <input id="next" type="text" />
        <input type="text"  value="担当" />
        <input type="text" title="学习" value="学习" />
        <a>1</a>
        <a>2</a>
</div>
//得到div中的a标签内容 结果为12
jQuery("#divTest a").text();
//输出div直接子节点 结果为投资
jQuery("#divTest>input").val();
//输出id为next的后一个同级别元素 结果为担当
jQuery("#next+input").val();
//同上,并且是有title的元素 结果为学习
jQuery("#next~[title]").val();

三、过滤选择器
过滤选择器主要通过特定的过滤规则来筛选出所需要的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号开头。
过滤选择器涉及的内容较多,总共有6 种类型,但是其可以进行归类。下面我们将对各种类型的选择器进行详细讲解。
1.基本过滤选择器
基本过滤选择器是过滤选择器中最常用的一种,其主要包括以下几种形式,在此做详细说明:
(1):first/:last选择器。
(2):not选择器。
(3):even和:odd选择器。
(4):eq:gt、:lt、选择器。
(5):header选择器。
(6):animated选择器。
举例:
 

<div id="divTest">
    <ul>
        <li>投资</li>
        <li>理财</li>
        <li>成熟</li>
        <li>担当</li>
        <input type="radio" value="学习" checked="checked" />
        <input type="radio" value="不学习" />
    </ul>
</div>
//第一个li内容 结果为投资
jQuery("li:first").text();
//最后一个li内容 结果为担当
jQuery("li:last").text();
//input未被选中的值 结果为不学习
jQuery("li input:not(:checked)").val();
//索引为偶数的li 结果为投资 成熟
jQuery("li:even").text();
//索引为奇数的li 结果为理财 担当
jQuery("li:odd").text();
//索引大于2的li的内容 结果为担当
jQuery("li:gt(2)").text();
//索引小于1的li的内容 结果为投资
jQuery("li:lt(1)").text();

2.内容过滤选择器
内容过滤选择器主要包括:contains、:empty、:has、:parent 4种过滤器,这部分过滤器是对上面介绍基本过滤选择器的一个补充,对于页面选取、设置元素显示等方面发挥着重要的作用。下面将对各选择器进行详细的介绍。
(1):contains选择器。
(2):empty选择器。
(3):has选择器。
(4):parent选择器。

 

举例:

 

<div id="Test">
    <ul>
        <li>hyip投资</li>
        <li>hyip</li>
        <li></li>
        <li>理财</li>
        <li><a>投资</a></li>
    </ul>
</div>  
//包含hyip的li的内容 结果为hyip投资 hyip
jQuery("li:contains('hyip')").text();
//内容为空的li的后一个li内容 结果为理财
jQuery("li:empty+li").text();
//包含a标签的li的内容 结果为投资
jQuery("li:has(a)").text();

3.可见性过滤选择器
可见性过滤选择器比较简单,其包含两种选择器,主要是用来匹配所有可见元素和不可见元素。下面将会对这两种选择器进行详细介绍。
(1):hidden选择器。
(2):visible选择器。

 

举例:

 

<ul>
    <li>可见</li>
    <li >不可见</li>
</ul>
//不可见的li的内容 结果为不可见
jQuery("li:hidden").text();
//可见的li的内容 结果为可见
jQuery("li:visible").text();

4.属性过滤选择器
属性过滤选择器是用于匹配包含给定属性的元素,当然也可以匹配不包含此属性的元素等。属性过滤选择器共含有以下7种选择器。
(1) [attribute]选择器。
(2)[attribute=value]、[attribute!=value]选择器(此处包含两种)。
(3)[attribute^=value]、[attribute$=value]、[attribute*=value]选择器(此处包含三种)。
(4)[selector][selector2]选择器。
举例:
 

<input type="text" name="hyipinvest" value="hyip投资" />
<input type="text" name="investhyip" value="投资hyip" />
<input type="text" name="google" value="HYIP" />
//name为hyipinvest的值 结果为hyip投资
alert(jQuery("input[name='hyipinvest']").val());
//name以hyip开始的值 结果为hyip投资
alert(jQuery("input[name^='hyip']").val());
//name以hyip结束的值 结果为投资hyip
alert(jQuery("input[name$='hyip']").val());
//name包含oo的值 结果为HYIP
alert(jQuery("input[name*='oo']").val());

5.子元素过滤选择器
html由层层嵌套在一起的标签组成,由于一些标签需要进行单独处理,如何选取一个或者一些特定的嵌套标签在程序中就成为了一个问题。jQuery提供了子元素过滤选择器解决了这个问题。它包括4个选择器,具体内容将在下面详细讲解。
(1):nth-child选择器。
(2):first-child、:last-child选择器(两种)。
(3):only-child选择器。
6.表单对象属性过滤选择器
这部分内容相当简单,只包含四种类型的选择器,这些选择器分别用来匹配可用元素或者不可用元素、选中元素等。下面将以实例的形式对此部分内容进行讲解。
(1):enabled、:disabled选择器。
(2):checked选择器。
(3):selected选择器。
表单过滤选择器是用于处理html中表单的选择器,其中不仅仅包括经常用到的按钮、文本域、单选框、复选框等,还涉及了很少用到的图片、隐藏域、文件上传等标签。下面将会对这些选择器进行具体介绍。
(1):input选择器。
(2):text、:password选择器。
(3):radio、:checkbox选择器。
(4):submit、:image、:reset、:button、:file选择器。
(5):hidden选择器。

 

Query选择器就总结到这里,这些基本上都是在学习过程中遇到的,还有极少部分没有总结出来。经过一段时间实践,相信大家就能够熟练的使用jQuery选择器了。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.958676

介绍jquery层级选择器、过滤选择器

$(ancestor descendant):选取parent元素后所有的child元素 $(parent child):选取parent元素后所有的直属child元素,何谓直属,也就是第一级的意思了 $(prev + next):prev和next是两个同级别的元素. 选中在prev元素后面的next元素 $(prev ~ siblings):选择prev后面的根据siblings过滤的元素。注:siblings是过滤器 后两个用的比较少,一般会有其他选择器替代 $(prev + next)等价于next() $(prev ~ siblings)等价于nextAll() 实例: style type=text/css /*高亮显示*/ .highlight{ background-color: gray } /style body div p id=p1第一个DIV里面的P元素。/p /div p id=p2第一个单P元素。/p div spanDIV里面的SPAN元素。/span p id=p3第二个DIV里面的P元素。/p span p id=p4DIV里面的SPAN里面的P元素。/p /span /div table tr thA/ththB/ththC/th /tr tr td1/tdtd2/tdtd3/td /tr /table p id=p5第二个单P元素。/p span单SPAN元素。/span /body var s = $(div p).addClass(highlight); //选取div后面……

网友NO.206595

JQuery选择器、过滤器大整理

经过一晚上的查找整理,终于整理出一套应该算最全面的JQuery选择过滤器的方法了。所有代码均经过测试。 首先HTML代码 复制代码 代码如下: HTML Code html head script type="text/javascript" src="JQuery/jquery-1.5.1.js"/script /head body form name="form1" id="form1" class="form1" action="" method="post" table name="table1" id="table1" class="table1" tr name="tr1" id="tr1" class="tr1" td name="td11" id="td11" class="td11" nowrap input type="text" name="text11" id="text11" class="text11" value="text11"/ input type="button" name="button11" id="button11" class="button11" value="button11"/ /td td name="td12" id="td12" class="td12" input type="text" name="text12" id="text12" class="text12" value="text12"/ input type="hidden" name="hidden12" id="hidden12" class="hidden12" value="hidden12"/ /td td name="td13" id="td13" class="td13" input type="text" name="text13" id="text13" class="text13" value="text13"/ /td /tr tr name="tr2" id="tr2" class="tr2" t……

网友NO.364617

jQuery选择器简明总结(含用法实例,一目了然)

本文现在对所有已知的 jquery 选择器做一个总结,深刻而熟练的掌握这些选择器,对我们快速的写各种 jquery 效果大有帮助!下面就对 jquery 各种选择做一个罗列吧!由于 jquery 用法非常简单,这里就不再举各种例子加深理解了。 选择器 实例 选取 * $("#item *") 选择 id 属性为 item 下的所有元素 # id $("#lastname") id="lastname" 的元素 . class $(".intro") 所有 class="intro" 的元素 element $("p") 所有 p 元素 . class . class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素 :first $("p:first") 第一个 p 元素 :last $("p:last") 最后一个 p 元素 :even $("tr:even") 所有偶数 tr 元素 :odd $("tr:odd") 所有奇数 tr 元素 :next $('.item').next('div') class为 item 的下一个 div 兄弟元素,等价于 $('.item + div') :prev $('.item').prev('div') class为 item 的上一个 div 兄弟元素 :nextAll $('.item').nextAll('div') class 为 item 之后的所有的 div 兄……

网友NO.216209

jQuery选择器选中最后一个元素,倒数第二个元素操作示例

本文实例讲述了jQuery选择器选中最后一个元素,倒数第二个元素操作。分享给大家供大家参考,具体如下: HTML部分: div p元素1/p p元素2/p p元素3/p p元素4/p p元素5/p/div 取倒数第二个p元素 $("div p").eq(-2) 取最后一个p元素 $("div p").last() 完整测试示例代码如下: !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"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /titlewww.jb51.net jQuery选择器/titlestyle.red{color:#FF0000;}.blue{color:#0000FF;}/style/headbodyscript src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"/scriptscript type="text/javascript"$(document).ready(function(){$("div p").eq(-2).addClass('red');//倒数第二个p元素$("div p").last().addClass('blue');//最后一个p元素});/scriptdiv p元素1/p p元素2/p p元素3/p p元素4/p p元素5/p/div/body/html 这里使用……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com