【jQuery 笔记】基础内容

宁阿宁阿宁

已于 2022-04-21 17:35:54 修改

阅读量862

点赞数

分类专栏：前端学习笔记文章标签： jquery

于 2022-04-20 16:43:16 首次发布

本文链接：https://blog.csdn.net/JT61100/article/details/124300778

版权

前端学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章目录

1、jQuery 简介

一个非常优秀的 js 库
上万行代码，重在封装思想，使用方法会用就可以，现查现用
zepto 从 jQuery 演变过来

2、选择元素，实例方法

$(); 里面和 CSS 选择一样，注意对选择出的一组元素，一起处理，省略循环，这里在 js 里是不允许的。
里面可以写 CSS 选择器、原生 DOM、jQuery 对象、null/undefined、函数 function(){}、selector/content 等

e.g. $('.demo').css('background-color':'red');
jQuery 特有的选择规则（选出来的是 jQuery 对象）

$('ul>li:first/last');

$('ul>li:eq(2)'); = $('ul>li').eq(2); eq 也是个方法

$('ul>li:odd/even');

$(li).get(0); 获取第一个 li 标签，并转成 DOM

`filter()`

过滤器
e.g. filter('.box/[title=hello]');

`has()`

e.g. $('li').has('div'); 含有 div 标签的 li

`find()`

e.g. $('li').find('div'); li 标签里的 div

`eq()`

第几个元素

`not()`

filter 取反，取返回判断为 false 的

`is()`

e.g.$('div').is('#demo'); 选到的 div 是否 id=demo

3、jQuery 函数式写法

都是函数式（函数调用）

比如说

js => innerHTML = 123;

jq => html(123) 若包含标签，会自动解析

js => innerTEXT = 123;

jq => text(123) 若包含标签，会原样输出
js => onclick = function(){}

jq => click(function(){})

4、js 和 jQuery 的关系

不能混用，但是可以一起存在

5、取值赋值函数统一性，实例方法

`css()`

$('li').css();，只会取出第一个 li 的 css 样式，颜色属性会转为 rgb
赋值赋一组，取值取第一个
取值相当于 getComputed，赋值相当于 dom.style.***

`html()`

$('li').html();，只会取出第一个 li 的内容
赋值赋一组，取值取第一个
赋值赋一组
会解析标签

`text()`

$('li').text();，取出所有的 li 的内容
赋值赋一组，取值取全部
不会解析标签

`prop()`

只能用来设置标签的原生属性（特性），能赋能取
赋值赋一组，取值取第一个
相当于原生 js 中通过 oLi.id='demo'; 来添加属性
$('li').prop('class','aaa')
class、id、style、checked…等原生属性尽量用 prop 定义

`attr()`

可以设置标签的非原生属性
赋值赋一组，取值取第一个
相当于原生 js 中通过 oLi.setAttribute('draw','well'); 来添加属性
$('li').prop('draw','well')

`click()`

$(li).click(function(index){console.log(index)})，会给所有 li 绑定事件，点击哪个 li 触发哪个 li 的点击事件

`addClass()`

添加样式
可以传 function

`removeClass()`

删除样式
传什么删什么，不传全删
可以传 function

`index()`

