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()时会把原来保存的变量还原。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

IJKPLAYER源码分析-总体概述

1 前言 前面系列文章&#xff0c;对IJKPLAYER源码所涉及到的各个技术点、模块、关键技术及其实现原理&#xff0c;做了较为详细的梳理。但窃以为那只是微观层面的梳理&#xff0c;还不够完整不够透彻&#xff0c;本文拟尝试从宏观框架架构的视角加以补充。 算是抛砖引玉。 2 架…

idea运行Tomcat,控制台日志的中文乱码

一 版本 win10&#xff0c;idea2022,jdk18,tomcat9 二 问题描述 在idea上可以运行Tomcat。服务器启动后&#xff0c;可以正常访问本地的html文件。但是控制台的Tomcat日志出现了乱码&#xff1a;server与Tomcat Catlina Log两处。 三 无效的解决之道 1 idea的Help选项Edit …

设计模式-模板方法模式(TemplateMethod)

1. 概念 模板方法模式是一种行为设计模式&#xff0c;它在一个方法中定义算法的骨架&#xff0c;将一些步骤延迟到子类中实现。 2. 原理结构图 2.1 图 2.2 角色 抽象类&#xff08;Abstract Class&#xff09; 定义抽象的基本操作&#xff08;Primitive Operations&#xff…

Redis单机版安装保姆级操作手册

Redis安装说明 大多数企业都是基于Linux服务器来部署项目&#xff0c;而且Redis官方也没有提供Windows版本的安装包。因此课程中我们会基于Linux系统来安装Redis. 此处选择的Linux版本为CentOS 7. Redis的官方网站地址&#xff1a;https://redis.io/ 单机安装Redis 1.安装…

深度探索:Secure Hash Algorithm(SHA)全景解析

title: 深度探索&#xff1a;Secure Hash Algorithm&#xff08;SHA&#xff09;全景解析 date: 2024/4/15 18:33:17 updated: 2024/4/15 18:33:17 tags: SHA安全抗碰撞性算法版本实现细节性能优化发展历史应用案例 密码学中的哈希函数 一、哈希函数的定义 哈希函数是一种数…

Day55 动态规划 part15

Day55 动态规划 part15 392.判断子序列 我的思路&#xff1a; 自己还是只能想到双指针法 解答: class Solution {public boolean isSubsequence(String s, String t) {if(s.length() 0) {return true;}if(s.length() > t.length() || t.length() 0) {return false;}ch…

微信小程序认证指南及注意事项

如何认证小程序&#xff1f; 一、操作步骤 登录小程序后台&#xff1a; https://mp.weixin.qq.com/ (点击前往) 找到设置&#xff0c;基本设置&#xff1b; 在【基本信息】处有备案和认证入口&#xff1b; 点击微信认证的【去认证】; 按照步骤指引一步步填写信息&#xff…

秋招复习笔记——八股文部分:网络基础

TCP/IP 网络模型 应用层 最上层的&#xff0c;也是我们能直接接触到的就是应用层&#xff08;Application Layer&#xff09;&#xff0c;我们电脑或手机使用的应用软件都是在应用层实现。那么&#xff0c;当两个不同设备的应用需要通信的时候&#xff0c;应用就把应用数据传…

EPSON的RX8900CE适合用于安防摄像头产品

安防摄像头产品可以实现视频监控&#xff0c;运动检测&#xff0c;人脸识别等功能&#xff0c;并且可以支持远程访问&#xff0c;成了用户的“千里眼”。之前安防摄像头的价格比较高&#xff0c;一般比较重要的场合才会使用&#xff0c;目前随着安防摄像头价格逐渐降低&#xf…

简单工厂模式设计实验

实验内容&#xff1a; 楚锋软件公司欲基于Java 语言开发一套图表库&#xff0c;该图表库可以为应用系统提供各种不同外观的图表&#xff0c;例如柱状图、饼状图、折线图等。楚锋软件公司图表库设计人员希望为应用系统开发人员提供一套灵活易用的图表库&#xff0c;而且可以较为…

【Redis深度解析】揭秘Cluster(集群):原理、机制与实战优化

