开发中常用jQuery知识点总结

jQuery理解

jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。jQuery解决了浏览器的兼容性问题，当你学会这些知识点后，使用jQuery操作DOM会更加的简单、便捷。

案例地址: https://github.com/pengjunshan/WebPJS/Jquery

其它Web文章
HtmlCss基础学习第一章
 CSS基础学习第二章
 CSS浮动的使用和解决浮动的五种方法
 CSS定位relative、absolute、fixed使用总结
 原生开发WebApi知识点总结
 C3动画+H5+Flex布局使用总结
 ES6常用知识总结
 Vue学习知识总结
 开发环境到生产环境配置webpack
待续......

本编文章会讲到的知识点

JavaScript和jQuery对比
jQuery选择器
jQuery操作样式
jQuery操作属性
jQuery动画
jQuery操作DOM节点
jQuery操作其它属性
jQuery事件机制
jQuery对象与DOM对象之间的转换
其它知识点

为什么用jQuery?

js缺点.png

JavaScript和jQuery对比

1.不同处对比

不同处	JavaScript	jQuery
入口函数	只能有一个，如果有多个，后面的会覆盖前面	可以有多个，并且不会发生覆盖的情况
代码容错性	代码容错性差，代码出现错误，会影响到后面代码的运行。	代码容错性好，屏蔽错误，并且不会影响后面代码的运行。
浏览器兼容性	兼容性差，比如火狐不支持innerText	对浏览器兼容性做了封装，因此不存在兼容性问题
操作复杂性	DOM操作复杂，对于一些简单的动画效果，实现起来比较麻烦	DOM操作简单，支持隐式迭代，实现动画非常简单。

2.怎样使用jQuery？

官网下载地址：http://jquery.com/download/
jquery大版本分为1.x和2.x和3.x
区别：2.x3.x版本不再支持IE6/7/8，在中国，用的最多的还是1.x版本
jQuery3是jQuery的未来，如果你需要兼容IE6-8，你可以继续使用1.12版本。

引包（引入jQuery文件）

<script type="text/javascript" src="jquery-1.12.4.js"></script>

入口函数

