原生实现计数器

<!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>
   
  <button class="sub">-</button>
  <span class="counter">0</span>
  <button class="add">+</button>
 
  <script>
    var subEl = document.querySelector('.sub')
    var spanEl = document.querySelector('.counter')
    var addEl = document.querySelector('.add')
    var counter = 0
    subEl.addEventListener('click', function() {
      spanEl.innerText = --counter
    })
    addEl.addEventListener('click', function() {
      spanEl.innerText = ++counter
    })
 
  </script>
</body>
</html>

原生写法-监听文档完全解析完成后执行js

借此js代码可以写在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>
 
   <script>
    // 1.监听文档完全解析完成
    document.addEventListener('DOMContentLoaded', function() {
      var subEl = document.querySelector('.sub')
      var spanEl = document.querySelector('.counter')
      var addEl = document.querySelector('.add')
      var counter = 0
      subEl.addEventListener('click', function() {
        spanEl.innerText = --counter
      })
      addEl.addEventListener('click', function() {
        spanEl.innerText = ++counter
      })
    })
  </script>
 
  <button class="sub">-</button>
  <span class="counter">0</span>
  <button class="add">+</button>

 
</body>
</html>

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>Document</title>
</head>
<body>
  <button class="sub">-</button>
  <span class="counter">0</span>
  <button class="add">+</button>
 
  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
     
    var $sub = jQuery('.sub')
    var $span = jQuery('.counter')
    var $add = jQuery('.add')
    var counter = 0
    $sub.on('click', function() {
      $span.text(--counter)      
    })
    $add.on('click', function() {
      $span.text(++counter)
    })
 
  </script>
</body>
</html>

jQuery 监听文档加载

 jQuery 监听 document 的 DOMContentLoaded 事件的四种方案
 $( document ).ready( handler ) ： deprecated
 $( "document" ).ready( handler ) ： deprecated
 $().ready( handler ) ： deprecated
 $( handler ) ：推荐用这种写法，其它可以使用但是不推荐

 监听 window 的 load 事件，即网页所有资源（外部连接，图片等）加载完
 .load( handler ) ： This API has been removed in jQuery 3.0
 $(window).on('load', handler) : 推荐写法

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
 
  //  var $doc =  $(document)
  //  // 方式 1:监听文档完全解析完成
  //  $doc.ready(function() {
  //   console.log('doc ready')
  //  })
 
   // 方式 2:监听文档完全解析完成
  // jQuery('document').ready(function(){
  //   console.log('doc ready')
  // })
 
   // 方式 3:监听文档完全解析完成
  // $().ready(function(){
  //   console.log('doc ready')
  // })
 
   // 方式 4:监听文档完全解析完成
   $(function() {
     console.log('doc ready')
   })
 
  </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>Document</title>
</head>
<body>
 
 
  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 监听文档完全解析完成
    $(function() {
 
      var $sub = jQuery('.sub')
      var $span = jQuery('.counter')
      var $add = jQuery('.add')
       
      var counter = 0
      $sub.on('click', function() {
        $span.text(--counter)      
      })
      $add.on('click', function() {
        $span.text(++counter)
      })
    })
  </script>
 
<button class="sub">-</button>
<span class="counter">0</span>
<button class="add">+</button>
 
</body>
</html>

监听window-load事件

<body>
 
  <img src="https://jquery.com/jquery-wp-content/themes/jquery/content/donate.png" alt="">
   
  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // $(window).load(function() {} ) // 3.0 remove
 
    // 1.监听整个HTML页面加载完成( 外部链接 和 图片资源.. )
    $(window).on('load', function() {
      console.log('图片加载完成')
    })
  </script>
</body>

jQuery 与其它库的变量名冲突

