jQuery属性和DOM操作

一、什么是jQuery

1.认识jQuery

jQuery 读音为：/ˈdʒeɪkwɪəri/ （简称：jQ），是一个快速、小型且功能丰富的 JavaScript 库，官网对jQuery的描述：

使HTML文档遍历、操作、事件处理、动画和 Ajax 之类的事情变得更加简单。
具有易于使用的 API，可在多种浏览器中使用。
jQuery 结合多功能性和可扩展性，改变了数百万人编写 JavaScript 的方式。

jQuery官网：https://jquery.com/

在这里插入图片描述

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

随着JavaScript的普及，以及越来越多人使用JavaScript来构建网站和应用程序

JavaScript社区认识到代码中存在非常多相同的逻辑是可复用的。
因此社区就开始对这些相同的逻辑的代码封装到一个JavaScript文件中。
这个封装好的JavaScript文件就可称为JavaScript库或JavaScript框架。

库(library)

JavaScript库是一个预先编写好并实现了一些特定功能的代码片段的集合。
一个库中会包含许多的函数、变量等，可根据需求引入到项目中使用。
一些常见的库有jQuery、Day.js、Lodash和React等

框架（framework）

JavaScript框架是一个完整的工具集，可帮助塑造和组织您的网站或应用程序。
提供一个结构来构建整个应用程序，开发人员可以在结构的规则内更安全、更高效地工作。
一些更常见的框架有：Bootstrap、Angular、Vue、Next.js等。

3.jQuery优点与缺点

jQuery的优点

易于学习：相对于其它的前端框架，jQuery 更易于学习，它支持 JavaScript 的编码风格。
少写多做（Write less, do more）
- jQuery提供了丰富的功能(DOM操作、过滤器、事件、动画、Ajax等)。
- 可以编写更少可读的代码来提高开发人员的工作效率。
优秀的 API 文档：jQuery 提供了优秀的在线 API 文档。
跨浏览器支持：提供出色的跨浏览器支持 (IE9+)，无需编写额外代码。

jQuery的缺点：

jQuery代码库一直在增长（自 jQuery 1.5 起超过 200KB）
不支持组件化开发
jQuery 更适合DOM操作，当涉及到开发复杂的项目时，jQuery能力有限。

4.jQuery起源和历史

早在2005年8月22日，John Resig first hints of a JavaScript library to use CSS selectors（Selectors in JavaScript） with a more succinct syntax than existing libraries（Behaviour ）。

John Resig 首次提出支持CSS选择器的JavaScript库，其语法比现有库（例如：Behaviour ）更简洁。

在2006年之前，John Resig（一名从事自己项目的Web开发人员）对编写跨浏览器的JavaScript感到非常繁琐。

2006年1月16日，John Resig在BarCamp的演讲中介绍了他的新库( jQuery )。最后，我宣布了今晚发布的第二个新版本:jQuery: New Wave Javascript。简而言之，这段代码彻底改变了Javascript与HTML交互的方式——它确实是一组令人惊叹的代码，我已经投入了大量的时间和精力来实现它。我现在正在为网站编写文档，应该会在接下来的几天内准备好。
之后John Resig又花了 8 个月的时间完善jQuery库，直到2006-8-26才发布了 1.0 版本。
原本打算使用 JSelect（JavaScript Selectors）命名该库，但域名都已被占用。

5.jQuery历史版本

在这里插入图片描述

6.为什么学习jQuery

jQuery是一个非常受欢迎的JavaScript库，被全球约 7000 万个网站使用。它优秀的设计和架构思想非常值得我们去学习。

jQuery 的座右铭是“Write less , do more”，它易于学习， 非常适合JavaScript 开发人员学习的第一个库。

前端JavaScript库非常多，学习jQuery有利于我们学习和理解其它的JavaScript库（例如：Day.js、Lodash.js等）

许多大型科技公司，虽然他们现在不会直接使用jQuery来做项目，但在项目中仍然会借鉴很多jQuery设计思想。

因此，了解 jQuery 依然是一个好主意。

8.jQuery的安装

jQuery 本质是一个JavaScript 库。

该库包含了：DOM操作、选择器、事件处理、动画和 Ajax 等核心功能。
现在我们可以简单的理解它就是一个JavaScript文件。
执行该文件中会给window对象添加一个jQuery函数（例如：window.jQuery）。
接着我们就可以调用jQuery函数，或者使用该函数上的类方法。

下面我们来看看jQuery安装方式有哪些？

方式一：在页面中，直接通过CDN的方式引入。
方式二：下载jQuery的源文件，并在页面中手动引入。
方式三：使用npm包管理工具安装到项目中（npm在Node基础阶段会讲解）