//原生JS的入口函数
window.onload = function(){
}
//JQ方式一
$(function(){
}
//JQ方式二
$(document).ready(function () {
});

功能实现

$("#btnShowDiv").click(function () {
    $("div").show(1000);
});

3.对比JavaScript的入口函数jQuery的入口函数,执行时机

JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2.jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

4.了解jQuery的$符号

其实$就是一个函数：$();参数不一样，功能不一样!
$常用的几种情况：
$(function() {});//参数是function，说明是入口函数
$(“#btnSetConent”);//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素
$(“div”);//查找所有的div元素
$(document).ready(funciton(){})//将document转换成jQuery对象

$ === jQuery,也就是说能用$的地方，完全可以用jQuery，$仅仅是简写形式。

jQuery选择器

1.jQuery选择器概述

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】
jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

2.基本选择器

跟css的选择器用法一模一样。

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。获取所有的div、p、li元素
交集选择器	$(“div.redClass”);	注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。

3.层级选择器

跟css的选择器用法一模一样。

名称	用法	描述
子代选择器	$(“ul>li”);	用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

4.过滤选择器

这类选择器都带冒号：

名称	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”).css(“color”, ”red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, ”red”);	获取到的li元素中，选择索引号为偶数的元素
:checked	$(' input:checked');	获取所有input元素中，勾选的元素
:button	$("input:button")	所有 type="button" 的 <input> 元素
:selected	$("option:selected")	所有option选中的元素

5.筛选选择器(方法)

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

名称	用法	描述
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。传参指定类型节点，不传参所有兄弟节点
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟

6.其它常用选择器

名称	用法	描述
[type=value]	$("input[type=button]")	找type是button类型的input元素
"*"	$(".box *")	box对象下所有的元素
:gt(3)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(3)	$("ul li:lt(3)")	列出 index 小于 3 的元素

7.案例

用了上面所有的选择器类型，案例请到https://github.com/pengjunshan/WebPJS中查看

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器</title>
    <script src="jquery-1.12.4.js"></script>
</head>

<body>
    <ul>
        <li class="xyy">喜羊羊</li>
        <li>懒羊羊</li>
        <li>沸羊羊</li>
        <li id="myy">慢羊羊</li>
        <li>灰太狼</li>
        <li>红太狼</li>
    </ul>

    <div class="xyy">灰太狼</div>

    <div class="father">爸爸
        <div class="son">儿子
            <div class="grandson">孙子</div>
        </div>
        <p>ppp</p>
        <span></span>
    </div>

    <script>
        $(function(){
            /**
            *  基本选择器
            */
            //ID选择器
            let $myy = $("#myy");
            console.log($myy)

            //类选择器
            let $xyy = $(".xyy");
            console.log($xyy)

            //标签选择器
            let $li = $("li");
            console.log($li)

            //并集选择器
            let $bj = $(".xyy,#myy");
            console.log($bj)

            //交集选择器
            let $jj = $("div.xyy");
            console.log($jj)

            /**
            *   层级选择器
            */
            //子代选择器
            let $zd = $(".father>div")
            console.log($zd)

            //后代选择器
            var $hd = $(".father div")
            console.log($hd)

            /**
            *   过滤选择器
            */
            //:eq（index）
            let $eq = $("li:eq(2)")
            console.log($eq)

            //:odd
            let $odd = $("li:odd")
            console.log($odd)
            

            //:even
            let $even = $("li:even")
            console.log($even)
            $even.css("color","red")

            /**
            *   筛选选择器(方法)
            */
            //children(selector) 相当于子代选择器
            let $children = $(".father").children("div")
            console.log($children)

            //find(selector) 相当于后代选择器
            let $find = $(".father").find("div")
            console.log($find)

            //siblings(selector) 无参所有兄弟节点 有参指定节点
            // let $siblings = $(".son").siblings()
            let $siblings = $(".son").siblings("p")
            console.log($siblings)

            //parent()
            let $parent = $(".son").parent()
            console.log($parent)

            //eq(index)
            let $eq2 = $("li").eq(2)
            console.log($eq2)

            //next()
            // let $next = $("#myy").nextAll()
            let $next = $("#myy").next()
            console.log($next)

            //prev()
            let $prev = $("#myy").prev()
            console.log($prev)

        })
    </script>
</body>

</html>

jQuery操作样式

1.css操作

设置或者修改样式，操作的是style属性。

设置单个样式

css(name, value);name：需要设置的样式名称 value：对应的样式值

 $(".box").css("background-color", "red");

设置多个样式

css(obj);参数是一个对象，对象中包含了需要设置的样式名和样式值

 $(".box").css({
            "background-color": "gray",
            "width": "200px",
            "height": "200px"
        })

获取样式

$(".box").css(name); name是样式的名称

let width = $(".box").css("width")
console.log(width)

注意
1.设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
2.获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。

2.class操作

添加样式类

addClass(name); name：需要添加的样式类名，注意参数不要带点.

  $(".dd").addClass("pp")

移除样式类

removeClass(name); name:需要移除的样式类名

 $(".dd").removeClass("pp")

判断是否有样式类

hasClass(name); name:用于判断的样式类名，返回值为true false

console.log($(".dd").hasClass("pp"))

切换样式类

toggleClass(name); name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。

 $(".dd").toggleClass("pp")

3.案例

切换tab栏，案例请到https://github.com/pengjunshan/WebPJS中查看

切换tab栏案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.12.4.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        .wrapper {
            width: 1000px;
            height: 475px;
            margin: 0 auto;
            margin-top: 100px;
        }
        .tab {
            border: 1px solid #ddd;
            border-bottom: 0;
            height: 36px;
            width: 320px;
        }
        .tab li {
            position: relative;
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top: 4px solid #fff;
        }
        .tab span {
            position: absolute;
            right: 0;
            top: 10px;
            background: #ddd;
            width: 1px;
            height: 14px;
            overflow: hidden;
        }
        .products {
            width: 400px;
            border: 1px solid #ddd;
            height: 200;
        }
        .products .main {
            width: 400px;
            height: 200px;
            float: left;
            display: none;
        }
        .products .main.selected {
            display: block;
        }
        .tab li.active {
            border-color: red;
            border-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <ul class="tab">
            <li class="tab-item active">国际大牌<span>◆</span></li>
            <li class="tab-item">国妆名牌<span>◆</span></li>
            <li class="tab-item">清洁用品<span>◆</span></li>
            <li class="tab-item">男士精品</li>
        </ul>
        <div class="products">
            <div class="red main selected" style="background-color: red;">
            </div>
            <div class="blue main" style="background-color: blue;">
            </div>
            <div class="gree main" style="background-color: green;">
            </div>
            <div class="yellow main" style="background-color: yellow;">
            </div>
        </div>
    </div>

    <script>
       let $lis =  $(".tab>li");
       let $div = $(".products>div");
       $lis.mouseenter(function(){
           $(this).addClass("active").siblings().removeClass("active");
           $div.eq($(this).index()).addClass("selected").siblings().removeClass("selected");
       })
    </script>
</body>
</html>

jQuery操作属性

1.attr操作

设置单个属性

$().attr(name, value); name:需要设置的属性名,value:对应的属性值

$box.attr("name","名字");

设置多个属性

$().attr(obj); 参数是一个对象，包含了需要设置的属性名和属性值

 $box.attr({
           "title":"头",
           "aa":"111"
       })

获取属性

attr(name); name传需要获取的属性名称，返回对应的属性值

 console.log($box.attr("name"))

移除属性

removeAttr(name); name需要移除的属性名，如果传空，那么不会有任何操作
注意，并不是移除所有的属性。区分removeClass。

 $box.removeAttr("aa")

注意
1.设置属性时，如果是多个元素，给所有的元素设置相同的属性
2.获取属性时，只会获取到第一个元素对应的属性，与css方法一样
3.获取属性时，如果该属性不存在，那么会返回undefined
案例

美女相册，代码中详细注释，案例请到https://github.com/pengjunshan/WebPJS中查看

attr案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.12.4.js"></script>
    <style type="text/css">
        body {
            font-family: "Helvetica", "Arial", serif;
            color: #333;
            background-color: #ccc;
            margin: 1em 10%;
        }
        h1 {
            color: #333;
            background-color: transparent;
        }
        a {
            color: #c60;
            background-color: transparent;
            font-weight: bold;
            text-decoration: none;
        }
        ul {
            padding: 0;
        }
        li {
            float: left;
            padding: 1em;
            list-style: none;
        }
        #imagegallery {
            list-style: none;
        }
        #imagegallery li {
            margin: 0px 20px 20px 0px;
            padding: 0px;
            display: inline;
        }
        #imagegallery li a img {
            border: 0;
        }
        #des {
            font-size: 28sp;
            color: red;
        }
    </style>
