jQuery的事件-动画-AJAX和插件

一、jQuery事件处理

1.认识事件(Event)

Web页面经常需要和用户之间进行交互,而交互的过程中我们可能想要捕捉这个交互的过程:

  • 比如用户点击了某个按钮、用户在输入框里面输入了某个文本、用户鼠标经过了某个位置;
  • 浏览器需要搭建一条JavaScript代码和事件之间的桥梁;
  • 当某个事件发生时,让JavaScript执行某个函数,所以我们需要针对事件编写处理程序(handler);

原生事件监听方法:

  • 事件监听方式一:在script中直接监听(很少使用)。
  • 事件监听方式二:DOM属性,通过元素的on来监听事件。
  • 事件监听方式三:通过EventTarget中的addEventListener来监听。

jQuery事件监听方法:

  • 事件监听方式一:直接调用jQuery对象中的事件处理函数来监听,例如:click,mouseenter...。
  • 事件监听方式二:调用jQuery对象中的on函数来监听,使用off函数来取消监听。
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>Document</title>
</head>
<body>
  
  <ul id="list" class="panel">
    <li class="li-1">li-1</li>
    <li class="li-2">li-2</li>
    <li class="li-3">li-3</li>
    <li class="li-4">li-4</li>
    <li class="li-5">li-5</li>
  </ul>

  <button class="cancel">取消事件的监听</button>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.监听文档完全解析完成
    $(function() {
     
      // 监听事件
      // 1.使用on来监听事件
      $('ul').on('click', function() {
        console.log('click1')
      })

      // 2.使用click来监听事件
      $('ul').click(function() {
        console.log('click2')
      })

      // 3.使用mouseenter来监听事件
      $('ul').mouseenter(function() {
        console.log('mouseenter')
      })

      // 取消监听事件
      $('.cancel').click(function() {
        // $('ul').off() // 取消ul元素上所有的事件
        // $('ul').off('mouseenter')
        $('ul').off('click')
      })

      // 使用程序-自动触发事件
      // $('ul').trigger('click')  // 模拟用户点击了ul元素
      $('ul').trigger('mouseenter')

    })
  </script>
</body>
</html>

2.click和on的区别

click和on的区别:

  • click是on的简写。它们重复监听,不会出现覆盖情况,都支持事件委托,底层用的是addEventListener。
  • 如果 on 没有使用 selector 的话,那么和使用click是一样的。
  • on 函数可以接受一个 selector 参数,用于筛选 可触发事件 的后代元素。
  • on 函数支持给事件添加命名空间。
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>Document</title>
</head>
<body>
  
  <ul id="list" class="panel">
    <li class="li-1">li-1</li>
    <li class="li-2">li-2</li>
    <li class="li-3">li-3</li>
    <li class="li-4">li-4</li>
    <li class="li-5">li-5</li>
  </ul>

  <button class="cancel">取消事件的监听</button>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.监听文档完全解析完成
    $(function() {
     
      // 监听事件
      // 1.使用on来监听事件 ( 支持给事件添加命名空间: liujun )
      $('ul').on('click.liujun', function() {
        console.log('click1')
      })

      // 2.使用click来监听事件
      $('ul').click(function() {
        console.log('click2')
      })

      // 取消监听事件
      $('.cancel').click(function() {
        $('ul').off('click.liujun')
      })

      /*
        1.on 监听的事件支持使用 命名空间
        2.on 函数支持一个 selector 的参数
      */
    //  $('ul').on('click', '字符串类型的选择器', function() {

    //  })

    })
  </script>
</body>
</html>

3.click和on中this指向

click和on的this指向:

  • this都是指向原生的DOM Element
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>Document</title>
</head>
<body>
  
  <ul id="list" class="panel">
    <li class="li-1">li-1</li>
    <li class="li-2">li-2</li>
    <li class="li-3">li-3</li>
    <li class="li-4">li-4</li>
    <li class="li-5">li-5</li>
  </ul>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.监听文档完全解析完成
    $(function() {

      // $('ul').click(function() {
      //   console.log("%O", this) // DOM Element -> UL
      // }) 

      // $('ul').on('click', function() {
      //   console.log(this) // DOM Element -> UL
      // })


      // $('ul li').click(function() {
      //   console.log(this) // DOM Element -> UL
      // })

      // 底层实现的原理
      // var lisEl = $('ul li').get() // [li, li, li]
      // for(var liEL of lisEl ){
      //   liEL.addEventListener('click', function() {
      //     console.log(this)
      //   })
      // }

      // $('ul li').click(function() {
      //   console.log( $(this) ) // DOM Element 转成 jQuery 对象
      // })
      
      $('ul li').click(() => {
        console.log(this)
      })

    })
  </script>
