栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

选择器的意义就是将众多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将全部选中
www.zixue.it

www.itbool.com

这样的也会被选中 $('p ~ span').css('background' , 'gray');

www.itbool.com 像这样的span和P属于同一级别。将被选中。

基础过滤器

例:

  • 导航 1
  • 导航 2
  • 导航 3
  • 导航 4
  • 导航 5
  • 导航 6

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

$('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:empty').css('background' , 'green');

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

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

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

22

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

22

11

24

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

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

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

表单类型过滤器

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

这两个是一个性质的

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

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

可见性过滤器

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

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

子元素过滤器

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

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

a

b

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

特殊情况






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

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

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

  • 导航
  • 不能有其他标签,但是可以有内容。

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

    转载请注明:文章转载自 www.mshxw.com
    本文地址:https://www.mshxw.com/it/91736.html
    我们一直用心在做
    关于我们 文章归档 网站地图 联系我们

    版权所有 (c)2021-2022 MSHXW.COM

    ICP备案号:晋ICP备2021003244-6号