8.1认识CDN

什么是CDN呢？CDN称之为内容分发网络（Content Delivery Network或Content Distribution Network，缩写：CDN）

CDN它是一组分布在不同地理位置的服务器相互连接形成的网络系统。
通过这个网络系统，将Web内容存放在距离用户最近的服务器。
可以更快、更可靠地将Web内容(文件、图片、音乐、视频等)发送给用户。
CDN不但可以提高资源的访问速度，还可以分担源站的压力。

更简单的理解CDN：

CDN会将资源缓存到遍布全球的网站，用户请求获取资源时；
可就近获取CDN上缓存的资源，提高资源访问速度，同时分担源站压力。

常用的CDN服务可以大致分为两种：

自己购买的CDN服务：需要购买开通CDN服务（会分配一个域名）。
- 目前阿里、腾讯、亚马逊、Google等都可以购买CDN服务。
开源的CDN服务
- 国际上使用比较多的是unpkg、JSDelivr、cdnjs、BootCDN等。

8.2方式一：CDN

jQuery使用CDN方式引入

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

下面实现一个 Hello jQuery 的案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script>
    console.log(window.$ === window.jQuery)
    jQuery('body').text("Hello jQuery")
  </script>
</body>
</html>

8.3方式二：下载源码引入

下载jQuery的源码

官网下载：https://jquery.com/download/
CDN连接地址下载： https://releases.jquery.com/jquery/
GitHub仓库中下载：https://github.com/jquery/jquery

下面使用源码的方式引入jQuery：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="../libs/jQuery.js"></script>
  <script>
    console.log(window.$ === window.jQuery)
    jQuery('body').text("Hello jQuery")
  </script>
</body>
</html>

8.4方式三：npm安装

使用npm安装jquery到项目中

npm install jquery
yarn add jquery

9.jquery初体验-计数器案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button class="add">+</button>
  <input type="text" name="num" id="num" value="0" readonly>
  <button class="sub">-</button>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script>
    // jquery实现
    let num = 0
    $('.add').click(function () {
      $('#num').val(++num)
    })
    $('.sub').click(function () {
      $('#num').val(--num)
    })
  </script>
</body>
</html>

10.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) : 推荐写法

11.jQuery与其它库的变量名冲突

和 jQuery库一样，许多JavaScript库也会使用 $ 作为函数名或变量名。

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

1.认识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 )

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

2.认识jQuery对象

jQuery对象是一个包含所匹配到元素的集合，该集合是类数组(array-like)对象。

jQuery对象是通过调用jQuery函数来创建的。
jQuery对象中会包含N（>=0）个匹配到的元素。
jQuery 对象原型中包含了很多已封装好的方法。例如：DOM操作、事件处理、动画等方法。

下面我们通过调用jQuery函数来新建一个jQuery对象，例如：

$() 新建一个空的jQuery对象
$(document) 新建一个包含document元素的jQuery对象
$(‘选择器’) 新建一个包含所选中DOM元素的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

1.jQuery对象与 DOM Element的区别

jQuery对象与DOM Element的区别

获取的方式不同
- DOM Element 是通过原生方式获取，例如：document.querySelector()
- jQuery对象是通过调用jQuery函数获取，例如：jQuery(’ ')
jQuery对象是一个类数组对象，该对象中会包含所选中的DOM Element的集合。
jQuery对象的原型上扩展非常多实用的方法，DOM Element 则是W3C规范中定义的属性和方法。

2.jQuery对象与 DOM Element 的转换

jQuery对象转成DOM Element

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

DOM Element转成jQuery对象

调用jQuery函数或者$函数
例如：$(元素)

三、jQuery的整体架构

在开始学习jQuery语法之前，我们先来了解一下jQuery的架构设计图。

jQuery架构设计图如下：

在这里插入图片描述

四、jQuery操作属性

1.jQuery的选择器(Selectors)

jQuery函数支持大部分的CSS选择器，语法：jQuery（‘字符串格式的选择器’）

通用选择器（*）
基本选择器（id, class, 元素）
属性选择器（ [attr] , [atrr=”value ”] ）
后代选择器（div > span, div span）
兄弟选择器（div + span , div ~ span）
交集选择器（div.container）
伪类选择器（:nth-child()，:nth-of-type()，:not()，但不支持状态伪类 :hover, :focus…）
内容选择器（:empty，:has(selector)）, empty指选中的元素没有子元素或文本； has指选中的元素是否存在某个子元素
可见选择器（:visible, :hidden）
jQuery扩展选择器：（:eq(), :odd, :even, :first, :last ）

<!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生成代码片段

https://snippet-generator.app/

2.jQuery过滤器(Filtering) API

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

eq(index): 从匹配元素的集合中，取索引处的元素， eq全称(equal 等于)，返回jQuery对象。
first() : 从匹配元素的集合中，取第一个元素，返回jQuery对象。
last(): 从匹配元素的集合中，取最后一个元素，返回jQuery对象。
not(selector): 从匹配元素的集合中，删除匹配的元素，返回jQuery对象。
filter(selector): 从匹配元素的集合中，过滤出匹配的元素，返回jQuery对象。
find(selector): 从匹配元素集合中，找到匹配的后代元素，返回jQuery对象。
is(selector|element| . ): 根据选择器、元素等检查当前匹配到元素的集合。集合中至少有一个与给定参数匹配则返回true。
odd() :将匹配到元素的集合减少为集合中的奇数，从零开始编号，返回jQuery对象。
even()：将匹配到元素的集合减少到集合中的偶数，从零开始编号，返回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 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>

3.jQuery对文本的操作

.text()、.text(text)

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

.html()、html(htmlString)

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

.val()、.val(value)

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

4.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属性上。

6.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])

