第四篇 前端学习之JQuery基础

一 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>
View Code

实例之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>
View Code

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());   // 200
        console.log($(".div1").height("300px"));   // 340 可以改值
        console.log($(".div1").innerHeight()); // 240
        console.log($(".div1").outerHeight()); // 252
        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);



View Code


参考博客：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>



View Code


轮播图练习






.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 






            

            
posted @ 
2018-09-22 20:14 
mamingchen 
阅读(357) 
评论(0) 
编辑 
收藏 
举报