和 jQuery 库一样，许多 JavaScript 库也会使用 $ 作为函数名或变量名。
 在 jQuery 中， $ 是 jQuery 的别名。
 如果我们在使用 jQuery 库之前，其它库已经使用了 $ 函数或者变量，这时就会出现冲突的情况。
 这时我们可以通过调用 jQuery 中的 noConflict 函数来解决冲突问题。
 jQuery 在初始化前会先备份一下全局其它库的 jQuery 和 $ 变量，调用 noConflict 函数只是恢复之前备份的 jQuery 和 $ 变量。

变量名$-冲突??

<body>
   
  <!-- 
    给window 添加了 $ 变量
    window.$ = '我是hy-utils'
   -->
  <script src="./utils/hy-utils.js"></script>
 
  <!-- 
    给window 添加了 $ 变量
    window.$ = func 函数
    var _$ =
    var _jQuery =
   -->
  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // console.log('%O', $)  // func 还是  '我是hy-utils'
 
    // 1.解决变量的冲突
    jQuery.noConflict() // window.$ =  _$
    console.log( $ ) // 我是hy-utils
 
  </script>
</body>

变量名jQuery冲突??

<body>
   
  <!-- 
    给window 添加了 $ 变量
    window.$ = '我是hy-utils'
    window.jQuery = '我是hy-utils jQuery'
   -->
  <script src="./utils/hy-utils.js"></script>
 
  <!-- 
    给window 添加了 $ 变量
     var _$ = window.$
    var _jQuery = window.jQuery
 
    window.$ = func 函数
    window.jQuery = func 函数
 
   -->
  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // console.log('%O', $)  // func 还是  '我是hy-utils'
 
    // 1.解决变量的冲突
    var newjQuery = jQuery.noConflict(true) // window.$ =  _$ ;  window.jQuery =  _jQuery
    console.log( $ ) // 我是hy-utils
    console.log( jQuery ) // 我是hy-utils
 
    console.log(newjQuery)
 
  </script>
</body>

认识 jQuery 函数

 jQuery 是一个工厂函数 ( 别名 $ ) ，调用该函数，会根据传入参数类型来返回匹配到元素的集合，一般把该集合称为 jQuery 对象。
 如果传入假值：返回一个空的集合。
 如果传入选择器：返回在在 documnet 中所匹配到元素的集合。
 如果传入元素：返回包含该元素的集合。
 如果传入 HTML 字符串，返回包含新创建元素的集合。
 如果传入回调函数：返回的是包含 document 元素集合 , 并且当文档加载完成会回调该函数。
 因为函数也是对象，所以该函数还包含了很多已封装好的方法。如： jQuery.noConflict 、 jQuery.ready 等

 jQuery 函数的参数：
 jQuery( selector [, context ] ) ： selector 是字符串选择器； context 是匹配元素时的上下文，默认值为 document
 jQuery( selector [, context ] )
 jQuery( element )
 jQuery( elementArray )
 jQuery()

 jQuery( html [, ownerDocument ] )
 jQuery( html [, ownerDocument ] )
 jQuery( html )
 jQuery( callback )

jQ函数和其参数

<body>
  <ul>
    <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.假值： ''  false  null undefined NAN....
     console.log( jQuery('') )
 
    // 2.字符串（选择器）
     console.log( jQuery('ul li') )
 
    // 3.字符串（ html string）
     console.log( jQuery('<div>') ) // 创建了一个div元素
    document.createElement('div')  
 
     var $els = jQuery(`
       <div>我是div</div><p>我是一个p</p>
     `)
     $els.appendTo('body')
     console.log($els)
 
 
    // 4.元素类型
     var bodyEl = document.querySelector('body')
     console.log(jQuery(bodyEl))
 
 
    // 5.监听文档的解析完成
    var $doc =jQuery(function() {
 
    })
     console.log(jQuery($doc))
 
  </script>
</body>