获取当前元素的索引值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>切换标签页</title>
  <style>
    .wrapper{
      width: 300px;
      height: 300px;
      border: 2px solid black;
    }
    .wrapper .btnWrapper{
      height: 50px;
      text-align: center;
    }
    .wrapper .btnWrapper button{
      height: 50px;
      width: 50px;
      background-color: red;
    }
    .wrapper .content{
      position: relative;
    }
    .wrapper .content div{
      position: absolute;
      display: none;
      top: 0;
      left: 0;
      width: 300px;
      height: 250px;
      background-color: orange;
      font-style: 30px;
    }
    .wrapper .btnWrapper .active{
      background-color: green;
    }
    .wrapper .content .show{
      display: block;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="btnWrapper">
      <button class="active">1</button>
      <button>2</button>
      <button>3</button>
    </div>
    <div class="content">
      <div class="show">1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </div>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    $('button').click(function(){
      $('.active').removeClass();
      $(this).addClass('active');
      var num = $(this).index();
      $('.show').removeClass();
      $('.content div').eq(num).addClass('show');
      // $('div','.content ').eq(num).addClass('show');
    })
  </script>
</body>
</html>

在这里插入图片描述

6、jQuery 从基础开始玩，实例方法

`next()`

下一个兄弟节点

`prev()`

上一个兄弟节点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo02</title>
  <style>
    .content{
      width: 300px;
      height: 300px;
      background-color: grey;
      border: 2px dashed #000;
    }
    .box{
      width: 300px;
      height: 100px;
      background-color: orange;
    }
    .box1{
      width: 300px;
      height: 100px;
      background-color: green;
    }
    .box2 {
      width: 300px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    $('li').eq(3).next().css('backgroundColor','green');
    $('li').eq(3).prev().css('backgroundColor','red');

    $('li').addClass(function (index) {
      if(index % 3 == 0){
        return 'li-3';
      }else{
        return 'no-li-3';
      }
    });
    $('li').removeClass(function (index) {
      return 'no-li-3'
    });
  </script>
</body>
</html>

在这里插入图片描述

`insertBefore()`

A.insertBefore(B)
A 插在 B 前面，返回的对象是 A，后续对 A 进行操作
有剪切的功能
e.g. $('.box1').insertBefore($('.box'));

`before()`

B.before(A)
B 的前面是 A，返回的对象是 B，后续对 B 进行操作
有剪切的功能
e.g. $('.box').before($('.box1'));

`appendTo()`

A.appendTo(B);
A 插到 B 里的最后面，返回的对象是 A，后续对 A 进行操作
e.g. $('.box1').appendTo($('.content'));

`append()`

B.append(A);
B 里的最后面插入 A，返回的对象是 B，后续对 B 进行操作
更接近 appendChild() 的用法 B.appendChild(A)
e.g. $('.content').append($('.box1'));

`prependTo()`

A.prependTo(B);
A 插到 B 里的最前面，返回的对象是 A，后续对 A 进行操作
e.g. $('.box1').prependTo($('.content'));

`prepend()`

B.prepend(A);
B 里的最前面插入 A，返回的对象是 B，后续对 B 进行操作
e.g. $('.content').prepend($('.box1'));

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo02</title>
  <style>
    .content{
      width: 300px;
      height: 300px;
      background-color: grey;
      border: 2px dashed #000;
    }
    .box{
      width: 300px;
      height: 100px;
      background-color: orange;
    }
    .box1{
      width: 300px;
      height: 100px;
      background-color: green;
    }
    .box2 {
      width: 300px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="box">box</div>
  </div>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    $('.box1').insertBefore($('.box'));
    $('.box').before($('.box1'));

    $('.box1').appendTo($('.content'));
    $('.content').append($('.box1'));

    $('.box1').prependTo($('.content'));
    $('.content').prepend($('.box1'));
  </script>
</body>
</html>

![在这里插入图片描述](https://img-blog.csdnimg.cn/6bd4c6237861465ca7964752ae6c949f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA546J57Gz5rWT5rGk5o6S6aqo,size_11,color_FFFFFF,t_70,g_se,x_16#pic_center

`on()`

相似于 addEventListener
可以链式调用

`off()`

解除事件绑定
不传参解除全部
指定的事件解绑，需要与绑定时的写法一致

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo02</title>
  <style>
    .content{
      width: 300px;
      height: 300px;
      background-color: grey;
      border: 2px dashed #000;
    }
    .box{
      width: 300px;
      height: 100px;
      background-color: orange;
    }
    .box1{
      width: 300px;
      height: 100px;
      background-color: green;
    }
    .box2 {
      width: 300px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
  <div class="content">
    <div class="box">box</div>
  </div>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    // 事件绑定
    // 类似 addEventListener
    $('.box1').on('click', function(){console.log('click'); });
    // 链式调用
    $('.box1').on('mousedown', function(){
      console.log('mousedown1');
    }).on('mousedown', function(){
      console.log('mousedown2');
    }).on('mouseup', function(){
      console.log('mouseup');
    });
    // 可以传对象 输出为2 3
    $('.box1').on({
      mousedown: function () {
        console.log(1)
      },
      mousedown: function () {
        console.log(2)
      },
      mouseup: function () {
        console.log(3)
      }
    })

    obj = {
      age: 18,
      name: 'lemon'
    }
    /**
     * 第二个参数:冒泡到ul上,事件委托
     * 第三个参数:obj被传进mousedown事件当中,在e.data里
    **/
    $('ul').on('mousedown', 'li', obj, function (e){
      console.log(e.data);
    });
    // 直接给每个li绑定,后面添加的<li>9</li>没有
    $('ul li').on('mousedown', obj, function (e){
      console.log(e.data);
    });
    $('<li>9</li>').appendTo($('ul'));
  </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo02</title>
  <style>
    .content{
      width: 300px;
      height: 300px;
      background-color: grey;
      border: 2px dashed #000;
    }
    .box{
      width: 300px;
      height: 100px;
      background-color: orange;
    }
    .box1{
      width: 300px;
      height: 100px;
      background-color: green;
    }
    .box2 {
      width: 300px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    // 事件解绑
    function aa(){
      console.log(1);
    };
    function bb(){
      console.log(2);
    }
    $('ul')
      .on('mousedown', 'li:odd', aa)
      .on('mouseup', bb);
    // 解绑全部事件
    // $('ul').off();
    // 解绑指定事件
    $('ul').off('mousedown', 'li:odd', aa);
  </script>
</body>
</html>

在这里插入图片描述

`remove()`

把元素删除后返回删除元素的 jquery 对象
删除的时候绑定的所有事件都删除，留下的只有 DOM 结构

`detach()`

把元素删除后返回删除元素的 jquery 对象
删除的时候绑定的所有事件都保留，可以重复进行删除插入操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo02</title>
  <style>
    .content{
      width: 300px;
      height: 300px;
      background-color: grey;
      border: 2px dashed #000;
    }
    .box{
      width: 300px;
      height: 100px;
      background-color: orange;
    }
    .box1{
      width: 300px;
      height: 100px;
      background-color: green;
    }
    .box2 {
      width: 300px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="content">
    <div class="box">box</div>
  </div>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    // remove()和detach()
    $('.box1').appendTo('.content');
    $('.box2').appendTo('.content');
    $('.box1').on('click', function(){
      a = $(this).remove();
    });
    $('.box2').on('click', function(){
      b = $(this).detach();
    });
    $('.box').on('click', function(){
      a.appendTo('.content');
      b.appendTo('.content');
    });
  </script>
</body>
</html>

在这里插入图片描述

`scrollTop()`

纵向滚动条滚动出去的高度 $(window).scrollTop()

`scrollLeft()`

横向滚动条滚动出去的高度 $(window).scrollLeft()

`innerWidth()`

宽度：pading + content

`outerWidth()`

宽度：border + pading + content
参数为 true 时，宽度：margin + border + pading + content

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo02</title>
  <style>
    #ice{
      width: 100px;
      height: 100px;
      padding: 20px;
      margin: 50px;
      background: red;
      border: 10px solid #000;
    }
  </style>
</head>
<body>
  <div id="ice"></div>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    // pading+content
    console.log($('#ice').innerWidth());
    // border+pading+content
    console.log($('#ice').outerWidth());
    // margin+border+pading+content
    console.log($('#ice').outerWidth(true));
  </script>
</body>
</html>

在这里插入图片描述

创建 dom

$('<div></div>')、$('<div>')、$('<div/>')

7、jQuery 基础，实例方法

事件对象 e

`e.pageX`

相对于整个文档而言，x 轴距离

`e.clientX`

相对于可视区窗口而言，x 轴距离

`e.which`

针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮

`e.button`

定义样式

`e.preventDefault();`

阻止默认行为

`e.stopPropagation();`

阻止冒泡

`return false`

阻止默认行为和冒泡

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo04</title>
</head>
<body>
  <form>
    username:<input type="text" name="username">
    password:<input type="password" name="password">
    <button>提交</button>
  </form>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    $('button').on('click', function(){
      console.log(999);
      return false;
    })
  </script>
</body>
</html>

在这里插入图片描述

`one()`

只注册一次事件，不需要手动解绑事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jquery动态创建弹框</title>
  <style>
    .box{
      width: 500px;
      height: 400px;
      border: 1px solid #000;
      display: none;
    }
    .show{
      display: block;
    }
  </style>
</head>
<body>
  <button id="open">点击</button>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    var oBox = $('<div>');
    oBox.addClass('box');
    var oClose = $('<button id="close">关闭</button>');
    oBox.append(oClose);
    $('body').append(oBox);
    $('#open').on('click',function(){
      oBox.addClass('show');
      // 节省性能oClose的点击事件写在#open里
      oClose.one('click', function(){
        oBox.removeClass('show');
      });
    });
  </script>
</body>
</html>

在这里插入图片描述

`val()`

获取 jquery 对象的值，与 value 相似

`each()`

遍历
第一个参数为索引值，第二个参数为 DOM 元素
e.g. $('input').each(function(index, ele){console.log(ele);})

`serialize()`

串联表单数据拼成字符串

`serializeArray()`

串联表单数据拼成数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo04</title>
</head>
<body>
  <form>
    username:<input type="text" name="username">
    password:<input type="password" name="password">
    <button>提交</button>
  </form>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    $('button').on('click', function(){
      // 将表单数据拼成对象
      var obj = {};
      // each()遍历
      $('input').each(function(index, ele){
        // val()获取对象的值
        obj[$(ele).prop('name')] = $(ele).val();
      });
      console.log(obj);
      // serialize()将表单数据拼成字符串
      console.log($('form').serialize());
      // serializeArray()将表单数据拼成数组
      console.log($('form').serializeArray());
      // 阻止默认时间和冒泡
      return false;
    });
  </script>
</body>
</html>

在这里插入图片描述

`offset().left/top`

相对于浏览器页面的定位

`position().left/top`

相对于离他最近的父级的定位

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo05</title>
  <style>
    #wrapper{
      position: relative;
      left: 100px;
      width: 200px;
      height: 200px;
      border: 2px solid #000;
    }
    #demo{
      position: absolute;
      left: 50px;
      top: 50px;
      width: 100px;
      height: 100px;
      border: 2px solid #000;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div id="demo"></div>
  </div>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    console.log($('#demo').offset());
    console.log($('#demo').position());
  </script>
</body>
</html>

在这里插入图片描述

`parent();`

选中指定元素的直接父元素

`offsetParent();`

返回最近的有定位的父级，若没有定位的父级，则选中 html

`parents();`

返回指定元素的所有祖先元素
若 () 中含参数，则返回所有符合条件的父级
查找祖先元素，可以有参数 selector

`closest()`

查找最近的指定标签名的祖先元素，可以有参数 selector，能把自己选中

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo06</title>
  <style>
    #item{
      position: absolute;
    }
  </style>
</head>
<body>
  <ul>
    <li class="box" id="item">
      <div class="box">
        <div>
          <em>em</em>
        </div>
      </div>
    </li>
  </ul>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    // 最近的父级元素
    console.log($('em').parent());
    // 最近的有定位的父级元素
    console.log($('em').offsetParent());
    // 所有祖先元素
    console.log($('em').parents());
    // 所有含class="box"属性的祖先元素
    console.log($('em').parents('.box'));
    // 查找最近的指定的祖先元素
    console.log($('em').closest('div'));
  </script>
</body>
</html>

在这里插入图片描述

`wrap()`

wrapInner 循环包裹参数 function
相当于深度克隆

`wrapAll()`

把所有符合条件的元素拿到一起然后进行包裹，会破坏结构

`unWrap()`

解除包装，结构化标签不能删除
删除距离最近的包裹元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo06</title>
  <style>
    #item{
      position: absolute;
    }
  </style>
</head>
<body>
  <em>em</em>
  <em>em</em>
  <em>em</em>
  <div id="demo"></div>

  <script src="./jquery-3.6.0.js"></script>
  <script>
    // 图7-6 wrap()
    $('em').wrap(document.getElementById('demo'));
    $('em').wrap($('#demo'));
    $('em').wrap($('<div/>'));

    // 图7-7
    $('em').wrap(function (index) {
      switch(index){
        case 0:
          return '<div/>';
        case 1:
          return '<ul/>';
        default:
          return '<p/>';
      }
    });

    // 图7-8 wrapAll()
    $('em').wrapAll($('#demo'));
  </script>
</body>
</html>

在这里插入图片描述

`end()`

回退操作
prevObject 会记录操作对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo06</title>
  <style>
  </style>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

  <script src="./jquery-3.6.0.js"></script>
  <script>
    // prevObject会记录操作对象:$('ul') => find('li') => eq(2)
    // 图7-9 find('li')是eq(2)的上一个操作对象,end()会回退到find('li')
    $('ul')
      .find('li')
      .eq(2)
      .css('background','red')
      .end()
      .css('background','green');
    
    //图7-10 连续两个end()会回退到$('ul')
    $('ul')
      .find('li')
      .eq(2)
      .css('background','red')
      .end()
      .end()
      .css('background','green');
  </script>
</body>
</html>

在这里插入图片描述

`siblings()`

当前元素节点的所有兄弟节点

`prevAll()`

当前元素上面的所有兄弟节点

`nextAll()`

当前元素下面的的所有兄弟节点

`prevUntil()`

当前元素往上选，掐头去尾选中间元素，可以传 jquery 对象或 dom

`nextUntil()`

当前元素往下选，掐头去尾选中间元素，可以传 jquery 对象或 dom

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo06</title>
  <style>
    #item{
      position: absolute;
    }
  </style>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>
      <div>
        <div  class="item">
          <em></em>
        </div>
      </div>
    </li>
  </ul>

  <script src="./jquery-3.6.0.js"></script>
  <script>
    // 图7-11
    console.log($('li').eq(4).siblings().css('background','red'));
    // 图7-12
    console.log($('li').eq(4).prevAll().css('background','red'));
    // 图7-13
    console.log($('li').eq(4).nextAll().css('background','red'));
    // 图7-14
    console.log($('li').eq(4).prevUntil($('li').eq(0)).css('background','red'));
    // 图7-15
    console.log($('li').eq(4).nextUntil($('li').eq(6)).css('background','red'));

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

在这里插入图片描述

`clone()`

克隆节点，参数为 true 的时候，事件也能克隆

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo06</title>
</head>
<body>
  <div id="demo">ddd</div>
  
  <script src="./jquery-3.6.0.js"></script>
  <script>
    $('#demo').on('click',function(){
      console.log(777);
    });
    // 浅度克隆,只克隆dom结构
    var oDemo1 = $('div').clone();
    // 深度克隆,会克隆事件
    var oDemo2 = $('div').clone(true);
    $('body').append(oDemo1);
    $('body').append(oDemo2);
  </script>
</body>
</html>

在这里插入图片描述

`A.add(B)`

选中元素 A 和 B集中操作
不破坏 dom 结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo07</title>
</head>
<body>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <div id="demo">demo</div>

  <script src="./jquery-3.6.0.js"></script>
  <script>
    $('li').add('#demo').css({width:100,height:100,background:'red'});
  </script>
</body>
</html>

在这里插入图片描述

`slice()`

截取，算头不算尾
$('p').slice(0,2) 取前两个 p 标签

`animate()`

target：变化样式，css 属性，以对象方式传值
durition：变化时间，单位为毫秒，有三个可选值 — normal、slow、quick
速度变化方式：速率，默认有两个可选值 — swing、linear
- 引入 jquery.easing.min.js 插件：<script src="https://cdn.bootcdn.net/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
- 可以实现各种速率变化方式
回调函数
可以实现连续调用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo07</title>
  <style>
    #demo{
      position: absolute;
      width: 30px;
      height: 30px;
      background: red;
    }
  </style>
</head>
<body>
  <div id="demo"></div>

  <script src="./jquery-3.6.0.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
  <script>
    $('div').animate({
      width: 100,
      height: 100,
      opacity: 0.5,
      left: 200,
      top: 200
    }, 'slow', 'easeOutBounce', function(){
      console.log('第一次运动完成')
    })
      .animate({
        width: 50,
        height: 50,
        opacity: 0.5,
        left: 400,
        top: 0
    }, 'slow', 'easeOutBounce', function(){
      console.log('第二次运动完成')
    });

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

在这里插入图片描述

`stop()`

stop() 阻止当前运动继续后续运动
stop(true) 阻止后续所有运动
stop(true, true) 停止当前所有运动，停在当前运动的目标点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo07</title>
  <style>
    #demo{
      position: absolute;
      width: 30px;
      height: 30px;
      background: red;
    }
  </style>
