JS-32-jQuery01-jQuery的引入

一、初识jQuery

jQuery是JavaScript世界中使用最广泛的一个。鉴于它如此流行,又如此好用,所以每一个入门JavaScript的前端工程师都应该了解和学习它。

jQuery是一个优秀的JS函数库。

(对BOM和DOM的封装)

jQuery这么流行,肯定是因为它解决了一些很重要的问题。实际上,jQuery能帮我们干这些事情:

  • 消除浏览器差异:你不需要自己写冗长的代码来针对不同的浏览器来绑定事件,编写AJAX等代码;

  • 简洁的操作DOM的方法:写$('#test')肯定比document.getElementById('test')来得简洁;

  • 轻松实现动画、修改CSS等各种操作。

jQuery的理念“Write Less, Do More“,让你写更少的代码,完成更多的工作!

JS原生,对BOM和DOM的操作比较繁琐,JS中对标签的操作基本上为:增删改查,其中查询最为核心。jQuery则是对JS中标签的查询比较方便。所以,选择器是jQuery的核心!!!

1-1、jQuery的功能

  • HTML元素选取(选择器)
  • HTML元素操作
  • CSS操作
  • HTML事件处理
  • JS动画效果
  • 链式效果
  • 读写合一
  • 浏览器兼容
  • 易扩展插件
  • ajax分装
  • ......

1-2、jQuery的版本

 

二、jQuery的使用

2-1、方法一:下载 jQuery

1、从jQuery官网可以下载对应版本到本地。

https://jquery.com/download/

jQuery只是一个jquery-xxx.js文件,但你会看到有compressed(已压缩)和uncompressed(未压缩)两种版本,使用时完全一样,但如果你想深入研究jQuery源码,那就用uncompressed版本。

2、将下载的jquery-xxx.js文件保存到项目对应的文件夹中;

3、使用jQuery只需要在页面的<head>引入jQuery文件即可;

2-2、方法二:CDN

如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。

它是由一组分布在不同地理位置的服务器组成的网络,这些服务器被放置在全球范围内的数据中心之间,以提供高速、高可用性的内容分发服务。

CDN的核心功能主要包括缓存和回源。

它将源站的资源缓存到分布在全国各地的CDN节点,用户请求数据时,先访问距离用户最近的CDN节点上缓存的资源,如果没有取到缓存,才会去访问源站。

这种机制避免了高峰期网络拥塞,为源站分担了压力,同时也缩短了用户等待时长。

CDN在前端开发中的主要作用包括:

  1. 加速网页加载:CDN可以将静态资源如图片、样式表、脚本文件等缓存到离用户更近的位置,大大减少了用户请求的响应时间,提升了网页的加载速度。
  2. 节省带宽消耗:通过在CDN节点服务器上缓存资源,可以减少用户请求对原始服务器的负载,从而节约带宽消耗。
  3. 提高网站可用性:CDN的分布式架构能够提高网站的可靠性和可用性,即使部分节点服务器出现故障,其他节点服务器也可以继续提供内容分发服务。

CDN是一种用存储空间换取时间的技术。

谷歌和微软的服务器都存有 jQuery 。

提示:使用谷歌或微软的 jQuery,有一个很大的优势:

        许多用户在访问其他站点时,已经从谷歌或微软加载过 jQuery。所有结果是,当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。

同时,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。

三、$符号

$是著名的jQuery符号。

实际上,jQuery把所有功能全部封装在一个全局变量jQuery中,而$也是一个合法的变量名,它是变量jQuery的别名:

window.jQuery; // jQuery(selector, context)
window.$; // jQuery(selector, context)
$ === jQuery; // true
typeof($); // 'function'

$本质上就是一个函数,但是函数也是对象,于是$除了可以直接调用外,也可以有很多其他属性。

注意,你看到的$函数名可能不是jQuery(selector, context),因为很多JavaScript压缩工具可以对函数名和参数改名,所以压缩过的jQuery源码$函数可能变成a(b, c)

绝大多数时候,我们都直接用$(因为写起来更简单嘛)。