认识 jQuery 对象

 jQuery 对象是一个包含所匹配到元素的集合，该集合是类数组 (array-like) 对象。
 jQuery 对象是通过调用 jQuery 函数来创建的。
 jQuery 对象中会包含 N （ >=0 ）个匹配到的元素。
 jQuery 对象原型中包含了很多已封装好的方法。例如： DOM 操作、事件处理、动画等方法。
 下面我们通过调用 jQuery 函数来新建一个 jQuery 对象，例如：
 $() 新建一个空的 jQuery 对象
 $(document) 新建一个包含 document 元素的 jQuery 对象
 $(' 选择器 ') 新建一个包含所选中 DOM 元素的 jQuery 对象

<body>
 
  <ul>
    <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>
 
  <div>
    <ul>
      <li class="div-li"></li>
    </ul>
  </div>
 
   <script src="../libs/jquery-3.6.0.js"></script>
   <script>
    // 1.创建一个空的jQuery对象
    // console.log(jQuery())
     
    // 2.创建一个匹配到document元素的集合 -> jQuery对象
    // console.log(jQuery(document)) 
 
    // 3.创建匹配到多个li元素的集合 -> jQuery对象’
    // console.log(jQuery('ul li'))
    // console.log(jQuery('ul li', document.querySelector('div')))
 
 
   </script>
</body>

 jQuery 对象与 DOM Element 的区别

 获取的方式不同
 DOM Element 是通过原生方式获取，例如： document.querySelector()
 jQuery 对象是通过调用 jQuery 函数获取，例如： jQuery(' ')

 jQuery 对象是一个类数组对象，该对象中会包含所选中的 DOM Element 的集合。
 jQuery 对象的原型上扩展非常多实用的方法， DOM Element 则是 W3C 规范中定义的属性和方法。
jQuery 对象与 DOM Element 的区别

    // 1.获取jQuery对象
    console.log(jQuery('body'))
 
    // 2.获取DOM Element对象
    console.log('%O', document.querySelector('body'))

jQuery对象和DOM-Element的转换

 jQuery 对象转成 DOM Element
 .get(index) ：获取 jQuery 对象中某个索引中的 DOM 元素。
 index 一个从零开始的整数，指示要检索的元素。
 如果 index 超出范围（小于负数元素或等于或大于元素数），则返回 undefined 。
 .get() : 没有参数，将返回 jQuery 对象中所有 DOM 元素的数组。
 DOM Element 转成 jQuery 对象
 调用 jQuery 函数或者 $ 函数
 例如： $( 元素 )

<script>
    // 1.jQuery对象 转成 DOM Element
    var $ul = jQuery('ul')
    // console.log($ul) 
    // 方式一
    // var ulEl = $ul[0]  // 将jQuery对象转成DOM Element
    // console.log('%O', ulEl)
    // 方式二
    // console.log($ul.get()) // 获取到匹配元素集合中所有的元素 [ul]
    // console.log($ul.get(0)) // 获取到匹配元素集合中某一个元素 ul
     
 
    // 2.DOM Element 转成  jQuery对象
    // var ulEL = document.querySelector('ul')
    // console.log(ulEL)
    // console.log(jQuery(ulEL)) // 目的：想调用jQuery对象中的方法
 
  </script>

jQuery 的选择器 (Selectors)

jQuery 函数支持大部分的 CSS 选择器，语法： jQuery （ ' 字符串格式的选择器 ' ）
 1. 通用选择器（ * ）
 2. 基本选择器（ id, class, 元素）
 3. 属性选择器（ [attr] , [atrr=”value ”] ）
 4. 后代选择器（ div > span, div span ）
 5. 兄弟选择器（ div + span , div ~ span ）
 6. 交集选择器（ div.container ）
 7. 伪类选择器（ :nth-child() ， :nth-of-type() ， :not() ，但不支持状态伪类 :hover, :focus... ）
 8. 内容选择器（ :empty ， :has(selector) ） , empty 指选中的元素没有子元素或文本； has 指选中的元素是否存在某个子元素
 9. 可见选择器（ :visible, :hidden ）
 10.jQuery 扩展选择器：（ :eq(), :odd, :even, :first, :last ）
 .....

