《jquery权威指南》学习笔记

huiyinimen

于 2020-07-30 17:36:33 发布

阅读量284

点赞数

分类专栏：学习笔记前端

学习笔记同时被 2 个专栏收录

7 篇文章 1 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

《jquery权威指南》学习笔记

作者陶国荣 tao_guo_rong@163.com

jQuery开发入门

jQuery概述

jQuery是集JavaScript，css，DOM，Ajax于一体的强大的框架体系，它的主旨是：以更少的代码，实现更多的功能（Write less，do more)

jQuery基本功能

1.访问和操作DOM元素

使用jquery库，可以很方便的获取和修改页面中的元素，无论是删除，移动，还是复制某元素。

2.控制页面样式

jquery操作页面样式可以很好的兼容各种浏览器

3.对页面事件的处理

引入jquery库后，可以是页面的表现层和功能开发分离。

4.大量插件在页面中的运用

引入jquery库后，可以使用大量的插件来完善页面的功能和效果，如表单插件，UI插件

5.与Ajax技术的完美结合

搭建jQuery开发环境

1.在jQuery的官方网站（http://jquery.com)中，下载最新版本的jQuery文件库。

2.引入jQuery文件库

下载完jQuery框架文件后，并不需要任何安装，仅需要使用

<head>
    <script language="javascript" type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
</head>

加入上述代码后，便完成了jQuery框架的引入。

编写第一个简单的jQuery应用

首先，我们来编写一个简单的程序。示例：

1.功能描述

在页面加载时，弹出一个模式对话框，显示“您好，欢迎来到jquery世界”字样，点击“确定”按钮后关闭该窗口

2.实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery学习</title>
    <script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            alert("您好，欢迎来到jQuery世界");
        })
    </script>
</head>
<body>
</body>
</html>

上述文件代码中有一段如下的代码：

$(document).ready(function(){
    //程序段
})
该段代码类似于传统的JavaScript代码：

window.onload=function(){
    //程序段
}

虽然上述两端代码在功能上可以互换，但他们之间又有许多区别：

1.执行事件不同：

$(document).ready 在页面框架下载完毕后就执行。而window.onload必须在页面全部加载完毕（包含图片下载）后才能执行。前者的执行效率高于后者。

2.执行数量不同：

$(document).ready 可以重复多多个，并且每次执行结果不同；而window.onload尽管可以执行多个，但仅输出一个执行结果，无法完成多个结果的输出。

3. $document).ready(function(){})可以简写成$ (function(){})

jQuery程序的代码风格

1."$"美元符的使用

在jquery程序中，无论是页面元素的选择，功能函数的前缀都必须使用该符号

2.事件操作链接式书写

在编写页面某元素事件时，jQuery程序可以使用连接式的方式编写该元素的所有事件。

jQuery事件的链式写法

1.功能描述

在页面中，有一个div标记，在该标记内，包含第二个div标记，一个为主题，另一个为内容，页面首次加载时，被包含的内容div标记是不可见的，当用户单击主题div标记时，改变自身的背景色，并将内容div标记显示出来。

2.实现代码

代码如下：

当用户单击class名称为"divTitle"的元素时，自身增加名称为”divCurrColor“的样式，同时，接下来的class名称为”divContent“元素显示出来，可以看出，两个功能的实现通过**”.“**符号链接在一起。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery时间的链式写法</title>
    <script language="javascript" type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>

    <style type="text/css">
        .divFrame{
            width:260px;
            border:solid 1px #666;
            font-size:10pt
        }
        .divTitle{
            background-color:#eee;
            padding:5px
        }
        .divContent{
            padding:5px;
            display:none
        }
        .divCurrColor{
            background-color:Red
        }
    </style>

    <script type="text/javascript">
        $(function(){
           $(".divTitle").click(function(){
               $(this).addClass("divCurrColor")
                   .next(".divContent").css("display","block");
           });
        });
    </script>
</head>
<body>
<div class="divFrame">
    <div class="divTitle">主题</div>
    <div class="divContent">
        <a href="#">链接1</a><br/>
        <a href="#">链接2</a><br/>
        <a href="#">链接3</a>
    </div>
</div>

</body>
</html>

3.效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g8KU9YtD-1596101309717)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1576651964002.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UYz1A95a-1596101309720)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1576651996378.png)]

jQuery的简单应用

jQuery访问DOM对象

1.什么是DOM对象

DOM（文本对象模型）是每一个页面都是一个DOM对象，通过传统的JavaScript方法访问页面中的元素，就是访问DOM元素。

如，在页面中2个div标记元素，其代码如下：

<div id="divTmp">测试文本</div>
<div id="divOut"></div>

通过下面的JavaScript代码可以访问DOM对象和获取或设置其内容值：

var tDiv=document.getElementById("divTmp"); //获取DOM对象
var oDiv=document.getElementById("divOut"); //获取DOM对象
var cDiv=tDiv.innerHTML; //获取DOM对象中的内容
oDiv.innerHTML=cDiv; //设置DOM对象中的内容

//如果执行上面的代码，将在ID为"divOut"的标记中显示ID为"divTmp"的标记内容。

2.什么是jQuery对象

在jQuery库中，通过本身自带的方法获取页面元素的对象，我们成为jQuery对象。

实现在ID为“divOut”的标记中显示ID为“divTmp”的标记内容，采用jQuery访问页面元素的方法，其实现的代码如下：

var tDiv=$("divTmp");  //获取jQuery对象
var oDiv=$("divOut");  //获取jQuery对象
var cDiv=tDiv.html();  //获取jQuery对象中的内容
oDiv.html(cDiv);  //设置jQuery对象中的内容

