文章目录

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>

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

# jquery
Logo
科技创新，汇聚千年文化底蕴，共筑璀璨首都未来之梦！

欢迎加入北京社区

更多推荐

cover

Java实现漏桶算法：原理解析与代码示例

avatar 北京城市开发者社区
cover

Java实现令牌桶算法：详细讲解与代码示例

avatar 北京城市开发者社区
cover

IOC是如何对外提供Bean的

avatar 北京城市开发者社区