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;多媒…

【测试开发学习历程】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…

计算机网络 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 张量…

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,翻译: 一种柔软的粉红…

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

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

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

随着信息技术的迅猛发展和数字化转型的深入推进&#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 $ ① $ …

vue webpack打包配置生成的源映射文件不包含源代码内容、加密混淆压缩

前言&#xff1a;此案例使用的是vue-cli5 一、webpack源码泄露造成的安全问题 我们在打包后部署到服务器上时&#xff0c;能直接在webpack文件下看到我们项目源码&#xff0c;代码检测出来是不安全的。如下两种配置解决方案&#xff1a; 1、直接在项目的vue.config.js文件中加…

Android 使用ping命令判断当前网络状态

一. 介绍 ping命令是用来测试和诊断网络连接问题的基本命令&#xff0c;当然我们的终端设备&#xff08;手机/平板/车机&#xff09;都可以用这个命令来判断当前网络是否有流量的状态&#xff0c;本篇文章主要介绍Linux的ping命令&#xff0c;因为Android系统也是使用了Linux内…

OpenAI官宣位于东京的首个亚洲办公室,并将发布专为日语优化的GPT-4定制模型!

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…

科技云报道:AI大模型疯长,存储扛住了吗?

科技云报道原创。 AI大模型正在倒逼数字基础设施产业加速升级。 过去一年半&#xff0c;AI大模型标志性的应用相继出现&#xff0c;从ChatGPT到Sora一次次刷新人们的认知。震撼的背后&#xff0c;是大模型参数指数级的增长。 这种数据暴涨的压力&#xff0c;快速传导到了大模…

Unity 3D定点数物理引擎实战系列:BEPU物理引擎碰撞计算与碰撞规则的架构与设计

前面我们讲解了如何监听物理引擎的碰撞事件, 在物理引擎内核中如何架构与设计碰撞规则,使得物理Entity与周围的物理环境产生碰撞时&#xff0c;如何灵活的控制物理碰撞&#xff0c;本节給大家详细的讲解BEPUphysicsint 物理引擎内部是如何管理与控制碰撞规则的。本文主要讲解3个…

HTML的超链接

前言&#xff1a; 如图&#xff0c;我们在浏览网页时经常可以看到这样的字体&#xff08;点击便跳转到了别的地方了&#xff09;&#xff0c;今日就和各位一起学习一下超链接的相关知识。 相关知识1&#xff1a; 超链接的标签为&#xff1a;a ~使用格式为&#xff1a; <a h…

node.js服务器静态资源处理

前言&#xff1a;node.js服务器动态资源处理见 http://t.csdnimg.cn/9D8WN 一、什么是node.js服务器静态资源&#xff1f; 静态资源服务器指的是不会被服务器的动态运行所改变或者生成的文件. 它最初在服务器运行之前是什么样子, 到服务器结束运行时, 它还是那个样子. 比如平…