通过代码对比，jQuery对象访问方法比DOM对象访问方法更简单。

jQuery控制DOM对象

如何用传统的JavaScript方法访问DOM对象

控制DOM对象

1.功能描述

在页面中输入姓名，性别和婚姻状况，单击“提交”按钮后，将获取到的数据信息显示在页面div标记中。

2.实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制DOM对象</title>
    <style type="text/css">
        .divFrame {
            width: 260px;
            border: solid 1px #666;
            font-size: 10pt
        }

        .divTitle {
            background-color: #eee;
            padding: 5px
        }

        .divContent {
            padding: 8px;
            font-size: 9pt
        }

        .divTip {
            width: 244px;
            border: solid 1px #666;
            padding: 8px;
            font-size: 9pt;
            margin-top: 5px;
            display: none
        }

        .txtCss {
            border: solid 1px #ccc;
        }

        .divBtn {
            padding-top: 5px;
        }

        .divBtn .btnCss {
            border: solid 1px #535353;
            width: 60px
        }

    </style>
    <script type="text/javascript">
        function btnClick() {
            //获取文本框的值
            var oTxtValue = document.getElementById("Text1").value;
            //获取单选框按钮值
            var oRdoValue = (Radio1.checked) ? "男" : "女";
            //获取复选框按钮
            var oChkValue = (Checkbox1.checked) ? "已婚" : "未婚";
            //显示提示文本元素
            document.getElementById("divTip").style.display = "block";
            //设置文本元素内容
            document.getElementById("divTip").innerHTML = oTxtValue + "<br/>"
                + oRdoValue + "<br/>" + oChkValue;
        }
    </script>
</head>
<body>
<div class="divFrame">
    <div class="divTitle">请输入如下信息</div>
    <div class="divContent">
        姓名:<input id="Text1" type="text" class="txtCss"/><br/>
        性别:<input id="Radio1" name="rdoSex" type="radio" value="男"/>男
        <input id="Radio2" name="rdoSex" type="radio" value="女"/>女<br/>
        婚否:<input id="Checkbox1" type="checkbox"/>
        <div class="divBtn">
            <input id="Button1" type="button" value="提交" class="btnCss" onclick="btnClick();"/>
        </div>
    </div>
</div>
<div id="divTip" class="divTip"></div>

</body>
</html>

在上面的代码中，用传统的JavaScript方法获取用户输入的信息保存到变量中，最后通过document.getElementById(“divTip”).innerHTML方法显示所有的数据信息。

下面将隐去jQuery库，通过jQuery中的方法获取元素的值，并将数据展示出来。

    <script type="text/javascript">
        $(function(){
            $("#btnSubmit").click(function(){
                //获取文本框的值
                var oTxtValue=$("#Text1").val();
                var oRdoValue=$("#Radio1").is(":checked")?"男":"女";
                var oChkValue=$("#Checkbox1").is(":checked")?"已婚":"未婚";
                $("#divTip").css("display","block").html(oTxtValue+"<br/>"+oRdoValue+"	                 <br/>"+oChkValue);
            });
        });
    </script>

<input id="btnSubmit" type="button" value="提交" class="btnCss" onclick="btnClick();"/>

3.页面效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JonzG8jI-1596101309722)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1576724823342.png)]

jQuery控制页面CSS样式

通过一个简单的示例介绍如何使用jQuery中的toggleClass(className)方法来实现页面样式的动态切换功能

1.功能描述

在页面中，增加一个div元素标记，当用户单击该元素时，变换其文本内容和背景色，再次单击时，恢复其初始的内容和背景色。

2.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制css样式</title>
    <script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        .divDefault{
            width:260px;
            font-size:10pt;
            padding:5px
        }
        .divClick{
            width:260px;
            border:solid 1px #666;
            font-size:10pt;
            background-color:#eee;
            padding:5px
        }
    </style>

    <script type="text/javascript">
        $(function(){
            $(".divDefault").click(function(){
                $(this).toggleClass("divClick").html("点击后的样式");
            });
        });
    </script>

</head>
<body>
<div class="divDefault">点击前的样式</div>

</body>
</html>

jQuery选择器

jQuery选择器概述

什么是选择器

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

jQuery选择器的优势

1.代码更简单

由于在jQuery库中，封装了大量可以通过选择器直接调用的方法或函数，使编写代码更加简单轻松。

下面是一个是一个实现表格隔行变色的功能。

使用JavaScript实现隔行变色

1.功能描述

在页面中，通过一个table标记展示数据列表信息，在元素标记中，奇数行与偶数行的背景色不同，从而实现隔行变色的页面展示效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用JavaScript实现隔行变色</title>
    <style type="text/css">
        bady {
            font-size: 12px;
            text-align: center;
        }

        #tbStu {
            width: 260px;
            border: solid 1px #666;
            background-color: #eee;
        }

        #tbStu tr {
            line-height: 23px
        }

        #tbStu tr th {
            background-color: #ccc;
            color: #fff;
        }

        #tbStu .trOdd {
            background-color: #fff;
        }
    </style>

    <script type="text/javascript">
        window.onload = function () {
            var oTb = document.getElementById("tbStu");
            for (var i = 0; i < oTb.rows.length - 1; i++) {
                if (i % 2) {
                    oTb.rows[i].className = "trOdd";
                }
            }
        }
    </script>
</head>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>总分</th>
    </tr>

    <!--奇数偶-->

    <tr>
        <td>1001</td>
        <td>张晓梅</td>
        <td>男</td>
        <td>320</td>
    </tr>

    <!--偶数偶-->

    <tr>
        <td>1002</td>
        <td>黎明</td>
        <td>女</td>
        <td>350</td>
    </tr>
    </tbody>
