jquery简介及应用

一、jquery是什么？

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

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

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

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

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

二、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 对象
var variable = DOM 对象

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

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

三、寻找元素

3.1、选择器

1）基本选择器

$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

2）层级选择器

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

3）基本筛选器

$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

4）属性选择器

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

5）表单选择器

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>hello</div>
<a href="">click</a>

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

<div class="outer">outer
    <div class="inner">
        inner
        <p>inner p</p>
    </div>
    <p>alex</p>
</div>

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

<p>xialv</p>

<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>4444</li>
    <li>4444</li>
    <li>4444</li>
</ul>

<input type="text">
<input type="checkbox">
<input type="submit">

<script src="jquery-3.1.1.js"></script>  //导入jquery
<script>
    //基本选择器
    // $("div").css("color","red")  //div标签及包含其子标签
    // $("*").css("color","red")      //全部
    // $("#p1").css("color","red")  //id为p1
    // $(".outer").css("color","red")  //outer class
    // $(".inner,p,div").css("color","red")


    //层级选择器

    // $(".outer p").css("color","red") //outer class下的p标签(后代选择器)
    // $(".outer>p").css("color","red")  //outer class下一级的p标签（子代选择器）
    // $(".outer+p").css("color","red")  //下面毗邻标签（紧挨着）
    // $(".outer~p").css("color","red")  //下面标签，不要求紧挨着

    //基本筛选器

    // $("li:first").css("color","red") //第一个，也有last
   // $("li:eq(0)").css("color","red")
    //$("li:gt(2)").css("color","red")
    //$("li:lt(2)").css("color","red")

    //属性选择器
    // $("[alex='sb'][id='p1']").css("color","red")

    //表单选择器
     //$("[type='text']").css("width","200px")
     //$(":text").css("width","400px")

</script>
</body>
</html>

3.2、筛选器

1）过滤筛选器

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

2）查找筛选器

$("div").children(".test")     //子代选择器
$("div").find(".test")         //后代
                               
//向下查找
$(".test").next()    
$(".test").nextAll()    
$(".test").nextUntil() 
           
//向上查找                
$("div").prev()  
$("div").prevAll()  
$("div").prevUntil()   

//父辈                        
$(".test").parent()  
$(".test").parents()  
$(".test").parentUntil() 

$("div").siblings()

示例：

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


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

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

<div class="outer">outer
    <div class="inner">
        inner
        <p>inner p</p>
    </div>
    <p>alex</p>
</div>
<div class="outer2">Yuan</div>
<p>xialv</p>

<ul>
    <li class="begin">1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>4444</li>
    <li id="end">4444</li>
    <li>4444</li>
</ul>

<input type="text">
<input type="checkbox">
<input type="submit">


<script src="jquery-3.1.1.js"></script>
<script>
    //筛选器
    //$("li").eq(2).css("color","red");
    //$("li").first().css("color","red");
    //$("li").last().css("color","red");

    //查找筛选器
    //$(".outer").children("p").css("color","red");
    //$(".outer").find("p").css("color","red");

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

    //$("li").eq(4).prev().css("color","red");
    //$("li").eq(4).prevAll().css("color","red");
    //$("li").eq(4).prevUntil("li:eq(0)").css("color","red");

    //console.log($(".outer .inner p").parent().html())
   //$(".outer .inner p").parents().css("color","red");
   //$(".outer .inner p").parentsUntil("body").css("color","red");

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