</head>

<body>
    <h2>
        美女画廊
    </h2>

    <ul id="imagegallery">
        <li><a href="../img/1.jpg" title="美女A">
                <img src="../img/1-small.jpg" width="100" alt="美女1" />
            </a></li>
        <li><a href="../img/2.jpg" title="美女B">
                <img src="../img/2-small.jpg" width="100" alt="美女2" />
            </a></li>
        <li><a href="../img/3.jpg" title="美女C">
                <img src="../img/3-small.jpg" width="100" alt="美女3" />
            </a></li>
        <li><a href="../img/4.jpg" title="美女D">
                <img src="../img/4-small.jpg" width="100" alt="美女4" />
            </a></li>
    </ul>
    <div style="clear:both"></div>
    <img id="image" src="../img/placeholder.png" alt="" width="450px" />
    <p id="des">选择一个图片</p>

    <script>
        //获取所有的相册a标签
        let $aList = $("#imagegallery>li>a");
        let $image = $("#image")
        let $des = $("#des")

        //给所有的a标签注册点击事件
        $aList.click(function () {
            //获取当前点击的a标签属性
            let $href = $(this).attr("href")
            let $title = $(this).attr("title")

            //给大图赋值点击的图片 赋值title名字
            $image.attr("src", $href)
            $des.text($title)

            //阻止跳转
            return false;
        })
    </script>
</body>

</html>

2.prop操作

在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。

设置属性

prop(name,value); name:boolean类型属性，value:布尔值

$input.prop("checked",true)

获取属性

prop(name); name:boolean类型属性

 console.log($input.prop("checked"))

案例

