第四篇前端学习之JQuery基础

2022-09-22 18:50:36

一 jQuery是什么？

jQuery就是一个JavaScript的库。

<1> jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

<3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器（IE6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+);

<4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

　　AJAX：实现前端向后端发送数据——非常重要

<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

参考JQuery文档：http://jquery.cuishifeng.cn/

二什么是jQuery对象？

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。

jQuery 对象是 jQuery 独有的.

如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

$("#test").html()

       //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 

       // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 

       //虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

       //约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 

var $variable = jQuery 对象    定义jquery对象时，变量前就加个 $符号，明确告诉人家这是jQuery对象

var variable = DOM 对象

$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

jquery的基础语法：$(selector).action()

幸福生活的开始从导入jQuery库开始

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div>hello</div>

    <!--要使用JQuery,必选先通过script引入jQueryku才行-->

    <script src="jquery-3.3.1.js"></script>

    <script>

        // $符号：就代表JQuery对象，里面有无穷尽的语法，全在$里

        // 找到div标签： $("div")

        // 对div标签进行样式设置：$("div").css("color","red");

        $("div").css("color","red");

        // 当然也可以用jQuery，但是用$符号更简单

        jQuery("div").css("color","red");

    </script>

</body>

</html>

三寻找元素(选择器和筛选器)

3.1 选择器

3.1.1 基本选择器

$("*"): 对所有标签进行操作
$("#id"):通过id找标签
$(".class") ：通过class属性找
$("element") ：通过标签名字找
$(".class,p,div")：可以一次找多个元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div>hello</div>

    <p id="p1">ppp</p>

    <a href="">click</a>

    <div class="outer">

        outers

        <div class="inner">inner</div>

    </div>

    <div class="outer">helllllllo</div>

    <!--要使用JQuery,必选先通过script引入jQueryku才行-->

    <script src="jquery-3.3.1.js"></script>

    <script>

        // $("*").css("color","red");

        // $("#p1").css("color","blue");

        // $(".inner").css("color","green");

        // $(".outer").css("color","brown"); // jQuery自己做了遍历

        // $(".inner,p,div").css("color","red");

        $("p").css("color","red"); // 通过element找，即通过标签的名字去找

    </script>

</body>

</html>

示例

3.1.2 层级选择器:处理层级嵌套, 后代（儿子）选择器

$(".outer div")  ：后代选择器
$(".outer>div")  ：子代选择器
$(".outer+div")  ：向下找紧挨着的兄弟标签
$(".outer~div")  ：向下找兄弟标签，可以不紧挨着outer的，也能找到

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div>hello</div>

    <p id="p1">ppp</p>

    <a href="">click</a>

    <div class="outer">

        outers

        <div class="inner">

            inner

            <p>innerP</p>

        </div>

        <p>alex</p>

    </div>

    <div>lalal</div>

    <p>隔着一个，向下也能找到兄弟标签</p>

    <p>向下紧挨着的兄弟标签</p>

    <!--<div class="outer">helllllllo</div>-->

    <!--要使用JQuery,必选先通过script引入jQueryku才行-->

    <script src="jquery-3.3.1.js"></script>

    <script>

        // 后代选择器：

        // 找到class属性值为outer的下面的所有 p 标签,不管是子代，孙子代，还是重孙子代都找到

        $(".outer p").css("color","red");

        // 子代选择器：

        // 找到找到class属性值为outer的下面的所有 p 标签且找到的p标签都是outer的儿子代

        $(".outer > p").css("color","red");

        // 向下紧挨着的兄弟标签

        // $(".outer + p").css("color","blue");

        // 向下找兄弟标签（同级的），可以不紧挨着

        $(".outer ~ p").css("color","green");

    </script>

</body>

</html>

层级选择器示例

3.1.3 基本筛选器

选择出后再过滤一遍的意思

$("li:first")

$("li:eq(2)")

$("li:even")

$("li:gt(1)")

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<ul>

    <li>111</li>

    <li>222</li>

    <li>333</li>

    <li>444</li>

    <li>555</li>

    <li>666</li>

    <li>777</li>

    <li>888</li>

</ul>

<script src="jquery-3.3.1.js"></script>

<script>

    console.log($("li"));

   // 对第一个li标签操作

    $("li:first").css("color","red");

    // 对最后一个li标签操作

    $("li:last").css("color","red");

//    对其他第n个操作

    $("li:eq(1)").css("color","blue");

    // 控制偶数行，从0开始的

    $("li:even").css("color","green");

    //控制奇数行

    $("li:odd").css("color","brown");

    //筛选出的是大于索引为3的标签，不包含索引3

    $("li:gt(3)").css("color","brown");

    //筛选出的是小于索引为3的标签，不包含索引3

    $("li:lt(3)").css("color","red");

</script>

</body>

</html>

基本筛选器

3.1.4 属性选择器

通过标签的属性来查找属性。自己也可以添加属性

$('[id="div1"]')

$('[alex="sb"][id]')

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div>hello</div>

    <p id="p1" alex="bbb">ppp属性选择器</p>

    <p id="p2" alex="bbb">ppp属性选择器</p>

    <p id="p3" alex="bbb">ppp属性选择器</p>

    <a href="">click</a>

    <!--<div class="outer">helllllllo</div>-->

    <!--要使用JQuery,必选先通过script引入jQueryku才行-->

    <script src="jquery-3.3.1.js"></script>

    <script>

        // 通过属性选择器查找

        $("[alex='bbb']").css("color","red");

    //    如果有多个属性标签属性名相同，可以多层选择

        $("[alex='bbb'][id='p2']").css("color","blue");

    </script>

</body>

</html>

属性选择器

3.1.5 表单选择器

$("[type='text']")----->$(":text")         注意 ：只适用于input标签
$("input:checked")

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="text">

<input type="checkbox">

<input type="submit">

<script src="jquery-3.3.1.js"></script>

<script>

    // $("[type='text']").css("width","200px");

    //只有input表单选择器才可以通过冒号的形式筛选

    $(":text").css("width","400px");

</script>

</body>

</html>

表单选择器

实例之左侧菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>left_menu</title>

    <style>

          .menu{

              height: 500px;

              width: 30%;

              background-color: gainsboro;

              float: left;

          }

          .content{

              height: 500px;

              width: 70%;

              background-color: rebeccapurple;

              float: left;

          }

         .title{

             line-height: 50px;

             background-color: #425a66;

             color: forestgreen;}

         .hide{

             display: none;

         }

    </style>

</head>

<body>

<div class="outer">

    <div class="menu">

        <div class="item">

            <div class="title">菜单一</div>

            <div class="con">

                <div>111</div>

                <div>111</div>

                <div>111</div>

            </div>

        </div>

        <div class="item">

            <div class="title">菜单二</div>

            <div class="con hide">

                <div>111</div>

                <div>111</div>

                <div>111</div>

            </div>

        </div>

        <div class="item">

            <div class="title">菜单三</div>

            <div class="con hide">

                <div>111</div>

                <div>111</div>

                <div>111</div>

            </div>

        </div>

    </div>

    <div class="content"></div>

