开发中常用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版本。

  1. 引包(引入jQuery文件)
<script type="text/javascript" src="jquery-1.12.4.js"></script>
  1. 入口函数
//原生JS的入口函数
window.onload = function(){
}
//JQ方式一
$(function(){
}
//JQ方式二
$(document).ready(function () {
});
  1. 功能实现
$("#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集合中的排名