前端之jquery

第一：jquery介绍：

1.2006年1月jQuery由美国人John Resig创建，

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

3.它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

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

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

总而言之：jQuery是库可以通过一行简单的标记被添加到网页中。是一个 JavaScript 函数库。好用

向网页中添加jQuery库：

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

第二：jQuery语法：

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#cyy”).zzl();

$("#cyy").zzl()    
       //意思是指：获取ID为cyy的元素内的zzl代码。其中zzl()是jQuery里的方法 

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

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

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

var $variable = jQuery 对象
var variable = DOM 对象

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

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

  • 美元符号定义 jQuery
  • 选择符（selector）“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

第三：选择器和筛选器

选择器

基本选择器  

$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")
$("*")：匹配任何元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
</head>
<body>
<p>zhang</p>
<div>cheng</div>
<span>cyy</span>
<h1>zzl</h1>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
    $("*").css("color","red")
</script>
</body>
</html>
匹配所有元素
$("#id")：匹配所有相同id的属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
</head>
<body>
<div class="item1" id="1">1111</div>
<div class="item2">2222</div>
<div class="item1">3333</div>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
    $("#1").css("color","red")
</script>
</body>
</html>
id选择器
$(".class")：匹配所有class属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
</head>
<body>
<div class="item1">1111</div>
<div class="item2">2222</div>
<div class="item1">3333</div>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
    $(".item1").css("color","red")
</script>
</body>
</html>
class选择器
$("element")：匹配所有任意一个标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
</head>
<body>
<p>zhang</p>
<div>cheng</div>
<span>cyy</span>
<h1>zzl</h1>
<div class="item1" id="1">1111</div>
<div class="item2">2222</div>
<div class="item1">3333</div>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
    $("div").css("color","red")
</script>
</body>
</html>
匹配所有的div标签
$(".class,p,div")：匹配class，p，div三个属性，满足一个即可
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
</head>
<body>
<p>zhang</p>
<div>cheng</div>
<span>cyy</span>
<h1>zzl</h1>
<div class="item1" id="1">1111</div>
<div class="item2">2222</div>
<div class="item1">3333</div>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
    $("p,span,.item1").css("color","red")
</script>
</body>
</html>
匹配p，span标签和item1

层级选择器

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")
$(".outer div")：意思是匹配outer的div标签
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>选择器</title>
 6 </head>
 7 <body>
 8 <div class="item1" id="1">
 9     <div>
10         <p>1111</p>
11     </div>
12     <p>2222</p>
13 </div>
14 <script type="text/javascript" src="jquery-3.2.1.js"></script>
15 <script>
16     $(".item1 p").css("color","red")
17 </script>
18 </body>
19 </html>
匹配item1下的所有p标签
$(".outer>div")
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>选择器</title>
 6 </head>
 7 <body>
 8 <div class="item1" id="1">
 9     <div>
10         <p>1111</p>
11     </div>
12     <p>2222</p>
13 </div>
14 <script type="text/javascript" src="jquery-3.2.1.js"></script>
15 <script>
16     $(".item1>p").css("color","red")
17 </script>
18 </body>
19 </html>
匹配item下的儿子标签
$(".outer+div")匹配outer下面的紧挨着的div标签
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>选择器</title>
 6 </head>
 7 <body>
 8 <div>ffff</div>
 9 <div>ddddd</div>
10 <div class="item1" id="1">
11     <div>
12         <p>1111</p>
13     </div>
14     <p>2222</p>
15 </div>
16 <div>aaaaa</div>
17 
18 <script type="text/javascript" src="jquery-3.2.1.js"></script>
19 <script>
20     $(".item1+div").css("color","red")
21 </script>
22 </body>
23 </html>
匹配item1下面的紧挨着的div标签
$(".outer~div"): 匹配outer下面的所有的div标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
</head>
<body>
<div>ffff</div>
<div>ddddd</div>
<div class="item1" id="1">
    <div>
        <p>1111</p>
    </div>
    <p>2222</p>
</div>
<div>aaaaa</div>
<div>sdsdd</div>
<div>asssssssssssss</div>

<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
    $(".item1~div").css("color","red")
</script>
</body>
</html>
匹配item1下面的所有的div标签

属性选择器