但是,如果$这个变量不幸地被占用了,而且还不能改,那我们就只能让jQuery$变量交出来,然后就只能使用jQuery这个变量: 

$; // jQuery(selector, context)
jQuery.noConflict();
$; // undefined
jQuery; // jQuery(selector, context)

这种黑魔法的原理是jQuery在占用$之前,先在内部保存了原来的$,调用jQuery.noConflict()时会把原来保存的变量还原。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/819233.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode二叉树刷题

给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true public boolean isSymmetric(TreeNode root) {if(rootnull)return true;return compare(root.left,root.right);}public boole…

Emacs之增加/取消输入括号自动匹配(一百三十六)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

蓝桥杯杂题选做

海盗分金币 题目链接&#xff1a;1.海盗分金币 - 蓝桥云课 (lanqiao.cn) 题解&#xff1a;海盗分金币-Cheery的代码 - 蓝桥云课 (lanqiao.cn) 思路&#xff1a;倒着想就行。 等腰三角形 题目链接&#xff1a;1.等腰三角形 - 蓝桥云课 (lanqiao.cn) 题解&#xff1a;等腰三…

【测试开发学习历程】python常用的模块(中)

目录 5 time模块 5.1、Python中的四种格式的时间&#xff1a; 5.2、time模块中的常用函数 6 I/O流操作 6.1 创建文件 6.2 读取一个文件存入到另外一个文件 6.3 with open as 结构 6.4 open和with open as的区别 7 Excel的操作模块-openpyxl 7.1、新建Excel文件进行读…

读天才与算法:人脑与AI的数学思维笔记01_洛夫莱斯测试

1. 创造力 1.1. 创造力是一种原动力&#xff0c;它驱使人们产生新的、令人惊讶的、有价值的想法&#xff0c;并积极地将这些想法付诸实践 1.2. 创造出在表面上看似新的东西相对容易 1.3. 在遇到偶然间的创造性行为时&#xff0c;都会表现得异…

Vitis HLS 学习笔记--ap_int.h / ap_fixed.h(2)-深度探究

目录 1. 前文回顾 1.1 简单背后的复杂 1.2 复杂性的来源 2. 关键代码 2.1 功能概述 2.2 关系梳理 2.3 理解构造函数二 2.4 理解HLS_CONSTEXPR 2.5 理解const volatile 3. 探究ap_int<8> c&#xff1b;经历了什么 4. 在调试中查看 1. 前文回顾 在《Vitis HLS…

使用 npm 工具高效更新项目依赖包

团队内部会用工具定时检查包的最新版本并通知&#xff0c;以便我们及时跟进社区进展&#xff0c;避免和技术栈出现版本脱节导致无法使用最新特性和优化内容 这里只说明手动查看和更新包的主要几个命令。 npm outdated&#xff1a;检查项目中过时的依赖包及其最新版本。 npm i…

基于Canvas实现的简历编辑器

基于Canvas实现的简历编辑器 大概一个月前&#xff0c;我发现社区老是给我推荐Canvas相关的内容&#xff0c;比如很多 小游戏、流程图编辑器、图片编辑器 等等各种各样的项目&#xff0c;不知道是不是因为我某一天点击了相关内容触发了推荐机制&#xff0c;还是因为现在Canvas…

Hive:posexplode v.s. explode 实现列转行

hive中explode相关的列转行总结 explode explode 的输入只能是 array 或者map格式,按行输出array或map中的元素&#xff0c;比如&#xff1a; select explode(split(1,2,3,,))输出 explode(split(‘1,2,3’, ‘,’))123 -- map explode select explode(map(A,1,B,2,C,3))输…

如何学习敏捷项目管理?这个证书了解一下

当谈及“敏捷管理”时&#xff0c;许多人都能高呼其口号“敏捷迭代&#xff0c;小步快跑”。然而&#xff0c;在实际操作中&#xff0c;我们是否真正把握了敏捷管理的精髓&#xff1f;是否只是空喊口号而未真正实践&#xff1f; 想象这样一个场景&#xff1a;一家公司决定引入…

计算机网络 Cisco路由器基本配置