</script>
</body>
</html>

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            height: 1000px;
             100%;
        }
        .menu{
            float: left;
            background-color: beige;
             30%;
            height: 500px;
        }
        .content{
            float: left;
            background-color: rebeccapurple;
             70%;
            height: 500px;
        }
        .title{
            background-color: aquamarine;
            line-height: 40px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title" onclick="show(this)">菜单一</div>
            <div class="con">
                <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>


<script src="jquery-3.1.1.js"></script>
<script>
    function show(self) {
        $(self).next().removeClass("hide"); //自身菜单内容显示
        $(self).parent().siblings().children(".con").addClass("hide"); //其他菜单内容隐藏
    }
</script>
</body>
</html>

四、元素操作

4.1、属性操作

//属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();

//CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])

//HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])


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

注意：attr与prop区别

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

<script>

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

    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>
<div class="div1" con="c1"></div>
<input type="checkbox" checked="checked">是否可见
<input type="checkbox">是否可见

<input type="text" value="123">
<div value="456"></div>

<div id="id1">
    uuuuu
    <p>ppppp</p>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
   // console.log($("div").hasClass("div1"));  //true
   // console.log($("div").attr("con"))  //c1
   // console.log($("div").attr("con","c2")) //设置属性

   // console.log($(":checkbox:first").attr("checked"))  //checked
   // console.log($(":checkbox:last").attr("checked"))  //undefined

   // console.log($(":checkbox:first").prop("checked")) //true
   // console.log($(":checkbox:last").prop("checked"))  //false

   // console.log($("div").prop("con")) //undefined
   // console.log($("div").prop("class")) //div1

   // console.log($("#id1").html());  //uuuuu  <p>ppppp</p>
   // console.log($("#id1").text());  //uuuuu  ppppp
   //  console.log($("#id1").html("<h1>YUAN</h1>"))
   //  console.log($("#id1").text("<h1>YUAN</h1>"))
   //  console.log($("#id1").html());
   //  console.log($("#id1").text()); //<h1>YUAN</h1>


    //固有属性
   // console.log($(":text").val());  //123
   // console.log($(":text").next().val())  //没有值
   // $(":text").val("789");

    // $("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>1111</p>
<p>2222</p>
<p>3333</p>

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

<script>
    arr=[11,22,33];

   //使用遍历
   // for (var i=0;i<arr.length;i++){
   //     $("p").eq(i).html(arr[i])
   // }

    // 使用jquery遍历方式一
    // $.each(arr,function (x,y) {  //x下标，y值
    //     console.log(x);
    //     console.log(y);
    // });

    //使用jquery遍历方式二（常用）
    $("p").each(function () {  //对所有p标签遍历
        console.log($(this));
        $(this).html("hello")
    })

</script>

</body>
</html>

示例-全反选：

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


  <button onclick="selectall();">全选</button>
     <button onclick="cancel();">取消</button>
     <button onclick="reverse();">反选</button>
<hr>
     <table border="1">
         <tr>
             <td><input type="checkbox"></td>
             <td>111</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>222</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>333</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>444</td>
         </tr>
     </table>

<script src="jquery-3.1.1.js"></script>
<script>
    function selectall() {
        $(":checkbox").each(function () {
            $(this).prop("checked",true)
        })
    }
    
    function cancel() {
         $(":checkbox").each(function () {
            $(this).prop("checked",false)
        })
    }

    function reverse() {
         $(":checkbox").each(function () {
             //方式一
             $(this).prop("checked",!$(this).prop("checked"));
             
             //方式二
            // if($(this).prop("checked")){
            //     $(this).prop("checked",false)
            // }
            //
            // else {
            //     $(this).prop("checked",true)
            // }
        })
    }
</script>
</body>
</html>

示例-模态对话框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            background-color: rebeccapurple;
            height: 2000px;
        }

        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: coral;
            opacity: 0.4;
        }

        .hide{
            display: none;
        }

        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
             200px;
            background-color: gold;

        }
    </style>
</head>
<body>
<div class="back">
    <input id="ID1" type="button" value="click" onclick="action1(this)">
</div>

<div class="shade hide"></div>
<div class="models hide">
    <input id="ID2" type="button" value="cancel" onclick="action2(this)">
</div>


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

    function action1(self){
        $(self).parent().siblings().removeClass("hide");

    }

    function action2(self) {

        //方式一
       //  $(self).parent().addClass("hide")
       // $(self).parent().prev().addClass("hide")

        //方式二
        // $(self).parent().addClass("hide").prev().addClass("hide");

        //方式三
        $(self).parent().parent().children(".models,.shade").addClass("hide")

    }