</body>
</html>

4.jQuery的事件冒泡

我们会发现默认情况下事件是从最内层(如下图span)向外依次传递的顺序,这个顺序我们称之为事件冒泡(Event Bubble);

事实上,还有另外一种监听事件流的方式就是从外层到内层(如:body -> span),这种称之为事件捕获(Event Capture);

为什么会产生两种不同的处理流呢?

  • 这是因为早期在浏览器开发时,不管是IE还是Netscape公司都发现了这个问题;

  • 但是他们采用了完全相反的事件流来对事件进行了传递;

  • IE<9仅采用了事件冒泡的方式,Netscape采用了事件捕获的方式;

  • IE9+和现在所有主流浏览器都已支持这两种方式。

jQuery为了更好的兼容IE浏览器,底层并没有实现事件捕获。

5.jQuery的事件对象( Event Object)

jQuery事件系统的规范是根据W3C的标准来制定jQuery事件对象。原始事件对象的大多数属性都被复制到新的jQuery事件 对象上。如,以下原生的事件属性被复制到jQuery事件对象中: altKey, clientX, clientY, currentTarget, data, detail, key, keyCode, offsetX, offsetY, originalTarget, pageX, pageY, relatedTarget, screenX, screenY, target, ...

jQuery事件对象通用的属性(以下属性已实现跨浏览器的兼容):

  • target、relatedTarget、pageX、pageY、which、metaKey

jQuery事件对象常用的方法:

  • preventDefault() : 取消事件的默认行为(例如,a标签、表单事件等)。
  • stopPropagation() : 阻止事件的进一步传递(例如,事件冒泡)。

要访问其它事件的属性,可以使用 event.originalEvent 获取原生对象。

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>Document</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      background-color: pink;
    }
    .content{
      display: inline-block;
      width: 50px;
      height: 50px;
      background-color: green;
    }
  </style>
</head>
<body>
  
  <div class="box">
    div
    <span class="content">span</span>
  </div>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.监听文档完全解析完成
    $(function() {

      // 1.获取原生的事件对象
      // var divEl = document.querySelector('.box')
      // divEl.addEventListener('click', function(event) {
      //   console.log(event)
      // })


      // 2.获取jQuery的事件对象
      $('.box').click(function($event) {
        console.log($event) // 是jQuery的事件对象
        console.log($event.originalEvent) // 拿到原生的事件对象
      })

    })
  </script>
</body>
</html>

6.jQuery的事件委托(event delegation)

事件冒泡在某种情况下可以帮助我们实现强大的事件处理模式 -- 事件委托模式(也是一种设计模式)

那么这个模式是怎么样的呢?

  • 因为当子元素被点击时,父元素可以通过冒泡监听到子元素的点击;

  • 并且可以通过event.target获取到当前监听事件的元素(event.currentTarget获取到的是处理事件的元素);

案例:一个ul中存放多个li,使用事件委托的模式来监听li中子元素的点击事件。