</div>

<script src="jquery-3.2.1.js"></script>

<script>

           $(".item .title").click(function () {

                $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");

//                $(this).next().removeClass("hide");

//                $(this).parent().siblings().children(".con").addClass("hide");

           })

</script>

</body>

</html>

实例之tab切换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>tab</title>

    <script>

           function tab(self){

               var index=$(self).attr("xxx");

               $("#"+index).removeClass("hide").siblings().addClass("hide");

               $(self).addClass("current").siblings().removeClass("current");

           }

    </script>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        .tab_outer{

            margin: 0px auto;

            width: 60%;

        }

        .menu{

            background-color: #cccccc;

            /*border: 1px solid red;*/

            line-height: 40px;

        }

        .menu li{

            display: inline-block;

        }

        .menu a{

            border-right: 1px solid red;

            padding: 11px;

        }

        .content{

            background-color: tan;

            border: 1px solid green;

            height: 300px;

        }

        .hide{

            display: none;

        }

        .current{

            background-color: darkgray;

            color: yellow;

            border-top: solid 2px rebeccapurple;

        }

    </style>

</head>

<body>

      <div class="tab_outer">

          <ul class="menu">

              <li xxx="c1" class="current" onclick="tab(this);">菜单一</li>

              <li xxx="c2" onclick="tab(this);">菜单二</li>

              <li xxx="c3" onclick="tab(this);">菜单三</li>

          </ul>

          <div class="content">

              <div id="c1">内容一</div>

              <div id="c2" class="hide">内容二</div>

              <div id="c3" class="hide">内容三</div>

          </div>

      </div>

</body>

</html>

3.2 筛选器

3.2.1 过滤筛选器

与3.1.3基本筛选器实现的功能一样，但是推荐以后都用过滤筛选器这种方式实现。应该筛选条件是写在外面的，更灵活

$("li").eq(2)  
$("li").first()  
$("ul li").hasclass("test")

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<ul>

    <li>111</li>

    <li>222</li>

    <li>333</li>

    <li>444</li>

    <li>555</li>

    <li>666</li>

    <li>777</li>

    <li>888</li>

</ul>

<input type="text">

<input type="checkbox">

<input type="submit">

<script src="jquery-3.3.1.js"></script>

<script>

    $("li").eq(2).css("color","red");

    $("li").first().css("color","red");

    $("li").last().css("color","red");

</script>

</body>

</html>

过滤筛选器示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <li class="title">ll</li>

    <script src="jquery-3.3.1.js"></script>

    <script>

        // 查询某标签是否具有某属性

       console.log($("li").hasClass("title2"));

    </script>

</body>

</html>

查询某标签是否具有某属性

3.2.2 查找筛选器（基本四组）

非常重要，没有项目不用到这种筛选方法。

1. 找子代
$("div").children(".test")
$("div").find(".test")  

2.找下一个

$(".test").next()    
$(".test").nextAll()    
$(".test").nextUntil() 

3. 找上一个，完全与next组对应的

$("div").prev()  
$("div").prevAll()  
$("div").prevUntil()   

4.

$(".test").parent()  
$(".test").parents()  
$(".test").parentUntil() 

$("div").siblings()

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<p id="p1" alex="sb">pppp</p>

<p id="p2" alex2="sb">pppp2</p>

<div class="outer"> outer

    <div class="inner">

        inner

        <p>孙子p标签</p>

    </div>

    <p>儿子p标签</p>

</div>

<div class="outer2">Yuan</div>

<p>先走一步</p>

<ul>

    <li>111</li>

    <li class="begin">222</li>

    <li>333</li>

    <li>444</li>

    <li>555</li>

    <li>666</li>

    <li id="end">777</li>

    <li>888</li>

</ul>

<input type="text">

<input type="checkbox">

<input type="submit">

<script src="jquery-3.3.1.js"></script>

<script>

    // 1. 根据一个已知的标签找到它的子代标签

    // 只找子标签

    $(".outer").children("p").css("color","red");

    // 找到.outer下的所有p标签

    $(".outer").find("p").css("color","red");

//    2.next组查找

//    找到索引为2的li标签的下一个标签

    $("li").eq(2).next().css("color","red");

//    找到索引为2的li标签后面的所有标签

    $("li").eq(2).nextAll().css("color","red");

//    从索引为2的li标签开始，一直找到 id=end的li标签，左开右开区间）

    $("li").eq(2).nextUntil("#end").css("color","red");

//    3.prev组查找：向上找

//    找到索引为2的li标签的上一个标签

    $("li").eq(2).prev().css("color","red");

    //    找到索引为2的li标签上面的所有标签

    $("li").eq(2).prevAll().css("color","red");

    //    从索引为5的li标签开始，一直找到 id=end的li标签，左开右开区间）

    $("li").eq(5).prevUntil(".begin").css("color","red");

//    4. parent 组查找

    $(".outer .inner p").parent().css("color","red");

    $(".outer .inner p").parents().css("color","red");

    // 常用

    $(".outer .inner p").parentsUntil("body").css("color","red");

// siblings 用的最多的. 找兄弟标签，上下的全部兄弟标签都找出来，除了.outer

   $(".outer").siblings().css("color", "red");

</script>

</body>

</html>

示例

示例

四操作元素(属性，css，文档处理)

4.1 属性操作

--------------------------属性： attr 和 prop的使用方法和作用是完全一样的。区别只在于，attr既能处理固有属性，又能处理自定义属性，而prop只能处理固有属性

$("").attr(); -->常用的属性标签：既可以取到属性值，也可以给属性设置值；既可以处理固有属性，也可以处理自定义属性，推荐attr只用来处理自定义属性

$("").removeAttr();

$("").prop();-->获取属性，如果存在返回true,如果不存在返回false,用于判断使用；只能处理固有的属性，所以推荐对所有固有属性，都用prop处理

$("").removeProp();

--------------------------CSS类

$("").addClass(class|fn)   --> 见左侧菜单实例

$("").removeClass([class|fn])-->见左侧菜单实例

--------------------------HTML代码/文本/值
要处理的标签内部如果是html,就得用html()处理；
要处理的标签内部如果是text,就得用text()处理；

$("").html([val|fn])   --> 用html,可以区别出里面是文本还是标签，然后进行替换

$("").text([val|fn])   --> text，（）里的内容全部当做纯文本来处理，去替换

$("").val([val|fn|arr])--> val不能随便用，只能处理固有属性：input,option，select，表单类都有value属； 可以获取值也可以替换原来的值

---------------------------

$("").css("color","red")

需求：