全选、反选，代码中详细注释，案例请到https://github.com/pengjunshan/WebPJS中查看

全选反选案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.12.4.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        td {
            font: 14px "微软雅黑";
        }
        tbody tr {
            background-color: #f0f0f0;
            text-align: center;
        }
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>菜名</th>
                    <th>饭店</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>红烧肉</td>
                    <td>田老师</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>西红柿鸡蛋</td>
                    <td>田老师</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>红烧狮子头</td>
                    <td>田老师</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>日式肥牛</td>
                    <td>田老师</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>

        //获取全选和菜单的input对象
        let $allCheck = $("#j_cbAll")
        let $checkList = $("#j_tb input")

        //给全选添加点击事件
        $allCheck.click(function (e) {
            //获取全选input的状态
            let $isCheck = $(this).prop("checked")
            if ($isCheck) {//true:给所有的input都够勾选上
                $checkList.prop("checked", true)
            } else {//fale:给所有的input都不勾选
                $checkList.prop("checked", false)
            }
        })

        //给所有的input注册点击事件
        $checkList.click(function () {
            //获取input的总数
            let $size = $checkList.length;
            //获取选中input的总数
            let $checkSize = $("#j_tb input:checked").length
            //判断input总数是否等于选中的input总数
            if ($size === $checkSize) {
                $allCheck.prop("checked", true)
            } else {
                $allCheck.prop("checked", false)
            }
        })
    </script>
</body>
</html>

jQuery动画

1.显示(show) 与隐藏(hide)

show(speed,callback); speed:动画时长单位毫秒(可传可不传)，callback：动画执行完后回调(可传可不传);
show(); 如果不传递参数直接显示和隐藏没有动画;
stop(); 此方法是停止动画执行，用途:当手速比较快时，同一个动画会执行多次;
show/hide：修改的是元素的width、height、opacity。

      $(".input1").click(function(){
            //判断当前是隐藏还是显示
            if($(this).val() === "显示"){
                $(this).val("隐藏")
                $(".box1").stop().show(1000,function(){
                    console.log("显示了")
                })

            }else{
                $(this).val("显示")
                $(".box1").stop().hide(1000,function(){
                    console.log("隐藏了")
                })
            }
        })

2.滑入(slideUp)与滑出(slideDown)

slideUp(speed, callback); speed:动画时长单位毫秒(可传可不传)，callback：动画执行完后回调(可传可不传)
slideUp(); 如果不传参数，speed默认是400;
stop(); 此方法是停止动画执行，用途:当手速比较快时，同一个动画会执行多次;
slideToggle(speed,callback); 如果是隐藏状态，那么执行slideDown操作，如果是显示状态，那么执行slideUp操作。
slideUp/slideDown：修改的是元素的height;

        $(".input2").click(function(){
            //方式一：slideToggle()
            $(".box2").stop().slideToggle();
            //方式二：判断当前是隐藏还是显示
            if($(this).val() === "显示"){
                $(this).val("隐藏")
                $(".box2").stop().slideDown(400,function(){
                    console.log("显示了")
                })
            }else{
                $(this).val("显示")
                $(".box2").stop().slideUp(400,function(){
                    console.log("隐藏了")
                })
            }
        })

3.淡入(fadeIn)与淡出(fadeOut)

fadeIn(speed, callback); speed:动画时长单位毫秒(可传可不传)，callback：动画执行完后回调(可传可不传);
fadeIn(); 如果不传参数，speed默认是400;
fadeToggle(speed, callback); 如果当前元素处于隐藏状态，那么执行fadeIn操作，如果处于显示状态，那么执行fadeOut操作;
fade系列方法：修改的是元素的opacity;

         $(".input3").click(function(){
            //方式一: fadeToggle()
            $(".box3").stop().fadeToggle();
            //方式二: 判断当前是隐藏还是显示
            if($(this).val() === "显示"){
                $(this).val("隐藏")
                $(".box3").stop().fadeIn(400,function(){
                    console.log("显示了")
                })
            }else{
                $(this).val("显示")
                $(".box3").stop().fadeOut(400,function(){
                    console.log("隐藏了")
                })
            }
        })

4.自定义动画