html 复制代码
<!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>
    ul li.item {
      width: 200px;
      height: 80px;
      margin-bottom: 10px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <script src="./utils/jquery-3.7.1.min.js"></script>
  <script>
    $(function () {
      $('ul').on('click', 'li.item', function(event) {
        console.log($(event.target).text()+"被点击了")
      })
    })
  </script>
  <ul>
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
    <li class="item">item4</li>
    <li class="item">item5</li>
  </ul>
</body>
</html>

7.jQuery常见的事件

鼠标事件(Mouse Events)

  • .click() 、.dblclick()、.hover()、.mousedown() 、.mouseup()
  • .mouseenter()、.mouseleave()、.mousemove()
  • .mouseover()、.mouseout() 、.contextmenu()、.toggle()

键盘事件(Keyboard Events)

  • .keydown() 、.keypress()、.keyup()

文档事件(Document Loading Events)

  • load、ready()、.unload

表单事件(Form Events)

  • .blur() 、.focus()、.change()、.submit()、.select()

浏览器事件(Browser Events)

  • .resize()、.scroll()
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>Document</title>
</head>
<body>
  
  <ul id="list" class="panel">
    <li class="li-1">li-1</li>
    <li class="li-2">li-2</li>
    <li class="li-3">li-3</li>
    <li class="li-4">li-4</li>
    <li class="li-5">li-5</li>
  </ul>

  <input type="text">

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.监听文档完全解析完成
    $(function() {

      // on('hover', func)

      // 1.hover 底层使用的是: mouseenter or mouseleaver
      // $('ul').hover(function() {
      //   console.log('鼠标悬浮在ul')
      // }, function() {
      //   console.log('鼠标离开在ul')
      // })

      // 2.监听浏览器resize事件 ( throttle 节流 )
      // on('resize', func)
      $(window).resize(function() {
        console.log('resize')
      })


      // 3.表单事件
      $('input').focus(function() {
        console.log('input focus事件')
      })
      $('input').blur(function() {
        console.log('input blur事件')
      })

      // input ( debounce 防抖操作 )
      $('input').on('input', function() {
      //  console.log( $('input').val() )
       console.log( $(this).val() )
      })

    })
  </script>
</body>
</html>

8.mouseover和mouseenter的区别

mouseenter()和mouseleave()

  • 不支持冒泡
  • 进入子元素依然属于在该元素内,没有任何反应

mouseover()和mouseout()

  • 支持冒泡
  • 进入元素的子元素时
    • 先调用父元素的mouseout
    • 再调用子元素的mouseover
    • 因为支持冒泡,所以会将mouseover传递到父元素中;

9.jQuery的键盘事件

事件的执行顺序是 keydown()、keypress()、keyup()

  • keydown事件先发生;
  • keypress发生在文本被输入;
  • keyup发生在文本输入完成(抬起、松开);

我们可以通过key和code来区分按下的键:

  • code:"按键代码"("KeyA","ArrowLeft" 等),特定于键盘上按键的物理位置。
  • key:字符("A","a" 等),对于非字符(non-character)的按键,通常具有与 code 相同的值。)

10.jQuery的表单事件

表单事件(Form Events)

  • .blur() - 元素失去焦点时触发
  • .focus() - 元素获取焦点时触发
  • change() - 该事件在表单元素的内容改变时触发( , , , 和 )
  • .submit() - 表单提交时触发( <input> <keygen> <select> <textarea>)

二、jQuery 动画

1.jQuery动画操作-animate

.animate(): 执行一组 CSS属性的自定义动画,允许支持数字的CSS属性上创建动画。

  • .animate( properties , duration , easing , complete )
  • .animate( properties, options )
    • propertys参数的支持:
      • 数值:number 、string
      • 关键字:'show'、'hide'和'toggle'
      • 相对值:+= 、 -=
      • 支持 em 、% 单位(可能会进行单位转换)。