<body>
 
  <ul id="list">
    <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.基本的选择器
    console.log( $('.li-1') )
    console.log( $('#list') )
 
    // 2.伪元素选择器
    console.log($('ul li:nth-child(2)'))
 
    // 3.jQuery额外扩展的选择器
     //document.querySelector('ul li:eq(1)') // 不会生效
     console.log($('ul li:eq(1)'))
     console.log($('ul li:first') )
     console.log($('ul li:last') )
 
     console.log($('ul li:odd') )
     console.log($('ul li:even') )
 
  </script>
</body>

jQuery 过滤器 (Filtering) API

 jQuery 过滤器 API ( 即 jQuery 原型上的方法 )

 1.eq(index): 从匹配元素的集合中，取索引处的元素， eq 全称 (equal 等于 ) ，返回 jQuery 对象。
 2.first() : 从匹配元素的集合中，取第一个元素，返回 jQuery 对象。
 3.last(): 从匹配元素的集合中，取最后一个元素，返回 jQuery 对象。
 4.not(selector): 从匹配元素的集合中，删除匹配的元素，返回 jQuery 对象。
 5.filter(selector): 从匹配元素的集合中，过滤出匹配的元素，返回 jQuery 对象。
 6.find(selector): 从匹配元素集合中，找到匹配的后代元素，返回 jQuery 对象。
 7.is(selector|element| . ): 根据选择器、元素等检查当前匹配到元素的集合。集合中至少有一个与给定参数匹配则返回
true 。
 8.odd() : 将匹配到元素的集合减少为集合中的奇数，从零开始编号，返回 jQuery 对象。
 9.even() ：将匹配到元素的集合减少到集合中的偶数，从零开始编号，返回 jQuery 对象。
 10. 支持链式调用
 .......

<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.eq()
      // console.log($('ul li:eq(2)') ) // selector
      // console.log( $('ul li').eq(2) ) // API -> 原型上的方法
 
      // 2.first()  last()
      // console.log( $('ul li').first() )
      // console.log( $('ul li').last() )
 
      // 3.not()
      // console.log($('ul li').not('.li-1') )
      // console.log($('ul li').not('.li-1, .li-2') )
 
      // 4. odd()  even()
      // console.log($('ul li').odd() )
      // console.log($('ul li').even() )
 
      // 5.filter()
      // console.log($('ul li').filter('.li-4') )
      // console.log($('ul li').filter('.li-4, .li-3') )
 
      // 6.jQuery原型上的方法，大部分支持链式调用
      var $el = $('ul li')
                .filter('.li-2, .li-3, .li-4')
                .eq(1)
 
      console.log($el)
 
      // new Promise()
      //   .then()
      //   .then()
      //   .then()
               
 
    })
  </script>
</body>

VSCode 生成代码片段

 在线生成代码片段地址： https://snippet-generator.app/

jQuery 对文本的操作

 .text() 、 .text(text)
 获取匹配到元素集合中每个元素组合的文本内容，包括它们的后代，或设置匹配到元素的文本内容。
 相当与原生元素的 textContent 属性。

 .html() 、 html(htmlString)
 获取匹配到元素集合中第一个元素的 HTML 内容，包括它们的后代，或设置每个匹配元素的 HTML 内容。
 相当与原生元素的 innerHTML 属性。

 .val() 、 .val(value)
 获取匹配到元素集合中第一个元素的当前值或设置每个匹配到元素的值。
 该 .val() 方法主要用于获取 input,select 和等表单元素的值。
 相当与获取原生元素的 value 属性。

.text() 、 .text(text)

<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
      <span>我是span</span>
    </li>
  </ul>
 
  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.监听文档完全解析完成
    $(function() {
      // 1.拿到 ul 中所有的文本
      // console.log( $('ul').text() )
      console.log( $('ul li').text() )  // 
 
      // 2.设置 li 中的文本
     $('ul li').text('我是li')  // 会给匹配元素集合中所有的元素添加文本 （ 设置值：一般是给选中所有元素设置）
 
 
    })
  </script>
