jQuery常见的选择器及用法介绍

2024-11-26 13:43:02

选择器的意义就是将众多html代码中准确的找出我们想找的单元。

接下来将常见的选择器以及作用列举出来。

基本选择器

$('#test1').css('background' , 'gray');
可以找到id = test1的单元。
$('p').css('background' , 'blue');
所有的P标签都会被选中。
 $('.test2').css('background' , 'green');
Class = test2的单元全部被选中。
 $('*').css('background','pink');
*指的就是所有元素，慎用。

层次选择器

$('div span').css('background' , 'orange');
div下的span将全部选中
<div><span>www.zixue.it</span></div>
<div><p><span>www.itbool.com</span></p></div>
这样的也会被选中
$('p ~ span').css('background' , 'gray');
<div><p></p><span>www.itbool.com</span></div>
像这样的span和P属于同一级别。将被选中。

基础过滤器

例：

<ul>
<li> 导航 1</li>
<li> 导航 2</li>
<li> 导航 3</li>
<li> 导航 4</li>
<li> 导航 5</li>
<li> 导航 6</li>
</ul>

例如这样的，你想细致到具体的某一个。则需要加上特殊的说明

$('li:first').css('background','red');

找第 1 个

$('li:odd').css('background','blue');

找第奇数个 , 从 0 计数这里有一个细节，就是我们通常认为的第一个，在这里认为成第0个，就是说如果用这个的话，则是我们经常输出来的2 4 6 8个将被选中。换成even则是选出所有偶数的li了

$('li:eq(2)').css('background' , 'purple');

同上选出第二个，就是我们通常所属的第三个。

内容过滤器

可以通过内容找到要找的目标

$('td:contains(" 女 ")').css('background' , 'blue');

可以选出内容是女的单元

<td> 女 </td>

但是不会选出

<td> 赵云女 </td>

这样的

$('td:empty').css('background' , 'green');

Empty是空的意思，所以内容为空的都会选出来，但是，如果内容内有空格的话，就不会选中了

$('td:has(span)').css('background' , 'pink');

td里含有某元素的话，就会被找出来。

<td><span>22</span></td>

被选中的，则整个td都会被选中。比如这样的

<td><span>22</span><p>11</p>24</td>

不是改变span而是改变td这个单元。

$('p:parent').css('background' , 'black');

单元里面有东西的都会被选中，但是空格不算。

表单类型过滤器

$('input[type="text"]').css('background' , 'gray');
$('input:text').css('background' , 'blue');

这两个是一个性质的

<input type="text" />

选中input里的type属性作为目标。

其他属性password则替换text就可以了同理。

可见性过滤器

$('div:hidden').css('display','block');

利用触发器，可以选中原本display属性为hidden的div。

子元素过滤器

$('p:last-of-type').css('background','gray');

可以选中同一级别下最后一个P标签。

<div><p>a</p><p>b</p></div>

这样的话，含有b的p标签就会被涂上颜色。

特殊情况

<div></div>
<div class='a1'>
<div></div>
<div></div>
<div class='a2'></div>
</div>

两个有class名的div会被产生作用。

$('li a:only-child').css('background','blue')

匹配 li 下作为独生子的 a 标签。例如

<li><a href=""> 导航 </a></li>

不能有其他标签，但是可以有内容。

以上所述是小编给大家介绍的jQuery常见的选择器及用法介绍，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

jquery 属性选择器（匹配具有指定属性的元素）