</script>
</body>
</html>

4.2、文档处理

//创建一个标签对象
    $("<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="c1">
    <p>PPP</p>

</div>

<button>add</button>
<script src="jquery-3.1.1.js"></script>
<script>
        $("button").click(function () {
           // $(".c1").append("<h1>HELLO YUAN</h1>")

            var $ele=$("<h1></h1>");  //创建标签
            $ele.html("HELLO WORLD!"); //修改标签内容
            $ele.css("color","red");   //修改标签内容颜色显示

            //内部插入
            // $(".c1").append($ele);
            //$ele.appendTo(".c1")
            //$(".c1").prepend($ele);
            //$ele.prependTo(".c1")

            //外部插入
            //$(".c1").after($ele)
            //$ele.insertAfter(".c1")
            //$(".c1").before($ele)
            //$ele.insertBefore(".c1")

            //替换
             //$("p").replaceWith($ele)

            //删除与清空
            // $(".c1").empty() //清除本标签的内容，但标签自身还在
            // $(".c1").remove()  //标签整个清除

            //clone
            // var $ele2= $(".c1").clone();
            // $(".c1").after($ele2)  //存在问题：会成倍增加
        })
</script>
</body>
</html>

clone成倍增加问题解决：

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

<div class="outer">
    <div class="item">
        <button onclick="add(this)">+</button>
        <input type="text">
    </div>

</div>


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

    function add(self) {

        //var $clone_obj=$(".item").clone();
        var $clone_obj=$(self).parent().clone();
        $clone_obj.children("button").html("-").attr("onclick","remove_obj(this)");

        $(".outer").append($clone_obj)
    }

    function remove_obj(self) {
        $(self).parent().remove()
    }
</script>
</body>
</html>

4.3、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;
            padding: 0px;
        }
        .div1,.div2{
             200px;
            height: 100px;
        }
        .div1{
            border: 5px solid rebeccapurple;
            padding: 20px;
            margin: 2px;
            background-color: antiquewhite;
        }
        .div2{
            background-color: rebeccapurple;
        }

        /*.outer{*/
            /*position: relative;*/
        /*}*/
    </style>
</head>
<body>

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

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



<script src="jquery-3.1.1.js"></script>
<script>
    // offset()相对于视口的偏移量
    // console.log($(".div1").offset().top); 
    // console.log($(".div1").offset().left); 
    //
    // console.log($(".div2").offset().top);
    // console.log($(".div2").offset().left);

    //position()：相对于已经定位的父标签的偏移量

    // console.log($(".div1").position().top);
    // console.log($(".div1").position().left);

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


    // console.log($(".div1").height("300px"));
    // console.log($(".div1").innerHeight());
    // console.log($(".div1").outerHeight());
    // console.log($(".div1").outerHeight(true));

</script>
</body>
</html>

实例-返回顶部：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .div2{
             100%;
            height: 800px;
        }
        .div1{
             40%;
            height: 150px;
            background-color: antiquewhite;
            overflow: auto;
        }
        .div2{
            background-color: rebeccapurple;
        }

         .returnTop{
             position: fixed;
             right: 20px;
             bottom: 20px;
              90px;
             height: 50px;
             background-color: gray;
             color: white;
             text-align: center;
             line-height: 50px;
         }

         .hide{
             display: none;
         }

    </style>
</head>
<body>


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

<div class="div2">
    <button onclick="returnTop()">return</button>
</div>

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

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


    window.onscroll=function () {   //监控窗口滚轮状态
       // console.log($(window).scrollTop());
        if($(window).scrollTop()>300){
            $(".returnTop").removeClass("hide")
        }else {
            $(".returnTop").addClass("hide")
        }
    };

    function returnTop() {
        $(window).scrollTop(0)
    }

    $(".div2 button").click(function () {
         $(".div1").scrollTop(0)
    })