</body>

.html() 、 html(htmlString)

<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.获取ul元素中的所有 html 内容
      console.log($('ul li').html() ) // 拿到匹配元素集合中的第一个元素（获取的时候 一般是拿到匹配元素集合中的第一个元素的数据 ）
 
      // 2.给设置 li 元素设置 html的内容（ 设置 ）
      $('ul li').html(`
        <p>我是p元素</p>
        <span>我是一个span</span>
      `)
 
    })
  </script>
</body>

.val() 、 .val(value)

<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 class="user" type="text" placeholder="请求输入用户名">
  <input class="password" type="text" placeholder="请求输入密码">
 
  <button class="login">登录</button>
  <button class="setUserPas">设置用户名密码</button>
 
  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.监听文档完全解析完成
    $(function() {
      // 1.获取表单数据
      // $('.login').on('click', function() {})
 
      // 简写
      $('.login').click(function() {
        console.log( $('.user').val() )
        console.log( $('.password').val() )
      })
 
      // 2.给表单元素设置值
      $('.setUserPas').click(function() {
        $('.user').val('coder')
        $('.password').val('admin')
      })
 
 
    })
  </script>
</body>

jQuery 对 CSS 的操作

 .width() 、 .width(value)
 获取匹配到元素集合中第一个元素的宽度或设置每个匹配到元素的宽度。
 .height() 、 height(value)
 获取匹配到元素集合中第一个元素的高度或设置每个匹配到元素的高度。
 .css(propertyName) 、 .css(propertyNames)
 获取匹配到元素集中第一个元素样式属性的值，底层是调用 getComputedStyle 函数获取。
 .css( "width" ) 和 .width() 之间的区别 :
 width() 返回一个无单位的像素值（例如， 400 ），而 css() 返回一个具有完整单位的值（例如， 400px ）
 .css(propertyName, value) 、 .css(properties)
 为每个匹配到元素设置一个或多个 CSS 属性。
 调用 css 方法添加样式会直接把样式添加到元素的 style 属性上。

 .width() 、 .width(value)

<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.获取到元素的width
      // width: content ;  innerWidth:padding + content; outerWidth: border + padding + content
      console.log($('ul').width()) // 返回的结果是 number
 
      // 2.设置ul元素的width
       $('ul').width(300)  // 直接给style设置一个width
       $('ul').width('500px')  // 直接给style设置一个width
 
      // 3. width height  innerWidth innerHeight ......
 
    })
  </script>
</body>

<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.获取ul元素的width
      // console.log( $('ul').css('width') )  // 返回的结果是 string 带单位 px
      // console.log( $('ul').css(['width', 'height']) )  // 返回的结果是 string 带单位 px 。 {width: '223px', height: '105px'}
 
      // 2.给ul元元素设置width
      // $('ul').css('width', '450px') // 设置的是一个属性
       
      // $('ul').css({  // 设置的是多个属性
      //   width: 100,
      //   height: 100,
      //   color: 'red'
      // })
 
      $('ul li')
        .css('color', 'green')
        .odd()
        .css({
          color: 'red'
        })
    })
  </script>
</body>

Class 属性的操作

 .addClass(className) 、 .addClass(classNames) 、 .addClass(funcntion)
 将指定的类添加到匹配元素集合中的每个元素，每次都是追加 class 。
 底层调用的是 setAttribute( "class", finalValue ) 方法添加 class 。

 .hasClass(className)
 是否给任意匹配到的元素分配了该类。
 底层是通过 getAttribute( "class" ).indexOf() 来判断是否存在。
 .removeClass() 、 .removeClass(className) 、 .removeClass(classNames) 、