jQuery 选择器在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素. jQuery 元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择. 选择器允许您对 HTML 元素组或单个元素进行操作. 在 HTML DOM 术语中: 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("
详解jQuery选择器

大致介绍终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档
jQuery四种选择器使用及示例

jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 <p> 元素. $("p#demo") 选取所有 id="demo" 的 <p> 元素. 示例代码: jquery 部分 $(document).ready(function(){/
jQuery基本选择器之标签名选择器

废话不多说了,直接给大家贴代码了,关键代码如下所述: <!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> <tit
jQuery选择器总结之常用元素查找方法

选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点: 1．简化代码的编写 2．隐式迭代 3．无须判断对象是否存在 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $
jQuery中Find选择器用法示例

本文实例讲述了jQuery中Find选择器用法.分享给大家供大家参考,具体如下: find 可以查找指定节点下的节点,它是会递归查找的,即可以查找子节点的子节点示例如下: function CalculatePrice() { var totalMoney = 0; $(".trBookCartItem").each(function (index, item) { var price = $(item).find(".spanPrice").text(); va
浅析jQuery事件之on()方法绑定多个选择器,多个事件

$(document).on('click', '#header .top, #main .btn', function () { // code... }); on()方法绑定多个事件 $("table.planning_grid").on({ mouseenter: function() { // Handle mouseenter... }, mouseleave: function() { // Handle mouseleave... }, click: function()
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载

我们经常会应用到日期和时间选择器,之前我们使用最多的是jQuery UI的datepicker(),那么今天我给大家介绍一款非常有趣的日期和时间选择器,它分为日期选择器datedropper以及时间选择器timedropper,他们俩尤其适合在移动端上应用. 在线演示源码下载日期选择器datedropper 使用非常简单,分三步, 1.引入相关js和css文件.注意datedropper和timedropper都是基于jQuery的插件,所以也要引入jQuery库文件. <scr
jQuery中的通配符选择器使用总结

jquery选择器中的通配符经常用到,大致的用法总结如下: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']");//id属性以code结束的所有input标签 $("input[id*='code']");//id属性包含code的所有input标签 $("input[name^='code']");//name属性以code开始的所有in
jQuery常见的选择器及用法介绍

选择器的意义就是将众多html代码中准确的找出我们想找的单元. 接下来将常见的选择器以及作用列举出来. 基本选择器 $('#test1').css('background' , 'gray'); 可以找到id = test1的单元. $('p').css('background' , 'blue'); 所有的P标签都会被选中. $('.test2').css('background' , 'green'); Class = test2的单元全部被选中. $('*').css('backgroun
jQuery中复合选择器简单用法示例

本文实例讲述了jQuery中复合选择器简单用法.分享给大家供大家参考,具体如下: 一介绍复合选择器将多个选择器(可以是ID选择器.元素选择或是类名选择器)组合在一起,两个选择器之间以逗号","分隔,只要符合其中的任何一个筛选条件就会被匹配,返回的是一个集合形式的jQuery包装集,利用jQuery索引器可以取得集合中的jQuery对象. 多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素,而是将每个选择器匹配的元素合并后一起返回. 复合选择器的使用方法如下: $(&
jQuery中元素选择器（element）简单用法示例

本文实例讲述了jQuery中元素选择器(element)简单用法.分享给大家供大家参考,具体如下: 一.介绍元素选择器是根据元素名称匹配相应的元素. 通俗的讲元素选择器指向的是DOM元素的标记名,也就是说元素选择器是根据元素的标记名选择的. 可以把元素的标记名理解成学生的姓名,在一个学校中可能有多个姓名为"刘伟"的学生,但是姓名为"吴语"的学生也许只有一个,所以通过元素选择器匹配到的元素可能有多个,也可能是一个. 多数情况下,元素选择器匹配的是一组元素. 元素选择
jQuery内容过滤选择器用法示例

本文实例讲述了jQuery内容过滤选择器用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="tex
jQuery可见性过滤选择器用法示例

本文实例讲述了jQuery可见性过滤选择器用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title>  <script src="js/jquery-1.10.1.mi
jQuery基本过滤选择器用法示例

本文实例讲述了jQuery基本过滤选择器用法.分享给大家供大家参考,具体如下: <!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"> <hea
jQuery内容过滤选择器与子元素过滤选择器用法实例分析

本文实例讲述了jQuery内容过滤选择器与子元素过滤选择器用法.分享给大家供大家参考,具体如下: jQuery的内容过滤选择器一.:contains(text) 选择器::contains(text) 描述:匹配包含给定文本的元素返回值:元素集合示例: $("div.mini:contains('div')") //div.mini是DOM元素集合,:contains('div')是过滤条件二.:has(selector) 选择器::has(selector) 描述:匹配含有选
jQuery分组选择器简单用法示例

本文实例讲述了jQuery分组选择器简单用法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery分组选择器</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js
jQuery中:enabled选择器用法实例

本文实例讲述了jQuery中:enabled选择器用法.分享给大家供大家参考.具体分析如下: 此选择器可以选取所有可用的元素. 语法结构: 复制代码代码如下: $(":enabled") 此选择器一般也要和其他选择器配合使用,比如类选择器.元素选择器等等.例如: 复制代码代码如下: $("input:enabled").css("background-color","red") 以上代码能够将可用的input元素的背景颜色

jQuery常见的选择器及用法介绍

相关推荐

随机推荐