50.[前端开发-JS实战框架应用]Day01-jQuery历史-CDN-jQuery核心语法

已于 2025-04-26 17:52:09 修改
阅读量229 收藏 4
点赞数 4
文章标签： javascript jquery 开发语言
于 2025-04-25 10:36:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55135449/article/details/147494958
版权

邂逅jQuery

1 什么是jQuery

认识jQuery

库(library)和框架(framework)的概念

jQuery优点与缺点

jQuery起源和历史

Behaviour vs Selectors in JavaScript

jQuery历史版本

为什么学习jQuery

jQuery的安装

认识CDN

方式一：CDN

<!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>
  
  <!-- 
    integrity: 防止资源被篡改,如果浏览器发现资源被篡改 就不会加载该资源
    crossorigin: 加载不同源的资源时,浏览器是否需要携带用户凭证信息( cookie, ssl 证书 等 )
      anonymous: 不需要携带用户凭证信息
      user-credentail: 需要携带用户凭证信息
   -->
  <!-- <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> -->


  <!-- 
    1.使用CDN的方式引入
    执行下面的js文件
      1.window.jQuery 函数 -> 工厂函数
      2.window.$ 函数
   -->
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script>
    // console.log("%O", jQuery)
    // console.log($ === jQuery)

    // 需求:在页面上显示 Hello World
    // document.querySelector('body').textContent = 'Hello World'

    // var $body = jQuery('body')
    // $body.text('hello jQuery')

    $('body').text('hello jQuery')
  </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>Document</title>
</head>
<body>

  <script src="../libs/jquery-3.6.0.js"></script>

  <script>
    $('body').text('hello jquery') // textContent
  </script>
</body>
</html>

方式三：npm安装（了解）

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>
    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>

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>

原生实现-计数器-存在的问题和优化

<!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>
    // 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>

</body>
</html>

jQuery监听文档加载

监听-DOMContentLoaded事件

<!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>

  //  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>
</body>
</html>

jQuery-监听window-load事件

<!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>

  <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>
</html>

jQuery与其它库的变量名冲突

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>
  
  <!-- 
    给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>
</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>
  
  <!-- 
    给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>
</html>

2 认识jQuery对象

认识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>
  <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>
</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>

  <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>
</html>

jQuery对象 与 DOM Element的区别

<!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>
    // 1.获取jQuery对象
    // console.log(jQuery('body'))

    // 2.获取DOM Element对象
    console.log('%O', document.querySelector('body'))
  </script>
</body>
</html>

jQuery对象 与 DOM Element 的转换

<!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>
    <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.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>
</body>
</html>

3 jQuery的整体架构

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>
  
  <script src="./HYjQuery.js"></script>
  <script>

    // console.log("%O", HYjQuery)
    console.log("%O", HYjQuery('body') )
    console.log("%O", HYjQuery )

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

HYjQuery


// 立即执行函数（避免与全局变量冲突）
;(function(global, factory) {
  factory(global)
})(window, function(window) {

  function HYjQuery(selector) {
    return new HYjQuery.fn.init(selector)
  }

  // 原型方法
  HYjQuery.prototype = {
    constructor: HYjQuery,
    extend: function() {},
    text: function() {},
    ready: function() {}
    // 学习这里的的方法
  
  }
  // 类方法
  HYjQuery.noConflict = function() {}
  HYjQuery.isArray = function() {}
  HYjQuery.map = function() {}
  // 学习这里的类方法

  HYjQuery.fn = HYjQuery.prototype

  // 构造函数（创建jQuery对象）
  HYjQuery.fn.init = function(selector) { // css selector
    
    if(!selector){
      return this
    }
    // 拿到DOM Element源码
    var el = document.querySelector(selector)
    this[0] = el
    this.length = 1
    return this
  }

  HYjQuery.fn.init.prototype = HYjQuery.fn

  window.HYjQuery = window.$ = HYjQuery

})

jQuery的选择器(Selectors)

<!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>
    /* ul li:nth-child(2){

    } */
  </style>
</head>
<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>
</html>

VSCode生成代码片段

jQuery过滤器(Filtering) API

<!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.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>
</html>

4 jQuery操作属性

jQuery对文本的操作

jQuery-文本的操作-text

<!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
      <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>

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

      // 2.给设置 li 元素设置 html的内容（ 设置 ）
      $('ul li').html(`
        <p>我是p元素</p>
        <span>我是一个span</span>
      `)

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

jQuery-文本的操作-val

<!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 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>
</html>

jQuery对CSS的操作

jQuery-CSS的操作-width

<!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.获取到元素的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>
</html>

jQuery-CSS的操作-css

<!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.获取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>
</html>

Class属性的操作

<!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 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('list') // 删除指定的某一个

      // 4.class的切换
      $('.toggle').click(function() {
        // $('ul').toggleClass()
        $('ul').toggleClass('active')
      })
     

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

attributes和property属性的操作

<!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"
      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>
</html>

prop

<!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"
     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('name') )

      // 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>
</html>

自定义data-xx属性的操作

<!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"
    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>
</html>

5 jQuery操作DOM

jQuery的DOM操作-插入内容

jQuery的DOM操作-插入内容

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>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.在ul的尾部插入文本
      // $('ul').append('文本')
      // $('ul').prepend('文本')

      // $('ul').before('文本')
      // $('ul').after('文本')

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

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>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>

  <li class="li-6"> 我是li-6 </li>
  
  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.监听文档完全解析完成
    $(function() {
      // 方式一: 在ul的尾部插入文本
      // $('ul').append('文本')

      // 方式二: 插入html字符串
      // $('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>
</html>

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>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.给ul的尾部插入内容
     $('<li>')
      .addClass('li-6')
      .text('我是li-6')  // 创建一个li元素

      // .appendTo( $('ul') )
      // .prependTo( $('ul') )
      // .insertBefore( $('ul') )
      .insertAfter( $('ul') )

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

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>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>

   <li class="li-7">我是li-7</li>

  <script src="../libs/jquery-3.6.0.js"></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>
</body>
</html>

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

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>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.删除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>
</body>
</html>
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>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>

  <li class="li-6">li-6</li>
  <script src="../libs/jquery-3.6.0.js"></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>
</body>
</html>
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>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>

  <li class="li-6">li-6</li>

  <script src="../libs/jquery-3.6.0.js"></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>
</body>
</html>

m0_zj
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值