常见的web项目左侧有个菜单，点击某个菜单，该菜单下面的子菜单显示，其他菜单隐藏

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--2. 再处理布局-->

    <style>

        .outer{

            height: 1000px;

            width: 100%;

            background-color: gray;

        }

        .menu{

            float: left;

            background-color: rebeccapurple;

            width: 30%;

            height: 500px;

        }

        .title{

            background-color: lightgreen;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

    <!--步骤：1. 先写html-->

    <div class="outer">

        <div class="menu">

            <div class="item">

                <div class="title" onclick="show(this)">菜单一</div>

                <!--默认进来菜单一不是折叠的,可以去掉hide属性，如果是折叠的，就像下面那样写上hide-->

                <div class="con hide">

                    <div>111</div>

                    <div>111</div>

                    <div>111</div>

                </div>

            </div>

            <div class="item">

                <div class="title" onclick="show(this)">菜单二</div>

                <div class="con hide">

                    <div>222</div>

                    <div>222</div>

                    <div>222</div>

                </div>

            </div>

            <div class="item">

                <div class="title" onclick="show(this)">菜单三</div>

                <div class="con hide">

                    <div>333</div>

                    <div>333</div>

                    <div>333</div>

                </div>

            </div>

        </div>

        <div class="content"></div>

    </div>

    <!--3.JQuery实现功能-->

    // 先引入Jquery

    <script src="jquery-3.3.1.js"></script>

    <script>

        // this表示找到当前点击的元素，function函数里用self接

        function show(self) {

            // 1）实现点哪个菜单，该菜单下面的子菜单展示出来；

            // 用到JQuery的属性操作知识了，找到当前点击的菜单，移除它的hide属性

            $(self).next().removeClass("hide");

            // 2）同时其他菜单的子菜单全部折叠

            // 先找到当前点击菜单的父元素，再通过siblings找到父元素的所有兄弟元素，然后找到所有兄弟元素下面的子元素

            // 里的 con属性，为其增加 hide属性

            // 如果没有hide属性，就增加，如果已经有hide属性就不增加

            $(self).parent().siblings().children(".con").addClass("hide");

        }

    </script>

</body>

</html>

左侧菜单显示折叠实例：addClass, removeClass

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div class="div1" con="c1"></div>

    <input type="checkbox" checked="checked"> 是否可见1

    <input type="checkbox" > 是否可见2

    <script src="jquery-3.3.1.js"></script>

    <script>

        // 1. attr()属性

        // attr属性，取出con属性的值

        console.log($("div").attr("con"));

        // attr属性，给con属性设置值；本来没有con1属性，还可以新增这个属性并设置属性值

        console.log($("div").attr("con","c2"));

        console.log($("div").attr("con1","c3"));

    //    2.取input标签的属性，看prop和attr的区别

        console.log($(":checkbox:first").attr("checked"));

        console.log($(":checkbox:last").attr("checked"));

        // prop返回的是属性的值，存在是true,不存在是false，方便用于判断

        // prop主要用来处理固有属性，比如上面自定义的con属性找不到的；

        // 如果是自己定义的属性，都用attr,更好的区分固有属性和自定义属性

        console.log($(":checkbox:first").prop("checked")); // attr和prop括号内都是些的属性名称，而不是具体的属性值

        console.log($(":checkbox:last").prop("checked"));

        // 自定义属性，找不到的

        console.log($(":checkbox:last").prop("con"));

    </script>

</body>

</html>

attr和prop的区别

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div class="div1" con="c1"></div>

    <input type="checkbox" checked="checked"> 是否可见1

    <input type="checkbox" > 是否可见2  </br>

    <input type="text" value="请输入你的大名">

    <div value = "234">测试value是否可以检测到</div>

    <div id="id1">

        uuuuu

        <p>ppppp</p>

    </div>

    <script src="jquery-3.3.1.js"></script>

    <script>

        // html()把标签里面的所有内容都取出来了，有其他标签也会取出来

        console.log($("#id1").html());

        // text()只会把下面的文本内容取出来，带标签的文本，也只会把文本取出来

        console.log($("#id1").text());

        // html()里面如果加了内容，会把下面原理所有的内容都会用新内容替换，相当于重新设值了

        console.log($("#id1").html("<h1>Ma Ge</h1>>"));

        console.log($("#id1").html("用文本替换"));

        // 如果是text(),就会把text里面的所有内容都当做纯文本来处理的

        // console.log($("#id1").text("<h1>Ma Ge</h1>>"));

    //    val不能随便用，只能处理固有属性：input,option，select，表单类都有value属性

        console.log($(":text").val());

        // 替换掉原来的值

        console.log($(":text").val("把你的大名换掉"));

        console.log($(":text").next().val());  // div本身没有value属性，所以取不到

    //    css 修改样式

    //    css都是一个个键值对，第一个参数是属性，第二个参数是值

        $("div").css("color","red");

    //    如果想设置多个样式可以用字典的方式做

        $("div").css({"color":"red","background-color":"green"});

    </script>

</body>

</html>

示例

jQuery循环

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <p>哦哦哦哦哦</p>

    <p>哦哦哦哦哦</p>

    <p>哦哦哦哦哦</p>

    <p>哦哦哦哦哦</p>

    <p>哦哦哦哦哦</p>

    <script src="jquery-3.3.1.js"></script>

    <script>

        arr = [11,22,33,44,55];

        //jQuery的循环方式1

        // $.each(obj:遍历对象； callback：就是函数)

        // function(x,y):两个参数，x:表示索引，y:表示索引对应的值

        $.each(arr,function (x,y) {

            console.log(x);

            console.log(y);

        });

        //jQuery的循环方式二，也是最常用的方式

        // 原理：

        // 1. 通常都是先拿到一个要遍历的标签对象集合，$("p")：即先找到要遍历的标签集合

        // 2. 然后对该集合里的标签进行遍历: .each(function(){})，这个each里就只有一个参数了，直接写function就行

        // 因为要遍历的对象是$("p")已经在前面了，each就是对它进行遍历的，所有只有一个参数

        //.each其实就已经对拿到的标签集合进行了处理，所以接下来关键的就是如何表示每一个标签，如何对遍历到的每个标签进行处理

        // 答案就是强大的this, $(this)就表示遍历到的标签集合里你当前要操作的标签；

        $("p").each(function () {

            // $(this) 就是用来表示集合$("p")里每一个标签，

            console.log($(this))  //$(this) 就代表当前的标签对象

            $(this).html("<h1>把哦哦哦哦哦改成嘎嘎嘎嘎嘎</h1>")

        })

        // JQuery和js可以混搭着用

        // for(var i = 0; i<arr.length;i++){

        //     $("p").eq(i).html(arr[i])

        // }

    </script>

</body>

</html>

jQuery的两种循环方式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <button onclick="selectAll()">全选</button>

    <button onclick="reverse()">反选</button>

    <button onclick="cancle()">取消</button>

    <table border="1px">

        <tr >

            <td><input type="checkbox"></td>

            <td>111</td>

            <td>111</td>

            <td>111</td>

        </tr>

        <tr >

            <td><input type="checkbox"></td>

            <td>222</td>

            <td>222</td>

            <td>222</td>

        </tr>

        <tr >

            <td><input type="checkbox"></td>

            <td>333</td>

            <td>333</td>

            <td>333</td>

        </tr>

    </table>

    <script src="jquery-3.3.1.js"></script>

    <script>

        // 还是要先绑定一个函数，这个绑定方式还是按照js的绑定方式走的

        // 全选

        function selectAll() {

            // 在函数内部用jQuery进行遍历，然后把checked属性改为true

            $(":checkbox").each(function () {

                $(this).prop("checked",true)

            })

        }

        //反选

        function reverse() {

            $(":checkbox").each(function () {

                if ($(this).prop("checked")){

                    $(this).prop("checked",false)

                }else{

                    $(this).prop("checked",true)

                }

            })

        }

        // 取消

        function cancle() {

            $(":checkbox").each(function () {

                $(this).prop("checked",false)

            })

        }

    </script>

</body>

</html>

jQuery之正反选实例

模态：

就是执行一个操作，弹出一个透明页遮挡，让透明页底部的元素不可操作，透明页上面的元素可以操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .content{

            height: 1800px;

            background-color: antiquewhite;

        }

        .shade{

            position: fixed;

            /*占满屏，设置下面四个参数为0*/

            top:0;

            left:0;

            right: 0;

            bottom:0;

            background-color: gray;

            opacity: 0.7; /*透明度*/

        }

        .model{

            width:200px;

            height: 200px;

            background-color: bisque;

            border: #FF0000;

            /*居中*/

            position: absolute;

            top:50%;

            left: 50%;

            margin-top: -100px;

            margin-left: -100px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

    <!-- 第一层：正常显示的网页内容-->

    <div class="content">

        <button onclick="show(this)">show</button>

    </div>

    <!--第二层：遮挡层：是有透明度的，且固定住不可让content内容再上下滑动了-->

    <div class="shade hide"></div>

    <!--第三层：点击show后显示在最上面的对话框-->

    <div class="model hide">

        <button onclick="cancle(this)">取消</button>

    </div>

    <script src="jquery-3.3.1.js"></script>

    <script>

        function show(self) {

            $(self).parent().siblings().removeClass("hide")

        }

        function cancle(self) {

            // 方式1：链式寻找法操作

            $(self).parent().addClass("hide").prev().addClass("hide");

            // 方式2：先找到当前元素的父级，再找到父级的父级，然后父级下面的子级里有shade属性的标签，执行操作

            $(self).parent().parent().children(".models,.shade").addClass("hide")

        }

    </script>

</body>

</html>

模态实例

4.2 文档处理

用于处理节点的增删改查

//创建一个标签对象

    $("<p>")

//内部插入  -- 插入的对象变成了儿子

　　　
　　append是加到当前标签下面

    $("").append(content|fn)  ----->$("p").append("<b>Hello</b>");  就是把append里的内容添加到前面的对象（$("p")）里面去，= 给前面的对象加了个儿子

    $("").appendTo(content)   ----->$("p").appendTo("div"); 与append功能完全一样，只是写法不同，按正常顺序往下写的；将$("p")追加到"div"的下面

    prepend是加到当前标签的上面
　　 $("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");将对象添加到$("p")的前面；

    $("").prependTo(content)  ----->$("p").prependTo("#foo");

//外部插入 -- 插入的对象变成了兄弟， 原理类似 上面的内部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");

    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");

    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");

    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换

    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

    $("").empty()

    $("").remove([expr])

//复制

    $("").clone([Even[,deepEven]])

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div class="c1">

        <p>P级父标签</p>

    </div>

    <button class="b1">add</button>

    <script src="jquery-3.3.1.js"></script>

    <script>

        // append 内部插入 ---插入到下面

        // 点击add 按钮，给p标签下面添加一个 h1标签

        // 先找到button标签，给绑定一个click事件，然后给click事件一个函数，执行某功能

        $("button").click(function () {

            var $ele = $("<h1></h1>");   // 定义一个jquery变量，令该变量是一个h1标签；通变量写活了

            $ele.html("Hello World").css("color","red"); // 给该标签对象赋值

            $(".c1").append($ele);  // 将$els对象添加到 p级标签的下面

               // appendTo ：将要添加的对象$ele添加到".c1"的下面，按顺序写，更好看懂

        // 实现的功能与append是完全一样的，只是写法不同

            $ele.appendTo(".c1");

        });

        // prepend 内部插入--插入到上面

        // 点击add 按钮，给p标签下面添加一个 h1标签

        // 先找到button标签，给绑定一个click事件，然后给click事件一个函数，执行某功能

        $(".b1").click(function () {

            var $ele1 = $("<h1></h1>");   // 定义一个jquery变量，令该变量是一个h1标签；通变量写活了

            $ele1.html("加到当前标签的上面").css("color","green"); // 给该标签对象赋值

            $(".c1").prepend($ele1);  // 将$els对象添加到 p级标签的下面

            $ele1.prependTo(".c1");

        });

        // 第二种方式，直接append，只不过写死了

        $(".c1").append("<h2>直接添加h2标签</h2>").css("color","green");

    </script>

</body>

</html>

内部插入示例append, prepend

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div class="c1">

        <p>P级父标签</p>

    </div>

    <button class="b1">add</button>

    <script src="jquery-3.3.1.js"></script>

    <script>

        // after 外部插入 ---插入到当前对象的下面，变成了二弟

        $("button").click(function () {

            var $ele = $("<h1></h1>");

            $ele.html("插入到当前对象的下面，变成了二弟").css("color","red");

            // 插入方式1

            $(".c1").after($ele);

            // 插入方式2

            // $ele.insertAfter(".c1");

        });

        // before 外部插入--插入到当前对象的上面，变成了大哥

        $(".b1").click(function () {

            var $ele1 = $("<h1></h1>");

            $ele1.html("插入到当前对象的上面，变成了大哥").css("color","green");

            // $(".c1").before($ele1);

            $ele1.insertBefore(".c1");

        });

    </script>

</body>

</html>

外部插入before,after

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div class="c1">

        <p>P级父标签</p>

    </div>

    <button class="b1">add</button>

    <script src="jquery-3.3.1.js"></script>

    <script>

        $(".b1").click(function () {

            var $ele1 = $("<h1></h1>");

            $ele1.html("替换掉P标签").css("color","green");

            $(".c1").replaceWith($ele1);

        });

    </script>

</body>

</html>

替换：replaceWith

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div class="c1">

        <p>P级父标签</p>

        <h1>h1能清空吗</h1>

    </div>

    <button class="b1">删除</button>

    <script src="jquery-3.3.1.js"></script>

    <script>

        $(".b1").click(function () {

            // empty：h1这个当前标签还在，只是下面的p标签没了

            $(".c1 h1").empty();

            // remove：c1这个当前标签也被删除了

            $(".c1").remove();

        });

    </script>

</body>

</html>

删除和清空：empty和remove

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div class="c1">

        <p>P级父标签</p>

        <h1>h1能清空吗</h1>

    </div>

    <button class="b1">复制</button>

    <script src="jquery-3.3.1.js"></script>

    <script>

        $(".b1").click(function () {

            $(".c1").clone().insertAfter(".c1")

        });

    </script>

</body>

</html>

复制：clone

但是，这个clone有个问题，执行添加多次，是成倍的复制的，下面的示例来解决这个问题

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div class="outer">

        <div class="item">

            <button onclick="clone_obj(this)"> + </button>

            <input type="text">

        </div>

    </div>

    <script src="jquery-3.3.1.js"></script>

    <script>

        function conle_obj(self) {

            // 定义个变量，通过this可以找到本标签，然后找到本标签的父级item,复制

            var $conle_object = $(self).parent().clone();

            // 然后将复制的标签插入到.outer的下面

            $conle_object.insertAfter(".outer");

        };

    </script>

</body>

</html>

解决成倍复制的问题

新需求:让新复制的变成减号，点击减号可以删除标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div class="outer">

        <div class="item">

            <button onclick="clone_obj(this)"> + </button>

            <input type="text">

        </div>

    </div>

    <script src="jquery-3.3.1.js"></script>

    <script>

        function clone_obj(self) {

            // 1.定义个变量，通过this可以找到本标签，然后找到本标签的父级item,复制

            var $conle_object = $(self).parent().clone();

            // 2. children("button").html("-")是找到子标签然后改成 -

            // attr("onclick","remove_obj(this)") 是添加一个onclick点击属性，属性名remove_obj(this)

            $conle_object.children("button").html("-").attr("onclick","remove_obj(this)");

            // 3. 然后再把该对象添加到.outer下面

            $conle_object.appendTo(".outer");

        };

        // 4.点击减号的时候可以删除

        function remove_obj(self){

            $(self).parent().remove()

        }

    </script>

</body>

</html>

可以复制，也可以remove

4.3 css操作

CSS

        $("").css(name|pro|[,val|fn])

    位置

        $("").offset([coordinates])：标签相当于视口（当前窗口）的偏移量

        $("").position()：相对于已经定位了的父标签的偏移量

        $("").scrollTop([val])：scrollTop：表示举例顶部的距离

        $("").scrollLeft([val])

    尺寸

        $("").height([val|fn])：拿到的就是内容的高度，还可以改值，比如加上参数：height("300px"),高度就变成了300px了

        $("").width([val|fn])：拿到的是内容的宽度

        $("").innerHeight()：拿到的是包括了padding，没包括boder的

        $("").innerWidth()

        $("").outerHeight([options])：拿到的是包括了padding和boder的；如果再加个options 为 true的参数，就会包括margin了

        $("").outerWidth([options])

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*  将 body的边距设置位0 */

        body{

            margin: 0px;

            padding: 0px;

        }

        .div1,.div2{

            height: 200px;

            width: 200px;

        }

        .div1{

            background-color: red;

        }

        .div2{

            background-color: rebeccapurple;

        }

    </style>

</head>

<body>

    <div class="div1"></div>

    <div class="div2"></div>

    <script src="jquery-3.3.1.js"></script>

    <script>

        // offset 和 position都只有两个方法：top 和 left

        // offset方法的参照对象都是当前视口（能看见的窗口）

        console.log($(".div1").offset().top);

        console.log($(".div1").offset().left);

        // position的参数对象是已经定位了的父级标签

        // 该示例中，它的父级标签就是body，body默认就是已经定位了的

        console.log($(".div2").position().top);

        console.log($(".div2").position().left);

    </script>

</body>

</html>

位置：offset和position

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*  将 body的边距设置位0 */

        body{

            margin: 0px;

            padding: 0px;

        }

        .div1,.div2{

            height: 200px;

            width: 200px;

        }

        .div1{

            background-color: red;

        }

        .div2{

            background-color: rebeccapurple;

        }

        .outer{

            position: relative;

            height: 400px;

            width: 400px;

            background-color: green;

        }

    </style>

</head>

<body>

    <div class="div1"></div>

    <div class="outer">

        <div class="div2"></div>

    </div>

    <script src="jquery-3.3.1.js"></script>

    <script>

        // offset 和 position都只有两个方法：top 和 left

        // offset方法的参照对象都是当前视口（能看见的窗口）

        console.log($(".div1").offset().top);

        console.log($(".div1").offset().left);

        // position的参数对象是已经定位了的父级标签

        // 该示例中，它的父级标签就是outer，outer已经定位了

        // 所以此时，再看他的位置，就是相对于outer来说的，变成了0,0

        console.log($(".div2").position().top);

        console.log($(".div2").position().left);

    </script>

</body>

</html>

位置：position相对于已经定位的父级标签标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*  将 body的边距设置位0 */

        body{

            margin: 0px;

            padding: 0px;

        }

        .div1,.div2{

            height: 200px;

            width: 200px;

        }

        .div1{

            background-color: red;

            border: 6px solid black;

            padding: 20px;

            margin: 3px;

        }

        .div2{

            background-color: rebeccapurple;

        }

        .outer{

            position: relative;

            height: 400px;

            width: 400px;

            background-color: green;

        }

    </style>

</head>

<body>

    <div class="div1"></div>

    <div class="outer">

        <div class="div2"></div>

    </div>

    <script src="jquery-3.3.1.js"></script>

    <script>

        // height: 拿到的就是内容的大小 --- 用的最多

        // innerHeight: 取出的是带着padding的大小

        // outerHeight: 取出的是带着padding 和 boder的大小

        console.log($(".div1").height());   //

        console.log($(".div1").height("300px"));   // 340 可以改值

        console.log($(".div1").innerHeight()); //

        console.log($(".div1").outerHeight()); //

        console.log($(".div1").outerHeight(true)); // 258 加上参数true,就包括了外边距margin了。

    </script>

</body>

</html>

尺寸示例

实例：返回顶部

需求：

1. 出现滚动条；2；随着滚动条的下滑，底部出现"返回顶部"，点击页面滚动条返回到顶部

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .div1,.div2{

            height: 2000px;

            width: 100%;

        }

        .div1{

            background-color: red;

        }

        .div2{

            background-color: rebeccapurple;

        }

        /*让返回顶部固定到右下角*/

        .return-to-top{

            width: 80px;

            height: 50px;

            position: fixed;

            right: 20px;

            bottom: 20px;

            background-color: bisque;

            line-height: 50px;

            text-align: center;

        }

        /*隐藏某个标签，给它加个hide 属性，然后display =none 这都是套路*/

        .hide{

            display: none;

        }

    </style>

</head>

<body>

    <div class="div1"></div>

    <div class="outer">

        <div class="div2"></div>

    </div>

    <div class="return-to-top hide" onclick="returnTop()">返回顶部</div>

    <script src="jquery-3.3.1.js"></script>

    <script>

        // window.onscroll 通过窗口的onscrool属性来监听滚动事件

        window.onscroll = function f() {

            // 可以看到滚动条当前的位置与窗口顶部的举例

            console.log($(window).scrollTop());

        //  滚动条滑动过程中才出现返回顶部，默认不显示返回顶部

        //  需要用到判断

        //    $(window).scrollTop()得到的是距离窗口顶部的距离，是一个具体的值

        //    当该值>800时，将hide属性移除，就显示了返回顶部

            if ($(window).scrollTop()>800){

                $(".return-to-top").removeClass("hide")

            }

            // 当该值小于800时，就添加hide属性，返回顶部就隐藏了

            else {

                $(".return-to-top").addClass("hide")

            }

        };

        function returnTop() {

            //以window为作为当前窗口，是个参照物；事件监听对象

            // scrollTop(0)：表示举例window窗口顶部距离为0

            // 这样就实现了点击返回顶部的功能

            $(window).scrollTop(0)

        }

    </script>

</body>

</html>

返回顶部实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .div1,.div2{

            height: 2000px;

            width: 100%;

        }

        /*overflow: auto表示内容填充满后会自动产生一个滚动条，而不会再溢出内容 */

        .div1{

            background-color: red;

            height: 300px;

            width: 300px;

            overflow: auto;

        }

        .div2{

            background-color: rebeccapurple;

        }

        /*让返回顶部固定到右下角*/

        .return-to-top{

            width: 80px;

            height: 50px;

            position: fixed;

            right: 20px;

            bottom: 20px;

            background-color: bisque;

            line-height: 50px;

            text-align: center;

        }

        /*隐藏某个标签，给它加个hide 属性，然后display =none 这都是套路*/

        .hide{

            display: none;

        }

    </style>

</head>

<body>

    <div class="div1">

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

        <p>111</p>

    </div>

    <div class="outer">

        <div class="div2">

                <button class="return-top" onclick="returnTop()">returntop</button>

        </div>

    </div>

    <script src="jquery-3.3.1.js"></script>

    <script>

        // 监听局部div1，让一点returntop button，就返回顶部

        function returnTop() {

            //$(".div1")：要监听哪个，就找哪个，不一定非得是监听Window

            $(".div1").scrollTop(0)

        }

    </script>

</body>

</html>

监听div，返回顶部

五事件页面载入

页面载入

 ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

 页面载入语法1：
$(document).ready(function(){
　　　函数代码
}) 

页面载入语法2：是语法一的简写方式：
 $(function(){
　　　函数代码
})

事件委托（.on）---终极版的绑定方法

    $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。

    //  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：

    //  $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定click事件；
    //  语法解析：就是给ul标签绑定了click事件，然后ul把这个事件委托给它下面的所有li标签，使所有li标签都具有click的事件

    [selector]参数的好处:

        好处在于.on方法为动态添加的元素也能绑上指定事件；如：

        //$('ul li').on('click', function(){console.log('click');})的绑定方式和

        //$('ul li').bind('click', function(){console.log('click');})一样；
　　　　　
　　　　
　　我通过js给ul添加了一个

        //li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的

        //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加

        //li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件

    [data]参数的调用:

             function myHandler(event) {

                alert(event.data.foo);

                }

             $("li").on("click", {foo: "bar"}, myHandler)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <ul>

        <li>111</li>

        <li>222</li>

        <li>333</li>

        <li>444</li>

        <li>555</li>

    </ul>

    <script src="jquery-3.3.1.js"></script>

    <script>

        // 在js里找到li标签，没法直接按照下面的方式用，需要遍历后才能用

        // var eles = document.getElementsByTagName("li");

        // eles.onclick = function () {

        //     alert(123)

        // }

        // 来看看jquery的方便之处

    //    ul,li标签都没有绑定任何事件

    //    1. 下面看Jquer的事件绑定————简写方式

        // 用jquery绑定事件，就已经帮你做了内部遍历了

        $("ul li").click(function () {

            alert("Jquety之事件绑定简写方式")

        });

    //  2.事件绑定的完整写法

    //    上面的简写方式如果写完整了就是下面的样子，把click 和 function作为参数传递进去

    //    首先还是得先找到要绑定的标签

        $("ul li").bind("click",function () {

            alert("Jquety之事件绑定的完整写法")

        });

    //    3. 有事件绑定，就有事件解绑

        $("ul li").unbind("click");

    </script>

</body>

</html>

事件绑定示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <ul>

        <li>111</li>

        <li>222</li>

        <li>333</li>

        <li>444</li>

        <li>555</li>

    </ul>

    <button>add</button>

    <script src="jquery-3.3.1.js"></script>

    <script>

    // 事件绑定  --- 平时就用事件绑定就够了

        $("ul li").click(function () {

            alert("Jquety之事件绑定简写方式")

        });

    //    on:事件委托

    // 但是上面新增的标签却没有点击事件，只是把标签加上了而已，如何才能动态给新增的标签也绑定事件呢？

    //    用事件委托的方式解决这个问题----用 on方法

    // on(第一个参数是事件，此例子是click事件，第二个参数是对谁起作用，本利是li标签，第三个参数是具体的函数)

    // 这个事件委托本质就是给ul绑定了一个事件，然后ul把这个事件委托给了ul下面的所有的li，这个时候，其实主语就变成了ul

    // 遇到动态绑定，就需要用到事件委托了

    $("ul").on("click","li",function () {

        alert("Jquety之事件委托方式")

    });

    //  给button标签绑定事件，一点击就新增衣蛾li标签，并数字也变化

        $("button").click(function () {

        //    1. 先创建一个li标签

            var $eli = $("<li>");

            // 2. 获取li标签的长度

            var len = $("ul li").length;

            // 3. 给新增的li标签加1再*1111，用来作为新增的li标签的文本

            $eli.html((len+1)*111);

        //    4. 然后将li标签添加到ul里去

            $eli.appendTo("ul");

        })

    </script>

</body>

</html>

on：事件委托

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

        <script src="jquery-3.3.1.js"></script>

    <script>

        // 如果直接把jquery放到head里，这个功能就无法生效，因为上面的加载完了，下面的body的代码还没加载完，找不到 "ul li"

        // $("ul li").html(5)

    //    所以就引入一个页面载入，等所有页面就加载完成后再执行函数

    //    1. 完整写法方式

        $(document).ready(function () {

            $("ul li").html(5)

        });

        // 2. 页面加载简写方式

        $(function () {

            $("ul li").html(5)

        })

    </script>

</head>

<body>

    <ul>

        <li>111</li>

        <li>222</li>

        <li>333</li>

        <li>444</li>

        <li>555</li>

    </ul>

    <button>add</button>

</body>

</html>

页面载入完整写法和简写

六动画效果

1. 显示与隐藏

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动画效果-显示与隐藏</title>

</head>

<body>

    <div>hello</div>

    <button onclick="f1()">显示</button>

    <button onclick="f2()">隐藏</button>

    <button onclick="f3()">切换</button>

    <script src="jquery-3.3.1.js"></script>

    <script>

        function f1() {

                // $("div").show();   // 点击就可以显示div

            $("div").show(1000)   // 点击就可以显示div，参数表示的毫秒，慢慢显示

        }

        function f2() {

                // $("div").hide()  // 点击就可以隐藏div

            $("div").hide(1000)  // 点击就可以隐藏div,参数表示的是毫秒，可以实现慢慢隐藏的效果

        }

        // toggle()方法，一个方法可以实现上面两个功能，会自己判断，

        // 如果div是隐藏的，点击就会显示；如果div是显示的，点击就会隐藏

        function f3() {

            $("div").toggle(1000)

        }

    </script>

</body>

</html>

显示与隐藏 show hide

2. 滑动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-3.3.1.js"></script>

    <script>

    $(document).ready(function(){

     //   找到div给它绑定一个click事件

     $("#slideDown").click(function(){

         $("#content").slideDown(1000);  // 向上滑动

     });

      $("#slideUp").click(function(){

         $("#content").slideUp(1000);    // 向下滑动

     });

      $("#slideToggle").click(function(){

         $("#content").slideToggle(1000);   // 自己判断是向上滑还是向下滑；根据需求决定是否加参数，表示时间

     })

  });

    </script>

    <style>

        #content{

            text-align: center;

            background-color: lightblue;

            border:solid 1px red;

            display: none;

            padding: 50px;

        }

    </style>

</head>

<body>

    <div id="slideDown">出现</div>

    <div id="slideUp">隐藏</div>

    <div id="slideToggle">toggle</div>

    <div id="content">helloworld</div>

</body>

</html>

滑动 sliddeUp slideDown slideToggle

3.淡入淡出

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>淡入淡出</title>

    <style>

        .div1{

            width: 80px;

            height: 80px;

            background-color: #FF0000;

        }

    </style>

    <script src="jquery-3.3.1.js"></script>

    <script>

        $(document).ready(function () {

            $("#in").click(function () {

                $(".div1").fadeIn(2000)

            });

            $("#out").click(function () {

                $(".div1").fadeOut(2000)

            });

            $("#switch").click(function () {

               $(".div1").fadeToggle(2000)

            });

            // 淡出到某个设定的透明度为止，只有fadeTo有透明度参数

            $("#to").click(function () {

                $(".div1").fadeTo(2000, 0.4)

            })

        })

    </script>

</head>

<body>

    <button id="in">淡入</button>

    <button id="out">淡出</button>

    <button id="switch">切换</button>

    <button id="to">fadeto</button>

    <div class="div1"></div>

</body>

</html>

淡入淡出fadeIn fadeOut fadeToggle fadeTo

4.回调函数

python里的回调函数就是callback

所谓回调函数：就是完成了一个动作之后再去执行某个内容

比如上面的淡出动画效果完成后，在执行一个回调函数，弹出alert

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>淡入淡出</title>

    <style>

        .div1{

            width: 80px;

            height: 80px;

            background-color: #FF0000;

        }

    </style>

    <script src="jquery-3.3.1.js"></script>

    <script>

        $(document).ready(function () {

            $("#in").click(function () {

                $(".div1").fadeIn(2000)

            });

            $("#out").click(function () {

                // 淡出效果2秒钟完成后，再执行回调函数function，弹出alert

                $(".div1").fadeOut(2000,function () {

                    alert("1234")

                })

            });

            $("#switch").click(function () {

               $(".div1").fadeToggle(2000)

            });

            // 淡出到某个设定的透明度为止，只有fadeTo有透明度参数

            $("#to").click(function () {

                $(".div1").fadeTo(2000, 0.4)

            })

        })

    </script>

</head>

<body>

    <button id="in">淡入</button>

    <button id="out">淡出</button>

    <button id="switch">切换</button>

    <button id="to">fadeto</button>

    <div class="div1"></div>

</body>

</html>

回调函数

七扩展方法 (插件机制)

一用JQuery写插件时，最核心的方两个方法

<script>

$.extend(object)      //为JQuery 添加一个静态方法。

$.fn.extend(object)   //为JQuery实例添加一个方法。

　　　// jQuery.extend 也可以写成 $.extend

    jQuery.extend({

          min: function(a, b) { return a < b ? a : b; },  // 三元表达式：如果a<b，返回a,否则返回 b

          max: function(a, b) { return a > b ? a : b; }

        });

    console.log($.min(3,4));

//-----------------------------------------------------------------------

$.fn.extend({

    "print":function(){

        for (var i=0;i<this.length;i++){

            console.log($(this)[i].innerHTML)

        }

    }

});

$("p").print();

</script>

二定义作用域

定义一个JQuery插件，首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。

(function(a,b){return a+b})(3,5)

       (function ($) { })(jQuery);

//相当于

        var fn = function ($) { };

        fn(jQuery);

三默认参数

定义了jQuery插件之后，如果希望某些参数具有默认值，那么可以以这种方式来指定

/step01 定义JQuery的作用域

(function ($) {

    //step03-a 插件的默认值属性

    var defaults = {

        prevId: 'prevBtn',

        prevText: 'Previous',

        nextId: 'nextBtn',

        nextText: 'Next'

        //……

    };

    //step06-a 在插件里定义方法

    var showLink = function (obj) {

        $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });

    }

    //step02 插件的扩展方法名称

    $.fn.easySlider = function (options) {

        //step03-b 合并用户自定义属性，默认属性

        var options = $.extend(defaults, options);

        //step4 支持JQuery选择器

        //step5 支持链式调用

        return this.each(function () {

            //step06-b 在插件里定义方法

            showLink(this);

        });

    }

})(jQuery);