</table>

</body>
</html>

上述代码，首先通过ID号获取表格元素，然后遍历表格的各行，根据行号的奇偶性，动态设置改行的背景色，实现隔行变色，但是循环页面的元素会形象页面打开的速度，如果用户jQuery实现，则需要加入以下代码。

 使用jQuery实现隔行变色
<title>使用jQuery实现隔行变色</title>
    <script type="text/javascript">
        $(function(){
            $("#tbStu tr:nth-child(even)").addClass("trOdd");
        });
    </script>

使用jQuery选择器可以很快捷地定位页面中的某个元素。并设置该元素的相应属性。

3.页面效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bhQNrmwh-1596101309727)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1576822839919.png)]

2.完善的检测机制

在JavaScript代码中，给页面中某个元素设置事务时必须先找到该元素，先检测该元素是否存在，然后设置相应的属性，如果该元素不存在，那么浏览器将提示出错。

在jQuery中设置元素的属性，不需要考虑该元素是否存在，即使该元素不存在，浏览器也不会提示错误信息。

使用JavaScript输出文字信息

1.功能描述

在页面div标记中输出一行“这是一个检测页面”的字符

2.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript代码检测页面元素</title>
    <script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        body {
            font-size: 20px;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            if (document.getElementById("divT")) {
                var oDiv = document.getElementById("divT");
                oDiv.innerHTML = "这是一个检测页面";
            }
        }
    </script>
</head>
<body>
 
</body>
</html>

if (document.getElementById(“divT”)) 该行代码用于检测所定位的页面元素是否存在，如果存在，执行下面的代码，否则不执行。

将JavaScript代码改写成jQuery选择器方式获取页面元素，不需要检测元素是否存在，如下：

    <title>jQuery代码检测页面元素</title>
    <script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#divT").html("这是一个检测页面");
        })
    </script>
 
<body>
<div id="divT"></div>
</body>

jQuery选择器详解

根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器，层次选择器，过滤选择器，表单选择器四大类。

过滤选择器又可分为：简单过滤选择器，内容过滤选择器，可见性过滤选择器，属性过滤选择器，子元素过滤选择器，表单对象属性过滤选择器6中。

基本选择器

基本选择器时jQuery使用最多的选择器，它由元素ID，Class，元素名，多个选择符组成。

基本选择器语法：

选择器	功能	返回值
#id	根据给定的ID匹配一个元素	单个元素
element	根据给定的元素名匹配所有元素	元素集合
.class	根据给定的类匹配元素	元素集合
*	匹配所有元素	元素集合
selector1,selectorN	将每一个选择器匹配到的元素合并后一起返回	元素集合

使用jQuery基本选择器选择元素

1.功能描述

一个页面包含两个div标记，其中一个用于设置ID属性，另一个用于设置Class属性，我们在增加一个span标记，全部元素初始值均为隐藏，然后通过jQuery基本选择器显示相应的页面标记。

2.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery基本选择器</title>
    <script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        body{
            font-size:12px;
            text-align:center;
        }
        .clsFrame{
            width:300px;
            height:100px;
        }
        .clsFrame div,span{
            display:none;
            float:left;
            width:65px;
            height:65px;
            border:solid 1px #ccc;
            margin:8px
        }
        .clsOne{
            background-color:#eee;
        }
    </style>

    <script type="text/javascript">
        $(function(){
            //ID匹配元素
            // $("#divOne").css("display","block");
        })
        $(function(){
            //元素名匹配元素
            $("div span").css("display","block");
        })
        $(function(){
            //类匹配元素
            $(".clsFrame .clsOne").css("display","block");
        })
        $(function(){
            //匹配所有元素
            $("*").css("display","block");
        })
        $(function(){
            //合并匹配元素
            $("#divOne,span").css("display","block");
        })
    </script>
    
</head>
<body>
<div class="clsFrame">
    <div id="divOne">ID</div>
    <div class="clsOne">CLASS</div>
    <span>SPAN</span>

</div>
</body>
</html>

层次选择器

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

选择器	功能	返回值
ancestor descendant	根据祖先元素匹配所有的后代元素	元素集合
parent > child	根据父元素匹配所有的子元素	元素集合
prev + next 可以使用.next()代替	匹配所有紧接在prev元素后的相邻元素	元素集合
prev ~ siblings可以使用nextALL()代替	匹配prev元素之后的所有兄弟元素	元素集合

使用jQuery层次选择器选择元素

1.功能描述

在页面中，设置4块div标记，其中在第二块div中，添加一个span标记，在该span标记中又新增一个span标记，全部元素初始值为隐藏，然后通过jQuery层次选择器，显示相应的页面标记

2.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery层次选择器</title>
    <script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        body {
            font-size: 12px;
            text-align: center;
        }

        div, span {
            float: left;
            border: solid 1px #ccc;
            margin: 8px;
            display: none
        }

        .clsFraA {
            width: 65px;
            height: 65px
        }

        .clsFraP {
            width: 45px;
            height: 45px;
            background-color: #eee;
        }

        .clsFraC {
            width: 25px;
            height: 25px;
            background-color: #ddd;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            // 匹配后代元素
            // $("#divMid").css("display", "block");
            // $("div span").css("display", "block");
        })
        $(function () {
            //匹配子元素
            // $("#divMid").css("display", "block");
            // $("div>span").css("display", "block");
        })
        $(function(){
            //匹配元素的下一个元素
            // $("#divMid + div").css("display", "block");
            // $("#divMid").next().css("display", "block");
        })
        $(function(){
            //匹配所有后面元素
            // $("#divMid ~ div").css("display", "block");
            // $("#divMid").nextALL().css("display", "block");
        })
        $(function(){
            //匹配所有相邻元素
            $("#divMid").siblings("div").css("display", "block");
        })

    </script>
