jQuery 基本概念和语法——0715

最新推荐文章于 2025-12-22 21:29:33 发布

原创最新推荐文章于 2025-12-22 21:29:33 发布 · 303 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

web前端

一、什么是 jQuery？

jQuery是一个轻量级的"写的少，做的多"的 JavaScript 库。

优点：
写得少、做得多；
强大的元素选择器（使用的是css1-css3 所有选择器）；
简化了dom 操作；
优化了事件机制；

jQuery库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

除此之外，Jquery还提供了大量的插件。

二、如何引入 jQuery？

可以使用以下两种方法在网页中添加 jQuery：
1、从 jquery.com 下载 jQuery 库

有两个版本的 jQuery 可供下载：
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

jQuery 库是一个 JavaScript 文件，使用时，将下载的文件放在网页的同一目录下，在 script 标签中引入（和JavaScript 引入外部文件的方式相同）。

如：

//可以放在head 或 body 里边
<script src="./js/jquery-1.9.1.js"></script>

2、从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

如果不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。
和本地jQuery 库的使用方式相同，也是在 script 标签中引入。

Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。下边列出它们的文件路径：
Staticfile CDN:
https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js
百度CDN：
https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
又拍云 CDN:
https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js
新浪 CDN:
https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js
Google CDN:
https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
（不大推荐使用Google CDN来获取版本，因为Google产品在中国很不稳定）

使用 Staticfile CDN、百度、又拍云、新浪、谷歌或微软的 jQuery，有一个很大的优势：

许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所以结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

注：
获取 jQuery 使用版本：
可以在浏览器的 Console 窗口中使用 $.fn.jquery 命令查看当前 jQuery 使用的版本：

三、了解 jQuery 源码

在jQuery源码中：

window.jQuery==window.$==jQuery
jQuery在源码是一个函数
该函数内部返回 jQuery.fn.init 对象
jQuery.fn=jQuery.prototype

四、jQuery 语法

jQuery 语法是通过选取（query） HTML 元素，并对选取的元素执行某些操作（actions）。

基础语法： $(selector).action()。

$ 符号定义 jQuery；
选择符（selector）“查询"和"查找” HTML 元素；
jQuery 的 action() 执行对元素的操作。

文档就绪事件：
什么是文档就绪事件？
就是 dom 加载完成事件。

为什么要添加文档就绪事件？

为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。比如：试图隐藏一个不存在的元素、获得未完全加载的图像的大小。

如果元素初始化了，直接写jQuery代码
如果元素未初始化，写dom加载完成事件

	$(document).ready(function(){
  		 // 开始写 jQuery 代码...
	});

可以简写为：

	$(function(){
  		 // 开始写 jQuery 代码...
	});

补充：
JavaScript 入口函数：

	window.onload = function () {
    	// 开始写 JavaScript 代码
	}

jQuery 入口函数与 JavaScript 入口函数的区别：

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

Js 的入口函数只能出现一次，出现多次会存在事件覆盖的问题。
jQuery 的入口函数，可以出现任意多次，并不存在事件覆盖问题。

五、dom对象和jQuery对象相互转换

jQuery中，事件里边的 this 指向当前的 dom对象。

将dom对象转化为jQuery对象：
假如this为一个dom对象，转化为jQuery对象为：$("this") 。

jQuery对象转化为dom对象：
直接根据索引取值即可（jQuery选择器返回的都是集合）。比如：$(".ipt")[0] 获取到的集合里边取索引为0的dom对象。

标签

#javascript