JQuery|JQuery选择器

JQuery选择器顾名思义就是通过选择器选中相应的DOM元素执行需要的操作,JQuery选择器的强大之处还在于它支持连缀,也就是说一条语句可以连续使用多个选择器执行多次操作,这样保证了代码的简洁性,更提高了代码的使用效率。

1. 使用ID选中DOM元素
代码1


.class1 { color:red; } Welcome to JQuery!

2. 使用类选择多个DOM元素 代码2


.class1 { color:red; } Welcome to JQuery! Welcome to JQuery! Welcome to JQuery!


显示结果如下图,只有含有class的div才会显示红色 JQuery|JQuery选择器
文章图片

3. 根据DOM元素类型选择元素
只需修改代码2中的部分代码为下面的代码即可

$("div").addClass("class1");


显示结果如下图,全部div元素的内容都显示红色 JQuery|JQuery选择器
文章图片


4. 根据层级选择元素
在div元素中包含有超链接a元素,默认的超链接元素是有下划线的,如下图
JQuery|JQuery选择器
文章图片

【JQuery|JQuery选择器】现在希望通过选择器定位到a元素然后将其下划线显示去掉

.class1 { color:red; }.class2 { text-decoration:none; } Welcome to JQuery! Welcome to JQuery! Welcome to JQuery!

经过这样处理后显示结果如下: JQuery|JQuery选择器
文章图片

5. 根据位置选择DOM元素
经常会看到一些报表显示记录的时候奇偶行的底色是相间的,这样看起来让人很舒服,通过选择器就可以做到

.class1 { width:100px; text-align:center }
大众德国
别克美国
红旗中国
现代韩国

显示效果: JQuery|JQuery选择器
文章图片





    推荐阅读