参考博客：http://www.cnblogs.com/xcj26/p/3345556.html

八经典实例练习

实例之注册验证

<form class="Form">

    <p><input class="v1" type="text" name="username" mark="用户名"></p>

    <p><input class="v1" type="text" name="email" mark="邮箱"></p>

    <p><input class="v1" type="submit" value="submit"  onclick="return validate()"></p>

</form>

<script src="jquery-3.1.1.js"></script>

<script>

    // 注意:

    // DOM对象--->jquery对象    $(DOM)

    // jquery对象--->DOM对象    $("")[0]

    //---------------------------------------------------------

    // DOM绑定版本

    function validate(){

        flag=true;

        $("Form .v1").each(function(){

            $(this).next("span").remove();// 防止对此点击按钮产生多个span标签

              var value=$(this).val();

            if (value.trim().length==0){

                 var mark=$(this).attr("mark");

                 var ele=document.createElement("span");

                 ele.innerHTML=mark+"不能为空!";

                 $(this).after(ele);

                 $(ele).prop("class","error");// DOM对象转换为jquery对象

                 flag=false;

                 //  return false-------->引出$.each的return false注意点

            }

        });

        return flag

    }

                   //---------------------------------------------------------

//---------------------------------------------------------

                   //---------------------------------------------------------

        function f(){

        for(var i=0;i<4;i++){

            if (i==2){

                return

            }

            console.log(i)

        }

    }

    f();  // 这个例子大家应该不会有问题吧!!!

