jQuery权威指南第二版学习笔记（第二章）

最新推荐文章于 2016-03-04 20:21:20 发布

_panda_

最新推荐文章于 2016-03-04 20:21:20 发布

阅读量663

点赞数 1

分类专栏： jQuery权威指南第二版学习笔记

本文链接：https://blog.csdn.net/qq_18832439/article/details/48210777

版权

jQuery权威指南第二版学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这是第二次写笔记，感觉第一次写的太冗杂这次精简一点要。

第2章　jQuery选择器
jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素属性和行为的处理。

1：选择器的优势

❑ 代码更简单。与js相比的话，jQuery的代码更加简化。一目了然。
❑ 完善的检测机制。在传统的JavaScript代码中，给页面中某元素设置事务时必须先找到该元素，然后赋予相应的属性或事件；如果该元素在页面中不存在或被前面代码所删除，那么浏览器将提示运行出错信息，影响后续代码的执行。因此，在JavaScript代码中，为了避免显示这样的出错信息，先要检测该元素是否存在，然后再运行其属性或事件代码，从而导致代码冗余，影响执行效率。在jQuery选择器定位页面元素时，无须考虑所定位的元素在页面中是否存在，即使该元素不存在该元素，浏览器也不提示出错信息，极大地方便了代码的执行效率。

2：jQuery选择器的类型
根据所获取页面中元素的不同，可以将jQuery选择器分为四大类：基本选择器、层次选择器、过滤选择器、表单选择器。其中，在过滤选择器中又可分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。其分类结构如图2-3所示

2-1.基本选择器

2-2.层次选择器

层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素，

ancestor descendant与parent＞child所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，prev+next可以使用.next()代替，而prev～siblings可以使用nextAll()代替。

2-3.简单过滤选择器

过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号（:）开头；简单过滤选择器是过滤选择器中使用最广泛的一种，其详细说明如表2-5所示。

2-4.内容过滤选择器

内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位，其详细说明如表2-7所示。

2-5.可见性过滤选择器

2-6.属性过滤选择器

2-7.子元素过滤选择器

在页面开发过程中，常常遇到突出指定某行的需求。虽然使用基本过滤选择器":eq(index)"可实现单个表格的显示，但不能满足大量数据和多个表格的选择需求。为了实现这样的功能，jQuery中可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。其详细的说明如表2-13所示。

2-8表单选择器

2-9.表单对象属性过滤选择器

3.案例分析

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>导航条在项目中的应用</title>
    <script language="javascript" type="text/javascript" 
            src="Jscript/jquery-1.8.2.min.js"></script>
    <style>
         body{font-size:13px}
         #divFrame{border:solid 1px #666;width:301px;overflow:hidden}
         #divFrame .clsHead{background-color:#eee;padding:8px;height:18px;cursor:hand}
         #divFrame .clsHead h3{padding:0px;margin:0px;float:left}
         #divFrame .clsHead span{float:right;margin-top:3px}
         #divFrame .clsContent{padding:8px}
         #divFrame .clsContent ul {list-style-type:none;margin:0px;padding:0px}
         #divFrame .clsContent ul li{ float:left;width:95px;height:23px;line-height:23px}
         #divFrame .clsBot{float:right;padding-top:5px;padding-bottom:5px}
         .GetFocus{background-color:#eee}
    </style>
    <script type="text/javascript">
            $(function(){ //页面加载事件
              $(".clsHead").click(function(){ //图片点击事件
                if($(".clsContent").is(":visible")){ //如果内容可见
                   $(".clsHead span img").attr("src","Images/a1.gif"); //改变图片
                   $(".clsContent").css("display","none"); //隐藏内容 
                }else{
                   $(".clsHead span img").attr("src","Images/a2.gif"); //改变图片
                   $(".clsContent").css("display","block");//显示内容
                }
              });
                
              $(".clsBot > a").click(function(){ //热点链接点击事件
                if($(".clsBot > a").text()=="简化"){ //如果内容为'简化'字样
                   $("ul li:gt(4):not(:last)").hide(); //隐藏index号大于4且不是最后一项的元素
                   $(".clsBot > a").text("更多"); //将字符内容更改为"更多"
                }else{
                   $("ul li:gt(4):not(:last)").show().addClass("GetFocus"); //显示所选元素且增加样式
                   $(".clsBot > a").text("简化"); //将字符内容更改为"简化"
                }
              });  
            });
    </script>
</head>
<body>
     <div id="divFrame">
         <div class="clsHead">
              <h3>图书分类</h3>
              <span><img src="Images/a2.gif" alt=""/></span>
         </div>
         <div class="clsContent">
          <ul>
             <li><a href="#">小说</a><i> ( 1110 ) </i></li>
             <li><a href="#">文艺</a><i> ( 230 ) </i></li>
             <li><a href="#">青春</a><i> ( 1430 ) </i></li>
             <li><a href="#">少儿</a><i> ( 1560 ) </i></li>
             <li><a href="#">生活</a><i> ( 870 ) </i></li>
             <li><a href="#">社科</a><i> ( 1460 ) </i></li>
             <li><a href="#">管理</a><i> ( 1450 ) </i></li>
             <li><a href="#">计算机</a><i> ( 1780 ) </i></li>
             <li><a href="#">教育</a><i> ( 930 ) </i></li>
             <li><a href="#">工具书</a><i> ( 3450 ) </i></li>
             <li><a href="#">引进版</a><i> ( 980 ) </i></li>
             <li><a href="#">其它类</a><i> ( 3230 ) </i></li>
          </ul>
         <div class="clsBot"><a href="#">简化</a><img src="Images/a5.gif" alt=""/></div>
         </div>
     </div>
</body>
</html>

3-1在页面代码中，首先通过如下代码获取类名称为"clsContent"的元素集合，并实现其内容的显示或隐藏：同时，通过下面代码变换图片：其中，".clsHead span img"表示获取类型clsHead中＜span＞下的＜img＞标记，即图片元素；attr(key,value)是jQuery中一个设置元素属性的函数，其功能是为所匹配的元素设置属性值，key是属性名称，value是属性值或内容。因此，此行代码的功能是，获取图片元素并改变其图片来源。为了能够实现单击标题后内容可以伸缩的功能，首先通过如下代码，检测当前内容的隐藏或显示状态：

3-2其中"$(".clsContent")"用于获取内容元素，"is"是判断，":visible"表示是否可见，此行代码用于判断内容元素是否可见，它返回一个布尔值，如果为true，则执行if后面的语句块，否则执行else后面的语句块。在超级链接单击事件中，通过下面的代码检测单击的是“简化”还是“更多”字样。其中"$(".clsBot＞a")"用于获取超级链接元素，text()是jQuery中一个获取元素内容的函数。此行代码的意思为，判断超级链接元素的内容是否为“简化”字样，然后根据检测结果，执行不同的语句块。在代码中，通过如下的代码实现指定内容的隐藏：其中"ul li"用于获取元素，":gt(4)"和":not(:last)"分别为两个并列的过滤选择条件，前者表示Index号大于4，后者表示不是最后一个元素，二者组合成一个过滤条件，即选Index号大于4并且不是最后一个的元素集合；hide()是jQuery中一个隐藏元素的函数。此行代码的意思为，将通过过滤选择器获取的元素隐藏。

我

_panda_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery权威指南第二版学习笔记（第二章）

这是第二次写笔记，感觉第一次写的太冗杂这次精简一点要。第2章　jQuery选择器 jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素属性和行为的处理。1：选择器的优势❑代码更简单。与js相比的话，jQuery的代码更
复制链接

扫一扫