</script>
</body>
</html>

五、事件

//页面载入
    ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
    $(document).ready(function(){}) -----------> $(function(){})

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

    //  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
    //  $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的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>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>

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

    // 事件准备加载方式一
   // $(document).ready(function () {
   //      $("ul li").html(5);
   // });
     // 事件准备加载方式二
   //   $(function () {
   //      $("ul li").html(5);
   //   });

//事件绑定简单形式
   var eles=document.getElementsByTagName("li")
   eles.onclick=function () {
       alert(123)
   }

   $("ul li").click(function () {  //绑定事件一
       alert(6666)
   });

   // $("ul li").bind("click",function () {  //绑定事件二
   //     alert(777)
   // });
    // $("ul li").unbind("click")  //事件绑定解除

    // 事件委托
   $('ul').on("click","li",function () {
      alert(999);
   });

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

           var $ele=$("<li>");
           var len=$("ul li").length;
           $ele.html((len+1)*1111);
           $("ul").append($ele)
   });
    
</script>
</body>
</html>

实例-面板拖动：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border: 1px solid #ddd; 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;color: white;">
            标题
        </div>
        <div style="height: 300px;">
            内容
        </div>
    </div>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script>
    $(function(){
        // 页面加载完成之后自动执行
        $('#title').mouseover(function(){
            $(this).css('cursor','move');
        }).mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            // 原始鼠标横纵坐标位置
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $(this).bind('mousemove', function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');

            })
        }).mouseup(function(){
            $(this).unbind('mousemove');
        });
    })
</script>
</body>
</html>

六、动画效果

6.1、显示隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
    <script>

$(document).ready(function() {
    $("#hide").click(function () {
        $("p").hide(1000);
    });
    $("#show").click(function () {
        $("p").show(1000);
    });

//用于切换被选元素的 hide() 与 show() 方法。
    $("#toggle").click(function () {
        $("p").toggle();
    });
})

    </script>
    <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>


    <p>hello</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">切换</button>

</body>
</html>

6.2、滑动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
    <script>
    $(document).ready(function(){
     $("#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>

6.3、淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
    <script>
    $(document).ready(function(){
   $("#in").click(function(){
       $("#id1").fadeIn(1000);


   });
    $("#out").click(function(){
       $("#id1").fadeOut(1000);

   });
    $("#toggle").click(function(){
       $("#id1").fadeToggle(1000);


   });
    $("#fadeto").click(function(){
       $("#id1").fadeTo(1000,0.4);

   });
});



    </script>

</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none;  80px;height: 80px;background-color: blueviolet"></div>

</body>
</html>

6.4、回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>

</head>
<body>
  <button>hide</button>
  <p>helloworld helloworld helloworld</p>



 <script>
   $("button").click(function(){
       $("p").hide(1000,function(){
           alert($(this).html())
       })

   })
    </script>
</body>
</html>

七、拓展方法(插件机制)

7.1、定义拓展方法

<script>
    
$.extend(object)      //为JQuery 添加一个静态方法。
$.fn.extend(object)   //为JQuery实例添加一个方法。


    jQuery.extend({
          min: function(a, b) { return 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>

//-----------------------------------------------------------------------
$.fn.extend({
    GetText:function () {
          for(var i=0;i<this.length;i++){
              console.log(this[i].innerHTML)
          }
        $.each($(this),function (x,y) {
            //console.log(y.innerHTML)
            //console.log($(y).html())
        })

    }
});
$("p").GetText()

相关阅读:
网络芯片应用：GPS公交车行驶记录仪
 “黑暗潜伏者” -- 手机病毒新型攻击方式
 Android导入工程提示Invalid project description
设计模式_代理模式
 el简略说明与11个隐含对象
 jsp九大内置对象
 js全局函数
 python基础：multiprocessing的使用
 pgAdmin III 使用图解
 windows下简单安装postgres
原文地址：https://www.cnblogs.com/hujinzhong/p/11558432.html