$(selector).animate({params},speed,easing,callback);
1.{params}：要执行动画的CSS属性，带数字（必选）
2.speed：执行动画时长（可选）
3.easing：执行速度(可选) “swing”：在开头和结尾移动慢，在中间移动速度快 “linear”：匀速移动
4.callback：动画执行完后立即执行的回调函数（可选）

       $(".input4").click(function () {
            $(".box4").animate({
                left: 400,
                width: 400,
                height: 400,
            },3000,"swing",function(){
                console.log("执行完毕")
            })
        })

5.案例

下拉菜单案例、钢琴版导航条、手风琴案例，代码中详细注释，案例请到https://github.com/pengjunshan/WebPJS中查看

动画案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.12.4.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin-top: 50px;
            margin-left: 50px;
            background-image: url(../img/bg.jpg);
        }

        .wrap li {
            background-image: url(../img/libg.jpg);
        }

        .wrap>ul>li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }

        .nav {
            width: 800px;
            height: 60px;
            background-color: black;
            margin-left: 400px;
        }

        .nav li {
            width: 100px;
            height: 60px;
            /*border: 1px solid yellow;*/
            float: left;
            position: relative;
            overflow: hidden;
        }

        .nav a {
            position: absolute;
            width: 100%;
            height: 100%;
            font-size: 24px;
            color: blue;
            text-align: center;
            line-height: 60px;
            text-decoration: none;
            z-index: 2;
        }

        .nav span {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: yellow;
            top: 60px;
        }
       .hd ul {
            list-style: none;
        }

        .hd {
            width: 1200px;
            height: 320px;
            border: 2px solid red;
            margin: 100px auto;
        }

        .hd li {
            width: 240px;
            height: 320px;
            /*border: 1px solid #000;*/
            float: left;
        }
    </style>
</head>

<body>

    <!-- 案例一：下拉菜单案例  -->
    <div class="wrap">
        <ul>
            <li>
                <a href="javascript:void(0);">一级菜单1</a>
                <ul class="ul">
                    <li><a href="javascript:void(0);">二级菜单11</a></li>
                    <li><a href="javascript:void(0);">二级菜单12</a></li>
                    <li><a href="javascript:void(0);">二级菜单13</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);">一级菜单2</a>
                <ul>
                    <li><a href="javascript:void(0);">二级菜单21</a></li>
                    <li><a href="javascript:void(0);">二级菜单22</a></li>
                    <li><a href="javascript:void(0);">二级菜单23</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);">一级菜单3</a>
                <ul>
                    <li><a href="javascript:void(0);">二级菜单31</a></li>
                    <li><a href="javascript:void(0);">二级菜单32</a></li>
                    <li><a href="javascript:void(0);">二级菜单33</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <!-- 案例二：钢琴版导航条 -->
    <div class="nav">
        <ul>
            <li><a href="javascript:void(0);">导航1</a><span></span></li>
            <li><a href="javascript:void(0);">导航2</a><span></span></li>
            <li><a href="javascript:void(0);">导航3</a><span></span></li>
            <li><a href="javascript:void(0);">导航4</a><span></span></li>
            <li><a href="javascript:void(0);">导航5</a><span></span></li>
            <li><a href="javascript:void(0);">导航6</a><span></span></li>
            <li><a href="javascript:void(0);">导航7</a><span></span></li>
            <li><a href="javascript:void(0);">导航8</a><span></span></li>
        </ul>

        <div>
            <audio src="../img/a1.mp3"></audio>
            <audio src="mp3/a2.mp3"></audio>
            <audio src="mp3/a3.mp3"></audio>
            <audio src="mp3/a4.mp3"></audio>
            <audio src="mp3/a5.mp3"></audio>
            <audio src="mp3/a6.mp3"></audio>
            <audio src="mp3/a7.mp3"></audio>
            <audio src="mp3/a8.mp3"></audio>
        </div>
    </div>

    <!-- 案例三：手风琴案例 -->
    <div class="hd">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <script>
        $(function () {

            // 案例一：下拉菜单案例
            //1.获取wrap>ul>li
            let $lis = $(".wrap>ul>li");

            //2.给li集合注册mouseenter事件显示
            $lis.mouseenter(function () {
                $(this).find("ul").stop().slideDown();
            })

            //2.给li集合注册mouseleave事件隐藏
            $lis.mouseleave(function () {
                $(this).children("ul").stop().slideUp();
            })
        })

        //案例二：钢琴版导航条 
        //1.先获取nav>ul>li集合和audio集合
        let $navList = $(".nav>ul>li");
        let $audios = $("audio");

        //2.给$navList注册mouseenter事件
        $navList.mouseenter(function () {
            $(this).children("span").stop().animate({ top: 0 }, 500);
            let index = $(this).index();
            //play是DOM的方法 所以需要进行对象转换
            $audios[index].load();
            $audios.get(index).play();
        }).mouseleave(function () {
            $(this).children("span").stop().animate({ top: 60 }, 500);
        })

        //案例三：手风琴
        //1.先获取所有的li 和 外部的div
        let $hdLi = $(".hd>ul>li")
        let $hd = $(".hd")
        //2.给每个li设置css样式backgroundImage
        for(let i = 1; i<=$hdLi.length;i++){
            $hdLi.eq(i-1).css('backgroundImage','url(images/'+ i +'.jpg)')
            $hdLi.eq(i-1).css('backgroundImage','url(images/'+ i +'.jpg)');
        }
        //3.给$hdLi添加mouseenter事件
        $hdLi.mouseenter(function(){
            //让当前元素的宽度变成800（动画）同时让兄弟元素的宽度变成100 
            $(this).stop().animate({width:800},300).siblings().stop().animate({width:100},300)
        })
        //4.给$hd注册离开事件 一旦离开的区域 让所有的li元素都回到240 的宽度
        $hd.mouseleave(function(){
            $hdLi.stop().animate({width:240},300)
        })
    </script>
