jQuery 基础

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：VS和mvc  

作者：刘俊杰

撰写时间：2022 年 3 月9 日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

一、简介 

jQuery 是一个 JavaScript 函数库。

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

jQuery 功能概述：

l HTML

元素选取

l HTML

元素操作

l CSS 操作

l HTML 事件函数

l JavaScript 特效和动画

l HTML DOM 遍历和修改

l AJAX 异步请求方式

二、jQuery 使用 

1、安装方式

在网页中添加 jQuery，可以使用以下 2 种方法：

l 从 jquery.com 下载 jQuery 库

l 从 CDN 中载入 jQuery, 如从百度加载 jQuery

1.

<!--！！！不要在同一页面中引入多个 JQuery 文件，引入多个可能会出现冲突-->

2.

3.

<!--在网页中添加 jQuery，可以使用以下 2 种方法：-->

4.

<!--1、下载 jQuery 文件，本地引入-->

5.

<script src="jquery-1.12.4/jquery-1.12.4.js"></script>

6.

7.

<!--2、从 CDN 中载入 jQuery-->

8.

<!--百度 CDN-->

9.

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></s

cript>

10. <!

--

新浪 CDN-->

11.

<script

src="https://lib.sinaapp.com/js/jquery/2.0.2/jque

ry-2.0.2.min.js"

></script>

2、开发版本和生产版本

l 生产版本 用于实际的网站中，已被精简和压缩。文件名称（*.min.js）

l 开发版本 用于测试和开发（未压缩，是可读的代码）文件名称(*.js)

3、jQuery 使用版本

我们可以在浏览器的 Console 窗口中使用 $.fn.jquery 命令查看当前 jQuery 使用

的版本

4、jQuery 语法

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

1.

$(selector).action()

2.

//或者

3.

jQuery(selector).action()

说明：

l 美元符号定义 jQuery

l 选择符（selector）"查询"和"查找" HTML 元素

l jQuery 的 action() 执行对元素的操作

文档就绪事件（页面加载事件）

1.

//文档就绪事件

2.

$(document).ready(function(){

3.

// 开始写 jQuery 代码...

4.

});

5.

6.

//简写

7.

$(function(){

8.

// 开始写 jQuery 代码...

9.

});

* 所有 jQuery 函数位于一个 document ready 函数中，这是为了防止文档在完全加载

（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果

在文档没有完全加载之前就运行函数，操作可能失败。