//------------------------------------------

    li=[11,22,33,44];

    $.each(li,function(i,v){

        if (v==33){

                return ;   //  ===试一试 return false会怎样?

            }

            console.log(v)

    });

//------------------------------------------

    //  $.MyEach(obj,function(i,v){}):

         for(var i in obj){

             func(i,obj[i]) ; //  i就是索引,v就是对应值

             // {}:我们写的大括号的内容就是func的执行语句;

         }

    // 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行

    //本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了,

    //希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步:

         for(var i in obj){

             ret=func(i,obj[i]) ;

             if(ret==false){

                 return ;

             }

         }

    // 这样就很灵活了:

    // <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true

    // <2>如果你不想return后下面循环函数继续执行,那么就直接写return false

// ---------------------------------------------------------------------

   // 说了这么多,请问大家如果我们的需求是:判断出一个输入有问题后面就不判断了(当然也就不显示了),

   // 怎么办呢?

   // 对了

    if (value.trim().length==0){

                  //...

                  //...

                  //flag=false;  //   flag=false不要去,它的功能是最后如果有问题,不提交数据!

                  return false

            }

//最后,大家尝试着用jquery的绑定来完成这个功能!

      $(".Form :submit").click(function(){});

</script>

轮播图练习

.outer{

    width: 520px;

    height: 280px;

    margin: 80px auto;

    position: relative; /*relative相对定位加上后，才会按照父亲本身的盒子居中定位*/

}