</head>
<body>
<div class="clsFraA">Left</div>
<div class="clsFraA" id="divMid">
    <span class="clsFraP" id="Span1">
        <span class="clsFraC" id="Span2"></span>
    </span>
</div>
<div class="clsFraA">Right_1</div>
<div class="clsFraA">Right_2</div>
</body>
</html>

简单过滤选择器

过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号（:）开头；简单过滤选择器是过滤选择器中使用最广泛的一种。

选择器	功能	返回值
first() 或 :first	获取第一个元素	单个元素
last() 或 :last	获取最后一个元素	单个元素
:not(selector)	获取除给定选择器外的所有元素	元素集合
:even	获取所有索引值为偶数的元素，索引号从0开始	元素集合
:odd	获取所有索引值为奇数的元素，索引号从0开始	获取所有索引值为偶数的元素，索引号从0开始
:eq(index)	获取指定索引值的元素，索引号从0开始	单个元素
:gt(index)	获取所有大于给定索引值的元素，索引号从0开始	元素集合
:lt(index)	获取所有小于给定索引值的元素，索引号从0开始	元素集合
:header	获取所有标题类型的元素，如h1,h2…	元素集合
:animated	获取正在执行动画效果的元素	元素集合

使用jQuery基本过滤选择器选择元素

1.功能描述

在页面中，设置一个h1标记用于显示主题，创建ul标记并在其中放置四个li，再创建一个span标记，用于执行动画效果，通过简单过滤选择器获取元素，将选中的元素改变其类名称，从而突出其被选中的状态。

2.代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery基本过滤选择器</title>
    <script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        body{
            font-size:12px;
            text-align:center;
        }
        div{
            width:241px;
            height:83px;
            border:solid 1px #eee;
        }
        h1{
            font-size:13px;
        }
        ul{
            list-style-type:none;
            padding:0px;
        }
        .DefClass,.NotClass{
            width:60px;
            height:23px;
            line-height:23px;
            float:left;
            border-top:solid 1px #eee;
            border-bottom:solid 1px #eee;
        }
        .GetFocus{
            width:58px;
            border:solid 1px #666;
            background-color:#eee;
        }
        #spnMove{
            width:238px;
            height:23px;
            line-height:23px;
        }
    </style>

    <script type="text/javascript">
        $(function(){
            //增加第一个元素的类别
            // $("li:first").addClass("GetFocus");
        })
        $(function(){
            //增加最后一个元素的类别
            // $("li:last").addClass("GetFocus");
        })
        $(function(){
            //增加去除所有与给定选择器匹配的元素类别
            // $("li:not(.NotClass)").addClass("GetFocus");
        })
        $(function(){
            // $("li:even").addClass("GetFocus");
        })
        $(function(){
            // $("li:odd").addClass("GetFocus");
        })
        $(function(){
            // $("li:eq(1)").addClass("GetFocus");
        })
        $(function(){
            // $("li:gt(1)").addClass("GetFocus");
        })
        $(function(){
            // $("li:lt(4)").addClass("GetFocus");
        })

        $(function(){
            //增加标题类元素类别
            // $("div h1").css("width","238");
            // $(":header").addClass("GetFocus");
        })
        $(function(){
            //增加动画效果元素类别
            animateIt();
            $("#spnMove:animated").addClass("GetFocus");
        })
        function animateIt(){
            //动画效果
            $("#spnMove").slideToggle("slow",animateIt);
        }
    </script>
</head>
<body>
<div>
    <h1>基本过滤选择器</h1>
    <ul>
        <li class="DefClass">Item 0</li>
        <li class="DefClass">Item 1</li>
        <li class="NotClass">Item 2</li>
        <li class="DefClass">Item 3</li>
    </ul>
    <span id="spnMove">Span Move</span>
</div>


</body>
</html>

内容过滤选择器

内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。

选择器	功能	返回值
:contains(text)	获取包含给定文本的元素	元素集合
:empty	获取所有不包含子元素或者文本的空元素	元素集合
:has(selector)	获取含有选择器所匹配的元素的元素	元素集合
:parent	获取含有子元素或者文本的元素	元素集合

使用jQuery内容过滤选择器选择元素

1.功能描述、

在页面中，根据需要创建四个div标记，并在其中的div中新建一个span标记，其余div标记中输入内容（或为空），通过内容过滤选择器获取指定的元素，并显示在页面中。

2.实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery内容过滤选择器</title>
    <script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        body{
            font-size:12px;
            text-align:center;
        }
        div{
            float:left;
            border:solid 1px #ccc;
            margin:8px;
            width:65px;
            height:65px;
            display:none
        }
        span{
            float:left;
            border:solid 1px #ccc;
            margin:8px;
            width:45px;
            height:45px;
            background-color:#eee;
        }
    </style>

    <script type="text/javascript">
        $(function(){
            //显示包含给定文本的元素
            // $("div:contains('A')").css("display","block");
        })
        $(function(){
            //显示所有不包含子元素或者文本的空元素
            // $("div:empty").css("display","block");
        })
        $(function(){
            //显示含有选择器所匹配的元素
            // $("div:has(span)").css("display","block");
        })
        $(function(){
            //显示含有子元素或者文本的元素
            $("div:parent").css("display","block");
        })
    </script>

</head>
<body>
<div>ABCD</div>
<div>
    <span></span>
</div>
<div>EFaH</div>
<div></div>
</body>
</html>

