JS-32-jQuery01-jQuery的引入

news2024/9/23 7:20:16

一、初识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.coloradmin.cn/o/1596482.html

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

相关文章

Flink设计运行原理 | 大数据技术

⭐简单说两句⭐ ✨ 正在努力的小新~ &#x1f496; 超级爱分享&#xff0c;分享各种有趣干货&#xff01; &#x1f469;‍&#x1f4bb; 提供&#xff1a;模拟面试 | 简历诊断 | 独家简历模板 &#x1f308; 感谢关注&#xff0c;关注了你就是我的超级粉丝啦&#xff01; &…

计算机毕业设计springboot小区物业报修管理系统m8x57

该物业报修管理系统实施的目的在于帮助物业管理企业升级员工管理、住户管理、报修问题管理等内部管理平台&#xff0c;整合物业管理企业物力和人力&#xff0c;全面服务于维修人员管理的内部管理需求,并重视需求驱动、管理创新、与业主交流等外部需求,通过物业管理企业各项资源…

ArrayList部分底层源码分析

JDK版本为1.8.0_271&#xff0c;以插入和删除元素为例&#xff0c;部分源码如下&#xff1a; // 部分属性 transient Object[] elementData; // 底层数组 private int size; // 记录元素个数 private static final Object[] DEFAULTCAPACITY_EMPTY_ELEMENTDATA {}; // 空Obje…

异地组网怎么安装?

异地组网安装是指在不同地域的多个设备之间建立网络连接&#xff0c;以便实现数据传输和协同工作的过程。在如今的数字化时代&#xff0c;异地组网安装已经成为了许多企业和组织所必需的一项技术。 天联的使用场景 在异地组网安装中&#xff0c;天联是一种常用的工具。它具有以…

得物 Zookeeper SLA 也可以 99.99% | 得物技术

一、背景 ZooKeeper&#xff08;ZK&#xff09;是一个诞生于2007年的分布式应用程序协调服务。尽管出于一些特殊的历史原因&#xff0c;许多业务场景仍然不得不依赖它。比如&#xff0c;Kafka、任务调度等。特别是在 Flink 混合部署 ETCD 解耦 时&#xff0c;业务方曾要求绝对…

网络与系统攻防技术实验及实验报告

1.实验内容 正确使用msf编码器&#xff0c;veil-evasion&#xff0c;自己利用shellcode编程等免杀工具或技巧 正确使用msf编码器&#xff0c;使用msfvenom生成如jar之类的其他文件veil&#xff0c;加壳工具使用C shellcode编程 通过组合应用各种技术实现恶意代码免杀 如果成功…

多目标跟踪 | 基于anchor-free目标检测+ReID的实时一阶多类多目标跟踪算法实现

项目应用场景 面向多目标检测跟踪场景&#xff0c;项目采用 anchor-free 目标检测ReID 的实时一阶段多类多目标跟踪算法实现&#xff0c;效果嘎嘎好。 项目效果 项目细节 > 具体参见项目 README.md (1) 类别支持 1~10 object classes are what we need non-interest-…

智能热流体仿真软件AICFD 2024R1新版本功能介绍

AICFD是由天洑软件自主研发的一款通用的智能热流体仿真软件。软件引入AI技术&#xff0c;具备智能问答、智能加速、智能预测等特色功能&#xff0c;解决用户在传统CFD软件中遇到的“网格划分繁、求解设置难、仿真计算慢”等痛点&#xff0c;使设计师和工程师可以专注于业务本身…

AI大模型语言开源大语言模型完整列表

开源大语言模型完整列表 Large Language Model (LLM) 即大规模语言模型&#xff0c;是一种基于深度学习的自然语言处理模型&#xff0c;它能够学习到自然语言的语法和语义&#xff0c;从而可以生成人类可读的文本。 所谓"语言模型"&#xff0c;就是只用来处理语言文…

WP免费主题下载