.removeClass(function)
 给匹配元素集中的每个元素删除单个类、多个类或所有类。
 底层调用的是 setAttribute( "class", finalValue ) 方法。

 .toggleClass() 、 .toggleClass(className[,state]) 、 .toggleClass(classNames[,state])
 根据类的存在或状态参数的值，在匹配到元素的集合中，给每个元素添加或删除一个或多个类。

<body>
   
  <ul class="active list">
    <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="toggle">切换class</button>
  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.监听文档完全解析完成
    $(function() {
      // 1.添加class
       $('ul').addClass('list1 list2')
       $('ul li').addClass(['list1', 'list2'])
 
      // 2.判断是否存在弄个class
       console.log($('ul').hasClass('active list') )
 
      // 3.删除class
       //$('ul').removeClass() // 删除全部
       $('ul').removeClass('list1') // 删除指定的某一个
 
      // 4.class的切换
      $('.toggle').click(function() {
        // $('ul').toggleClass()
        $('ul').toggleClass('active')
      })
      
 
    })
  </script>
</body>

attributes 和 property 属性的操作

 .attr(attributeName)
 获取匹配元素集和中第一个元素的属性值，底层调用了原生的 getAttribute() API
 .attr(attributeName, value) 、 .attr(attributes)
 为每个匹配元素设置一个或多个属性，底层调用了原生的 setAttribute() API
 .removeAttr(attributeName)
 在匹配到元素的集中，给每个元素删除一个属性。
 底层调用了原生的 removeAttribute() API

<body>
   
  <ul id="list"
      name="liujun" age="17"
  >
    <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.获取attribute属性  ul
       console.log($('ul').attr('id'))
       console.log($('ul').attr('name'))
 
      // 2.设置 attribute属性 ul
       $('ul').attr('id', 'box')
 
       $('ul').attr({   // 设置多个属性
         id: 'container',
         class: "panel",
         name: 'coder'
       })
 
      // 3.删除 attribute属性 ul
       $('ul').removeAttr('id')
       $('ul').removeAttr('name')
    })
  </script>
</body>

 .prop(propertyName)
 获取匹配到元素集合中第一个元素的属性值
 .prop(propertyName ， value) 、 .prop(propertys)
 为每个匹配元素设置一个或多个属性。
 removeProp(propertyName)
 删除匹配元素集的属性 ,( 只能删除用户自定义添加的 prop ，不能删除元素本身的属性 ) 。

<body>
   
  <ul id="list" class="panel"
     name="liujun"
  >
    <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() {
      // 1.获取property属性  ul
      //console.log("%O", document.querySelector('input') )
 
      console.log($('ul').prop('id') )
      console.log($('ul').prop('class') )
      //console.log($('ul').prop('name') )自定义属性显示undefined
 
      console.log($('ul').prop('nodeName') )
      console.log($('ul').prop('nodeType') )
 
      // 2.设置property属性  input
      $('input').prop('disabled', true)
 
      $('input').prop({
        disabled: true,
        placeholder: '请输入用户名',
        jQuery_liujun_123: '自定义的属性' // 缓存 click  data
      })
 
      // 3.删除property属性 input
      $('input').removeProp('jQuery_liujun_123') // 只能删除 自定义的属性
 
    })
  </script>
</body>

自定义 data-xx 属性的操作

 .data() 、 .data(key)
 获取匹配元素集中第一个元素的自定义属性的值
 .data(key, value) 、 .data(obj)
 为每个匹配元素设置一个或多个自定义属性
 .removeData([name])
 会删除 data() 函数给匹配元素属性添加的数据和 data() 函数绑定的自定义属性。
 data 函数添加的属性会被移除，但是如果属性同时在签上定义了就不会被移除。