/*.img其实不需要什么样式，关键是它下面的图片需要样式，

每张图片都按照父亲进行绝对定位，定位的时候都叠加到一起*/

.img li{

    position: absolute;

    list-style: none;  /*把li的样式给去掉*/

    top: 0;

    left: 0;

}

.num{

    position: absolute;

    bottom: 10px;

    left: 30%;  /*居中*/

    list-style: none;

}

.num li {

    display: inline-block;

    width: 18px;

    height: 18px;

    background-color: white;

    border-radius: 50%;   /*设置成圆球*/

    text-align: center;

    line-height: 18px;

    margin-left: 14px;   /*每个li之间的间距*/

    font-size: 0; /*把字体大小设置为0，就不显示1，2，3，4*/

}

.btn{

    position: absolute; /*加上就能看见了*/

    top: 110px;   /*举例盒子顶部的一半140px- btn的一半30px， 就能实现居中*/

    width: 30px;

    height: 60px;

    background-color: lightgray;

    color: white;

    text-align: center;/*左右居中*/

    line-height: 55px;/*上下居中*/

    font-size: 30px;

    opacity: 0.6;  /*透明度*/

    display: none;  /*默认不显示左右切换箭头*/

}

.left{

    left: 0;

}

.right{

    right: 0;

}

/*鼠标悬浮在图片上的时候，左右的切换箭头显示*/

