前言

本章将进入全新的章节学习，在这里我们将学习JS的“轮子”JQuery。

方法

1.概念

相信大家经过前面的JS学习，在原生的JS中操作html元素如通过id获取html对象是document.getElementById("id")来进行获取，在JQuery库中，我们只需要简单的$("#id")即可，是不是很爽！

各大网站对JQuery的定义如下：

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

读到这里大家可以松口气，因为它真的简单且简化了我们的编程，在我们不知道如何造轮子的时候最好学会用轮子！JQuery实际上也是JS它将底层的JS功能进行了封装以供我们使用！web程序几乎都用JQuery来操作html元素对象以及进行js编程！！！抛弃以前的纯JS吧！（这里不是让大家忘记，该会还是要会，博主之前还遇到过纯JS写的html网页，所以还要懂的！）

2.JQuery库的下载和引入

官方网址：https://jquery.com/，大家下载最新的版本即可！

下载压缩版就行了，节省空间！

新建一个js文件，将得到的代码复制到其中即可。我命名为jquery-3.3.1.min.js

将该js文件引入我们的项目中，一般放入js文件夹下：

在html中引入该js文件如下：

<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

3.第一个JQuery程序

范例：使用JQuery为一个text文本框赋值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JQuery</title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//使用JQuery为用户名文本框赋值
				$("#username").val("张三");
			});
		</script>
	</head>
	<body>
		<div style="background-color: blueviolet;">
			<form action="#" method="post" id="ff">
				<h5>注册信息</h5>
				用户名：<input type="text" name="username" id="username" value=""/><span id="usernameSpan"></span><br/>
				性&nbsp;&nbsp;&nbsp;&nbsp;别：<input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女<span></span><br/>
				爱&nbsp;&nbsp;&nbsp;&nbsp;好:<input type="checkbox" name="hobby" value="足球" />足球<input type="checkbox" name="hobby" value="游泳"/>游泳
				<input type="checkbox" name="hobby" value="棋牌" />棋牌<span></span><br/>
				毕业院校：<select name="school" id="school">
							<option value="--请选择--">--请选择--</option>
							<option value="清华大学">清华大学</option>
							<option value="北京大学">北京大学</option>
							<option value="挖掘机技术学院">挖掘机技术学院</option>
						</select><span></span><br/>
				个人简介：<textarea rows="3" cols="20" name="introduce" id="introduce"></textarea><span></span><br/>
				<input type="button" value="提交" onclick="sub();"/>&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" name="" id="" value="重置" />
			</form>
		</div>
	</body>
</html>

这样，你就写出了你的第一个JQuery代码！大家可以不用理解$()的含义，后面会做相应的介绍！

不过，你可以发现这种方式获取和CSS的选择器很像！

JQuery入门（一）JQuery初体验

前言

方法

猜你喜欢