jQuery

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还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择,而且速度要比原生的快。

6.jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器，目前使用最多的是1.x系列的。

补充：

jQuery下载网站：http://jquery.com/

jQuery在线帮助文档：http://jquery.cuishifeng.cn/

什么是jQuery对象

 jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的。简单说jQuery对象就是“$”。

 比如：$(“#test”).html();

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

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

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

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

jQuery对象和DOM对象互相转换

因为jQuery对象和DOM对象不能使用各自的方法，所以有时候需要相互转换

$div[0] 　　　　　//jQuery对象转为DOM对象，原来jQuery对象不可以用DOM对象的方法，现在就可以使用了，比如：$(".div")[0].innerHTML

$(DOM对象)　　  //将DOM对象转变成jQuery对象。

jQuery的引入方式

<script src="js/jquery-1.12.4.min.js"></script>

jQuery是一个函数库，一个js文件，上面就是导入的操作，写具体的jQuery代码还是在<script></script>中

jQuery的基本语法

$(selector).action() 

selector：指的是选择

action：指的是操作

例如：

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

jQuery选择器

jQuery的选择器和css中的选择器大致是一样的，我就不重复说了，特殊的我会做相应的说明

基本选择器

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

层级选择器

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")　　//“~”这个和“+”差不多，但是不要求紧挨着了

基本筛选器

$("li:first")  $("li:last") $("li:eq(2)")  $("li:even") $("li:gt(1)")　　//eq是按下标取，gt是大于这个下标的，lt是小于这个下标的

属性选择器

$('[id="div1"]')   $('[why="yes"][id="id1"]')　　　　//注意引号问题，第二个是多重过滤器

表单选择器

$("[type='text']")----->$(":text")         //“：”是简写形式，注意只适用于input标签  : $("input:checked")

length属性

查看jQuery对象内元素个数，0说明没有元素

            var $div = $('#box');
            alert($div.length);

jQuery过滤器

 过滤筛选器

$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")　　//hasclass是筛选标签里面是否有该class,返回的是布尔值
//这个和基本筛选器很类似，但是这个更灵活

查找筛选器

$("div").children(".test")　　　　//children只查找儿子层
$("div").find(".test")   　　　　 //find是对象里面都查找
$(".test").next(),$(".test").nextAll(),$(".test").nextUntil("#end")    //next只改下面的第一个，nextAll改下面的全部，nextUntil是到那个设置的选择器之间（左开右开区间）的改变。例如：$("li").eq(2).nextAll("#end").css("color","red");
$("div").prev(),$("div").prevAll(),$("div").prevUntil()        //同上，这个是向上的查找
$("test").parent(),$(".test").parents(),$(".test").parentUntil()    //同上，只是向外层找
$("div").siblings()    //跟他同级的，但是不包括它的

元素操作

属性操作：

属性：

$("").attr();　　//根据属性名取值，标签特有的和用户自定义的都可以取出来。里面写一个参数，返回这个属性的值，写两个参数是改变这个属性的值。如果取的是checked的话，取值取到的是里面的属性值，如果没写checked属性的话，返回undefined
//$("div").attr("con")　是查看属性里面的值
//$("div").attr("con","c2")　　是设置属性里面的值
$("").removeAttr();
$("").prop();　　//根据属性名取值，但是只能取标签特有（自带）的属性。如果取的是checked，而标签里没写这个属性，返回false，如果有这个属性且值是checked，返回true
$("").removeProp();

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方法去操作才能获得正确的结果。


//    $("#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>

css类添加/移除：

$("").addClass(class|fn);
$("").removeClass([class|fn]);
$("").toggleClass([class|fn]);　　//有，就删除，没有，就增加

css样式：

　var sFontSize = $div.css('font-size')　　//获取原有css属性

$("").css("color","red")    //设置css样式，里面的参数也可以用字典方式进行设置

HTML代码/文本/值

$("").html([val|fn]);　　//相当于js中的innerHTML，没有参数的话，有标签就把标签也取出来。
//$(".p").html("<h1>hello</h1>");　　　　这个会进行渲染
$("").text([val|fn]);　　//相当于js中的innertext，没有参数的话，只取标签里的内容
//$(".p").text("<h1>hello</h1>");　　　　这个不会进行渲染，它会整体变成里面的文本
$("").val([val|fn|arr]);　　//取标签的value值，value只能是这个标签的固有属性（也就是说不是自定义属性）才能取出来，里面加值可以进行value值的修改
//$(":text").val();　　　　取样式为text的input标签的value值
//$(":text").val("89");　　　　给这个value重新赋值

jQuery的遍历

方式一：

$.each(arr,functioin(x,y){
    console.log(x);        //下标
    console.log(y);        //值
}
//这个是用来遍历数组的，each中的第一个参数为数组变量

方式二：

$("p").each(function){
    console.log($(this))    //所有的p标签的值
    $(this).html("hello") 
}

实例：

正反选：

<!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 () {
            if($(this).prop("checked")){
                $(this).prop("checked",false)
            }

            else {
                $(this).prop("checked",true)
            }
        })
    }
