Jquery（二）

[TOC]

事件

pageY滑动距离加上点击的距离
clientY可视窗口的距离
which（鼠标事件：相当于target 1代表左键 2代表滚轮 3代表右键）
阻止浏览器的默认行为（preventDefault）
阻止事件冒泡（stopPropagation）
既阻止事件冒泡又阻止默认行为（return fals**e**）

Jquery的方法
offset（.offset().left）直接获取当前的物体，看的见得部分。
position（.position().left）包括物体的padding，margin，到父节点的距离。
offsetParent() 选择父元素一直到有定位的结束
val（）显示value的值
size()获取当前元素的个数

each遍历元素节点的（item表示当前元素，index表示下标）

<script>
      $(function(){
          // console.log($('input').val());
          // console.log($("input").size());
          // $("li").each((index, item) => {
          //item 基本的JS元素
          // item.innerHTML = index;
          // })
      })
</script>
<body>
    <input type="text" value = "123">
  <input type="text" value = "456">
  <ul>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
    <li>111</li>
  </ul>
</body>

特效函数

show() 显示 show(4000, function(){})
hide() 隐藏 hide(4000, function(){})

可以传入参数
show(毫秒数, 回调函数);
第一个参数：动画持续的时间
第二个参数：当动画结束以后，执行的内容
特效效果：从左上角收起和展开。

hover(funcOver, funcOut)

  • fadeIn()       fadeOut()   淡入淡出    fadeIn(4000, function(){})<br />      • fadeTo()    可以设置淡入淡出到达的终点值    前面用了fedeTo后面也得用fadeTo<br />      • slideDown() slideUp()  卷闸效果

animate函数

运动的默认形式是：慢快慢
匀速：linear
想要获取更多的运动形式支持。查阅JQUI

如果大家多次触发，会把所有的运动攒起来，依次运行。每次在调用animate方法之前，我们可以先调用一次stop方法

          $("#div1").hover(function(){
      $("#div2").stop(true).animate({
        width: 200,
        height: 200,
        opacity: 0.5
      }, 2000, function(){
        $("#div1").html("移入成功");
      })
    }, function(){
      $("#div2").stop(true).animate({
        width: 100,
        height: 100,
        opacity: 1
      }, 2000, function(){
        $("#div1").html("移出成功");
      })
    })

stop的方法

stop（）当前动画停止，后续动画不受影响
stop（true）停止所有动画
stop（true， true）停止所有动画，当前运动的动画到达目的值
finsh（）停止所有动画，将所有动画都到达目的值

parents和closest的方法
parents（）获取所有的父节点，参数可以当做选择器传入
closest() 必须传入参数，获取第一个符合条件的父节点，包含自己。

节点操作的方法
siblings() 找出当前节点所有的兄弟节点（不包括自己）括号里面可以传值，传的值代表当前元素节点。
nextAll() prevAll() next是指当前元素节点后面的兄弟元素，括号里面可以传值，传的值代表当前的元素。prev代表前面的元素。
parentsUntil() 当前元素节点的父元素。
nextUntil() prevUntil() 当前元素节点的兄弟元素，传值代表直到传值的元素结束，不包括传值的元素。

get和text
将JQ对象转为JS对象

text() 将标签间纯文本取出，类似JS innerText（纯文本不解析） ```javascript

  <script>

将JQ对象转成JS对象
get()

text()  将标签间纯文本取出，类似JS innerText

*/ $(function(){

console.log($("li").get());//输出的是数组
console.log($("li").get(1).innerHTML);

console.log($("#div1").text());

//   $("#div1").text("<h1>hello world</h1>")

})

div文本em文本strong文本

<a name="40n7U"></a>
## remove和detach和document

- remove  删除节点以后，不会保留被删除节点的行为
- detach  删除节点以后，会保留被删除节点的行为节点删除。
-  $(document).ready() 加载的效率要高于window.onload    window.onload（加载完整个页面）  $(document).ready() 加载完dom，html页面<br />
```javascript
 $(document).ready(function(){})

wrap包装

wrap() 给当前元素节点的每一个元素节点外面包一个元素节点
wrapAll() 把括号里面的元素节点放在一起，在最外边加一个元素节点
wrapInner() 在元素里边包装

unwrap() 就是取消当前节点的外边的父元素直到取消到body为止

<script>
 /*
   wrap() wrapAll() wrapInner() unwrap()
 */
 $(function(){
   //span每一个外面，都报一个p节点
   // $("span").wrap("<p id = 'p1' title = 'hello'></p>");

   // $("span").wrapAll("<p id = 'p1' title = 'hello'></p>");

   // $("span").wrapInner("<p id = 'p1' title = 'hello'></p>");

   //取消包装，如果有父节点，将父节点取消，直到body为止
   $("span").unwrap();

 })
</script>
<body>
<div>
 <span>span</span>
</div>
<span>span</span>
<span>span</span>
<span>span</span>
</body>

clone

clone 克隆节点以后，不会保留被被克隆节点的行为
clone(true) 克隆节点以后，会保留被之前克隆的节点的行为

event.type当前的事件类型

<script>
$(function(){

    $("#div1").hover(function(){
      $(this).css("backgroundColor", 'orange');
    }, function(){
      $(this).css("backgroundColor", 'blue');
    })

    $("#btn1").click(function(ev){
      alert(ev.type); //当前触发的事件类型
      //调用的返回值，就是刚刚克隆的节点
      var node = $("#div1").clone(true)
      //将克隆的节点，重新插入到div2中
      node.appendTo($("#div2"));
    })
  })

</scrit>
<body>
  <div id = 'div1'></div>
  <div id = 'div2'></div>
  <button id = 'btn1'>克隆节点</button>
