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才会显示红色
文章图片
3. 根据DOM元素类型选择元素
只需修改代码2中的部分代码为下面的代码即可
$("div").addClass("class1");
显示结果如下图,全部div元素的内容都显示红色
文章图片
4. 根据层级选择元素
在div元素中包含有超链接a元素,默认的超链接元素是有下划线的,如下图
文章图片
【JQuery|JQuery选择器】现在希望通过选择器定位到a元素然后将其下划线显示去掉
.class1
{
color:red;
}.class2
{
text-decoration:none;
}
Welcome to JQuery!
Welcome to JQuery!
Welcome to JQuery!
经过这样处理后显示结果如下:
文章图片
5. 根据位置选择DOM元素
经常会看到一些报表显示记录的时候奇偶行的底色是相间的,这样看起来让人很舒服,通过选择器就可以做到
.class1
{
width:100px;
text-align:center
}
大众 德国
别克 美国
红旗 中国
现代 韩国
显示效果:
文章图片
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 事件代理
- jQuery插件
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- javascript|javascript 性能测试笔记
- 进阶任务十四
- HTML5新增选择器属性方法
- jQuery之trigger()方法
- CSS笔记
- jQuery中的DOM操作