</script>
</body>
</html>

文档处理

这个类似js中的节点的增删改查

//创建一个标签对象
    $("<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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>05-元素节点操作</title>
    <style>
       .box{
          200px;
         height: 200px;
         background: red;
       }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
      $(function () {

          // 1.创建节点
          var $div = $("<div>");
          var $a = $("<a href='#'>链接标签</a>");

          // 2.插入增加
          // 2.1 在当前元素的内部
            //2.1.1 在后面
            // $(".box").append($a);
            // $a.appendTo($(".box"));

            //2.1.2 前面
            // $(".box").prepend($a);
            // $a.prependTo($(".box"));

          // 2.2 在当前元素的外部
            //2.2.1 前面
            // $a.insertBefore($(".box"));
            // $(".box").before($a);

            //2.2.2 后面
            // $a.insertAfter($(".box"));
            $(".box").after($a);


          // 3.删除节点
            $(".box").remove();
          
      })
    </script>
</head>
<body>

  <div class="box">
    div内部内容
  </div>
    
</body>
</html>

 css操作

CSS
$("").css(name|pro|[,val|fn])
    位置：
    $("").offset([coordinates])    //相对于视口（网页，也就是body标签）的偏移量。它拿到的是一个对象，它只有两个属性，top和left，如果想看它里面的具体属性，例如：$(".div1").offset().top
    $("").position()        //相当于已定位的父标签的偏移量，其他同上
    $("").scrollTop([val])        //获取滚动条的位置，需要监听事件window.onscroll=function(){console.log($(window).scrollTop());}
    $("").scrollLeft(val])        //这个是左右，同上
    尺寸：
    $("").height([val|fn])    //获取内容高度
    $("").width([val|fn])    //获取内容宽度
    $("").innerHeight()    //获取内容高度，包括padding
    $("").innerWidth()    
    $("").outerHeight([soptions])    //获取内容高度，包括border和padding，里面加入参数true，获取的就也包括margin了
    $("").outerWidth([options])

事件绑定

鼠标事件