可见性过滤选择器

可见性过滤选择器根据元素是否可见的特征获取元素。

选择器	功能	返回值
:hidden	获取所有不可见元素，或者type为hidden的元素	元素集合
:visible	获取所有的可见元素	元素集合

:hidden选择器所选择的不仅包括样式为display:none所有元素，而且还包括属性type="hidden"和样式为

visibility:hidden的所有元素。

使用jQuery可见性过滤选择器选择元素

1.功能描述

在页面中，创建一个span和div标记，分别设置标记的display属性为"none"和"block"；然后根据可见性过滤选择器显示页面元素。

2.实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery可见性过滤选择器</title>
    <script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        body{
            font-size:12px;
            text-align:center;
        }
        div,span{
            float:left;
            border:solid 1px #ccc;
            margin:8px;
            width:65px;
            height:65px;
        }
        .GetFocus{
            border:solid 1px #666;
            background-color:#eee;
        }
    </style>

    <script type="text/javascript">
        $(function(){
            //增加所有可见元素类别
            // $("span:hidden").show();
            // $("div:visible").addClass("GetFocus");
        })
        $(function(){
            //增加所有不可见元素类别
            $("span:hidden").show().addClass("GetFocus");
        })

    </script>
</head>
<body>
<span style="display:none">Hidden</span>
<div>Visible</div>
</body>
</html>

属性过滤选择器

属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值，并以"[” 号开始，以“ ]"结束。

选择器	功能	返回值
[attribute]	获取包含给定属性的元素	元素集合
[attribute=value]	获取等于给定的属性是某个特定值的元素	元素集合
[attribute!=value]	获取不等于给定的属性是某个特定值的元素	元素集合
[attribute^=value]	获取给定的属性是以某些值开始的元素	元素集合
[attribute$=value]	获取给定的属性是以某些值结尾的元素	元素集合
[attribute*=value]	获取给定的属性是以包含某些值的元素	元素集合
[selector1] [selector2] [selectorN]	获取满足多个条件的复合属性的元素	元素集合

使用jQuery属性过滤选择器选择元素

1.功能描述

在页面中，增加四个div标记，并设置不同的ID和Title属性值，然后通过属性过滤选择器获取所指定的元素集合，并显示在页面中。

2.实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery属性过滤选择器</title>
    <script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        body{
            font-size:12px;
            text-align:center;
        }
        div{
            float:left;
            border:solid 1px #ccc;
            margin:8px;
            width:65px;
            height:65px;
            display:none
        }
    </style>

    <script type="text/javascript">
        $(function(){
            //显示所有含有id属性的元素
            // $("div[id]").show(3000);
        })
        $(function(){
            //显示所有title属性值是'A'的元素
            // $("div[title='A']").show(3000);
        })
        $(function(){
            //显示所有title属性值不是'A'的元素
            // $("div[title!='A']").show(3000);
        })
        $(function(){
            //显示所有title属性值以'A'开始的元素
            // $("div[title^='A']").show(3000);
        })
        $(function(){
            //显示所有title属性值以"C"结束的元素
            // $("div[title$='C']").show(3000);
        })
        $(function(){
            //显示所有title属性值中含有'B'的元素
            // $("div[title*='B']").show(3000);
        })
        $(function(){
            //显示所有属性title的值含有'B'且属性id的值是"divAB"的元素
            $("div[id='divAB'][title*='B']").show(3000);
        })

    </script>

</head>
<body>
    <div id="divID">ID</div>
    <div title="A">Title A</div>
    <div id="divAB" title="AB">ID<br/>Title AB</div>
    <div title="ABC">Title ABC</div>
</body>
</html>

子元素过滤选择器

jQuery中可以使用子元素过滤选择器轻松获取所有父元素中指定的某个元素。

选择器	功能	返回值
:nth-child(eq\|even\|odd\|index)	获取每个父元素下的特定位置元素，索引号从1开始	元素集合
:first-child	获取每个父元素下的第一个子元素	元素集合
:last-child	获取每个父元素下的最后一个子元素	元素集合
:only-child	获取每个父元素下的仅有一个子元素	元素集合

使用jQuery子元素过滤选择器选择元素

1.功能描述

在页面中，创建三个ul标记，前两个标记中设置四个li，后一个标记中设置一个li，通过子元素过滤选择器获取指定的页面元素，并改变其选择后的状态，显示在页面中。

2.实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        body{
            font-size:12px;
            text-align:center;
        }
        ul{
            width:241px;
            list-style-type:none;
            padding:0px;
        }
        ul li{
            height:23px;
            width:60px;
            line-height:23px;
            float:left;
            border-top:solid 1px #eee;
            border-bottom:solid 1px #eee;
            margin-bottom:5px;
        }
        .GetFocus{
            width:58px;
            border:solid 1px #666;
            background-color:#eee;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            //增加每个父元素下的第二个子元素类别
            // $("li:nth-child(2)").addClass("GetFocus");
        })
        $(function(){
            //增加每个父元素下的第一个子元素类别
            // $("li:first-child").addClass("GetFocus");
        })
        $(function(){
            //增加每个父元素下的最后一个子元素类别
            // $("li:last-child").addClass("GetFocus");
        })
        $(function(){
            //增加每个父元素下只有一个子元素类别
            $("li:only-child").addClass("GetFocus");
        })
        
    </script>
</head>
<body>
    <ul>
        <li>Ttem 1-0</li>
        <li>Ttem 1-1</li>
        <li>Ttem 1-2</li>
        <li>Ttem 1-3</li>
    </ul>
    <ul>
        <li>Ttem 2-0</li>
        <li>Ttem 2-1</li>
        <li>Ttem 2-2</li>
        <li>Ttem 2-3</li>
    </ul>
    <ul>
        <li>Ttem 3-0</li>
    </ul>