</head>
<body>
  <div id="demo"></div>

  <script src="./jquery-3.6.0.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
  <script>
    $('div').animate({
      width: 100,
      height: 100,
      opacity: 0.5,
      left: 200,
      top: 200
    }, 'slow', 'easeOutBounce', function(){
      console.log('第一次运动完成')
    })
      .animate({
        width: 50,
        height: 50,
        opacity: 0.5,
        left: 400,
        top: 0
    }, 'slow', 'easeOutBounce', function(){
      console.log('第二次运动完成')
    });
    $('document').on('click', function(){
      $('div').stop();
    })
  </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo07</title>
  <style>
    #demo{
      position: absolute;
      width: 30px;
      height: 30px;
      background: red;
    }
  </style>
</head>
<body>
  <div id="demo"></div>

  <script src="./jquery-3.6.0.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
  <script>
    $('div').animate({
      width: 100,
      height: 100,
      opacity: 0.5,
      left: 200,
      top: 200
    }, 'slow', 'easeOutBounce', function(){
      console.log('第一次运动完成')
    })
      .animate({
        width: 50,
        height: 50,
        opacity: 0.5,
        left: 400,
        top: 0
    }, 'slow', 'easeOutBounce', function(){
      console.log('第二次运动完成')
    });
    $('document').on('click', function(){
      $('div').stop(true);
    })
  </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo07</title>
  <style>
    #demo{
      position: absolute;
      width: 30px;
      height: 30px;
      background: red;
    }
  </style>