click　　　　　  //单击
mouseover mouseout 　　　　//进入子元素 会触发事件
mouseenter mouseleave 　　//进入子元素 不会触发事件
hover　　　　　//监听鼠标进入，离开区域事件

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>09-鼠标的事件</title>
    <style>
       .red{
            400px;
           height: 400px;
           background: red;
           overflow: hidden;
       }
       .green{
           height: 100px;
           background: green;
           margin-top:100px;
           font-size: 30px;
           color: white;
           font-weight: bold;
       }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
      $(function () {
          
        // 1.click
        // 2.mouseover mouseout 进入子元素 会触发事件
        var index = 0;
            $('.red').mouseover(function () {
                index++;
                $('.green').html(index);
            })
            $('.red').mouseout(function () {
                index++;
                $('.green').html(index);
            })

        // 3.mouseenter mouseleave 进入子元素 不会触发事件
            // $('.red').mouseenter(function () {
            //     index++;
            //     $('.green').html(index);
            // })
            // $('.red').mouseleave(function () {
            //     index++;
            //     $('.green').html(index);
            // })
        // 4.hover 监听 进入 移开
        // $('.red').hover(function (event) {
        //     console.log(event.type);
            // index++;
            // $('.green').html(index);

            // if (event.type == "mouseenter") {
                
            // } else {
                
            // }
        // })

      


      })
    </script>
</head>
<body>

    <div class="red">
        <div class="green"></div>
    </div>
    
</body>
</html>

焦点事件

focus　　 //获得焦点事件,focus()方法是自动获取焦点
blur　　　//失去焦点事件

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>01-jquery的属性操作2</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            //1.获取焦点事件
            // 自动获取焦点 不传参数
            // $('.one').focus();

            // 监听获取焦点的事件
            $('.one').focus(function () {
                console.log('获取焦点!')
            })

            // 2.失去焦点 blur
            $('.one').blur(function () {
                console.log('失去焦点!')
            })

        })
    </script>
</head>
<body>

    <!-- 焦点 事件 输入框 -->

    <input type="text" class="one">
    <input type="text" class="two">
    
</body>
</html>

绑定事件

方法一：
$("ul li").click(function(){})    //简写
方法二
$("ul li").bind("click",function(){})    //完整写法

解除绑定事件

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

事件委托

$("").on(eve,[selector],[data],fn)　　　　//四个参数分别对应的是事件，选择器，参数，函数
例子：
$("ul").on("click","li",function(){});    //过程是，click先找ul，ul再将事件委托给下面的li去执行。这样就实现了新加入的li标签也可以有单击事件

[data]参数的调用:
             function myHandler(event) {
                alert(event.data.foo);
                }
             $("li").on("click", {foo: "bar"}, myHandler) 

注：旧版本中事件委托格式不一样，是下面的样子：

$('.list').delegate('li','click',function () {
　　$(this).css({'color':'red'})
 })

事件加载

如果script标签写在body前，会执行不了，因为找不到标签，加入这两个方法就可以执行了

方法一：
$(document).ready(function(){
内容
});
方法二：
$(functioin(){
内容
});

事件传播

和js一样在事件传播过程中，如果父元素有同类型事件监听，被同时激活

两种阻止方式：
第一种：在function的参数加一个任意名的参数，一般写event，然后添加参数的stopPropagation()方法
第二种：函数中加return false；

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <style>
    .div1{
         200px;
        height: 200px;
        background-color: red;
    }
    .div2{
         100px;
        height: 100px;
        background-color: blue;
    }
    </style>

</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
<script>
    $(".div1").click(function(){
        alert("外层");
    })
    $(".div2").click(function(ev){
        alert("里层");
        ev.stopPropagation();
        // return false;
    })
</script>
</html>

实际例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/main.css">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">

        $(function () {
            
            $("#btn01").click(function () {
                //1.弹出提示框
                // $("#pop").show();
                $("#pop").fadeIn();         //淡入

                //阻止冒泡
                return false;
            })

            //特殊的使用window  操作知识为了演示知识点
            $(window).click(function () {
                
                //隐藏提示框
                // $("#pop").hide();
                $("#pop").fadeOut();        //淡出

            })

            $(".pop_con").click(function () {
                
                
                //阻止冒泡
                return false;
            });

            //X 的按钮
            $("#shutoff").click(function () {
                
                //关闭整个的提示框
                $("#pop").fadeOut();
                return false;
            });
        })
       
    </script>