</body>
</html>

表单对象属性过滤选择器

表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素，如enabled，disabled，checked，select属性。

选择器	功能	返回值
:enabled	获取表单中所有属性为可用的元素	元素集合
:disabled	获取表单中所有属性为不可用的元素	元素集合
:checked	获取表单中所有被选中的元素	元素集合
:selected	获取表单中所有被选中option的元素	元素集合

通过表单对象属性过滤选择器获取表单对象

1.功能描述

在一个表单中，创建两个文本框对象，一个属性设置为enabled，另一个属性设置为disabled，在放置两个复选框对象，一个设置成被选中状态，另一个设置成未选中状态，同时新建一个列表对象，并选中其中两项，通过表单对象属性过滤选择器获取某指定元素，并处理该元素。

2.实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery表单对象属性过滤选择器</title>
    <script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        body{
            font-size:12px;
            text-align:center;
        }
        div{
            display:none
        }
        select{
            height:65px;
        }
        .clsIpt{
            width:100px;
            padding:3px;
        }
        .GetFocus{
            border:solid 1px #666;
            background-color:#eee;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            //增加表单中所有属性为可用的元素怒类别
            // $("#divA").show(3000);
            // $("#form1 input:enabled").addClass("GetFocus");
        })
        $(function(){
            //增加表单中所有属性为不可用的元素类别
            // $("#divA").show(3000);
            // $("#form1 input:disabled").addClass("GetFocus");
        })
        $(function(){
            //增加表单中所有被选中的元素类别
            // $("#divB").show(3000);
            // $("#form1 input:checked").addClass("GetFocus");
        })
        $(function(){
            //显示表单中所有被选中option的元素内容
            $("#divC").show(3000);
            $("#Span2").html("选中项是:"+$("select option:selected").text());
        })


    </script>
</head>
<body>
<form id="form1" style="width:241px">
    <div id="divA">
        <input type="text" value="可用文本框" class="clsIpt"/>
        <input type="text" disabled="disabled" value="不可用文本框" class="clsIpt"/>
    </div>
    <div id="divB">
        <input type="checkbox" checked="checked" value="1"/>选中
        <input type="checkbox" value="0"/>未选中
    </div>
    <div id="divC">
        <select multiple="multiple">
            <option value="0">Item 0</option>
            <option value="1" selected="selected">Item 1</option>
            <option value="2">Item 2</option>
            <option value="3" selected="selected">Item 3</option>
        </select>
        <span id="Span2"></span>
    </div>
</form>

</body>
</html>

表单选择器

使用表单选择器直接获取表单对象

选择器	功能	返回值
:input	获取所有input，textarea，select	元素集合
:text	获取所有单行文本框	元素集合
:password	获取所有密码框	元素集合
:radio	获取所有单选按钮	元素集合
:checkbox	获取所有复选框	元素集合
:submit	获取所有提交按钮	元素集合
:image	获取所有图像域	元素集合
:reset	获取所有重置按钮	元素集合
:button	获取所有按钮	元素集合
:file	获取所有文件域	元素集合

使用jQuery表单过滤选择器

1.功能描述

在一个页面表单中，创建11中常用的表单对象，根据表单选择器，先显示出所有表单对象的总量，然后显示各种不同类型的表单对象。

2.实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery表单过滤选择器</title>
    <script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        body{
            font-size:12px;
            text-align:center;
        }
        form{
            width:241px;
        }
        textarea,select,button,input,span{
            display:none;
        }
        .btn{
            border:#666 1px solid;
            padding:2px;
            width:60px;
            filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,
            StartColorStr=#ffffff,EndColorStr=#ECE9DB);
        }
        .txt{
            border:#666 1px solid;
            padding:3px;
        }
        .img{
            padding:2px;
            border:solid 1px #ccc;
        }
        .div{
            border:solid 1px #ccc;
            background-color:#eee;
            padding:5px
        }
    </style>

    <script type="text/javascript">
        $(function(){
            // $("#form1 div").html("表单共找出input类型元素:"+ $("#form1 :input").length);
            // $("#form1 div").addClass("div");
        })

        $(function(){
            //显示所有文本框对象
            // $("#form1 :text").show(3000);
        })
        $(function(){
            //显示所有密码框对象
            // $("#form1 :password").show(3000);
        })
        $(function(){
            //显示所有单选按钮对象
            // $("#form1 :radio").show(3000);
            // $("#form1 #Span1").show(3000);
        })

        $(function(){
            //显示所有复选框对象
            // $("#form1 :checkbox").show(3000);
            // $("#form1 #Span2").show(3000);
        })
        $(function(){
            //显示所有提交按钮对象
            // $("#form1 :submit").show(3000);
        })
        $(function(){
            //显示所有图片域对象
            // $("#form1 :image").show(3000);
        })
        $(function(){
            //显示所有重置按钮对象
            // $("#form1 :reset").show(3000);
        })
        $(function(){
            //显示所有按钮对象
            // $("#form1 :button").show(3000);
        })
        $(function(){
            //显示所有文件域对象
            $("#form1 :file").show(3000);
        })

    </script>
</head>
<body>
<form id="form1">
    <textarea class="txt">TextArea</textarea>
    <select>
        <option value="0">Item 0</option>
    </select>
    <input type="text" value="Text" class="txt"/>
    <input type="password" value="PassWord" class="txt"/>
    <input type="radio"/><span id="Span1">Radio</span>
    <input type="checkbox"/>
    <span id="Span2">CheckBox</span>
    <input type="submit" value="Submit" class="btn"/>
    <input type="image" title="Image" src="Image/logo.gif" class="img"/>
    <input type="reset" value="Reset" class="btn"/>
    <input type="button" value="Button" class="btn"/>
    <input type="file" title="File" class="txt"/>
    <div id="divShow"></div>
