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>

View Code

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>

View Code

文档处理

这个类似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{
         width: 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>

View Code

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{
           width: 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>

View Code

焦点事件

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>

View Code

绑定事件

方法一：
$("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{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .div2{
        width: 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>

View Code

实际例子：

<!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>

View Code

阻止默认的提交事件

两种阻止方式：
第一种：和前面差不多，是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>

View Code

动画效果

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{

            width: 200px;
            margin: 50px auto 0;
        }

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

        .menu .level1,.menu li ul a{

            width: 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>

View Code

层级菜单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{

            width: 200px;
            margin: 50px auto 0;
        }

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

        .menu .level1,.menu li ul a{

            width: 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>

View Code

回调函数

<!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>

View Code

扩展方法

在平时使用的时候我们可以使用"$."然后调用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>

View Code

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{
               width: 500px;
               height: 350px;
               margin: 50px auto 0;
   
            }
   
            .tap_btns{
                height: 50px;
            }
            .tap_btns input{
   
               width: 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>

View Code

铺展动画

<!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{
            width: 0px;
            height: 300px;
            background: red;
        }
        .box1{
            width: 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>

View Code

对话框

<!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{
            width:600px;
            height:500px;
            border:1px solid #666;
            margin:50px auto 0;
            background:#f9f9f9;
        }
        .talk_show{
            width:580px;
            height:420px;
            border:1px solid #666;
            background:#fff;
            margin:10px auto 0;
            overflow:auto;
        }
        .talk_input{
            width:580px;
            margin:10px auto 0;
        }
        .whotalk{
            width:80px;
            height:30px;
            float:left;
            outline:none;
        }
        .talk_word{
            width:420px;
            height:26px;
            padding:0px;
            float:left;
            margin-left:10px;
            outline:none;
            text-indent:10px;
        }        
        .talk_sub{
            width: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>

View Code

连续动画

<!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{
            width: 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>

View Code

to do list

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <style type="text/css">
        .list_con{
            width:600px;
            margin:50px auto 0;
        }
        .inputtxt{
            width:550px;
            height:30px;
            border:1px solid #ccc;
            padding:0px;
            text-indent:10px;            
        }
        .inputbtn{
            width: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>

View Code

posted @ 2018-05-09 11:21 苦行僧95 阅读(221) 评论(0) 收藏举报

刷新页面返回顶部

苦行僧95

人的一切痛苦，本质上都是对自己的无能的愤怒。

jQuery

jQuery

jQuery是什么

什么是jQuery对象

jQuery对象和DOM对象互相转换

jQuery的引入方式

jQuery的基本语法

jQuery选择器

基本选择器

层级选择器

基本筛选器

属性选择器

表单选择器

length属性

jQuery过滤器

过滤筛选器

查找筛选器

元素操作

属性操作：

jQuery的遍历

文档处理

css操作

事件绑定

鼠标事件

焦点事件

绑定事件

解除绑定事件

事件委托

事件加载

事件传播

阻止默认的提交事件

动画效果

扩展方法

Ajax

实例：