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

书写规范

　　基础语法： $(selector).action() 变量定义：var $variable = jQuery 对象 变量前并不强制加$符号,可以直观了解声明了一个jQuery对象

元素寻找

选择器（selector）

1.基本选择泽器

$("*")              // 选取所有元素

$("element")        //选取标签名称的所有元素

$("#id")            //选取id 属性指定的元素

$(".class")			// 选取指定的 class 查找元素

$(".calss,p,div")   // 选取多样

2.层级选择器

$(".outer div")   // 后代选择器查找
 
$(".outer>div")   // 子代选择器查找
 
$(".outer+div")   // 通过毗邻查找，用的少。。只能往下找
 
$(".outer~div")   // 自下找，不限制紧挨

3、属性选择器

$('[id="div1"]')         
 
$('["alex="sb"][id]')   // 可双层属性选择

筛选器

1.基本筛选器

$('li:first')    //第一个元素
$('li:last')     //最后一个元素
 
$("tr:even")     //索引为偶数的元素，从 0 开始
$("tr:odd")      //索引为奇数的元素，从 0 开始
  
$("tr:eq(1)")    //给定索引值的元素
$("tr:gt(0)")    //大于给定索引值的元素
$("tr:lt(2)")    //小于给定索引值的元素
 
$(":focus")      //当前获取焦点的元素
$(":animated")   //正在执行动画效果的元素

2、表单筛选器

$(":input")      // 匹配所有 input, textarea, select 和 button 元素
$(":text")       // 所有的单行文本框
$(":password")   // 所有密码框
$(":radio")      // 所有单选按钮
$(":checkbox")   // 所有复选框
$(":submit")     // 所有提交按钮
$(":reset")      // 所有重置按钮
$(":button")     // 所有button按钮
$(":file")       // 所有文件域
  
$("input:checked")             // 所有选中的元素
$("select option:selected")    // select中所有选中的option元素
                               // 如果select默认选中想要的值 $('select').val(1)
                               // 即默认选中值为1 option标签
                               // 如果想选中多个值呢？？？                            
                               // $('select').val([1,2,])  放入一个数组即可

3、内容筛选器

$("div:contains('test')")    // 包含test文本的元素
$("td:empty")                // 不包含子元素或者文本的空元素
$("div:has(p)")              // 含有选择器所匹配的元素
$("td:parent")               // 含有子元素或者文本的元素

4、查找筛选器

$("div").children()              // 查找div下的所有儿子标签
$("div").find()                  // 查找div下的所有后代标签
 
$("p").next()                    // 紧邻p元素后的下一个同辈元素
$("p").nextAll()                 // p元素之后所有的同辈元素
$("#test").nextUntil("#test2")   // id为"#test"元素之后到id为'#test2'之间所有的同辈元素(开区间)
 
$("p").prev()                    // 紧邻p元素前的一个同辈元素
$("p").prevAll()                 // p元素之前所有的同辈元素
$("#test").prevUntil("#test2")   // id为"#test"元素之前到id为'#test2'之间所有的同辈元素(开区间)
 
 
$("p").parent()                  // 每个p元素的父元素
$("p").parents()                 // 每个p元素的所有祖先元素,body,html
$("#test").parentsUntil("#test2")// id为"#test"元素到id为'#test2'之间所有的父级元素(开区间)
 
$("div").siblings()              // 所有的同辈元素,不包括自己
 
$("p").hasClass("test")          // 查找p标签有class名字为test

其他选择器

$("[href]")              // 选取带有 href 属性的元素
$("a[target='_blank']")  // 选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']") // 选取所有 target 属性值不等于 "_blank" 的 <a> 元素

属性操作

1.基本属性操作

$("img").attr("src");    　　　　　// 返回文档中所有图像的src属性值
$("img").attr("src","test.jpg");  // 设置所有图像的src属性
$("img").removeAttr("src");    　 // 将文档中图像的src属性删除
 
$("input[type='checkbox']").prop("checked", true);   // 选中复选框
$("input[type='checkbox']").prop("checked", false);  // 取消复选框
$("img").removeProp("src");    　　 // 删除img的src属性
 
// attr与prop区别
// attr可以找到自定义的属性、prop只能找到固有的属性

2、class操作

$("p").addClass("test");    　 // 为p元素加上 'test' 类
$("p").removeClass("test");    // 从p元素中删除 'test' 类
$("p").toggleClass("test");    // 如果存在就删除,否则就添加
$("p").hasClass("test");       // 判断有没有 'test' 类,返回布尔值

3、标签文本text/html

$('p').html();    　　　　　　　　　　 // 返回p元素的html内容
$("p").html("Hello <b>test</b>!");     // 设置p元素的html内容
$('p').text();    　　　　　　　　　　 // 返回p元素的文本内容
$("p").text("test");    　　　　　　　 // 设置p元素的文本内容
$("input").val();    　　　　　　　　  // 获取文本框中的值
$("input").val("test");     　　　　   // 设置文本框中的内容