$('[id="div1"]') 
$('[id="div1"]')：id等于div1的属性
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>选择器</title>
 6 </head>
 7 <body>
 8 <div>ffff</div>
 9 <div>ddddd</div>
10 <div class="item1" id="1">
11     2222
12 </div>
13 <div>aaaaa</div>
14 <div>sdsdd</div>
15 <div>asssssssssssss</div>
16 
17 <script type="text/javascript" src="jquery-3.2.1.js"></script>
18 <script>
19     $('[id="1"]').css("color","red")
20 </script>
21 </body>
22 </html>
id等于1的

表单选择器

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

筛选器（示例未补充）

基本筛选器

$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")  
$("li:first"):匹配li下的第一个 $("li:last"):匹配li下的最后一个
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
</head>
<body>

<ul>
    <li class="item">111</li>
    <li class="item">222</li>
    <li class="item">333</li>
    <li class="item">444</li>
    <li class="item">555</li>
    <li class="item">666</li>
</ul>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
    $("li:first").css("color","red")
</script>
</body>
</html>
View Code
$("li:eq(2)")：eq（num）：num则是索引下标，从0开始
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>选择器</title>
 6 </head>
 7 <body>
 8 
 9 <ul>
10     <li class="item">111</li>
11     <li class="item">222</li>
12     <li class="item">333</li>
13     <li class="item">444</li>
14     <li class="item">555</li>
15     <li class="item">666</li>
16 </ul>
17 <script type="text/javascript" src="jquery-3.2.1.js"></script>
18 <script>
19     $("li:eq(2)").css("color","red")
20 </script>
21 </body>
22 </html>
View Code
$("li:even")：li下能被2整除的下标
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
</head>
<body>

<ul>
    <li class="item">111</li>
    <li class="item">222</li>
    <li class="item">333</li>
    <li class="item">444</li>
    <li class="item">555</li>
    <li class="item">666</li>
</ul>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
    $("li:even").css("color","red")
</script>
</body>
</html>
View Code
$("li:gt(1)") 下标大于1的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
</head>
<body>

<ul>
    <li class="item">111</li>
    <li class="item">222</li>
    <li class="item">333</li>
    <li class="item">444</li>
    <li class="item">555</li>
    <li class="item">666</li>
</ul>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
    $("li:gt(2)").css("color","red")
</script>
</body>
</html>
下标大于2的
$("li:lt（4）") 下标小于4的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
</head>
<body>

<ul>
    <li class="item">111</li>
    <li class="item">222</li>
    <li class="item">333</li>
    <li class="item">444</li>
    <li class="item">555</li>
    <li class="item">666</li>
</ul>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
    $("li:lt(4)").css("color","red")
</script>
</body>
</html>
下标小于4的

查找筛选器

$("div").children(".item") ：查找div下新的儿子
$("div").find(".item")    ：查找div下的所有的孩子
$(".item").next()     ：查找item的下一个
$(".item").nextAll()    ：查找item的下面所有的
$(".item").nextUntil(".item2")  ：查找item直到下面item2的位置
$("item").prev()      ：查找item的上一个
$("item").prevAll()   ：查找item的上面所有的
$("item").prevUntil("item3")    ：查找item的直到上面的item3
$(".item").parent()   查找item的父亲
$(".item").parents()   查找item的列祖列宗
$(".item").parentUntil(".item6")  查找item的列祖列祖直到item6
$("div").siblings() 查找div的兄弟姐妹