Redis Cluster是Redis官方提供的分布式解决方案&#xff0c;通过数据分片与节点间通信机制&#xff0c;实现了水平扩展、高可用与数据容灾。本文将深入剖析Redis Cluster的工作原理、核心机制&#xff0c;并结合实战经验分享优化策略&#xff0c;为您打造坚实可靠的Redis分布式…

成都百洲文化传媒有限公司电商领域的新锐力量

在电商服务领域&#xff0c;成都百洲文化传媒有限公司凭借其专业的服务理念和创新的策略&#xff0c;正逐渐成为行业内的翘楚。这家公司不仅拥有资深的电商团队&#xff0c;还以其精准的市场定位和高效的服务模式&#xff0c;赢得了众多客户的信赖和好评。 一、专业团队&#…

vue--双向数据绑定原理

Vue采用数据劫持 发布者-订阅者模式实现双向数据绑定&#xff0c;实现逻辑图如下所示&#xff1a; 数据劫持 Vue 借助Object.defineProperty()来劫持各个属性&#xff0c;这样一来属性存取过程都会被监听到 发布者-订阅者模式 主要实现三个对象&#xff1a;Observer&#…

⑤-1 学习PID--什么是PID

​ PID 算法可以用于温度控制、水位控制、飞行姿态控制等领域。后面我们通过PID 控制电机进行说明。 自动控制系统 在直流有刷电机的基础驱动中&#xff0c;如果电机负载不变&#xff0c;我们只要设置固定的占空比&#xff08;电压&#xff09;&#xff0c;电机的速度就会稳定在…

Python | Leetcode Python题解之第24题两两交换链表中的节点

题目&#xff1a; 题解&#xff1a; class Solution:def swapPairs(self, head: ListNode) -> ListNode:dummyHead ListNode(0)dummyHead.next headtemp dummyHeadwhile temp.next and temp.next.next:node1 temp.nextnode2 temp.next.nexttemp.next node2node1.next…

【InternLM 实战营第二期笔记01】书生·浦语大模型全链路开源体系+InternLM2技术报告

本次课程链接在GitHub上&#xff1a;InternLM/Tutorial at camp2 (github.com) 第一次课程录播链接&#xff1a;书生浦语大模型全链路开源体系_哔哩哔哩_bilibili InternLM2技术报告&#xff1a;arxiv.org/pdf/2403.17297.pdf 一、书生浦语大模型全链路开源体系笔记 Intern…

2024 如何激活 Guitar Pro 8 .1 今天手把手教你

Guitar Pro 是一款倍受吉他手喜爱的吉他和弦、六线谱、BASS 四线谱绘制、打印、查看、试听软件&#xff0c;它也是一款优秀的 MIDI 音序器&#xff0c;MIDI 制作辅助工具&#xff0c;可以输出标准格式的 MIDI。GP 的过人之处就在于它可以直接用鼠标和键盘按标准的六线谱、四线谱…

【产品经理修炼之道】- 厂商银业务之保兑仓

保兑仓 保兑仓是指供应商、购货商、银行签订三方协议&#xff0c;以银行信用为载体&#xff0c;以银行承兑汇票为结算工具&#xff0c;由银行控制货权&#xff0c;供应商受托保管货物并对银行承兑汇票保证金以外部分以货物回购为担保措施&#xff0c;购货商随缴保证金随提货而设…

KDD 2023 | 时空数据(Spatial-Temporal)论文总结

2023 KDD论文接收情况&#xff1a;Research track&#xff08;研究赛道&#xff09;接收率&#xff1a;22.1%&#xff08;313/1416&#xff09;&#xff0c;ADS Track&#xff08;应用数据科学赛道&#xff09;接收率&#xff1a;25.4%&#xff08;184/725&#xff09; &#…

没灵感?设计不出电子画册?

当你坐在电脑前&#xff0c;手指敲击键盘&#xff0c;却感觉大脑一片空白&#xff0c;眼前的画面仿佛凝固在屏幕上&#xff0c;那么&#xff0c;你可能陷入了灵感枯竭的困境。设计一本电子画册&#xff0c;需要创意的火花和独特的构思&#xff0c;而当灵感涸泉&#xff0c;设计…