CSS操作

1.样式

$("p").css("color");          // 访问查看p元素的color属性
$("p").css("color","red");    // 设置p元素的color属性为red
$("p").css({ "color": "red", "background": "yellow" }); 
// 设置p元素的color为red，background属性为yellow（设置多个属性要用{}字典形式）

2.位置

$('p').offset()            // 元素在当前视口的相对偏移,Object {top: 122, left: 260}
$('p').offset().top
$('p').offset().left
$("p").position()          // 元素相对父元素的偏移,对可见元素有效，Object {top: 117, left: 250}
 
$(window).scrollTop()      // 获取滚轮滑的高度
$(window).scrollLeft()     // 获取滚轮滑的宽度
$(window).scrollTop('100') // 设置滚轮滑的高度为100

3.尺寸

$("p").height();              // 获取p元素的高度
$("p").width();               // 获取p元素的宽度
 
$("p:first").innerHeight()    // 获取第一个匹配元素内部区域高度(包括补白、不包括边框)
$("p:first").innerWidth()     // 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)
 
$("p:first").outerHeight()    // 匹配元素外部高度(默认包括补白和边框)
$("p:first").outerWidth()     // 匹配元素外部宽度(默认包括补白和边框)
$("p:first").outerHeight(true)// 为true时包括边距

文档处理

1.内部插入

$("p").append("<b>nick</b>");    // 每个p元素内后面追加内容
$("p").appendTo("div");    　　　 // p元素追加到div内后
$("p").prepend("<b>Hello</b>");  // 每个p元素内前面追加内容
$("p").prependTo("div");    　   // p元素追加到div内前

2.外部插入

$("p").after("<b>nick</b>");     // 每个p元素同级之后插入内容
$("p").before("<b>nick</b>");    // 在每个p元素同级之前插入内容
$("p").insertAfter("#test");     // 所有p元素插入到id为test元素的后面
$("p").insertBefore("#test");    // 所有p元素插入到id为test元素的前面

3、替换

$("p").replaceWith("<b>Paragraph.</b>");  // 将所有匹配的元素替换成指定的HTML或DOM元素
$("<b>Paragraph.</b>").replaceAll("p");   // 用匹配的元素替换掉所有selector匹配到的元素

4、删除

$("p").empty();         // 删除匹配的元素集合中所有的子节点，不包括本身
$("p").remove([expr]);  // 删除所有匹配的元素,包括本身
$("p").detach();        // 删除所有匹配的元素(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)

5.复制

$("p").clone()    　　// 克隆元素并选中克隆的副本
$("p").clone(true)   // 布尔值指事件处理函数是否会被复制

循环

jQuery实现的数组循环机制

// 方式一
$.each(Array,function () {
     
})

// 方式二
$(element).each(function () {
     
})

事件

1.事件

$("p").click();    　　         // 单击事件
$("p").dblclick();              // 双击事件
$("input[type=text]").focus()   // 元素获得焦点时,触发 focus 事件
$("input[type=text]").blur()    // 元素失去焦点时,触发 blur事件
$("button").mousedown()         // 当按下鼠标时触发事件
$("button").mouseup()           // 元素上放松鼠标按钮时触发事件
$("p").mousemove()              // 当鼠标指针在指定的元素中移动时触发事件
$("p").mouseover()              // 当鼠标指针位于元素上方时触发事件
$("p").mouseout()    　         // 当鼠标指针从元素上移开时触发事件
$(window).keydown()             // 当键盘或按钮被按下时触发事件
$(window).keypress()            // 当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup()              // 当按钮被松开时触发事件
$(window).scroll()              // 当用户滚动时触发事件
$(window).resize()              // 当调整浏览器窗口的大小时触发事件
$("input[type='text']").change()// 当元素的值发生改变时触发事件
$("input").select()             // 当input 元素中的文本被选择时触发事件
$("form").submit()              // 当提交表单时触发事件
$(window).unload()              // 用户离开页面时

2、绑定方式

$(标签).事件(函数内容)
 
$(标签).bind("事件",函数名)

3、页面载入

// 当页面载入成功后再运行的函数事件
 
$(document).ready(function(){
  ......
});
 
// 简写
$(function() {
  ......
});

4、页面处理

// bind 为每个匹配元素绑定事件处理函数，绑定多个用{}。
$("p").bind("click", function(){
  alert( $(this).text() );
});
$(menuF).bind({
    "mouseover":function () {$(menuS).parent().removeClass("hide");},
    "mouseout":function () {$(menuS).parent().addClass("hide");}
});        
 
 
$("p").one("click", fun...)    // one 绑定一个一次性的事件处理函数
$("p").unbind("click")         // 解绑一个事件