</form>

</body>
</html>

综合案例分析—导航条在项目中的应用

需求分析

1.在页面中创建一个导航条，单击标题时，可以伸缩导航条的内容，同时，标题中的提示图片也随之改变

2.单击“简化” 连接时，隐藏指定的内容，并将“简化”字样改变成”更多“，单击“更多”连接时，返回初始状态，并改变指定显示元素的背景色。

功能实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条在项目中的应用</title>
    <script type="text/javascript" src="Jscript/jquery-3.4.1.min.js"></script>
    <style type="text/css">
        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", "Image/a1.gif");//改变图片
                    //隐藏内容
                    $(".clsContent").css("display", "none");
                } else {
                    $(".clsHead span img").attr("src", "Image/a2.gif");//改变图片
                    //显示内容
                    $(".clsContent").css("display", "block");
                }
            });

            $(".clsBot > a").click(function () {
                //热点链接单击事件
                //如果内容为“简化”字样
                if ($(".clsBot > a").text() == "简化") {
                    //隐藏index号大于4且不是最后一项的元素
                    $("ul li:gt(4):not(:last)").hide();
                    //将字符内容更改为“更多”
                    $(".clsBot > a").text("更多");
                } else {//显示所选元素且增加样式 
                    //:gt(4)索引号大于4 :not(:last)不是最后一个元素
                    $("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="Image/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="Image/a5.gif" alt=""/>-->
        </div>
    </div>
</div>

</body>
</html>

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kfsx7RXq-1596101309731)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1577262890538.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z4da8wgF-1596101309733)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1577262936017.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iTtSCuAk-1596101309736)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1577262966649.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wrlFbbTk-1596101309738)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\1577262982546.png)]

$(".divPics a").lightBox({
overlayBgColor:"#666", //浏览图片时的背景色
overlayOpacity:0.5, //背景色的透明度
containerResizeSpeed:600 //图片切换时的速度
})
})

</script>

我的相册

        <ul>
            <li><a href="Image/a5.jpg" title="第一张风景图片"><img src="Image/a5.jpg" alt=""/></a></li>
        </ul>

        <ul>
            <li><a href="Image/a4.jpg" title="第一张风景图片"><img src="Image/a4.jpg" alt=""/></a></li>
        </ul>
    </div>
</div>