示例一：左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            margin: 0;
        }
        .menu{
             20%;
            height: 800px;
            background-color: gray;
            float: left;
        }

        .content{
             80%;
            height: 800px;
            background-color: wheat;
            float: left;
        }

        .title{
            background-color: red;
            text-align: center;
            line-height: 44px;
        }

        .con{
            padding: 20px;
            list-style: none;
            text-align: center;
            color: white;
            font-size: 25px;
        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title" onclick="foo(this)">菜单一</div>
            <ul class="con">
                <li>111</li>
                <li>111</li>
                <li>111</li>
            </ul>
        </div>
        <div class="item">
            <div class="title" onclick="foo(this)">菜单二</div>
            <ul class="con hide">
                <li>222</li>
                <li>222</li>
                <li>222</li>
            </ul>
        </div>
        <div class="item">
            <div class="title" onclick="foo(this)">菜单三</div>
            <ul class="con hide">
                <li>333</li>
                <li>333</li>
                <li>333</li>
            </ul>
        </div>
    </div>
    <div class="content"></div>
    <script src="jquery-3.2.1.js"></script>
    <script>
        function foo(self){
            $(self).next().removeClass("hide");
            $(self).parent().siblings().children(".con").addClass("hide");
        }
    </script>
</div>
</body>
</html>
View Code 

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

属性操作：

--------------------------属性
$("").attr();   
$("").removeAttr();
$("").prop();
$("").removeProp(); 
见下面注意事项
--------------------------CSS类
$("").addClass(class|fn)   增加css属性
$("").removeClass([class|fn])  删除css属性
--------------------------HTML代码/文本/值
$("").html([val|fn])   识别html中的标签，例如：<h1>11</h1>回加粗
$("").text([val|fn])   把html中的标签当做文本替换
$("").val([val|fn|arr])   替换value值
---------------------------
$("").css("color","red")  颜色

注意事项：

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见


<script>

//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
//需要使用prop方法去操作才能获得正确的结果。


//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    false

//  ---------手动选中的时候attr()获得到没有意义的undefined-----------
//    $("#chk1").attr("checked")
//    undefined
//    $("#chk1").prop("checked")
//    true

    console.log($("#chk1").prop("checked"));//false
    console.log($("#chk2").prop("checked"));//true
    console.log($("#chk1").attr("checked"));//undefined
    console.log($("#chk2").attr("checked"));//checked
</script>

示例一：小循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>111</li>
    <li>22</li>
    <li>11133</li>
    <li>11rewrw1</li>
</ul>

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

    // jquery循环方式一
//      var arr=[11,22,"hello"];
//      d={"name":"egon","age":38};
//      $.each(d,function(i,j){
//          console.log(i);
//          console.log(j)
//      })
    // jquery循环方式二

    $("ul li").each(function () {
        console.log($(this).text())
    })
    
</script>
</body>
</html>
View Code

示例二：正反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button >全选</button>
<button>反选</button>
<button>取消</button>

<table border="1" id="Form">
    <tr>
        <td><input type="checkbox"></td>
        <td>1111</td>
        <td>1111</td>
        <td>1111</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2222</td>
        <td>2222</td>
        <td>2222</td>
    </tr>

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

    <script src="jquery-3.2.1.js"></script>
    <script>
        //标签对象。事件
        $("button").click(function(){
            if ($(this).text()=="全选"){
                $("#Form input").prop("checked",true);
            }
            else if ($(this).text()=="取消"){
                 $("#Form input").prop("checked",false);
            }
            else {
                $("#Form input").each(function(){
                    if($(this).prop("checked")){
                       $(this).prop("checked",false)
                    }
                    else {
                         $(this).prop("checked",true)
                    }
                })
            }
        })
    </script>
</table>
</body>
</html>
View Code

示例二：弹出对话框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .back{
 8             background-color: rebeccapurple;
 9             height: 2000px;
10         }
11 
12         .shade{
13             position: fixed;
14             top: 0;
15             bottom: 0;
16             left:0;
17             right: 0;
18             background-color: coral;
19             opacity: 0.4;
20         }
21 
22         .hide{
23             display: none;
24         }
25 
26         .models{
27             position: fixed;
28             top: 50%;
29             left: 50%;
30             margin-left: -100px;
31             margin-top: -100px;
32             height: 200px;
33              200px;
34             background-color: gold;
35 
36         }
37     </style>
38 </head>
39 <body>
40 <div class="back">
41     <input id="ID1" type="button" value="click" onclick="action1(this)">
42 </div>
43 
44 <div class="shade hide"></div>
45 <div class="models hide">
46     <input id="ID2" type="button" value="cancel" onclick="action2(this)">
47 </div>
48 
49 
50 <script src="jquery-3.2.1.js"></script>
51 <script>
52 
53     function action1(self){
54         $(self).parent().siblings().removeClass("hide");
55 
56     }
57     function action2(self){
58         //$(self).parent().parent().children(".models,.shade").addClass("hide")
59 
60         $(self).parent().addClass("hide").prev().addClass("hide")
61 
62     }
63 </script>
64 </body>
65 </html>
View Code

文档处理：

//创建一个标签对象
    $("<p>")


//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>"); 父亲添加儿子
    $("").appendTo(content)       ----->$("p").appendTo("div");
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
    $("").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="outer">
                <div class="item">
                        <input type="button" value="+" onclick="add(this);">
                        <input type="text">
                </div>
            </div>

<script src="jquery-3.2.1.js"></script>
    <script>
            //var $clone_obj=$(self).parent().clone();  // $clone_obj放在这个位置可以吗?
            function add(self){
                // 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
                 var $clone_obj=$(self).parent().clone();
                 $clone_obj.children(":button").val("-").attr("onclick","removed(this)");
                 $(self).parent().parent().append($clone_obj);
            }
           function removed(self){

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

           }

    </script>
</body>
</html>
View Code

CSS操作：

CSS
        $("").css(name|pro|[,val|fn]) 颜色，名字...
    位置
        $("").offset([coordinates]) 偏移 见示例一
        $("").position()   定位 见示例二
        $("").scrollTop([val]) 滚动条，见示例四
        $("").scrollLeft([val])
    尺寸对应示例三
        $("").height([val|fn])
        $("").width([val|fn])
        $("").innerHeight()
        $("").innerWidth()
        $("").outerHeight([soptions])
        $("").outerWidth([options])

示例一：偏移:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            margin: 0px;
        }

        .c1{
             200px;
            height: 200px;
            background-color: rebeccapurple;
        }

        .c2{
             200px;
            height: 200px;
            background-color: green;
        }
        .
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<button>change</button>
<p></p>
<script src="jquery-3.2.1.js"></script>
<script>
    var offset=$(".c2").offset()

    $("p").text("c2------left:"+offset.left+"top:"+offset.top)

    $("button").click(function(){
        $(".c2").offset({left:200,top:200})
    })