6、事件委托

$('ul').on("click","li",function () {
       alert(999);
});
 
 
// 阐释...
// 通过它的上级（多层上级）事件委托，当点击这个标签时才会绑定事件
// 场景：
    在页面不刷新的情况下添加一行数据，行数据有操作按钮，点击并无效果，那么通过事件委托便可以解决

7.event object

// 所有的事件函数都可以传入event参数方便处理事件

$("p").click(function(event){ 
 alert(event.type); //"click" 
});
 
(evnet object)属性方法：
event.pageX 　         // 事件发生时，鼠标距离网页左上角的水平距离
event.pageY 　         // 事件发生时，鼠标距离网页左上角的垂直距离
event.type 　　        // 事件的类型
event.which 　         // 按下了哪一个键
event.data 　　        // 在事件对象上绑定数据，然后传入事件处理函数
event.target 　        // 事件针对的网页元素
event.preventDefault() // 阻止事件的默认行为(比如点击链接，会自动打开新页面)
event.stopPropagation()// 停止事件向上层元素冒泡

动画效果

1.基点

("p").show()    　　　　// 显示隐藏的匹配元素
$("p").show("slow");    // 参数表示速度,("slow","normal","fast"),也可设置为毫秒
$("p").hide()    　　　　// 隐藏显示的元素
$("p").toggle();   　　 // 切换 显示/隐藏

2、滑动

$("p").slideDown("1000");    // 用1000毫秒时间将段落滑下
$("p").slideUp("1000");    　// 用1000毫秒时间将段落滑上
$("p").slideToggle("1000");  // 用1000毫秒时间将段落滑上，滑下

3、淡入淡出

$("p").fadeIn("900");    　　  // 用900毫秒时间将段落淡入
$("p").fadeOut("900");    　　 // 用900毫秒时间将段落淡出
$("p").fadeToggle("900");    　// 用900毫秒时间将段落淡入,淡出
$("p").fadeTo("slow", 0.6);    // 用900毫秒时间将段落的透明度调整到0.6

4、回调函数

// 回调函数指什么   一个动作完成之后执行的一段代码
 
 
// DEMO
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-2.2.3.js"></script>
    <script>
 
    $(document).ready(function(){
   $("button").click(function(){
       $("p").hide(1000,function(){
           alert('动画结束')
       })
 
//       $("p").css('color','red').slideUp(1000).slideDown(2000)
   })
});
    </script>
</head>
<body>
  <button>隐藏</button>
  <p>helloworld helloworld helloworld</p>
 
</body>
</html>

扩展(插件机制)

此机制可扩展Jquery的方法或者定制一些其它的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <style>
        a{
            color: #65ff9b;
        }
    </style>
 
</head>
<body>
<div>Hello World</div>
 
<input type="checkbox">
<input type="radio" checked>
<script src="jquery-3.1.1.js"></script>
<script>
     
    // 方式一
    $.extend({
        Myprint:function (content) {
            console.log(content)
        }
    });
 
    $.Myprint(666);
 
    // 方式2
    $.fn.extend({
        check:function () {return this.each(function () {this.checked=true})},
        uncheck:function () {return this.each(function () {this.checked=false})}
 
    });
 
    $(":checkbox").check();
    $(":radio").uncheck()
     
</script>
</body>
</html>

对象访问

$.trim() 　　      // 去除字符串两端的空格
$.each() 　　      // 遍历一个数组或对象，for循环
$.inArray()       // 返回一个值在数组中的索引位置，不存在返回-1 
$.grep() 　       // 返回数组中符合某种标准的元素
$.extend()        // 将多个对象，合并到第一个对象
$.makeArray()     // 将对象转化为数组
$.type()          // 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等
$.isArray()       // 判断某个参数是否为数组
$.isEmptyObject() // 判断某个对象是否为空(不含有任何属性)
$.isFunction()    // 判断某个参数是否为函数
$.isPlainObject() // 判断某个参数是否为用"{}"或"new Object"建立的对象
$.support()       // 判断浏览器是否支持某个特性

实例