自定义修改宽高度动画

  • height :100% -> 0
  • width: 100% -> 0
  • opacity: 1 - > 0
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>Document</title>
  <style>
    .box{
      width: 200px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  
  <button class="hide">隐藏</button>
  <button class="show">显示</button>

  <div class="box">
    box
  </div>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.监听文档完全解析完成
    $(function() {
      $('.hide').click(function() {
        // 需要一个隐藏的动画
        $('.box').animate({
          height: 0, // 100px -> 0px
          width: 0, // 200px -> 0px
          opacity: 0 // 1 -> 0
        },2000, 'swing' , function() {
          console.log('动画执行完毕之后会回调')
        })

      })

      $('.show').click(function() {


        $('.box').animate({
          height: 100,
          width: 200,
          opacity: 1
        }, function() {
          console.log('动画执行完毕之后会回调')
        })

        // $('.box').animate({
        //   height: 100,
        //   width: 200,
        //   opacity: 1
        // }, 2000, 'swing', function() {
        //   console.log('动画执行完毕之后会回调')
        // })


        // $('.box').animate({
        //   height: 100,
        //   width: 200,
        //   opacity: 1
        // }, {
        //   duration: 'slow',
        //   complete: function() {
        //     console.log('动画执行完毕之后会回调')
        //   }
        // })



      })

    })
  </script>
</body>
</html>

2.jQuery常见动画函数

显示和隐藏匹配的元素

  • .hide() 、.hide( duration , complete )、.hide( options ) - 隐藏元素
  • .show() 、.show( duration , complete )、.show( options ) - 显示元素
  • .toggle() 、.toggle( duration , complete )、.toggle( options ) -显示或者隐藏元素

淡入淡出

  • .fadeIn()、.fadeIn( duration , complete )、.fadeIn( options ) - 淡入动画

  • .fadeOut()、.fadeOut( duration , complete )、.fadeOut( options ) -淡出动画

  • .fadeToggle()、.fadeToggle( duration , complete )、.fadeToggle( options ) - 淡入淡出的切换

  • .fadeTo( duration, opacity , complete ) - 渐变到

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>Document</title>
  <style>
    body{
      height: 200px;
    }
    .box{
      width: 200px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  
  <button class="hide">隐藏</button>
  <button class="show">显示</button>
  <button class="toggle">切换</button>

  <div class="box">
    box
  </div>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.监听文档完全解析完成
    $(function() {

      $('.hide').click(function() {
        $('.box').hide('slow', function() {
          console.log('动画执行完成')
        })
      })

      $('.show').click(function() {
        $('.box').show('fast', function() {
          console.log('动画执行完成')
        })
      })

      $('.toggle').click(function() {
        // $('.box').toggle(2000)
        
        $('.box').toggle({
          duration: 3000,
          complete: function() {
            console.log('动画执行完成')
          }
        })
      })

    })
  </script>
</body>
</html>

3.jQuery元素中的动画队列

jQuery匹配元素中的animate和delay动画是通过一个动画队列(queue)来维护的。例如执行下面的动画都会添加到动画队列中:

  • .hide() 、 .show()
  • .fadeIn() 、.fadeOut()
  • .animate()、delay()
  • ...

.queue():查看当前选中元素中的动画队列。

.stop( clearQueue , jumpToEnd ):停止匹配元素上当前正在运行的动画。

  • clearQueue :一个布尔值,指示是否也删除排队中的动画。默认为false
  • jumpToEnd :一个布尔值,指示是否立即完成当前动画。默认为false
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>Document</title>
  <style>
    .box{
      position: relative;
      width: 100px;
      height: 100px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <button class="start">开始动画</button>  
  <button class="stop">停止动画</button>  
  <button class="queue">查看动画队列</button> 

  <div class="box">box</div>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.监听文档完全解析完成
    $(function() {
      var $box = $('.box')
      $('.start').click(function() {
        $box.animate({
          top: 100
        }, 5000)

        $box.animate({
          left: 100
        }, 5000)

        $box.animate({
          top: 0
        }, 5000)

        $box.animate({
          left: 0
        }, 5000)

      })

      $('.queue').click(function() {
        console.log( $box.queue() )  // 查看动画队列 fx
      })

      $('.stop').click(function() {
        // $box.stop()  // 停止 fx 动画队列( 停止当前执行的动画,还会继续执行动画队列中其它的动画 )
        // stop(false, false) 默认值

        // $box.stop(true) // 停止所有的动画, 清空了动画队列

        //  $box.stop(true, true) // 清空了动画队列, 立即执行完当前的动画
      })
    })
  </script>
</body>
</html>

4.jQuery实现-隐藏侧边栏广告

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>Document</title>

  <style>
    .box{
      position: fixed;
      bottom: 0;
      right: 0;
    }
    img{
      vertical-align: bottom;
    }

    .close{
      position: absolute;
      top: 0;
      right: 0;
      width: 25px;
      height: 25px;
      cursor: pointer;
      /* border: 1px solid red; */
    }

  </style>
</head>
<body>
  
  <div class="box">
    <span class="close"></span>
    <div class="top">
      <img src="./images/top.png" alt="">
    </div>
    <div class="bottom">
      <img src="./images/bottom.png" alt="">
    </div>
  </div>
  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.监听文档完全解析完成
    $(function() {

      $('.close').click(function() {
        $('.bottom').animate({height: 0}, 600, function() {
          $('.box').animate({width: 0}, 600, function() {
            $('.box').css('display', 'none')
          })
        })
      })

    })
  </script>
</body>
</html>

5.jQuery中的遍历

.each( function ): 遍历一个 jQuery 对象,为每个匹配的元素执行一个回调函数。

  • function 参数:
    • Function( Integer index, Element element ), 函数中返回false会终止循环。

jQuery.each( array | object , callback ) : 一个通用的迭代器函数,可以用来无缝地迭代对象和数组。

  • array参数:支持数组(array)或者类数组(array-like),底层使用for循环 。

  • object参数: 支持普通的对象 object 和 JSON对象等,底层用for in循环。

  • function 参数:

    • Function( Integer index, Element element ), 函数中返回false会终止循环。

.each() 和 jQuery.each()函数的区别:

  • .each()是jQuery对象上的方法,用于遍历 jQuery对象。
  • jQuery.each( ) 是jQuery函数上的方法,可以遍历对象、数组、类数组等,它是一个通用的工具函数。
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>Document</title>
</head>
<body>
  
  <ul id="list" class="panel">
    <li class="li-1">li-1</li>
    <li class="li-2">li-2</li>
    <li class="li-3">li-3</li>
    <li class="li-4">li-4</li>
    <li class="li-5">li-5</li>
  </ul>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.监听文档完全解析完成
    $(function() {
      // 1.遍历jQuery对象 ( 已经实现了迭代器协议 for of )
      // 对象中的 each 底层调用的 jQuery函数上的each方法
      $('ul li').each(function(index, element) {  // [].forEach( func(element, index, array ))
        console.log(index, element)
      })

      console.log("%O", $('ul') )
      // 2.使用 for of

    })
  </script>
</body>
</html>

三、jQuery AJAX

1.jQuery的AJAX

在前端页面开发中,如果页面中的数据是需要动态获取或者更新的,这时我们需要向服务器发送异步的请求来获取数据,然后在无需刷新页面的情况来更新页面。那么这个发起异步请求获取数据来更新页面的技术叫做AJAX。

AJAX全称(Asynchronous JavaScript And XML),是异步的 JavaScript 和 XML,它描述了一组用于构建网站和Web应用程序的开发技术。

  • 简单点说,就是使用 XMLHttpRequest 对象与服务器通信。它可以使用 JSON,XML,HTML 和 text 文本等格式发送和接收数据。
  • AJAX 最吸引人的就是它的"异步"特性。也就是说它可以在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面。

AJAX请求方法(Method)

  • GET、POST、PUT、PACTH、DELETE 等

jQuery中也有AJAX模块,该模块是在XMLHttpRequest的基础上进行了封装,语法(Syntax)如下:

  • $.ajax( settings ) - 默认用 GET 请求从服务器加载数据, 会返回jQXHR对象,可以利用该对象的abort方法来取消请求。

  • .get( url \[, data \] \[, success \] \[, dataType \] ) - 发起GET请求,底层调用的还是ajax()

  • .post( url \[, data \] \[, success \] \[, dataType \] ) - 发起POST请求,底层调用的还是ajax()

初体验jQuery中的AJAX

2.AJAX请求参数(Parameters)

请求参数(Parameters)

  • url - 指定发送请求的 URL。
  • method / type - 用于指定请求的类型 (e.g. "POST", "GET", "PUT"),默认为GET
  • data - 指定要发送到服务器的数据(PlainObject or String or Array)
  • processData:当data是一个对象时,jQuery 从对象的键/值对生成数据字符串,除非该processData选项设置为false. 例如,{ a: "bc", d: "e,f" }被转换为字符串"a=bc&d=e%2Cf",默认为true。
  • header - 请求头的内容(PlainObject)
  • contentType - 默认值:application/x-www-form-urlencoded; charset=UTF-8,向服务器发送数据时指定内容类型。
    • application/x-www-form-urlencoded; charset=UTF-8: 请求体的数据以查询字符串形式提交,如:a=bc&d=e%2Cf。
    • application/json; charset=UTF-8 指定为json字符串类型
    • 为时 false, 代表是 multipart/form-data 。表单类型,一般用于上传文件
  • dataType - 期望服务器端发回的数据类型(json、xml、text...),默认会根据响应的类型来自动推断类型。
  • timeout - 请求超时时间。它以毫秒为单位。
  • beforeSend - 这是一个在发送请求之前运行的函数,返回false会取消网路请求。
  • success - 请求成功回调的函数
  • error - 请求失败回调的函数
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>Document</title>
</head>
<body>
  
  <ul id="list" class="panel">
    <li class="li-1">li-1</li>
    <li class="li-2">li-2</li>
    <li class="li-3">li-3</li>
    <li class="li-4">li-4</li>
    <li class="li-5">li-5</li>
  </ul>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.监听文档完全解析完成
    $(function() {

      // console.log(encodeURIComponent('天河公园'))
      // 1.url 添加查询字符串
      // $.ajax({
      //   url: 'http://httpbin.org/get?cityId=404100&keyWord=天河公园',
      //   method: "GET",
      //   success: function(res) {
      //     console.log(res)
      //   }
      // })

      // 2.支持在data中提交参数
      // $.ajax({
      //   url: 'http://httpbin.org/get',
      //   method: "GET",
      //   data: {
      //     cityId: '504100',
      //     keyWord: '小蛮腰'
      //   },
      //   success: function(res) {
      //     console.log(res)
      //   }
      // })

      // 3.给 get请求添加请求头
      // $.ajax({
      //   url: 'http://httpbin.org/get',
      //   method: "GET",
      //   data: {
      //     cityId: '504100',
      //     keyWord: '小蛮腰'
      //   },
      //   headers: {  // 比如你登录成功之后,后台会返回一个 token
      //      accessToken: 'aaaaabbbbbcccccc' 
      //   },
      //   success: function(res) {
      //     console.log(res)
      //   }
      // })


      // 4.get简写 
      $.get('http://httpbin.org/get')
        .then(function(res) {  // jQuery 1.8  ; done
          console.log(res)
        })
        .catch(function() {  //  fail
          console.log('catch')
        })
        .always(function() {  // finally  
          console.log('always')
        })
        

    })
  </script>
</body>
</html>
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>Document</title>
</head>
<body>
  
  <ul id="list" class="panel">
    <li class="li-1">li-1</li>
    <li class="li-2">li-2</li>
    <li class="li-3">li-3</li>
    <li class="li-4">li-4</li>
    <li class="li-5">li-5</li>
  </ul>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.监听文档完全解析完成
    $(function() {

      // 1. 在url中提交查询字符串(比较少见)
      // $.ajax({
      //   url: 'http://httpbin.org/post?cityId=404100&keyWord=天河公园',
      //   method: "POST",
      //   success: function(res) {
      //     console.log(res)
      //   }
      // })

      // 2. 在data中提交查询字符串
      // $.ajax({
      //   url: 'http://httpbin.org/post',
      //   method: "POST",
      //   data: {
      //     cityId: '504100',
      //     keyWord: '小蛮腰'
      //   },
      //   // contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
      //   // dataType: 'json', // 自动推断, response content-type
      //   success: function(res) {
      //     console.log(res)
      //   }
      // })

      // 3. 在data中 JSON 字符串
      // $.ajax({
      //   url: 'http://httpbin.org/post',
      //   method: "POST",
      //   data: JSON.stringify({
      //     cityId: '504100',
      //     keyWord: '小蛮腰'
      //   }),
      //   contentType: 'application/json; charset=UTF-8',
      //   success: function(res) {
      //     console.log(res)
      //   }
      // })

      // 4. 在data中 FormData
      // var formData = new FormData()  // <form> <input name="cityId" value="404100"/> <input name="keyWord" value="小蛮腰"/>   </form>
      // formData.append('cityId', 404100)
      // formData.append('keyWord', '小蛮腰')
      // // formData.append('file', 文件)
      // $.ajax({
      //   url: 'http://httpbin.org/post',
      //   method: "POST",
      //   data: formData,
      //   processData: false, // processData:true, 会将data为对象的转成查询字符串
      //   contentType: false, // 使用 原生 XHR 默认的 contentType
      //   success: function(res) {
      //     console.log(res)
      //   }
      // })

      // 5. 在添加请求头
      // var formData = new FormData()
      // formData.append('cityId', 404100)
      // formData.append('keyWord', '小蛮腰')
      // $.ajax({
      //   url: 'http://httpbin.org/post',
      //   method: "POST",
      //   data: formData,
      //   processData: false, // processData:true, 会将data为对象的转成查询字符串
      //   contentType: false, // 使用 原生 XHR 默认的 contentType
      //   headers: {
      //     liujunToken: 'xxxxxxxsssssssssssd'
      //   },
      //   success: function(res) {
      //     console.log(res)
      //   }
      // })

      // 6. POST简写
      $.post('http://httpbin.org/post', {
        cityId: '504100',
        keyWord: '小蛮腰'
      })
        .then(function(res) {
          console.log(res)
        })


    })
  </script>
</body>
</html>

四、jQuery插件开发

在我们开发时,有时候jQuery提供的方法并不能满足我们的需求。如果我们想给jQuery扩展一些其它的方法,那这种情况下, 可能需要编写一个插件。

  • jQuery插件其实就是:编写一些新增的方法,并将这些方法添加到jQuery的原型对象上。

编写jQuery 插件的步骤:

  • 新建一个插件对应的JS文件(命名规范:jquery.插件名.js)
  • 在立即执行函数中编写插件,这样可以避免插件中的变量与全局变量冲突。
  • 在jQuery的原型对象上新增一些的方法。
  • 最后在html中导入就可以像使用其他 jQuery对象方法一样使用了
  • 到此就开发完一个jQuery的插件了。

案例:开发一个 jquery.showlinklocation.js 的插件。

  • 功能:让网页上所有的a标签文本的后面追加对应的域名地址。
javascript 复制代码
;(function(window, $) {

  
  // 1.在jquery的原型上添加了一个 showlinklocation
  // $.fn.showlinklocation = function() {
  //   console.log(this) // jQuery对象
  //   this.append('(http://www.liujun.com)')
  // }

  // 2.需要过滤出a元素
  // $.fn.showlinklocation = function() {
  //   console.log(this) // jQuery对象
  //   this.filter('a').append('(http://www.liujun.com)')
  // }

  // 3.需要遍历a元素
  $.fn.showlinklocation = function() {
    console.log(this) // jQuery对象
    this.filter('a').each(function() {
      var $a = $(this) // DOM Element
      var link = $a.attr('href')
      $a.append(`(${link})`)
    })
    return this
  }

  // 
})(window, jQuery)
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>Document</title>
</head>
<body>
  
  <ul id="list" class="panel">
    <li class="li-1">li-1</li>
    <li class="li-2">li-2</li>
    <li class="li-3">li-3</li>
    <li class="li-4">li-4</li>
    <li class="li-5">li-5</li>
  </ul>

  <a href="https://www.jd.com">京东商城</a>
  <a href="https://www.taobao.com">淘宝商城</a>
  <a href="https://www.biyao.com">必要商城</a>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script src="./utils/jquery.showlinklocation.js"></script>
  <script>
    // 1.监听文档完全解析完成
    $(function() {
      $('a').showlinklocation().css('color', 'red')
    })
  </script>
</body>
</html>
相关推荐
jay神36 分钟前
基于 YOLOv8 的轴承缺陷检测(Web 版)
前端·人工智能·yolo
jay神44 分钟前
基于 YOLOv8 的森林火灾检测系统(Web 版)
前端·yolo
code2cat1 小时前
HTML基础篇之第一张网页:从index.html到浏览器里的任务清单
前端·html
miss2 小时前
AI 改完不敢上线?OpenSpec 规约驱动开发实战
前端·代码规范·前端工程化
AiMan2 小时前
腾讯ima还是不可以导出左侧所有对话,只能单条导出,方法不对吗
前端
去伪存真2 小时前
并发量一高就装死?Agent 全链路“防猝死”手册
前端·agent
Moment2 小时前
AI 编程时代,聊聊我的 Mac mini 双屏桌面
前端·后端
AiMan2 小时前
先确认能不能一次把Microsofat Copilot所有内容打包一个文件导出
前端
总要学点什么3 小时前
第97篇:三维数据加载-城市建筑白模自定义着色器——让一条光带沿高度扫上去,快慢却由帧率说了算
前端·gis·webgl·cesium·着色器·空间分析·白模
上海懒图科技3 小时前
工厂厂区电子地图定位导航:厂区人车精准定位,安全合规双保障
前端·arcgis·vue