</script>
</body>
</html>
View Code

示例二：按照父亲去定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            margin: 0px;
        }

        .c1{
             200px;
            height: 200px;
            background-color: rebeccapurple;
        }

        .c2{
             200px;
            height: 200px;
            background-color: green;
        }

        .father{
            position: relative;
            border: 1px solid red;
        }
        .
    </style>
</head>
<body>
<div class="c1"></div>
<div class="father">
    <div class="c2"></div>
</div>

<button>change</button>
<p></p>
<script src="jquery-3.2.1.js"></script>
<script>
    var position=$(".c2").position()
    $("p").text("c2------left:"+position.left+"top:"+position.top)

</script>
</body>
</html>
View Code

示例三：尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .c1{
             200px;
            height: 200px;
            background-color: gray;
            padding: 100px;
            border: 50px seagreen solid;
            margin: 50px;
        }
    </style>
</head>
<body>

    <div class="c1">
        divvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
    </div>

    <script src="jquery-3.2.1.js"></script>
    <script>
        console.log($(".c1").height()); 高度
        console.log($(".c1").innerHeight());内边框
        console.log($(".c1").outerHeight());外边框
        console.log($(".c1").outerHeight(true));外边框的框
    </script>
</body>
</html>
View Code

示例四：滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .c1{
             100%;
            height: 3000px;
            background-color: wheat;
        }

        .top{
             100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            position: fixed;
            background-color: steelblue;
            color: white;
            bottom: 20px;
            right: 40px;
            display: none;
        }
    </style>

</head>
<body>

<div class="c1"></div>
<div class="top">返回顶部</div>
<script src="jquery-3.2.1.js"></script>

<script>
    $(".top").click(function(){
        $(window).scrollTop(0)
    })

    $(window).scroll(function(){
        if($(window).scrollTop()>200){
            $(".top").css("display","block")
        }
        else
            $(".top").css("display","none")
    })
</script>
</body>
</html>
View Code

第五：事件

eg：
<ul>
    <li>11</li>
    <li>11</li>
    <li>11</li>
</ul>
<button class="add">add</button>
<button>off</button>



页面载入
    ready(fn)  //当页面加载完在执行函数：
    $(document).ready(function(){}) -----------> $(function(){})
    <script>
    $(document).ready(function(){
            $("ul li").css("color","red")
    })
    
    $(function(){
            $("ul li").css("color","red")
    })
    </script>
绑定方法：
    //绑定方法一
//    $("ul li").click(function(){
//        alert(123)
//    })

//    //绑定方法二
//    $("ul li").on("click",function(){
//        alert(789)
//    });