一、实验内容 1、按照下表配置好PC机IP地址和路由器端口IP地址 2、配置好路由器特权密文密码“abcd&#xff0b;两位班内序号”和远程登录密码“star” 3、验证测试 a.验证各个接口的IP地址是否正确配置和开启 b.PC1 和 PC2 互ping c.验证PC1通过远程登陆到路由器上&#…

【深度学习】深度学习md笔记总结第5篇:神经网络与tf.keras,学习目标【附代码文档】

深度学习笔记完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;深度学习课程&#xff0c;深度学习介绍要求,目标,学习目标,1.1.1 区别,学习目标,学习目标。TensorFlow介绍&#xff0c;2.4 张量学习目标,2.4.1 张量(Tensor),2.4.2 创建张量的指令,2.4.3 张量…

C++ summary 工具 nm c++filt

nm nm 命令是一个用于显示二进制文件&#xff08;通常是可执行文件或共享库&#xff09;中的符号表的工具。它通常用于查看程序或库中定义的全局符号和函数的信息。nm 命令对于分析二进制文件中的符号和调试信息非常有用。 基本语法如下&#xff1a; nm [options] <binar…

AI - 提示词意外收获 (5)

提示词&#xff1a; A soft pink rose with opalescent leaves, located in a surreal desert under the light of a binary star system, The dual shadows and contrasting lights create a dreamlike quality, emphasizing the roses unique beauty,翻译: 一种柔软的粉红…

Kubernetes那点事儿——k8s网络策略

k8s网络策略 网络策略示例1示例2 网络策略 网络策略&#xff08;Network Policy&#xff09;&#xff0c;用于限制Pod出入流量&#xff0c;提供Pod级别和Namespace级别网络访问控制。 一些应用场景&#xff1a; 应用程序间的访问控制。例如微服务A允许访问微服务B&#xff0c…

【位运算 贪心】2835. 使子序列的和等于目标的最少操作次数

算法可以发掘本质&#xff0c;如&#xff1a; 一&#xff0c;若干师傅和徒弟互有好感&#xff0c;有好感的师徒可以结对学习。师傅和徒弟都只能参加一个对子。如何让对子最多。 二&#xff0c;有无限多1X2和2X1的骨牌&#xff0c;某个棋盘若干格子坏了&#xff0c;如何在没有坏…

Spring Boot(10):不再被<和>等符号难倒,轻松玩转Spring Boot和Mybatis XML映射文件!

1. 前言 Spring Boot 是一个快速开发框架&#xff0c;可用于快速构建 Web 应用程序。MyBatis 是一个流行的 ORM 框架&#xff0c;它将 SQL 映射到 Java 对象中。结合 Spring Boot 和 MyBatis&#xff0c;可以实现轻松的数据库交互和持久化&#xff0c;使得我们可以更加专注于应…

LangChain开发流程

LangChain开发流程 1. 初始化环境 步骤&#xff1a; 安装LangChain库&#xff1a;pip install langchain导入必要的模块&#xff0c;如from langchain import OpenAI, LLMChain, PromptTemplate等。如果使用外部大语言模型&#xff08;如GPT&#xff09;&#xff0c;设置API…

数字乡村创新实践推动农业现代化发展:科技赋能农业产业升级、提升农民收入水平与乡村治理效能

随着信息技术的迅猛发展和数字化转型的深入推进&#xff0c;数字乡村创新实践已成为推动农业现代化发展的重要引擎。数字技术的广泛应用不仅提升了农业生产的智能化水平&#xff0c;也带动了农民收入的增加和乡村治理的现代化。本文旨在探讨数字乡村创新实践如何科技赋能农业产…

2016NOIP普及组真题 4. 魔法阵

线上OJ&#xff1a; 一本通&#xff1a;http://ybt.ssoier.cn:8088/problem_show.php?pid1976 本题作为第四题&#xff0c;想拿满分有难度。但是暴力拿些分还是做得到的。 满分需要用 前缀和 来化简for循环。 核心语句&#xff1a; $ x_a < x_b < x_c < x_d $ ① $ …