根据类的存在或状态参数的值，在匹配到元素的集合中，给每个元素添加或删除一个或多个类。

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

7.attributes和property属性的操作

标准的attribute: 比如id、class、href等(会在DOM对象上创建对应的prop)

非标准的attribute: 比如name、age、height等(只会存在attributes属性上)

在这里插入图片描述

property和attributes的区别

property是一个元素对象的所有属性，而attributes只是元素attributes属性中所包含的属性，所以property是包含attributes的。其实attributes的属性就是html中元素标签上的所有属性。

不过需要注意的是，自定义在标签上的属性只能通过attributes获取。

.attr(attributeName)

获取匹配元素集和中第一个元素的属性值，底层调用了原生的 getAttribute() API

.attr(attributeName, value)、.attr(attributes)

为每个匹配元素设置一个或多个属性，底层调用了原生的 setAttribute() API

.removeAttr(attributeName)

在匹配到元素的集中，给每个元素删除一个属性。
底层调用了原生的 removeAttribute() API

.prop(propertyName)

获取匹配到元素集合中第一个元素的属性值

.prop(propertyName，value)、.prop(propertys)

为每个匹配元素设置一个或多个属性。

removeProp(propertyName)

删除匹配元素集的属性,( 只能删除用户自定义添加的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>

8.自定义data-xx属性的操作

.data()、.data(key)

获取匹配元素集中第一个元素的自定义属性的值

.data(key, value) 、.data(obj)

为每个匹配元素设置一个或多个自定义属性

.removeData([name])

会删除data()函数给匹配元素属性添加的数据和 data()函数绑定的自定义属性。
data函数添加的属性会被移除，但是如果属性同时在标签上定义了就不会被移除。

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

五、jQuery操作DOM

1.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 )

在匹配元素集中的每个元素之前，插入由参数指定的内容。

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

插入到目标元素的里面

.appendTo(target)

将匹配元素集中的每个元素插入到目标元素的末尾。
- target的类型：A selector, element, HTML string, array of elements, or jQuery object。

.prependTo(target)

将匹配元素集中的每个元素插入到目标元素的开头。

插入到目标元素的外面

.insertAfter(target)

在目标元素之后，插入匹配元素集中的每个元素。

.insertBefore(target)

在目标元素之前，插入匹配元素集中的每个元素。

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

2.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。

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

一、什么是jQuery

1.认识jQuery

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

3.jQuery优点与缺点

4.jQuery起源和历史

5.jQuery历史版本

6.为什么学习jQuery

8.jQuery的安装

8.1认识CDN

8.2方式一：CDN

8.3方式二：下载源码引入

8.4方式三：npm安装

9.jquery初体验-计数器案例

10.jQuery监听文档加载

11.jQuery与其它库的变量名冲突

二、认识jQuery

1.认识jQuery函数

2.认识jQuery对象

三、jQuery对象与DOM Element

1.jQuery对象 与 DOM Element的区别

2.jQuery对象 与 DOM Element 的转换

三、jQuery的整体架构

四、jQuery操作属性

1.jQuery的选择器(Selectors)

2.jQuery过滤器(Filtering) API

3.jQuery对文本的操作

4.jQuery对CSS的操作

6.Class属性的操作

7.attributes和property属性的操作

8.自定义data-xx属性的操作

五、jQuery操作DOM

1.jQuery的DOM操作-插入内容

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

1.jQuery对象与 DOM Element的区别

2.jQuery对象与 DOM Element 的转换