</body>
</html>

jQuery操作DOM节点

1.创建元素

$(htmlStr); htmlStr：html格式的字符串

 var $s = $("<span>这是一个span元素</span>");
 console.log($s)

2.添加元素

$(father).append(sonHtml); father:添加到father标签中 sonHtml：要添加的元素html字符串;
append()方法是添加到父级的最后面
prepend()方法是添加到父级的最前面

 $(".box").append("<span>我到最前面</span>");
 $(".box").prepend("<span>我到最后面</span>");

son.appendTo($(father)); 子元素添加到父元素中;
appendTo和prependTo方法和append方法和prepend的作用是一模一样的，只不过是调用的对象颠倒了而已;

 var p = $('<p>我是一个p</p>');
 var p1 = $('<p>我是二个p</p>');
 p.prependTo($(".box"))
 p1.appendTo($(".box"))

before方法是在当前元素的前面添加（与当前元素是兄弟关系）;
after方法是在当前元素的后面添加（与当前元素是兄弟关系）;

 var p2 = $('<p>我是三个p</p>');
 var p3 = $('<p>我是四个p</p>');
 $(".box").before(p2)
 $(".box").after(p3)

3.清空元素

empty()：清空指定节点的所有元素，自身保留(清理门户)

 $(".xm").empty();

4.删除元素

remove()：相比于empty()，自身也删除（自杀）

 $(".xm").remove();

5.克隆元素

clone(true); 参数：布尔值不管是false还是true 都是深拷贝;
false 不会复制元素身上的事件; true 会复制元素身上的事件;
返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。

let $new = $(".box>p").clone()
$(".box").append($new)

jQuery操作其它属性

1.val()方法

val();方法用于设置和获取表单元素的值，例如input、select、textarea的值

 $(".in").val("吃烩面")
 console.log($(".in").val())

2.html()方法

html(htmlStr)方法可以识别标签; htmlStr：标签字符串

 $(".box").html("<p>我是Html</p>")

3.text()方法

text(htmlStr)方法不可以识别标签; htmlStr：字符串

$(".box").text("<p>我是Html</p>")

4.height()、width()

height(number)设置或者获取高度， number:可传可不传；
width(number)设置获取获取宽度， number:可传可不传；
返回值是number类型（比如200），对比$(“img”).css(“width”)返回的是字符串（比如200px）；

$(".box").height(200)
console.log($(".box").height())
$(".box").width(200)
console.log($(".box").width())

5.scrollTop() scrollLeft()