</head>
<body>
  <div id="demo"></div>

  <script src="./jquery-3.6.0.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
  <script>
    $('div').animate({
      width: 100,
      height: 100,
      opacity: 0.5,
      left: 200,
      top: 200
    }, 'slow', 'easeOutBounce', function(){
      console.log('第一次运动完成')
    })
      .animate({
        width: 50,
        height: 50,
        opacity: 0.5,
        left: 400,
        top: 0
    }, 'slow', 'easeOutBounce', function(){
      console.log('第二次运动完成')
    });
    $('document').on('click', function(){
      $('div').stop(true, true);
    })
  </script>
</body>
</html>

在这里插入图片描述

`finish()`

停止当前运动，并且达到最后运动的目标点

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo07</title>
  <style>
    #demo{
      position: absolute;
      width: 30px;
      height: 30px;
      background: red;
    }
  </style>
</head>
<body>
  <div id="demo"></div>

  <script src="./jquery-3.6.0.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
  <script>
    $('div').animate({
      width: 100,
      height: 100,
      opacity: 0.5,
      left: 200,
      top: 200
    }, 5000, 'easeOutBounce', function(){
      console.log('第一次运动完成')
    })
      .animate({
        width: 50,
        height: 50,
        opacity: 0.5,
        left: 400,
        top: 0
    }, 5000, 'easeOutBounce', function(){
      console.log('第二次运动完成')
    });
    $(document).on('click', function(){
      $('div').finish();
    });
  </script>