</body>

add（）和slice（start， end）

$("#p1").add("ul li.box").add("#div1 h3").css("backgroundColor", 'blue');
$("ul li").slice(1, 4).css("backgroundColor", 'red')//不包括4

数据串联化

serialize()

serializeArray()

<script>
$(function(){
    console.log($("input").serialize()); //a=1&b=2&c=3
    console.log($("input").serializeArray());//数组对象输出
//Array(3)0: {name: "a", value: "1"}1: {name: "b", value: "2"}2: {name: "c", value: "3"}length: 3__proto__: Array(0)
  })
</script>
<body>
<input type="text" name = 'a' value = '1'>
<input type="text" name = 'b' value = '2'>
<input type="text" name = 'c' value = '3'>
</body>

on方法的第五个功能

事件绑定函数，不能传参，函数是系统调用的。
```
<script>
$(function(){
    $("#btn1").on("click", {username: "钢铁侠", age: 18, sex: '男'}, function(ev){
      console.log(ev.data.username);
      consloe.log(ev.data)//输出对象里面的全部数据
    })
  })
</script>
<body>
<button id = 'btn1'>按钮</button>
</body>
```
工具方法
$()下的常用方法(都没用了，ECMA5和ECMA6类似功能的函数)
• type()
• trim() 去除首尾空格的
$.trim(); 新增进来了

• inArray()
• proxy() 功能类似于bind
• noConflict() 用于给$这个函数起一个别名
• $.parseJSON() JSON.parse()
• makeArray() 将伪数组转成数组。 Array.from() ```javascript // $.type 获取当前数据的数据类型

<a name="QpwOc"></a>
## 插件方法
插件方法<br /> •$<br />  – $.extend  拓展JQ工具方法  $.xxx() $.yyy();

 • $.fn<br />  – $.fn.extend  拓展JQ对象方法  $().xxx() $().yyy();

【注】主要的作用是，感慨，如果JQ能再有一个这样的方法就更好的。<br />【注】在不修改源代码的基础上，对JQ增加函数。
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      background-color: gray;
      position: absolute;
    }
    em,strong{
      position: absolute;
    }
  </style>
  <script src = 'jquery-1.10.1.min.js'></script>
  <script>
    $.extend({
      aaa: function(){
        console.log("这是一个工具方法");
      }
    })

    $.fn.extend({
      aaa: function(){
        console.log("这是一个JQ方法");
      },
      drag: function(){
        //this = $("div")
        this.mousedown(function(ev){
          var offsetX = ev.clientX - $(this).offset().left;
          var offsetY = ev.clientY - $(this).offset().top;

          $(document).mousemove((ev) => {
            $(this).css({
              left: ev.clientX - offsetX,
              top: ev.clientY - offsetY
            })
          })
        })
        $(document).mouseup(function(){
          $(document).off("mousemove");
        })
      }
    })
    $(function(){
      $.aaa();
      $("div").aaa();
      $("div,em,strong").drag();
    })
  </script>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <em>em</em>
  <strong>strong</strong>
</body>
</html>

JQ中cookie使用

//前两个值是传的对象，第三个值使用解构方法传值（第一个代表过期时间，第二个传的是否编码）
                $.cookie("超级英雄", "钢铁侠", {
            expires: 7,
            raw: false
        })

        $.cookie("变种人", "X教授", {
            expires: 70,
            raw: false
        })

        $.cookie("赛亚人", "贝吉塔", {
            expires: 1000,
            raw: true //true  不编码
        })

        console.log($.cookie("赛亚人"));
        console.log($.cookie("变种人"));
        console.log($.cookie("超级英雄"));
//删除
        $(function(){
            $("button").click(function(){
                $.cookie("变种人", null);
            })
                })

JQ中ajax使用

                $(function () {
            $("button:first").click(function () {
                $.get("1.txt", function (result, statusText, xhr) {
                    //statusText 请求的文本形式状态 success  error
                    //result 请求到的数据
                    //xhr ajax对象

                    console.log(statusText, result, xhr.status);
                })
            })


            $("button:eq(1)").click(function () {
                $.post("1.post.php", {
                    username: "123",
                    password: 456,
                    age: 20
                }, function (result, statusText, xhr) {
                    console.log(result, statusText, xhr.status);
                })
            })

            $("button:eq(2)").click(function () {
                $.ajax({
                    type: "post",
                    url: "1.post.php",
                    data: {
                        username: "123",
                        password: 456,
                        age: 20
                    },
                    success: function(result, statusText, xhr){
                        console.log(result, statusText, xhr.status);
                    },
                    error: function(msg){
                        console.log(msg);
                    }
                })

                $.ajax({
                    type: "get",
                    url: "1.get.php",
                    data: {
                        username: "123",
                        password: 456,
                        age: 20
                    },
                    success: function(result, statusText, xhr){
                        console.log(result, statusText, xhr.status);
                    },
                    error: function(msg){
                        console.log(msg);
                    }
                })
            })


            $("button:last").click(function(){
                $.ajax({
                    // type  默认get
                    url: "https://api.asilu.com/weather/",
                    data: {
                        city: "青岛"
                    },
                    dataType: "jsonp", //返回的数据格式  json text
                    success: function(result){
                        console.log(result);
                    },
                    error: function(msg){
                        console.log(msg);
                    }
                })
            })
        })
<button>GET请求</button>
<button>POST请求</button>
<button>AJAX请求</button>
<button>JSONP请求</button>

事件

Jquery的方法

特效函数

animate函数

stop的方法

parents和closest的方法

节点操作的方法

get和text