</head>
<body>
    <input type="button" value="弹出弹框" id="btn01">
    <div class="pop_main" id="pop">
        <div class="pop_con">
            <div class="pop_title">
                <h3>系统提示</h3>
                <a href="#" id="shutoff">×</a>
            </div>
            <div class="pop_detail">
                <p class="pop_text">亲！请关注近期的优惠活动！</p>
            </div>
            <div class="pop_footer">
                              
            </div>
        </div>
        <div class="mask"></div>
    </div>
</body>
</html>

阻止默认的提交事件

两种阻止方式：
第一种：和前面差不多，是event.preventDefault();
第二种：函数中加return false

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>阻止默认程序</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
    
       $(function () {
           
             $("#form1").submit(function (event) {
                 
                //1.
                // return false;

                //2.
                event.preventDefault();
             });
       })
    </script>
</head>
<body>
    
    <form action="" id="form1">
        <input type="text" value="内容" name="username">
        <input type="submit">
    </form>
</body>
</html>

动画效果

1.淡入淡出 fade

　　$('.box').fadeOut();

　　$('.box').fadeIn();

　　$('.box').fadeToggle();　　//自动判断当前标签的状态，如果当前是显示状态就淡出，如果是无显示状态则淡入，下同理

2.显示隐藏 show hide

　　$('.box').show();

　　$('.box').hide();

　　$('.box').toggle();

3.卷开卷起 slide

　　$('.box').slideUp();

　　$('.box').slideDown();

　　$('.box').slideToggle();

4淡入设置透明度

$("div").fadeTo(1000,0.4)　　　　//第一个参数表示一秒完成，第二个参数表示淡入到透明度为0.4

注：1到3中的括号里都可以加时间，单位是毫秒，表示用多少毫秒来完成这个动作

案例：

层级菜单1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>02-层级菜单案例</title>
    <style>

        /*1.初始化*/
        ul,li{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }

        /*2.设置 外层menu的大小 居中*/
        .menu{

             200px;
            margin: 50px auto 0;
        }

        /*3.设置a标签的文字,大小样式*/

        .menu .level1,.menu li ul a{

             200px;
            height: 30px;
            line-height: 30px;
            background-color: #3366cc;
            text-indent: 10px;
            color:#fff;

            display: block;
        }

        /*4.添加 每个格子的下划线*/
        .menu .level1{
            border-bottom:1px solid #afc6f6;
        }

        /*5.设置 内层格子的背景*/
        .menu li ul a{

            font-size:14px;
            text-indent:20px;
            background-color:#7aa1ef;
        }

        /*6.给内层盒子 添加底部边框*/
        .menu li ul li{
           
            border-bottom:1px solid #afc6f6;
        }

        /*7.给内层盒子的a 标签 添加伪类*/
        .menu li ul a:hover{
             background-color:#f6b544;
        }


       /*8.设置内部盒子隐藏, 第一个格子打开*/
        .menu li ul{
            display: none;
        }

        .menu li .current{
            display: block;
        }


    </style>
      <script src="js/jquery-1.12.4.min.js"></script>
      <script>
          $(function () {
              
                // 1.获取标签
                var $btns = $('.level1');

                // 2.监听按钮的点击 slideDown up
                $btns.click(function () {

                    // 3.点的这个按钮(下面的列表)--打开,其他的列表关闭
                    // 3.1获取下面的列表
                    var $nextUl = $(this).next();
                    
                    // 3.2 打开 动画
                    $nextUl.slideDown();

                    // 3.3 nextul 获取父元素 
                    var $parentLi = $nextUl.parent();

                    // 3.4 其他的LI标签
                    var $otherLis = $parentLi.siblings();

                    // 3.5获取其他的ul 子元素
                    var $ul = $otherLis.children('ul');

                    // 3.6关闭
                    $ul.slideUp();

                })

                
          })
      </script>
   