<body>
   
  <ul id="list" class="panel"
    data-name="liujun" data-age="17"
  >
    <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.获取data属性 ul
      console.log($('ul').data() )  //  {age: 17, name: 'liujun'}
      console.log($('ul').data('age') )
       
      // 2.设置data属性 ul
      $('ul').data('name', 'coder')
      $('ul').data({  // 调用data()函数只能修改 缓存中的数据;网页元素无法看到修改
        name: 'coder',
        age: '18',
        height: '1.66'  // 动态添加的data-xx属性
      })
 
      // 3.删除data属性
      // $('ul').removeData('name')  // 只能删除 缓存中的数据
      // $('ul').removeData(['name', 'age', 'height'])  // 只能删除 缓存中的数据
 
 
      console.log( $('ul').data('name') )
      console.log("%O", $('ul').get(0) )
 
 
    })
  </script>
</body>

jQuery 的 DOM 操作 - 插入内容

 .append(content [, content] ) 、 append( function )
 将参数的内容插入到匹配元素集中每个元素的末尾。
 content 的类型 : DOM element, text node, array of elements and text nodes, HTML string, or jQuery object
 .prepend(content [, content] ) 、 prepend( function )
 将参数的内容插入到匹配元素集中每个元素的开头。
 .after(content [, content] ) 、 after( function )
 在匹配元素集中的每个元素之后，插入由参数指定的内容。
 .before(content [, content]) 、 before( function )
 在匹配元素集中的每个元素之前，插入由参数指定的内容。

<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.在ul的尾部插入文本
       $('ul').append('文本1')
       $('ul').prepend('文本2')
 
       $('ul').before('文本3')
       $('ul').after('文本4')
 
    })
  </script>
</body>

<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>
 
  <li class="li-6"> 我是li-6 </li>
   
  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.监听文档完全解析完成
    $(function() {
      // 方式一: 在ul的尾部插入文本
      //  $('ul').append('文本1')
 
      // 方式二: 插入html字符串
      //  此处先7再6
      //  $('ul').append(`
        //  <li class="li-6">我是li-6</li>
        //  <li class="li-7">我是li-7</li>
      //  `)
 
      // 方式三: 插入的是jQuery对象
       var liEl = document.createElement('li')
       var $li = $('<li>').addClass('li-6').text('我是li-6')
       $('ul').append($li)
 
      // 方式四: 插入的是元素对象
      // var liEl = document.createElement('li')
      // liEl.className = 'li-6'
      // liEl.innerText = '我是li-6'
      // $('ul').append(liEl)
 
      //  方式五: 选中页面上的元素插入到ul中
      $('ul').append( $('.li-6') ) // move, 不是clone
 
    })
  </script>
</body

 .appendTo(target)
 将匹配元素集中的每个元素插入到目标元素的末尾。
 target 的类型： A selector, element, HTML string, array of elements, or jQuery object 。
 .prependTo(target)
 将匹配元素集中的每个元素插入到目标元素的开头。
 .insertAfter(target)
 在目标元素之后，插入匹配元素集中的每个元素。
 .insertBefore(target)
 在目标元素之前，插入匹配元素集中的每个元素。

插入

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.监听文档完全解析完成
    $(function() {
     // 1.给ul的尾部插入内容
     $('<li>')
      .addClass('li-6')
      .text('我是li-6')  // 创建一个li元素
 
      // .appendTo( $('ul') )
      // .prependTo( $('ul') )
      // .insertBefore( $('ul') )
      .insertAfter( $('ul') )
 
    })
  </script>

  <script>
    // 1.监听文档完全解析完成
    $(function() {
     // 1.给ul的尾部插入内容
     $('<li>')
      .addClass('li-6')
      .css('color', 'red')
      .text('我是li-6')  // 创建一个li元素(必须是一个jQuery对象)
 
      // 方式一: 支持 jQuery对象
      // .appendTo( $('ul') )
 
      // 方式二: 支持 字符串类型的选择器
      // .appendTo( 'ul' )
 
      // 方式三: 支持 元素对象
      .appendTo( document.querySelector('ul') )
 
 
      $('.li-7').appendTo('ul')  // append
 
    })
  </script>

