一 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基础的更多相关文章
	

    
								
  1. 前端第四篇---前端基础之jQuery
		
    前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...
    
		
    2. 
						
  2. 前端学习之jquery/下
		
    前端学习之jquery 一 属性操作 html(): console.log($("div").html()); $(".test").html("& ...
    
		
    3. 
						
  3. 前端学习之jquery
		
    前端学习之jquery 1.   什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它 ...
    
		
    4. 
						
  4. Eclipse插件开发 学习笔记 PDF 第一篇到第四篇 免分下载 开发基础 核心技术 高级进阶 综合实例
		
    <<Eclipse插件开发 学习笔记>>,本书由浅入深.有重点.有针对性地介绍了Eclipse插件开发技术,全书分为4篇共24章.第一篇介绍Eclipse平台界面开发的基础知识 ...
    
		
    5. 
						
  5. 【前端】之jQuery基础知识
		
    jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...
    
		
    6. 
						
  6. 前端学习之-- Jquery
		
    Jquery学习笔记 中文参考文档:http://jquery.cuishifeng.cn Jquery是一个包含DOM/BOM/JavaScript的类库引入jquery文件方法:<scrip ...
    
		
    7. 
						
  7. 前端学习 之 JavaScript基础
		
    一. JavaScript简介 1. JavaScript的历史背景介绍 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时 ...
    
		
    8. 
						
  8. JQuery学习笔记——JQuery基础
		
    #,JQuery避免名称冲突的方法 var jq = jQuery.noConfilct(); jq.ready( function(){     jq("p").hidden() ...
    
		
    9. 
						
  9. 学习笔记--jQuery基础
		
    学习笔记也算总结知识点,有些示例可能没有具体到元素,直接给出的语法.大家有基本理解在看可能会好些. jQuery使用前提,需要安装jQuery库 jQuery 库是一个 JavaScript 文件,您 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Gradle Goodness: Parse Files with SimpleTemplateEngine in Copy Task
			
    With the copy task of Gradle we can copy files that are parsed by Groovy's SimpleTemplateEngine. Thi ...
    
			
    2. 
						
  2. orcal 数据库 maven架构  ssh框架 的全xml环境模版 及常见异常解决
			
    创建maven项目后,毫不犹豫,超简单傻瓜式搞定dependencies(pom.xml 就是maven的依赖管理),这样你就有了所有你要的包 <project xmlns="http ...
    
			
    3. 
						
  3. iOS之oc与html之间的交互（oc中调用js的方法）
			
    一.运行的效果图 1.刚开始的效果   2.运行结束后的效果   二.准备工作 1.准备一个html文件导入到oc工程中 2.jiaohu.html文件的原始内容   3.从oc语言中操作.html文 ...
    
			
    4. 
						
  4. 处理Model
			
    将Model对象归档解档 - CSDN博客 iOS archive(归档)的总结 - 苹果吧 - 博客园 IOS数据持久化之归档NSKeyedArchiver,iosnskeyedarchiver_I ...
    
			
    5. 
						
  5. JS基础——事件操作总结
			
    通用事件绑定   function bindEvent(elem,type,fn) { elem.addEventListener(type,fn); } let a =document.getEle ...
    
			
    6. 
						
  6. 网络的可靠性nyoj170
			
    网络的可靠性 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 A公司是全球依靠的互联网解决方案提供商,也是2010年世博会的高级赞助商.它将提供先进的网络协作技术,展 ...
    
			
    7. 
						
  7. [USACO15DEC]最大流Max Flow（树链剖分，线段树）
			
    FJ给他的牛棚的N(2≤N≤50,000)个隔间之间安装了N-1根管道,隔间编号从1到N.所有隔间都被管道连通了. FJ有K(1≤K≤100,000)条运输牛奶的路线,第i条路线从隔间si运输到隔间t ...
    
			
    8. 
						
  8. mysql 8 windows 版本zip方式安装步骤
			
    mysql 8 windows 版本zip方式安装步骤(下载地址:https://dev.mysql.com/downloads/mysql/)1,解压ZIP文件到指定目录下:如D:\mysql-8. ...
    
			
    9. 
						
  9. webpack管理输出
			
    管理html的bundle依赖 html-webpack-plugin可以自动给html添加bundle文件 npm install --save-dev html-webpack-plugin co ...
    
			
    10. 
						
  10. Hive配置项的含义详解
			
    关于MetaStore:metastore是个独立的关系数据库,用来持久化schema和系统元数据. hive.metastore.local:控制hive是否连接一个远程metastore服务器还是 ...
    
			
    11.