.outer:hover .btn{

    display: block;

}

.num .active{

    background-color: #FF0000;

}

css样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="jquery-3.1.1.js"></script>

    <title>Title</title>

    <link rel="stylesheet" href="css/lunbo.css">

</head>

<body>

      <div class="outer">

          <ul class="img">

              <li><a href=""><img src="img/1.jpg" alt=""></a></li>

              <li><a href=""><img src="img/2.jpg" alt=""></a></li>

              <li><a href=""><img src="img/3.jpg" alt=""></a></li>

              <li><a href=""><img src="img/4.jpg" alt=""></a></li>

          </ul>

          <ul class="num">

              <li class="active"></li>

             <!--空的，下面可以实现动态添加-->

              <!--<li>1</li>-->

              <!--<li>2</li>-->

              <!--<li>3</li>-->

              <!--<li>4</li>-->

          </ul>

          <div class="left  btn"> < </div>

          <div class="right btn"> > </div>

      </div>

      <script src="jquery-3.3.1.js"></script>

<script>

    var i=0;

//  通过jquery自动创建按钮标签

    /*

        通过jquery 自动创建标签

        根据图片数量实现动态添加num 下的li标签

        */

    var img_num=$(".img li").length;  /*看有多少个图片，size 和 length都可以*/

    for(var j=0;j<img_num;j++){

        $(".num").append("<li></li>")

    }

    // 给上面循环加的li标签加上属性active,进来的时候就是默认给第一个加上active的

    $(".num li").eq(0).addClass("active");

    // 先做手动悬浮的轮播

        /*

        1. 鼠标放在哪个圆点上，哪个圆点变红

        2. 对应的图片也显示出来

        */