免费wordpress模板下载 高端大气上档次的免费wordpress主题&#xff0c;首页大图全屏显示经典风格的wordpress主题。 https://www.wpniu.com/themes/289.html 免费WP主题 蓝色简洁实用的wordpress免费主题模板&#xff0c;免费主题资源分享给大家。 https://www.wpniu.com/…

如何查找overlayfs对应的POD如何根据pod找到containerd id

如何查找overlayfs对应的POD mount |grep overlayfs | grep 1738 ctr -n k8s.io c list | grep 11ac4083419be11174746b68d018a0a402d9ae43c6b52125810fe1ec7db63bc6 查找目录并统计大小 find / -name "jfsCache" -exec du -sh {} | sort -rh如何根据pod找到c…

配置IP地址并验证连通性

1.实验环境 主机 A和主机 B通过一根网线相连&#xff0c;如图6.13所示。 图6.13 实验案例一示意图 2.需求描述 为两台主机配置!P地址&#xff0c;验证P地址是否生效&#xff1b;验证同一网段的两台主机可以互通&#xff0c;不同网段的主机不能直接互通。 3.推荐步骤 为两台…

笔记软件功能多样的是哪款?做笔记的软件哪个好用

在快节奏的现代生活中&#xff0c;笔记软件已成为我们提高工作效率、记录生活点滴的重要工具。想象一下&#xff0c;在繁忙的工作中&#xff0c;你能够快速记录下关键信息&#xff0c;或在灵感迸发时及时捕捉&#xff0c;这是多么方便高效。 一款功能多样的笔记软件&#xff0…

JAVA-贪吃蛇(源代码)

游戏界面: 图片素材: 背景图片 蛇身 食物 蛇头 标题 源代码: 运行界面 package com.snake.game;public class snakeApp {public static void main(String[] args) {//添加界面new snakeJFrame();} }游戏界面类JFrame package com.snake.game;import javax.swing.*; import …

WEB前端-用户注册倒计时

<body><textarea name"" id"" cols"30" rows"10">用户注册协议欢迎注册成为京东用户&#xff01;在您注册过程中&#xff0c;您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议&#xff0c;请您务必仔细阅读…

腾讯EdgeOne产品测评体验——多重攻击实战验证安全壁垒:DDoS攻击|CC压测|Web漏洞扫描|SQL注入

腾讯EdgeOne产品测评体验——实战验证安全壁垒&#xff1a;DDoS攻击|CC压测|Web漏洞扫描|SQL注入 写在最前面一、产品概述1.1 什么是边缘安全加速平台 EO&#xff1f;1.2 EdgeOne产品功能 二、准备工作2.1 选择&#xff1a;NS&#xff08;Name Server&#xff09;接入模式或 CN…

智慧用电安全管理系统

智慧用电安全管理系统 智慧用电安全管理系统是智能电网中客户侧关键的构成部分&#xff0c;是基本建设新型智慧城市的基本&#xff0c;将完成地区内各种各样用电设备的智能化系统监管&#xff0c;完成地区内日常生活与工作中安全性、舒服。 一、智慧用电安全管理系统介绍 …

FANUC机器人单轴零点标定的具体方法(全轴零点标定不方便时可采用)

FANUC机器人单轴零点标定的具体方法(全轴零点标定不方便时可采用) 前面和大家分享了FANUC机器人进行零点标定的原因和方法,具体可参考以下链接中的内容:: FANUC机器人进行零点标定的目的和具体方法步骤详解

Python学习从0开始——项目一day01爬虫(二)

Python学习从0开始——项目一day01爬虫&#xff08;二&#xff09; 一、解析response数据二、json转换三、文件保存四、存储json对象五、完整代码 上一篇 一、解析response数据 在已经知道我们获取图片的最终URL存在于请求响应response中&#xff0c;下一步的重点就放在解析re…

18.软件定时器

一、简介 软件定时器是指具有定时功能的软件&#xff0c;FreeRTOS 提供的软件定时器允许在创建前设置一个 软件定时器定时超时时间&#xff0c;在软件定时器成功创建并启动后&#xff0c;软件定时器开始定时&#xff0c;当软件定 时器的定时时间达到或超过先前设置好的软件定时…