1.回顶部

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         .HA,.HE{
13             height: 900px;
14         }
15         .HA{
16             background-color: #8aab30;
17         }
18         .HE{
19             background-color: #99aecb;
20         }
21         .go_top{
22             display: inline-block;
23             position: fixed;
24             right: 30px;
25             bottom: 50px;
26              39px;
27             height: 39px;
28             background: url("go_top.png") 0 78px;
29         }
30 
31         .go_top:hover{
32             background: url("go_top.png") 0 39px;
33         }
34         .hide{
35             display: none;
36         }
37 
38     </style>
39 
40 </head>
41 <body>
42     <div class="HA"></div>
43     <div class="HE"></div>
44     <a class="go_top hide" title="返回顶部"></a>
45 
46     <script src="jquery-3.1.1.js"></script>
47     <script>
48         window.onscroll = function () {
49             var xyz = $(window).scrollTop();
50             console.log(xyz);
51             if (xyz>100){
52                 $(".go_top").removeClass("hide");
53             }else {
54                 $(".go_top").addClass("hide");
55             }
56         };
57         
58         $(".go_top").click(function () {
59           $('body,html').animate({scrollTop:0},1000);
60         })
61 
62     </script>
63 </body>
64 </html>

2.轮播图：

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


    <style>

            .outer{
                 790px;
                height: 340px;
                margin: 80px auto;
                position: relative;
            }

            .img li{
                 position: absolute;
                 list-style: none;
                 top: 0;
                 left: 0;

            }

           .num{
               position: absolute;
               bottom: 18px;
               left: 270px;
               list-style: none;


           }

           .num li{
               display: inline-block;
                18px;
               height: 18px;
               background-color: white;
               border-radius: 50%;
               text-align: center;
               line-height: 18px;
               margin-left: 4px;
           }

           .btn{
               position: absolute;
               top:50%;
                30px;
               height: 60px;
               background-color: lightgrey;
               color: white;

               text-align: center;
               line-height: 60px;
               font-size: 30px;
               opacity: 0.7;
               margin-top: -30px;

               display: none;

           }

           .left{
               left: 0;
           }

           .right{
               right: 0;
           }

          .outer:hover .btn{
              display: block;
          }

        .num .active{
            background-color: red;
        }


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

</head>
<body>


      <div class="outer">
          <ul class="img">
              <li><a href=""><img src="img/1.jpg" alt=""></a></li>
              <li class="hide"><a href=""><img src="img/2.jpg" alt=""></a></li>
              <li class="hide"><a href=""><img src="img/3.jpg" alt=""></a></li>
              <li class="hide"><a href=""><img src="img/4.jpg" alt=""></a></li>
              <li class="hide"><a href=""><img src="img/5.jpg" alt=""></a></li>
              <li class="hide"><a href=""><img src="img/6.jpg" alt=""></a></li>
          </ul>

          <ul class="num">
              <li class="active"></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
          </ul>

          <div class="left  btn"> < </div>
          <div class="right btn"> > </div>

      </div>

<script>
    var i=0;
    //功能1：  鼠标悬浮到图标的位置时实现切换

    $(".num li").mouseover(function () {
          $(this).addClass("active").siblings().removeClass("active");

          var $icon_index=$(this).index();

          i=$icon_index;

          $(".img li").eq($icon_index).removeClass("hide").siblings().addClass("hide")
    });


    // 自动轮播   setInterval(fn,1000)


    function foo() {
         if(i==5){
             i=-1
         }

         i++;
         $(".num li").eq(i).addClass("active").siblings().removeClass("active");
         $(".img li").eq(i).removeClass("hide").siblings().addClass("hide");

    }

    var ID=setInterval(foo,1000);


    //  悬浮终止定时器
        $(".outer").hover(function () {
             // 终止定时器
            clearInterval(ID)

        },function () {
           // 重新开启一个定时器
           ID=setInterval(foo,1500);

        });


    //  通过按钮实现切换

    $(".right").click(function () {
        foo()
    });



    function bar() {
         if(i==0){
             i=6
         }

         i--;
         $(".num li").eq(i).addClass("active").siblings().removeClass("active");
         $(".img li").eq(i).removeClass("hide").siblings().addClass("hide");

    }

     $(".left").click(function () {
        bar()
    })
    




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

3.面板拖动

// offset() 方法设置或返回被选元素相对于文档的偏移坐标。

<!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;">
            <strong style="padding-left: 300px;;line-height: 40px">标题</strong>
        </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) {
            var _event = e || widows.event;
            var old_x = _event.clientX;
            var old_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 - old_x);
                var y = parent_top + (new_y - old_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');
            })
        }).mouseup(function () {
            $(this).unbind('mousemove');
        });
    })
</script>
</body>
</html>

拖动面板

面板拖动

4.clone实例之输入框增减

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="HE">
    <div class="HA">
        <button onclick="add(this)">+</button>
        <input type="text">
    </div>
</div>

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

    // 添加文本框
    function add(self) {
        var $add_ele = $(self).parent().clone();
        // 修改子文本框html内容
        var $remove_ele = $add_ele.children("button").html("-");
        // attr() 方法设置或返回被选元素的属性和值。
        $remove_ele.attr("onclick","remove_self(this)");

        $(".HE").append($add_ele)
    }
    // 删除文本框
    function remove_self(self) {
        $(self).parent().remove();
    }

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