scrollTop(number)；传参设置垂直滚动条的位置，不传承获取垂直滚动条的位置;
scrollLeft(number);传参设置水平滚动条的位置，不传参获取水平滚动条的位置;
mumber:参数为数值类型

 $(window).scrollTop(700);
 console.log($(window).scrollTop())
$(window).scrollLeft(300)
console.log($(window).scrollLeft())

案例

本案例主要是用了jquery操作DOM节点和其它属性方法知识点，代码中详细注释，案例请到https://github.com/pengjunshan/WebPJS中查看

jquery操作dom节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.12.4.js"></script>
    <style>
        select {
            width: 200px;
            background-color: teal;
            height: 200px;
            font-size: 20px;
        }

        .btn-box {
            width: 30px;
            display: inline-block;
            vertical-align: top;
        }

        html,
        body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 200%;
            font-family: "微软雅黑";
            font-size: 62.5%;
        }

        .boxDom {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .idDom {
            width: 100%;
            height: 100px;
            background: #666;
            position: fixed;
            bottom: 0px;
        }

        .content {
            display: inline-block;
            width: 430px;
            height: 40px;
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            margin: auto;
        }

        .title {
            display: inline;
            font-size: 4em;
            vertical-align: bottom;
            color: #fff;
        }

        .text {
            border: none;
            width: 300px;
            height: 30px;
            border-radius: 5px;
            font-size: 2.4em;
        }

        .btn {
            width: 60px;
            height: 30px;
            background: #f90000;
            border: none;
            color: #fff;
            font-size: 2.4em;
        }

        span {
            width: 300px;
            height: 40px;
            position: absolute;
            overflow: hidden;
            color: #000;
            font-size: 4em;
            line-height: 1.5em;
            cursor: pointer;
            white-space: nowrap;
        }

        .actGotop {
            position: fixed;
            bottom: 50px;
            right: 50px;
            width: 150px;
            height: 195px;
            display: none;
            z-index: 100;
        }

        .actGotop a,
        .actGotop a:link {
            width: 150px;
            height: 195px;
            display: inline-block;
            background: url(images/gotop.png) no-repeat;
            outline: none;
        }

        .actGotop a:hover {
            width: 150px;
            height: 195px;
            background: url(images/gotop.gif) no-repeat;
            outline: none;
        }
    </style>
</head>

<body>
    <!-- 案例一：城市选择 -->
    <h1>城市选择：</h1>
    <select id="src-city" name="src-city" multiple>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">深圳</option>
        <option value="4">广州</option>
        <option value="5">西红柿</option>
    </select>
    <div class="btn-box">
        <button id="btn1"> &gt;&gt; </button>
        <button id="btn2"> &lt;&lt; </button>
        <button id="btn3"> &gt;</button>
        <button id="btn4"> &lt; </button>
    </div>
    <select id="tar-city" name="tar-city" multiple>
    </select>

    <!-- 案例二: 弹幕 -->
    <div class="boxDom" id="boxDom">
        <div class="idDom" id="idDom">
            <div class="content">
                <p class="title">吐槽:</p>
                <input type="text" class="text" id="text" />
                <button type="button" class="btn" id="btn">发射</button>
            </div>
        </div>
    </div>

    <!-- 案例三：返回顶部小火箭 -->
    <div class="actGotop"><a href="javascript:;" title="Top"></a></div>

    <script>

        $(function () {

            //案例一
            let $btns = $("button")
            //左边全部移到右边
            $btns.eq(0).click(function () {
                $("#src-city option").appendTo($("#tar-city"))
            })
            //右边全部移到左边
            $btns.eq(1).click(function () {
                $("#tar-city option").appendTo($("#src-city"))
            })
            //左边选中的移动到右边
            $btns.eq(2).click(function () {
                $("#src-city option:selected").appendTo($("#tar-city"))
            })
            //右边选中的移到左边
            $btns.eq(3).click(function () {
                $("#tar-city option:selected").appendTo("#src-city")
            })

            //案例二
            let $boxDom = $("#boxDom")
            let $text = $("#text")
            let $btn = $("#btn")

            // 创建颜色数组
            var colorArr = ['red', 'green', 'blue', 'pink', 'cyan', 'gold', 'yellow', 'orange'];

            $btn.click(function () {
                let content = $text.val()
                if (content !== "") {
                    //创建一个span元素
                    let mSpan = $("<span></span>")
                    //赋值
                    mSpan.text(content)
                    //设置css样式
                    let mTop = parseInt(Math.random() * $(window).height() / 3);
                    let mColor = colorArr[parseInt(Math.random() * colorArr.length)];
                    mSpan.css({
                        color: mColor,
                        top: mTop,
                        left: $(window).width() + 100
                    })
                    //追加到屏幕中
                    mSpan.appendTo($boxDom)
                    //设置动画
                    mSpan.stop().animate({
                        left: -300
                    }, 10000, function () {
                        mSpan.remove()
                    })
                    //清空输入框
                    $text.val('')
                } else {
                    alert("请输入内容")
                }
            })

            //案例三
            let $actGotop = $(".actGotop")
            $(window).scroll(function () {
                let $top = $(this).scrollTop();
                if ($top > 600) {
                    $actGotop.stop().fadeIn(1000)
                } else {
                    $actGotop.stop().fadeOut(1000)
                }
            })
            $actGotop.click(function () {
                $('html,body').animate({
                    scrollTop: 0
                }, 500);
            })
        })

    </script>
</body>
</html>

jQuery事件机制

jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。

1.jQuery事件的发展历程

简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定

2.on事件绑定

$("input").eq(0).on("click",function) 传统事件绑定;
参数 1、事件类型参数 2、回调函数;
下面点击按钮动态生成span元素

   $("input").eq(0).on("click",function(){
            let s = $("<span>我会span</span>")
            s.css("color","red")
            s.appendTo($box)
        })

$box.on("click","span",function)委托事件绑定;
1、事件类型参数 2、选择器参数 3、回调函数;
box是父级元素，通过代理的方式给动态生成的sapn添加事件

    $(".box").on("click","span",function(){
            console.log("我是委托事件绑定")
        })

3.jQuery事件对象（）

对象属性	解释
event.type	事件类型
event.data	存储绑定事件时传递的附加数据
event.target	点了谁就是谁
event.currentTarget	等同于this，将来调用这个事件的对象
event.delegateTarget	代理对象
screenX和screenY	对应屏幕最左上角的值
offsetX和offsetY	点击的位置距离元素的左上角的位置
clientX和clientY	距离页面左上角的位置（忽视滚动条）
pageX和pageY	距离页面最顶部的左上角的位置（会计算滚动条的距离）
event.witch	鼠标按键类型，1=鼠标左键 2=鼠标中键 3=鼠标右键
event.keyCode	按下的键盘代码
event.stopPropagation()	阻止事件冒泡行为
event.preventDefault()	阻止浏览器默认行为
return false;	既阻止冒泡，又阻止了默认行为

jQuery对象与DOM对象之间的转换

什么是DOM对象（js对象）？
1.使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2.dom对象只可以使用dom对象的方法和属性。
3.但凡是利用document.get...取出来的都是DOM对象
什么是jquery对象？
1.jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
2.jquery对象只能使用jquery对象的方法。
3.但凡是用$()符号获取出来都是JQ对象
深入了解jQuery对象
jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））

1.jquery对象转DOM对象

        /**
        *jQuery对象转DOM对象
        */
        let $pp = $("#pp");
        console.log($pp)
        //第一种方式
        let pp1 = $pp[0];
        console.log(pp1)
        //第二种方式
        let pp2 = $pp.get(0);
        console.log(pp2)

        //text()方法是jQuery对象的方法 DOM对象用不了
        $pp.text("木问题啊");//赋值成功
        pp2.text("木问题啊。。。。")//赋值失败

2.DOM对象转jQuery对象

       /**
        *   DOM对象转jQuery对象
        */
        let dd = document.getElementById("dd");
        console.log(dd)
        let $dd = $(dd);
        console.log($dd)

        //innerHTML是DOM对象的属性 jQuery对象用不了
        dd.innerHTML = '你好呀！！';//赋值成功
    $dd.innerHTML = '你好呀';//赋值失败

其它知识点

index()方法注意细节

index() 获取的是当前元素在兄弟中的排名而不是在JQ集合中的排名