</head>
<body>

    <ul class="menu">
        <li>
            <a href="#" class="level1">水果</a>

            <ul class="current">
                <li><a href="">苹果</a></li>
                <li><a href="">香蕉</a></li>
                <li><a href="">梨子</a></li>
                <li><a href="">火龙果</a></li>
            </ul>
        </li>

        <li>
            <a href="#" class="level1">海鲜</a>
            <ul>
                <li><a href="#">蛏子</a></li>
                <li><a href="#">扇贝</a></li>
                <li><a href="#">龙虾</a></li>
                <li><a href="#">象拔蚌</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">肉类</a>
            <ul>
                <li><a href="#">内蒙古羊肉</a></li>
                <li><a href="#">进口牛肉</a></li>
                <li><a href="#">野猪肉</a></li>                
            </ul>
        </li>
        <li>
            <a href="#" class="level1">蔬菜</a>
            <ul>
                <li><a href="#">娃娃菜</a></li>
                <li><a href="#">西红柿</a></li>
                <li><a href="#">西芹</a></li>
                <li><a href="#">胡萝卜</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">速冻</a>
            <ul>
                <li><a href="#">冰淇淋</a></li>
                <li><a href="#">湾仔码头</a></li>
                <li><a href="#">海参</a></li>
                <li><a href="#">牛肉丸</a></li>
            </ul>
        </li>


    </ul>

   
</body>
</html>

 层级菜单2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>02-层级菜单案例</title>
    <style>

        /*1.初始化*/
        ul,li{
            list-style: none;
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
        }

        /*2.设置 外层menu的大小 居中*/
        .menu{

             200px;
            margin: 50px auto 0;
        }

        /*3.设置a标签的文字,大小样式*/

        .menu .level1,.menu li ul a{

             200px;
            height: 30px;
            line-height: 30px;
            background-color: #3366cc;
            text-indent: 10px;
            color:#fff;

            display: block;
        }

        /*4.添加 每个格子的下划线*/
        .menu .level1{
            border-bottom:1px solid #afc6f6;
        }

        /*5.设置 内层格子的背景*/
        .menu li ul a{

            font-size:14px;
            text-indent:20px;
            background-color:#7aa1ef;
        }

        /*6.给内层盒子 添加底部边框*/
        .menu li ul li{
           
            border-bottom:1px solid #afc6f6;
        }

        /*7.给内层盒子的a 标签 添加伪类*/
        .menu li ul a:hover{
             background-color:#f6b544;
        }


       /*8.设置内部盒子隐藏, 第一个格子打开*/
        .menu li ul{
            display: none;
        }

        .menu li .current{
            display: block;
        }


    </style>
      <script src="js/jquery-1.12.4.min.js"></script>
      <script>
          $(function () {
              
                // 1.获取标签
                var $btns = $('.level1');

                // 2.监听按钮的点击 slideDown up
                $btns.click(function () {

                    // 3.点击当前的按钮, 下面的ul(slideDown),找ul的父元素LI,
                    // 再 找 LI其他平级元素(Li),在其他LI的子元素ul, slideUp
                    $(this).next().slideDown().parent().siblings().children('ul').slideUp();
                   

                })

                
          })
      </script>
   
</head>
<body>

    <ul class="menu">
        <li>
            <a href="#" class="level1">水果</a>

            <ul class="current">
                <li><a href="">苹果</a></li>
                <li><a href="">香蕉</a></li>
                <li><a href="">梨子</a></li>
                <li><a href="">火龙果</a></li>
            </ul>
        </li>

        <li>
            <a href="#" class="level1">海鲜</a>
            <ul>
                <li><a href="#">蛏子</a></li>
                <li><a href="#">扇贝</a></li>
                <li><a href="#">龙虾</a></li>
                <li><a href="#">象拔蚌</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">肉类</a>
            <ul>
                <li><a href="#">内蒙古羊肉</a></li>
                <li><a href="#">进口牛肉</a></li>
                <li><a href="#">野猪肉</a></li>                
            </ul>
        </li>
        <li>
            <a href="#" class="level1">蔬菜</a>
            <ul>
                <li><a href="#">娃娃菜</a></li>
                <li><a href="#">西红柿</a></li>
                <li><a href="#">西芹</a></li>
                <li><a href="#">胡萝卜</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="level1">速冻</a>
            <ul>
                <li><a href="#">冰淇淋</a></li>
                <li><a href="#">湾仔码头</a></li>
                <li><a href="#">海参</a></li>
                <li><a href="#">牛肉丸</a></li>
            </ul>
        </li>


    </ul>

   
