jQuery快速入门-CSDN博客

本文链接：https://blog.csdn.net/Miracle_Yan/article/details/85044751

一，简介

jQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库（或 JavaScript 框架）。jQuery 设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。

二，引入jQuery

可以通过多种方法在网页中添加 jQuery。您可以使用以下方法：

从 jquery.com 下载 jQuery 库
从 CDN 中载入 jQuery 库

代码示例：

<!-- 引入下载好的本地 jQuery 库 -->
<script type="text/javascript" src="./js/jquery-1.11.0.js"></script>
<!-- 从 CDN 中载入 jQuery 库 -->
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.11.0/jquery.min.js"></script>

三，jQuery onload 事件

所有 jQuery 函数都需要位于 onload 事件中，这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。这样做的好处是，可以防止由于文档未完全加载，导致找不到指定的 HTML 元素报错。
代码示例：

<!DOCTYPE html>
<html>
<head>
	<title>Demo</title>
	<meta charset="utf-8">
	<!-- 引入下载好的本地 jQuery 库 -->
	<script type="text/javascript" src="./js/jquery-1.11.0.js"></script>
	<script type="text/javascript">
		// jQuery 编写 onload 事件
		jQuery(document).ready(function(){
			console.log("文档加载完成1");
		});
		// jQuery 关键字可以用 $ 替代
		$(document).ready(function(){
			console.log("文档加载完成2");
		});
		// jQuery 编写 onload 事件，简写方式
		$(function(){
			console.log("文档加载完成3");
		});
	</script>
</head>
<body>
	Hello!
</body>
</html>

运行效果：
onload

四，jQuery 语法

1，获取页面元素

语法：$(选择器) 返回匹配到元素的jQuery对象
代码示例：

// 获取 id 为 username 的元素
var $userName = $("#username");

2，获取获得内容

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

代码示例：

<tr>
	<td><strong>用户名：</strong></td>
	<td><input id="username" type="text" name="username" value="test"/></td>
</tr>
			
<script type="text/javascript">
		$(function(){
			// 获取页面中第一个文本输入框
			var $text = $("input[type='text']").first();
			console.log($text.text()); 	// 打印空值
			console.log($text.html()); 	// 打印空值
			console.log($text.val()); 	// 打印"test"
			// 获取页面中第一个 td 元素
			var $td = $("td").first();
			console.log($td.text()); 	// 打印"用户名："
			console.log($td.html()); 	// 打印"<strong>用户名：</strong>"
			console.log($td.val()); 	// 打印空值
		});
</script>

3，元素的属性和CSS样式

jQuery 提供了丰富的方法来操作元素的属性和 CSS 样式
代码示例：

<script type="text/javascript">
		$(function(){
			// 获取页面中第一个文本输入框
			var $text = $("input[type='text']").first();
			// 获取元素的属性值
			console.log($text.attr("value"));
			// 修改元素的属性值
			$text.attr("value", "test01");
			console.log($text.attr("value"));
			// 修改元素的 CSS 样式
			$text.css("color", "red");
		});
</script>

4，jQuery 对象和 JavaScript 对象互相转化

jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的，其可以使用 jQuery 里的方法，但是不能使用 DOM 的方法；例如： $("#img").attr(“src”,“test.jpg”); 这里的 $("#img")就是 jQuery 对象。

JavaScript 对象能使用 JavaScript 固有的方法，但是不能使用 jQuery 里的方法。例如：document.getElementById(“img”).src = “test.jpg"；这里的document.getElementById(“img”) 就是 JavaScript 对象。

代码示例：

<script type="text/javascript">
		$(function(){
			// 将 JavaScript 对象 td 转换成 jQuery 对象 $td
			var td = document.getElementsByTagName("td");
			console.log(td);
			var $td = $(td);
			console.log($td);
			// 将 jQuery 对象 $td 转换成 JavaScript 对象 td
			td = $td[0];
			console.log(td);
		});
</script>