javascript选择器小结

最新推荐文章于 2022-02-15 15:01:14 发布

huangzihao100

最新推荐文章于 2022-02-15 15:01:14 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript input class css div

本文链接：https://blog.youkuaiyun.com/huangzihao100/article/details/7801635

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文深入解析了JavaScript中元素选择器、高级选择器、过滤器的使用方法及应用场景，包括ID选择器、元素选择器、类选择器、子孙选择器、孩子选择器、相邻的兄弟选择器、属性选择器等，并详细介绍了过滤器如even、odd、:has、:contains、:visible、:hidden等的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ID选择器:$('#idName')
元素选择器:$('body')
类选择器:$('.className')

高级选择器
子孙选择器:$('idName a')//idName 下的<a>
孩子选择器:$('body > p')//body 的孩子 p
相邻的兄弟:$('h1 + p')//h1的兄弟标签p
属性选择器:$('img[src]')//img的src属性
$('input[type=text]')
$('a[href^=http://]')匹配一个特定值开头的元素
$('a[href$=.pdf]')//匹配特定值结束的元素
$('a[href*=abc]')//任意位置匹配

过滤器
:even偶 :odd奇 $('table.strped tr:even').addClass('css')
:not()不拥有(可以与大多数选择器一起使用) $('a:not(.class)') $('a:not([href^=http://])')
:has() $('li:has(a)')
:contains()(包含特定文本的元素) $('input:contains(Click Me!)')
:hidden找到隐藏的元素 $('div:hidden').show()

:visible找到可见元素

另外javascript是自动循环的

如$('a.className').hide(),可以把所有<a>标签带有class=className 隐藏

.find() .text()

选择器也能作用于ajax返回的XML文件来进行查询

var tbl = document.getElementById("tbl");

var rows = tbl.getElementsByTagName("tr");

var d1 = this.d1.value;//d1是标签name