JQ-1 jQuery、库、框架的概念；jQuery（优点与缺点、起源和历史、学习原因；三种安装方式；监听文档加载；函数与对象）；jQuery对象与 DOM Element的区别+转换

龙猫呗

已于 2023-07-21 21:12:42 修改

阅读量228

点赞数

分类专栏： JQuery 文章标签： jquery 学习前端

于 2023-07-21 21:02:56 首次发布

本文链接：https://blog.csdn.net/qq_54075517/article/details/131860138

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1_认识jQuery

1.1_概念

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

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

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

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

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

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

库(library)

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

框架（framework）

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

1.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能力有限。

1.4_jQuery起源和历史

早在2005年8月22日， 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 版本。

下图是迭代的历史版本

在这里插入图片描述

1.5_为什么学习jQuery

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

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

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

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

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

2_ jQuery的安装

jQuery 本质是一个JavaScript 库。

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

jQuery安装方式有哪些？

2.1_方式一：CDN

在页面中，直接通过CDN的方式引入。

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

介绍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等。

2.2_方式二：下载jQuery的源文件

下载jQuery的源文件，并在页面中手动引入。

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

例如，新建一个文件夹lib，将JQ源文件放在此处

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

2.3_方式三：使用npm包管理工具安装到项目中

（略）

3_案例体验JQuery

计数器案例：点击加号或者减号按钮，让原始数字零产生正确的变化。

第一种方式：原生DOM实现

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

第二种方式：使用JQuery

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

4_ jQuery监听文档加载

jQuery监听document的DOMContentLoaded事件的四种方案

$( document ).ready( handler ) ： deprecated
$( “document” ).ready( handler ) ： deprecated
$().ready( handler ) ：deprecated
$( handler ) ：推荐用这种写法，其它可以使用但是不推荐

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
   var $doc =  $(document)
  //  方式 1:监听文档完全解析完成     
   $doc.ready(function() {
    console.log('doc ready1')
   })
   // 方式 2:监听文档完全解析完成
  jQuery('document').ready(function(){
    console.log('doc ready2')
  })
   // 方式 3:监听文档完全解析完成
  $().ready(function(){
    console.log('doc ready3')
  })
   // 方式 4:监听文档完全解析完成  【推荐】
  $(function() {
    console.log('doc ready4')
  })

  </script>

监听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>
      //方式一
    // $(window).load(function() {} ) // 3.0 remove

    // 方式二
    $(window).on('load', function() {
      console.log('图片加载完成')
    })
  </script>

5_Jquery对象

5.1_jQuery与其它库的变量名冲突

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

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

该路径下的js代码如下 <script src="./utils/hy-utils.js"></script>

var $ = '我是hy-utils'
var jQuery = '我是hy-utils jQuery'

下面的代码，解决$变量冲突

  <!-- 【自定义$变量，是一个字符串】
    给window 添加了 $ 变量
    window.$ = '我是hy-utils'
   -->
  <script src="./utils/hy-utils.js"></script>

  <!-- 【JQuery库定义$变量，是函数】
    给window 添加了 $ 变量
    window.$ = func 函数
    var _$ =
    var _jQuery =
   -->
  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // console.log('%O', $)  //出现变量名冲突，以后面出现的为准。所以输出的$是Jquery的函数

    // 1.解决变量的冲突【即让$变量 从JEuery的库函数，变成自定义的$变量 】
    jQuery.noConflict() // window.$ =  _$
    console.log( $ ) // 我是hy-utils

下面代码解决，Jquery变量名冲突

  <script src="./utils/hy-utils.js"></script>
  <script src="../libs/jquery-3.6.0.js"></script>
  
  <script>
    // 解决变量的冲突
    var newjQuery = jQuery.noConflict(true) //保存Jquery库的 Jquery函数
    console.log( $ ) // 我是hy-utils  【自定义的$变量】
    console.log( jQuery ) // 我是hy-utils	【自定义的Jquery变量】

    console.log(newjQuery)  //输出的是Jquery库的 Jquery函数

  </script>

5.2_认识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 )

在这里插入图片描述

5.3_认识jQuery对象

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

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

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

$() 新建一个空的jQuery对象
$(document) 新建一个包含document元素的jQuery对象
$('选择器') 新建一个包含所选中DOM元素的jQuery对象

在这里插入图片描述

5.4_ jQuery对象与 DOM Element的区别

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

在这里插入图片描述

5.5_ jQuery对象与 DOM Element 的转换

jQuery对象转成DOM Element

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

DOM Element转成jQuery对象

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

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 1.jQuery对象 转成 DOM Element
    var $ul = jQuery('ul')  //获取JQ对象
    // 方式一
    var ulEl = $ul[0]  // 将jQuery对象转成DOM Element
    console.log('%O', ulEl) //ul  [DOM Element]
    // 方式二
    console.log($ul.get()) //数组。 获取到匹配元素集合中所有的元素 [ul]
    console.log($ul.get(0)) //ul  [DOM Element]  获取到匹配元素集合中某一个元素
    

    // 2.DOM Element 转成 jQuery对象
    var ulEL = document.querySelector('ul') //获取DOM Element对象
    console.log(jQuery(ulEL)) //jQuery对象。     目的：想调用jQuery对象中的方法

  </script>

龙猫呗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQ-1 jQuery、库、框架的概念；jQuery（优点与缺点、起源和历史、学习原因；三种安装方式；监听文档加载；函数与对象）；jQuery对象与 DOM Element的区别+转换

jQuery、库、框架的概念；jQuery（优点与缺点、起源和历史、学习原因；三种安装方式；监听文档加载；函数与对象）；jQuery对象与 DOM Element的区别+转换
复制链接

扫一扫