```

右键菜单插件contextmenu

contextmenu是一款轻量型，功能完善的插件，利用该插件可以在页面的任何位置，设置一个触发右键事件的元素，当选中该元素，单击鼠标右键时，通过插件中的contextMenu方法，弹出一个设计精美快捷菜单，

1）可以在同一个页面中设置多个不同样式的菜单

2）一个菜单可以绑定页面中的多个元素

3）可随意设置菜单样式

4）轻松访问与绑定菜单中的各选项

右键菜单插件的使用

1）插件文件

Js-7-6/jquery.contextmenu.js

Css-7-6/jquery.contextmenu.css

Images-7-6/全部图片

2）功能描述

在页面中，创建一个文本编辑框，选中该文本框，单击鼠标右键，弹出一个设置好的快捷菜单，单击菜单选项时，显示所选择的选项内容。

3）实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单插入</title>
    <script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
        
    <script type="text/javascript" src="Js-7-6/jquery.contextmenu.js"></script>

    <link rel="stylesheet" type="text/css" href="Css-7-6/jquery.contextmenu.css"/>
    <style type="text/css"></style>

    <script type="text/javascript">
        $(function () {
            $("#txtContent").contextMenu("sysMenu",{
                bindings:{
                    "Li1":function (Item) {
                        alert("在id号为："+Item.id+"编辑框中，您点击了新建项");
                    },
                    "Li2":function (Item) {
                        alert("在id号为："+Item.id+"编辑框中，您点击了打开项");
                    },
                    "Li3":function (Item) {
                        alert("在id号为："+Item.id+"编辑框中，您点击了保存项");
                    },
                    "Li4":function (Item) {
                        alert("在id号为："+Item.id+"编辑框中，您点击了退出项")
                    }
                }
            })
        })
    </script>

</head>
<body>

<div class="divFrame">
    <div class="divTitle">点击右键</div>
    <div class="divContent">
        <textarea id="txtContent" cols="30" rows="5"></textarea>
    </div>
</div>

<div class="contextMenu" id="sysMenu">
    <ul>
        <li id="Li1"><img src="Image/a4.jpg" />新建</li>
        <li id="Li2"><img src="Image/a5.jpg" />打开</li>
        <li id="Li3"><img src="Image/a1.gif" />保存</li><hr/>
        <li id="Li4"><img src="Image/a8.jpg" />退出</li>
    </ul>
</div>

</body>
</html>

图片放大镜插件jqzoom

jqzoom是一款基于jQuery库的图片放大插件，在页面中实现放大的方法是：先准备2张一大一小的相同图片，在页面打开时，展示小图片，当鼠标在小图片的任意位置移动时，调用插件中的jqzoom方法，绑定另外一张相同的大图片，在指定位置显示与小图片所选区域相同的大图片区域，从而实现逼真的放大效果。

图片放大镜插件的使用

1）插件文件

Js-7-7/jquery.jqzoom.js

Css-7-7/jquery.jqzoom.css

2）功能描述

在页面中，放置一张图片，当鼠标在图片中移动时，出现一块选择区域，在图片的右边，显示放大后的所选区域

3）实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单插入</title>
    <script type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
        
    <script type="text/javascript" src="Js-7-6/jquery.jqzoom.js"></script>

    <link rel="stylesheet" type="text/css" href="Css-7-6/jquery.jqzoom.css"/>
    <style type="text/css"></style>

    <script type="text/javascript">
        $(function () {
            $("#jqzoom").jqzoom(
                //绑定图片放大插件jqzoom
                {
                    zoomWidth:230,
                    zoomHeight:230
                }
            );
        });
    </script>

</head>
<body>
<div class="divFrame">
    <div class="divTitle">
        图片放大镜
    </div>
    <div class="divContent">
        <a href="Image/a8.jpg" id="jqzoom" title="我的图片">
            <img src="Image/a2.gif" />
        </a>
    </div>
</div>
</body>
</html>

jQuery自定义插件

插件的种类：封装方法插件，封闭函数插件，选择器插件。

1）封装方法插件

是一个对象级别的插件，该类插件首选通过jQuery选择器获取对象，并为对象添加方法，然后，将方法进行打包，封装成一个插件，这种类型的插件编写简单，容易调用。

2）封闭函数插件

封闭函数插件是一个现象级别的插件，该插件最大的特点是可以直接给jQuery添加静态方法，并且可以将函数置于jQuery命名空间中，如最为常见地$.ajax() $.trim()全局性函数，都是以内部插件的形式植入jQuery内核中。

对象级插件的开发

1）功能描述

在列表ul元素中，鼠标在表项li元素移动时，可以自定义其获取焦点focus时的背景颜色，即设置表项li元素选中时的背景色。

2）搭建框架

新建一个js文件，命名为jquery.lifocuscolor.js，并在文件中使用$.fn.extend()方法完成框架的搭建，其实现的代码如下：

/*----------------------------/
功能：设置列表中表项获取鼠标焦点时的背景色
参数：li_col【可选】鼠标所在表项行的背景色
返回：原调用对象
示例：$("ul").focusColor("red");
/---------------------------------*/
;(function ($) {
    $.fn.extend({
        "yourPluginName":function (param_value) {
            //各种默认属性或参数的设置
            this.each(function () {
                //插件实现的代码
            })
        }
    })
})(jQuery);

3）代码编写

;(function ($) {
    $.fn.extend({
        "focusColor":function (li_col) {
            var def_col = "#ccc"; //默认获取焦点的色值
            var lst_col = "#fff"; //默认丢失焦点的色值
            
            //如果设置的颜色值不为空，使用设置的颜色，否则为默认色
            li_col = (li_col == undefined)?def_col:li_col;
            //遍历表项li中的全部元素
            $(this).find("li").each(function () {
                //获取鼠标焦点事件
                $(this).mouseover(function () {
                    $(this).css("background-color",li_col); //使用设置的颜色
                })
                    .mouseout(function () {
                        //鼠标焦点移除事件
                        $(this).css("background-color","#fff"); //恢复原来的颜色
                    })
            });
            return $(this); //返回jquery对象，保持链式操作
        }
    });
})(jQuery);

4）引用插件

创建一个html文件，添加代码

<script type="text/javascript" src="Plugin/jquery.lifocuscolor.js"></script>

<script type="text/javascript">
    $(function(){
        $("#ul").focusColor(); //调用自定义的插件
        //$("#ul").focusColor("red");
    })
</script>

类级别插件的开发

1）功能描述

新增两个类级别的全局函数，分别用于计算两数字和与两数之差，并将结果返回调用的页面中。

2）搭建框架

新建一个js文件，命名为jquery.twoaddresult.js，并在文件中，使用$.extend()方法完成框架的搭建，其实现的代码如下：

/*----------------------------/
功能：计算两个数字相加或相减的结果
参数：数字p1，p2
返回：两数相加后的结果
示例：$.AddNum(1,2);
/---------------------------------*/
;(function ($) {
    $.extend({
        "yourPluginName":function (pram_value) {
            //插件实现的代码
        }
    });
})(jQuery);

3）代码编写

/*----------------------------/
功能：计算两个数字相加或相减的结果
参数：数字p1，p2
返回：两数相加后的结果
示例：$.AddNum(1,2);
/---------------------------------*/
;(function ($) {
    $.extend({
        "addNum":function (p1,p2) {
            //如果传入的数字不为空，使用传入的数字，否则为0
            p1 = (p1 == undefined)?0:p1;
            p2 = (p2 == undefined)?0:p2;
            var intResult = parseInt(p1) +parseInt(p2);
            return intResult;
        },
        "subNum":function (p1,p2) {
            //如果传入的数字不为空，使用传入的数字，否则为0
            var intResult = 0;
            p1 = (p1 == undefined)?0:p1;
            p2 = (p2 == undefined)?0:p2;
            if (p1>p2){
                //如果传入的参数前者大于后者
                intResult = parseInt(p1) - parseInt(p2);
            } 
            return intResult;
        }
    });
})(jQuery);

huiyinimen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《jquery权威指南》学习笔记

《jquery权威指南》学习笔记作者陶国荣 tao_guo_rong@163.comjQuery开发入门jQuery概述jQuery是集JavaScript，css，DOM，Ajax于一体的强大的框架体系，它的主旨是：以更少的代码，实现更多的功能（Write less，do more)jQuery基本功能1.访问和操作DOM元素使用jquery库，可以很方便的获取和修改页面中的元素，无论是删除，移动，还是复制某元素。2.控制页面样式jquery操作页面样式可以很好的兼容各种浏览器3.对页
复制链接

扫一扫

专栏目录