jQuery 的 DOM 操作 - 移除 / 替换 / 克隆

 .empty(): 删除匹配元素集的所有子节点，自身不会删除。
 .remove( ) 、 .remove( [selector] )
 删除匹配的元素集，自身也会删除。
 selector 参数：字符串类型选择器。筛选匹配元素集的元素来删除
 .replaceAll(target): 用匹配到的元素集替换每个目标元素。
 .replaceWidth(newContent) 、 .replaceWidth( function )
 用新内容替换匹配元素集中的每个元素，并返回被移除的元素集。
 newConten 参数的类型： HTML string, DOM element, array of DOM elements, or jQuery object
 .clone() 、 .clone( withDataAndEvents )
 对匹配的元素集执行深度复制，底层是调用了 elem.cloneNode( true ) 来复制元素。
 withDataAndEvents 参数 : 布尔值，是否复制该元素的事件处理程序和数据，默认值为 false 。

删除

  <script>
    // 1.监听文档完全解析完成
    $(function() {
      // 1.删除ul中的后代元素
      // $('ul').empty()
 
      // 2.删除ul 以及后代元素
      // $('ul').remove()
       
      // $('ul li').remove('字符串选择器')
 
      // $('ul li').remove('.li-1, .li-2') // 支持
      // $('ul li').remove(['.li-1', '.li-2'])  // 不支持
 
    })
  </script>

替换

  <script>
    // 1.监听文档完全解析完成
    $(function() {
      // 1.将li替换为 span元素 .replaceAll(target)
      //  $('<span>')
      //    .addClass('content')
      //    .text('我是span')
      //   .css('color', 'red') // 创建一个span元素( jQuery对象 )
 
      //   .replaceAll( 'ul li' ) // 将li元素替换为span 
      //   replaceAll参数: 1.字符串类型的选择器  2. $('ul li') jQuery对象  3. 元素对象
 
      // 2.将li替换为 span元素 .replaceWidh( content )
      //  var $span = $('<span>').text('我是span')
      //  $('ul li').replaceWith( $span )
       $('ul li').replaceWith('<span>我是span</span>')
        //   replaceWith 参数: 1.字符串文本/html字符串  2. $('ul li') jQuery对象  3. 元素对象
 
    })
  </script>

克隆

  <script>
    // 1.监听文档完全解析完成
    $(function() {
      // 1.将li-6克隆到ul元素的尾部
      // var $newLi = $('.li-6').clone() // 属于克隆一个li元素
      // $newLi.appendTo('ul')
 
      // 简写
      // $('.li-6').clone().appendTo('ul')
 
      // 2.将li-6克隆到 ul元素的尾部( 将li-6的事件处理函数和data自定义属性一起拷贝过去 )
      $('.li-6')
        .data({
          name: 'liujun',
          age: '17'
        })
        .click(function() {
          console.log( 'li-6' )
        })
        // 开始克隆
        .clone(true)
        .appendTo('ul')
          
      console.log("%O", $('.li-6').get(0))
    })
  </script>

认识事件（ Event ）

Web 页面经常需要和用户之间进行交互，而交互的过程中我们可能想要捕捉这个交互的过程：
 比如用户点击了某个按钮、用户在输入框里面输入了某个文本、用户鼠标经过了某个位置；
 浏览器需要搭建一条 JavaScript 代码和事件之间的桥梁；
 当某个事件发生时，让 JavaScript 执行某个函数，所以我们需要针对事件编写处理程序（ handler ）；
 原生事件监听方法：
 事件监听方式一：在 script 中直接监听（很少使用）。
 事件监听方式二： DOM 属性，通过元素的 on 来监听事件。
 事件监听方式三：通过 EventTarget 中的 addEventListener 来监听。
 jQuery 事件监听方法：
 事件监听方式一：直接调用 jQuery 对象中的事件处理函数来监听，例如： click ， mouseenter.... 。
 事件监听方式二：调用 jQuery 对象中的 on 函数来监听，使用 off 函数来取消监听。