</body>
</html>

回调函数

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

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



 <script>
   $("button").click(function(){
       $("p").hide(1000,function(){
           alert($(this).html())    //当执行完hide后，执行这个函数
       })

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

扩展方法

在平时使用的时候我们可以使用"$."然后调用jQuery提供的方法，有时候我们想要使用自己写的方法，然后通过这种方式调用，这就需要拓展方法。

   我们平时调用方法的时候有两种方式，一个是$.方法,一个是$("选择器").方法
　　这两种方式添加拓展方法的方式分别是：
　　　一、$.extend({自定义方法});或者jQuery.extend({自定义方法});
　　　二、$.fn.extend({自定义方法});或者jQuery.fn.extend({自定义方法});

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>111111</div>
    <div>222222222</div>
    <p>333333333</p>
</body>
<script src="js/jquery-1.12.4.min.js"></script>
<script>

        $.extend({
          comeOn: function(){alert("我来了");},
          max: function(a, b) { return a > b ? a : b; }
        });
        $.comeOn();
         console.log($.max(3,4));
        $.fn.extend({
            "print":function(){
                for (var i=0;i<this.length;i++){      //this就相当于选择器找到的jQuery对象
                    console.log($(this)[i].innerHTML)   //$(this)[i]相当于将jQuery中的元素变成DOM对象，所以用的是innerHTML
                }
            }
        });
        $("div").print();
</script>
</html>

 Ajax

 这个是jQuery中实现前后交互的功能，这个我推荐一个人的博客，写的很清楚  https://www.cnblogs.com/jackson0714/p/AJAX.html#_label3

实例：

选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡</title>
    <style>
            .tap_con{
                500px;
               height: 350px;
               margin: 50px auto 0;
   
            }
   
            .tap_btns{
                height: 50px;
            }
            .tap_btns input{
   
                100px;
               height: 50px;
               background-color: lightgray;
               border: 0px;
               outline: none;
            }
            .tap_btns .active{
                background-color: gold;
            }
   
            .tab_cons{
               
                height: 300px;
                background-color: gold;
            }
            .tab_cons div{
   
                height: 300px;
                line-height: 300px;
                text-align: center;
                /* 隐藏 */
                display: none;
                font-size: 30px;
       
            }
   
            .tab_cons .current{
   
                display: block;
            }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            
            // 1.获取三个按钮
            var $btns = $('.tap_btns input');
            // 2.获取三个div
            var $divs = $('.tab_cons div');
            

            // 3.监听按钮点击
            $btns.click(function () {
                // 4.点击 哪个按钮 哪个按钮黄色(addclass),其他的按钮删除class
                $(this).addClass('active').siblings().removeClass('active');
                   

                // 5.点击按钮index对应的div显示(current),其他的div删除class
               $divs.eq($(this).index()).addClass('current').siblings().removeClass('current');
                
            })

            
        })
    </script>

  
</head>
<body>
<div class="tap_con">
    <div class="tap_btns">
        <input type="button" value="按钮一" class="active">
        <input type="button" value="按钮二">
        <input type="button" value="按钮三">
    </div>

    <div class="tab_cons">
        <div class="current">按钮一对应的内容</div>
        <div>按钮二对应的内容</div>
        <div>按钮三对应的内容</div>
    </div>