</body>
</html>

在这里插入图片描述

`delay()`

延迟、参数、延迟时间

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo07</title>
  <style>
    #demo{
      position: absolute;
      width: 30px;
      height: 30px;
      background: red;
    }
  </style>
</head>
<body>
  <div id="demo"></div>

  <script src="./jquery-3.6.0.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
  <script>
    $('div').animate({
      width: 100,
      height: 100,
      opacity: 0.5,
      left: 200,
      top: 200
    }, 'quick', 'easeOutBounce', function(){
      console.log('第一次运动完成')
    })
    .delay(2000)
    .animate({
      width: 50,
      height: 50,
      opacity: 0.5,
      left: 400,
      top: 0
    }, 'quick', 'easeOutBounce', function(){
      console.log('第二次运动完成')
    });
  </script>
</body>
</html>

在这里插入图片描述

`trigger()`

主动触发事件，触发事件时会事件冒泡，触发 li 会冒泡到 ul
参数：1、事件类型；2、参数
传递参数 trigger('click',data); $('li').on('click',function(e,data))，参数是在事件处理函数的第二个参数
可以触发自定义事件 eat，也可以触发系统默认事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo08</title>
</head>
<body>
  <div>div</div>

  <script src="./jquery-3.6.0.js"></script>
  <script>
    $('div').on('eat',function(){
      console.log('eat');
    });
    $('div').trigger('eat');
  </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo08</title>