// 手动轮播

       /*给num下的li绑定事件*/

    $(".num li").mouseover(function () {

        i=$(this).index();

        $(this).addClass("active").siblings().removeClass("active");

        // 当鼠标悬浮在小圆点上的时候，对应的图片展示出来

            // 方法一：show(), hide()

            // $(".img li").eq(index).show()：通过索引找到对应的图片，让他显示出来

            // .siblings().hide() 让该索引对应的其他兄弟姐妹图片都隐藏

            // $(".img li").eq(index).show().siblings().hide();

            // $(".img li").eq(index).show(1000).siblings().hide(); // 有个特殊展开的效果

            // 方法二：淡入淡出

            // 道理同上

            // 但是这个有个小bug,如果快速在小圆点滑动多次停下，然后图片还在那里不停的闪烁

        // $(".img li").eq(index).fadeIn(1000).siblings().fadeOut();

            // 解决办法:加个stop

            // 意思是当鼠标悬浮在哪个小圆点时，其他的效果全部停止，然后执行淡入，或者淡出效果

        $(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200)

    });

// 自动轮播

            //    自动轮播

        //    设置一个定时器 c, 每隔1500毫秒，执行一次GO_R函数

    var c=setInterval(GO_R,1500);

    function GO_R() {

        if(i==img_num-1){

            i=-1

        }

         i++;

         $(".num li").eq(i).addClass("active").siblings().removeClass("active");

         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)

    }

    function GO_L() {

        if(i==0){

            i=img_num

        }

         i--;

         $(".num li").eq(i).addClass("active").siblings().removeClass("active");

         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)

    }

    // hover(参数一：表示悬浮是，参数二:表示没有悬浮时)

    $(".outer").hover(function () {

        clearInterval(c)

    },function () {

        c=setInterval(GO_R,1500)

    });

// button 加定播

    //    给btn加手动定播

    $(".right").click(GO_R);

    $(".left").click(GO_L)

</script>

</body>

</html>

轮播

转：https://www.cnblogs.com/yuanchenqi/articles/6070667.html

码农公寓

一 jQuery是什么？

二 什么是jQuery对象？

三 寻找元素(选择器和筛选器)

3.1 选择器

3.2 筛选器

四 操作元素(属性，css，文档处理)

4.1 属性操作

4.2 文档处理

4.3 css操作

五 事件页面载入

六 动画效果

七 扩展方法 (插件机制)

一 用JQuery写插件时，最核心的方两个方法

二 定义作用域

三 默认参数

八 经典实例练习