</div>
    
    
</body>
</html>

铺展动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>13-jquery的动画</title>
    <style>
        .box{
             0px;
            height: 300px;
            background: red;
        }
        .box1{
             0px;
            height: 300px;
            background: green;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.color.js"></script>
    <script>
        $(document).ready(function () {
            // 动画; 动画属性,动画时长(毫秒),动画样式(先快后慢,先慢后快),动画结束的监听
            // jquery 动画 对尺寸有作用  px结尾


            // margin-top
            // margin-left

             $('.box').animate(
                {
                    "width":"1000px",
                    "background-color":"green"
                },
                5000,
                function () {
                    $('.box').animate({"height":"500px"},2000)
                   
                }
            )
            
            // $('.box').animate(
            //     {
            //         "width":"1000px",
            //     },
            //     5000,
            //     "linear",
            //     function () {
            //         console.log('动画结束了!')
            //     }
            // )

            // $('.box1').animate(
            //     {
            //         "width":"1000px",
            //     },
            //     5000,
            //     "swing",
            // )

        })
    </script>
</head>
<body>
    <div class="box">

    </div>
    <div class="box1">

        </div>
</body>
</html>

对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .talk_con{
            600px;
            height:500px;
            border:1px solid #666;
            margin:50px auto 0;
            background:#f9f9f9;
        }
        .talk_show{
            580px;
            height:420px;
            border:1px solid #666;
            background:#fff;
            margin:10px auto 0;
            overflow:auto;
        }
        .talk_input{
            580px;
            margin:10px auto 0;
        }
        .whotalk{
            80px;
            height:30px;
            float:left;
            outline:none;
        }
        .talk_word{
            420px;
            height:26px;
            padding:0px;
            float:left;
            margin-left:10px;
            outline:none;
            text-indent:10px;
        }        
        .talk_sub{
            56px;
            height:30px;
            float:left;
            margin-left:10px;
        }
        .atalk{
           margin:10px; 
        }
        .atalk span{
            display:inline-block;
            background:#0181cc;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
        .btalk{
            margin:10px;
            text-align:right;
        }
        .btalk span{
            display:inline-block;
            background:#ef8201;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">  
        $(function () {
            
            // 1.标签4个
            var $sendBtn = $('#talksub'),
                // 对话框
                $showWords = $('#words'),
                //  A ,B
                $who = $('#who'),
                // 输入框
                $content = $('#talkwords');

            // 2.监听发送按钮
            $sendBtn.click(function () {
                
                // 3.判断空 .val()
                if ($content.val() == "") {
                    alert('请输入内容!');
                    return;
                }

                // 4.判断 A ,B
                var sNewContent = ""
                var sOldContent = $showWords.html();
                if ($who.val() == "0") {//A
                   sNewContent = sOldContent + '<div class="atalk"><span>A说: ' + $content.val() + '</span></div>';
                } else {//B
                    sNewContent = sOldContent + '<div class="btalk"><span>B说: ' + $content.val() + '</span></div>';
                }

                // 5.赋值 .html() 整体替换
                $showWords.html(sNewContent);

                // 6.输入完毕 清空输入框
                $content.val("");
                
            })

        })
     
    </script>
</head>
<body>
    <div class="talk_con">

        <!--1.对话框-->
        <div class="talk_show" id="words">
            <div class="atalk"><span>A说：吃饭了吗？</span></div>
            <div class="btalk"><span>B说：还没呢，你呢？</span></div>
        </div>

        <!--2.选择人和 输入内容和发送-->
        <div class="talk_input">
            <select class="whotalk" id="who">
                <option value="0">A说：</option>
                <option value="1">B说：</option>
            </select>
            <input type="text" class="talk_word" id="talkwords">
            <input type="button" value="发送" class="talk_sub" id="talksub">
        </div>
    </div>
</body>
</html>

 连续动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery的动画</title>
    <style>
        div{
             100px;
            height: 100px;
            
        }
        .box{
            background-color: red;
        }
     
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.color.js"></script>
    <script>
       $(function () {

        //注意点: jquery中的动画 一般对 尺寸生效 px
        //渐变色动画  color.js的函数库


           
            //1.获取标签
       setInterval(fnTest,1000)
       function fnTest() {
            var $div = $(".box");
                 $div.animate({
                    "margin-top":500,
                    "margin-left":500
                },1000)
                $div.animate({
                    "margin-top":100,
                    "margin-left":1000
                },1000)
                $div.animate({
                    "margin-top":0,
                    "margin-left":0
                },1000)
       }
               
            


            

            
           

            
            // $div.animate({
            //     "margin-top":500,
            //     "margin-left":500
            // },1000,function () {

            //     $div.animate({
            //         "margin-top": 100,
            //         "margin-left": 1000
            //     }, 1000, function () {
            //         $div.animate({
            //             "margin-top": 0,
            //             "margin-left": 0
            //         }, 1000, function () {

            //         });

            //     });
                
            // });
           

       })
    
    </script>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
    
</body>
</html>

to do list

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <style type="text/css">
        .list_con{
            600px;
            margin:50px auto 0;
        }
        .inputtxt{
            550px;
            height:30px;
            border:1px solid #ccc;
            padding:0px;
            text-indent:10px;            
        }
        .inputbtn{
            40px;
            height:32px;
            padding:0px;
            border:1px solid #ccc;
        }
        .list{
            margin:0;
            padding:0;
            list-style:none;
            margin-top:20px;
        }
        .list li{
            height:40px;
            line-height:40px;
            border-bottom:1px solid #ccc;
        }

        .list li span{
            float:left;
        }

        .list li a{
            float:right;
            text-decoration:none;
            margin:0 10px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            
            // 1.获取对应的标签
            var $txt = $("#txt1");
            var $addBtn = $("#btn1");
            var $list = $(".list");

            // 2.监听增加
            $addBtn.click(function () {
                // 3.判断输入是否为空
                var sContent = $txt.val();
                if (sContent == "") {
                    alert("输入不能为空");
                    return;
                }

                //3.1 增加节点 jquery对象
                var $newLi = $('<li><span>' + sContent +'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');
                $newLi.appendTo($list);

                //3.2清空输入的内容
                $txt.val("");
                
            })

        
            // 4.删除 排序 上 下
            $list.delegate("a","click",function () {
                    
                    //根据类名称来判断 删除 上 下
                    var sClassName = $(this).prop("class");
                    if (sClassName == "del") {//删除
                        //li
                        $(this).parent().remove();
                    } else if (sClassName == "up"){//上

                        //1.获取上面的标签
                        var $upLi = $(this).parent().prev();

                        //判断是否 到头了
                        if ($upLi.length == 0) {
                            alert("到头了");
                            return;
                        }

                        //2.获取当前标签
                        var $currentLi = $(this).parent();

                        //3.调换位置
                        $upLi.insertAfter($currentLi);
    
                    } else if (sClassName == "down"){//下
                        //1.获取下面的标签
                        var $downLi = $(this).parent().next();
                        //判断是否 到底了
                        if ($downLi.length == 0) {
                            alert("到底了");
                            return;
                        }

                        //2.获取当前标签
                        var $currentLi = $(this).parent();

                        //3.调换位置
                        $downLi.insertBefore($currentLi);
                        
                    }

                });

            

            
        })

    </script>    
</head>
<body>

    <div class="list_con">
    <h2>To do list</h2>
        <input type="text" name="" id="txt1" class="inputtxt">
        <input type="button" name="" value="增加" id="btn1" class="inputbtn">
        
        <ul id="list" class="list">
                
            <li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
            <li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
            <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>

        </ul>

    </div>
</body>
</html>