</head>
<body>
  <ul>
    <li>hhh</li>
  </ul>
  
  <script src="./jquery-3.6.0.js"></script>
  <script>
    $('ul').on('click',function(){
      console.log('ul');
    });
    $('li').on('click',function(){
      console.log('li');
    });
    $('li').trigger('click');
  </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo10</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      background: #000;
    }
  </style>
</head>
<body>
  <div>lemon</div>
  <button>pizza</button>
  <button>apple</button>
  
  <script src="./jquery-3.6.0.js"></script>
  <script>
    $('div').on('pizza',function(){
      $('div').css({width:$('div').width() + 50});
    });
    $('div').on('apple',function(){
      $('div').css({width:$('div').width() + 20});
    });
    $('div').on('change',function(){
      $('div').css({width: '800px'});
    });
    $('button:eq(0)').on('click',function(){
      if($('div').width() >= 300){
        $('div').trigger('change');
      }else{
        $('div').trigger('pizza');
      }
    })
    $('button:eq(1)').on('click',function(){
      if($('div').width() >= 300){
        $('div').trigger('change');
      }else{
        $('div').trigger('apple');
      }
    })
    
    // trigger 传第二个参数
    $('div').on('pizza',function(e, data){
      $('div').css({width:$('div').width() + data});
    });
    $('div').on('apple',function(e, data){
      $('div').css({width:$('div').width() + data});
    });
    $('div').on('change',function(){
      $('div').css({width: '800px'});
    });
    $('button:eq(0)').on('click',function(){
      if($('div').width() >= 300){
        $('div').trigger('change');
      }else{
        $('div').trigger('pizza',50);
      }
    })
    $('button:eq(1)').on('click',function(){
      if($('div').width() >= 300){
        $('div').trigger('change');
      }else{
        $('div').trigger('apple',20);
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

8、jQuery 工具方法

以 $.*** jQuery.*** 这种方式调用，此类方法定义在 jQuery 函数上面

`$.type()`

判断参数的数据类型，且兼容了各种情况
原生 js 判断类型的三种方法
- typeof arr
- arr instanceof Array
- arr.constructor === Array
- Object.prototype.toString.call(arr)，比较通用

`$.trim()`

消除两端的空格

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo09</title>
</head>
<body>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    var arr = [1,2,3];
    console.log($.type(arr));//array
    var str = '   aaa a  aa   ';
    console.log($.trim(str));//aaa a  aa
  </script>
</body>
</html>

在这里插入图片描述

`$.proxy()`

改变 this 指针方向，参数1：function，参数2：函数执行期上下文

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo09</title>
</head>
<body>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    var obj = {
      name: 'lemon',
      age: 18,
      hobby: function(){
        console.log('dance');
      }
    };
    function aa() {
      console.log(this);
    }
    aa();//this指向window
    // 第一种用法:参数1为要用的函数;参数2为this指向
    var bb = $.proxy(aa, obj);
    bb();//this指向obj
    // 第二种用法:参数1为this的对象;参数2为obj里的函数,且必须传字符串形式
    var cc = $.proxy(obj, 'hobby');
    cc();//,this指向obj,执行hobby里的内容,相当于把hobby赋给cc,且cc指向obj
  </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo10</title>
  <style>
    div{
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background: #000;
    }
  </style>
</head>
<body>
  <div></div>
  
  <script src="./jquery-3.6.0.js"></script>
  <script>
    $('div').on('mousedown', function (e) {
      // this ==> div
      var disX = e.pageX - $('div').offset().left;
      var disY = e.pageY - $('div').offset().top;
      $(document).on('mousemove', $.proxy(function (e) {
        // this ==> document
        var newLeft = e.pageX - disX;
        var newTop = e.pageY - disY;
        $(this).css({left: newLeft,top: newTop})
      }, this));
      $(document).on('mouseup', function () {
        $(document).off();
      })
    })
  </script>
</body>
</html>

在这里插入图片描述

`$.noConflict()`

防止冲突
把 $ 控制权交给其他库
e.g. var ice=$.noConflict()，后续代码书写中用 ice 代替 $，ice('div')

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo09</title>
</head>
<body>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    var ice = $.noConflict();
    console.log(ice('div'));
    console.log($('div'));
  </script>
</body>
</html>

在这里插入图片描述

`$.parseJSON()`

字符转换成 json
要求非常严格，外部是单引号，内部属性是双引号，不需要回车符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo09</title>
</head>
<body>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    var json = '{"name": "lemon","age": 22}';
    console.log($.parseJSON(json));
  </script>
</body>
</html>

在这里插入图片描述

`$.makeArray()`

把类数组转换成数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo09</title>
</head>
<body>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    var arrFalse = {
      name : 'lemon',
      length: 1
    };
    console.log(arrFalse);
    console.log($.makeArray(arrFalse));
  </script>
</body>
</html>

在这里插入图片描述

9、jQuery 高级

`$.extend()`

插件扩展1提供新的 jQuery 工具方法

`$.fn.extend()`

插件扩展2提供新的 jQuery 实例方法，不是工具方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo09</title>
  <style>
    div{
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background: #000;
    }
  </style>
</head>
<body>
  <div>lemon</div>

  <script src="./jquery-3.6.0.js"></script>
  <script>
    // 自定义工具方法
    $.extend({
      aa: function () {
        console.log('aa自定义工具方法');
      }
    });
    $.aa();
    // 自定义实例方法
    $.fn.extend({
      drag: function () {
        // this ==> jquery对象
        this.on('mousedown', function (e) {
          // this ==> dom
          var disX = e.pageX - $(this).offset().left;
          var disY = e.pageY - $(this).offset().top;
          $(document).on('mousemove', $.proxy(function (e) {
            // this ==> document
            var newLeft = e.pageX - disX;
            var newTop = e.pageY - disY;
            $(this).css({left: newLeft,top: newTop})
          }, this));
          $(document).on('mouseup', function () {
            $(document).off();
          })
        })
      },
      bb: function () {
        console.log('bb自定义实例方法');
      }
    });
    $('div').drag();
    $('div').bb();
  </script>
</body>
</html>

在这里插入图片描述

`$.Callback()`

add() 添加函数，fire() 执行
四个参数
- once 只执行一次 fire() 方法
- memory 后面 add 的方法提升执行
- unique oCb.add(aa,aa,aa);，只执行一次 aa
- stopOnFalse 遇到有函数的返回值为 false，则停止执行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo09</title>
</head>
<body>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    function aa() {
      console.log('aa');
    }
    function bb() {
      console.log('bb');
      return false;
    }
    function cc() {
      console.log('cc');
    }
    console.log('-----无参-----');
    var oCb = $.Callbacks();
    oCb.add(aa, bb, aa);
    oCb.fire();
    oCb.fire();
    oCb.add(cc);
    console.log('-----once-----');
    // once用法
    var oCb = $.Callbacks('once');
    oCb.add(aa, bb, aa);
    oCb.fire();
    oCb.fire();
    console.log('-----memory-----');
    // memory
    var oCb = $.Callbacks('memory');
    oCb.add(aa, bb, aa );
    oCb.fire();
    oCb.add(cc);
    console.log('-----unique-----');
    var oCb = $.Callbacks('unique');
    oCb.add(aa, bb, aa);
    oCb.fire();
    console.log('-----stopOnFalse-----');
    var oCb = $.Callbacks('stopOnFalse');
    oCb.add(aa, bb, aa);
    oCb.fire();
  </script>
</body>
</html>

在这里插入图片描述

`$.Deferred()`

延迟对象，相当于有状态的 $.Callbacks();
添加函数
- done：成功
- fail：失败
- progress：进行中
触发函数
- resolve：成功
- reject：失败
- notify：进行中
oDf.resolve() ==> done(function(){})
oDf.reject() ==> fail(function(){})
oDf.notify() ==> progress(function(){})
done、fail ==> once、memory
progress ==> memory
notify 进行时的意思，成功失败的结果还没出现，所以此函数出发后 done 和 fail 还可以触发一个
done、fail 触发一个之后就不能触发其他的了 ==> 最终状态已经告知

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo11</title>
</head>
<body>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    // ajax是一个典型的延迟对象
    // $.ajax({type:'GET',url:'getNews.php'})
    // .done(function(){
    //   console.log('done');
    // })
    // .fail(function(){
    //   console.log('fail');
    // })
    var oDf = $.Deferred();
    oDf.done(function () {
      console.log('done');
    })
    .fail(function () {
      console.log('fail'); 
    })
    .progress(function () {
      console.log('progress');
    })
    // function getData(){
    //   oDf.resolve();
    // }
    // function getData(){
    //   oDf.reject();
    // }
    function getData(){
      oDf.notify();
    }
    getData();
  </script>
</body>
</html>

`$.when()`

返回延迟对象，参数也是延迟对象，当参数延迟对象全部触发 done 的时候最后会触发 when 返回延迟对象的 done 函数
延迟对象作用控制关键点，坐链式运动的效果
$.ajax() 这种有状态的异步操作核心是 deferred
when 当发生多个ajax 请求的时候，因为都是异步，我们可以使用多个 deferred，每当 ajax 成功后我们触发一个，最后全部成功我们可以在 when 后一并处理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo11</title>
</head>
<body>
  <script src="./jquery-3.6.0.js"></script>
  <script> $.when($.ajax({type:'GET',url:'getNews.php'}),$.ajax({type:'POST',url:'post.php'}))
    .done(function () {
      console.log('done');
    })
    .fail(function () {
      console.log('fail'); 
    })
    .progress(function () {
      console.log('progress');
    })
  </script>
</body>
</html>

在这里插入图片描述

`$deferred().promise()`

半个 deferred 对象，能设置但不能触发函数（无状态）
没有 resolve、reject、notify

10、jQuery 里的 AJAX

`$.ajax()`

type： GET、POST访问方式
url：访问路径
data：传输数据
context：回调函数的作用域
aync：是否异步，默认 true
cache：是否缓存，默认 true
- 数据分分钟更新的时候（比如获取图片验证码）添加 false，实际上就是添加时间戳
dataType：一般请求不予填写，jsonp 请求时需要填写 jsonp
success：访问成功时触发的函数，返回数据
error：返回失败的时候触发的函数
crossDomain：true 跨域，默认 false
jsonp：在一个 jsonp 请求重写回调函数的名字，这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 会导致 "onJSONPLoad=?" 传给服务器
jsonpCallback：为 jsonp 请求指定的一个回调函数名。这只将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jquery 生成独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo11</title>
</head>
<body>
  <script src="./jquery-3.6.0.js"></script>
  <script>
    $.ajax({
      type: 'GET',
      url:'getNews.php',
      data: '',
      success: function (data) {
        console.log(data);
      },
      error: function (error) {
        console.log(error);
      }
    })

    // 使用 jsonp
    $.ajax({
      type: 'GET',
      url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=lol',
      data: '',
      success: function (data) {
        console.log(data);
      },
      error: function (error) {
        console.log(error);
      },
      dataType: 'jsonp',
      crossDomain: 'true',
      jsonp: 'cb',
      jsonpCallback: 'doJson'
    })
    function doJson(data) {
      console.log(data);
    }
  </script>
</body>
</html>