解除绑定方法：
    $("button").click(function(){
       $("ul li").off()
    });

委派事件
        $("ul").on("click","li",function(){
        alert(789)
    });


    $(".add").click(function () {
        $("ul").append("<li>777</li>")
    })

第六：动画效果

显示隐藏切换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>hello</p>
<button onclick="show()">显示</button>
<button onclick="hide()">隐藏</button>
<button onclick="toggle()">切换</button>

<script src="jquery-3.2.1.js"></script>
<script>
    function show(){
        $("p").show(1000)
    }

    function hide(){
        $("p").hide(1000)
    }

    function toggle(){
        $("p").toggle(1000)
    }
</script>

</body>
</html>
View Code

滑动切换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="line-height: 50px;background-color: rebeccapurple;color: white;text-align: center;">hell world</div>
<button onclick="slidedown()">slideDown</button>
<button onclick="slideup()">slideUp</button>
<button onclick="slideToggle()">slideToggle</button>

<script src="jquery-3.2.1.js"></script>
<script>
        function slidedown() {
            $("div").slideDown(1000)
        }
       function slideup() {
           $("div").slideUp(1000)
      }
    function slideToggle(){
        $("div").slideToggle(1000)
    }
</script>

</body>
</html>
View Code

淡入浅出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="line-height: 50px;background-color: rebeccapurple;color: white;text-align: center;">hell world</div>
<button onclick="fadeIn()">fadeIn</button>
<button onclick="fadeOut()">fadeOut</button>
<button onclick="fadeToggle()">fadeToggle</button>
<button onclick="fadeTo()">fadeTo</button>

<script src="jquery-3.2.1.js"></script>
<script>
        function fadeIn() {
            $("div").fadeIn(1000)
        }
        function fadeOut() {
           $("div").fadeOut(1000)
         }
        function fadeToggle(){
        $("div").fadeToggle(1000)
        }

        function fadeTo(){
        $("div").fadeTo(1000,0.6)
        }
</script>

</body>
</html>
View Code

回调函数：就是执行完以上三个功能中的一个显示功能后调用一个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>hello</p>
<button onclick="show()">显示</button>
<button onclick="hide()">隐藏</button>
<button onclick="toggle()">切换</button>

<script src="jquery-3.2.1.js"></script>
<script>
    function show(){
        $("p").show(function(){
            alert(1123)
        })
    }

    function hide(){
        $("p").hide(function(){
            alert(456)
        })
    }

    function toggle(){
        $("p").toggle(function(){
            alert(789)
        })
    }
</script>

</body>
</html>
View Code

第七：扩展方法

 1.写jquery插件的核心方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

<script src="jquery-3.2.1.js"> </script>
<script>
    //自定义扩展方法
    $.extend({
        zzl:function(){
            alert("success")
        }
    })
//求最大值
    $.extend({
        maxs:function(a,b){
            return a > b ? a : b
        }
    })
//默认全选
    $.fn.extend({
        check:function(){
            $(this).prop("checked",true)
        }
    })

    $("input").check()
</script>
</body>
</html>

2. 定义作用域

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

    //自定义扩展方法
    $.extend({
        zzl:function(){
            alert("success")
        }
    })

 三 默认参数

定义了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);

 检测用户名密码是否为空：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    <p>用户名：<input type="text" class="con" tag="用户名"></p>
    <p>密&nbsp;码：<input type="password" class="con" tag="密码"></p>
    <p><input type="submit"></p>

</form>

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


        $("form :submit").click(function () {
            var flag=true;
              $(".con").each(function () {
              if (!$(this).val().trim()){
                  var ele=$("<span>");
                  var tag=$(this).attr("tag");
                  ele.text(tag+"不能为空");
                  $(this).after(ele);
                  flag=false
              }
          });
            return flag
        });



</script>




</body>
</html>
View Code

补充：js定时器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" onfocus="start()">
<button onclick="end()">end</button>

<script>
    var ID;
    function start() {
        foo();
        ID=setInterval(foo,1000)
    }


    function foo(){
        var date=new Date().toLocaleString();
        console.log(date);
        var ele=document.getElementsByTagName("input")[0];
        ele.value=date
    }

    function end(){
        clearInterval(ID)
    }

</script>
</body>
</html>
View Code
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ylqh/p/6947291.html