[置顶] jQuery选择器-综合案例
2017-08-13 11:49
183 查看
综合案例
这是一个综合的案例,主要就是展示选择器的使用,案例中的选择器是相对比较复杂的,很多时候我们不需要写这么复杂的选择器,但是案例是为了展示整个选择器的知识点的运用右边是一段文本,我们通过不同的选择器给指定的文字赋予颜色
分析一段复杂的选择器:
$("#menu_con div.tag dd > p:first-child")
这段组合的选择器表达式用到了几个之前学到的选择器:ID、Class、元素、层级、子元素筛选器
当用到筛选器 :first-child的时候我们就知道了,这肯定是一组合集,意味着p元素是有多个,而且是分布在不同父元素dd里面的
圈圈中就是选择器对应的选择到的元素:
这个选择器其实挺复杂的,现实的开发中,我们应该要避免出现这么冗余繁琐的选择器,可以最简单的在a元素的父元素上加一个id,或者class直接定位即可。当然这样的处理可能无形中可能要多出一个无意义的属性了
PS:本节主要是对选择器使用的练习,有其他需后期学到的知识提前出现,童鞋们可以酌情去研究和思考。
任务
分别在66、73、79、85、90行填写对应的代码使其效果如下图:<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery标签切换效果</title> <link rel="stylesheet" href="imooc.css" type="text/css"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <!--代码部分begin--> <div id="menu"> <!--tag标题--> <div id="menu_female"> <h3>女装</h3> <div class="tag" style="display: block;"> <dl> <dd> <p>第一类</p> <a>1.衬衫</a> <a>2.T恤</a> <a>3.雪纺衫</a> <a>4.针织衫</a> <a>5.短外套</a> <a>6.卫衣</a> <a>7.小西裤</a> <a>8.风衣</a> <a>9.吊带背心</a> <a>10.连衣裙</a> <a name="setColor">11.蕾丝连衣裙</a> <a>12.复古连衣裙</a> <a>13.印花连衣裙</a> <a>14.真丝连衣裙</a> <a>更多</a> </dd> </dl> </div> <div class="tag_More" style="display:block"> <dl> <dd> <p>第二类</p> <a>1.背带裤</a> <a>2.哈伦裤</a> <a>3.牛仔裤</a> <a>4.休闲裤</a> <a>5.小脚裤</a> <a>6.西装裤</a> <a>7.打底裤</a> <a>8.阔脚裤</a> <a>9.短裤</a> <a>10.马甲/背心</a> <a>11.羽绒服</a> <a>12.棉服</a> <a>13.夹克</a> <a>14.POLO衫</a> <a>更多</a> </dd> </dl> </div>> </div> <div id="menu_con"> <h3>男装</h3> <div class="tag" style="display:block"> <dl> <dd> <p>第一类</p> <a>1.衬衫</a> <a>2.T恤</a> <a>3.牛仔裤</a> <a>4.休闲裤</a> <a>5.短裤</a> <a>6.针织衫</a> <a>7.西服</a> <a>8.西裤</a> <a>9.嘻哈裤</a> <a>10.西服套装</a> <a>11.马甲/背心</a> <a name="setColor">12.羽绒服< cd0f ;/a> <a>13.棉服</a> <a>14.夹克</a> <p>更多</p> </dd> </dl> </div> <div class="tag_More" style="display:block"> <dl> <dd> <p>第二类</p> <a>1.衬衫</a> <a>2.T恤</a> <a>3.牛仔裤</a> <a name='setColor'>4.休闲裤</a> <a>5.短裤</a> <a>6.针织衫</a> <a>7.西服</a> <a>8.西裤</a> <a>9.嘻哈裤</a> <a>10.西服套装</a> <a>11.马甲/背心</a> <a>12.羽绒服</a> <a>13.棉服</a> <a>14.夹克</a> <p>更多</p> </dd> </dl> </div>> </div> </div> <script type="text/javascript"> //找到男装下第一类衣服中的第一个p元素,并改变颜色 //可以通过子类选择器 p:first-child 筛选出第一个p元素 $("#menu_con div.tag dd > p:first-child").css('color','#9932CC'); </script> <script type="text/javascript"> //找到男装下第一类衣服把a元素从顺序1-4加上颜色 //可以通过基本筛选器lt,选择匹配集合中所有索引值小于给定index参数的元素 //注意了index是从0开始计算,所以选在1-4,为对应的index就是4 $("#menu_con >div:first dd:eq(0) > a:lt(4)").css('color','red'); </script> <script type="text/javascript"> //找到男装所有a元素中属性名name="setColor"的元素,并设置颜色 //这里用的属性选择器[attribute='value']选择指定属性是给定值的元素 $("#menu_con a:[name='setColor]").css('color','blue'); </script> <script type="text/javascript"> //不分男女,选中第一类衣服中第9个a元素,并改变颜色 //这里用了nth-child 选择的他们所有父元素的第n个子元素 $("#menu div.tag dd a:nth-child(10)").css('color','#66CD00'); </script> <script type="text/javascript"> //找到女装下第一类衣服,把a元素中包含文字"更多"的节点,改变颜色 $(".tag:first a:comtains('更多')").css('color','#C71585'); </script> </body> </html>
相关文章推荐
- [置顶] Java面向对象-String类综合案例
- [置顶] 国内外GIS基础软件对比分析优缺特性及实际工作生产应用和成功案例综合评价
- 对象综合案例
- 配置三层交换的综合案例
- MaterialDesign下的多个UI框架的综合案例详解
- [置顶] Spring MVC的简单案例报错:警告: No mapping found for HTTP request with URI [/springMVC/hello2] in DispatcherSe
- Cisco实战配置三层交换的综合案例
- ospf综合案例解析
- DOM综合案例、SAX解析、StAX解析、DOM4J解析
- 第108讲: Spark Streaming电商广告点击综合案例动态黑名单过滤真正的实现代码
- Excel函数/图表应用技巧与综合案例操作
- 2013下半年(11月)信息系统项目管理师考试题型分析(综合知识、案例分析、论文)
- 湖北联通的综合营帐数据同步应用--案例
- 综合案例-数据库的创建和删除
- Cisco实战-配置三层交换的综合案例
- Samba服务器和vsftpd服务器综合应用案例
- android头像相册/拍照选取,裁剪及上传综合案例
- 三层交换与路由的综合配置经典案例2
- [置顶] 读书笔记之《格蠹汇编-软件调试案例集锦》
- [置顶] 史上最全的安卓修炼之路Android开发视频教程安卓软件游戏开发视频教程+案例项目源码