jQuery基础知识点总结(必看)
什么是jQuery？
jQuery是一个JavaScript库，它让HTML文档的遍历和操作，事件处理，动画和AJAX等操作更加简洁和方便。
jQuery的引入
在HTML文件中引入jQuery有两种方式，一种是通过CDN引入，另一种是下载jQuery文件并引入到HTML文件中。
CDN引入
在HTML文件中引入jQuery库文件的方式如下：
<script src="https://cdn.bootcss.com/jquery/3.6.0/jquery.min.js"></script>
下载并引入本地文件
首先需要去jQuery官网下载对应版本的jQuery库文件，然后将其引入HTML文件中如下：
<script src="jquery-3.6.0.min.js"></script>
jQuery语法
jQuery使用CSS选择器语法来选择HTML元素，并使用$()函数来定义jQuery对象。
选择器
使用jQuery的选择器来选取HTML元素：
$(selector).action();
例如，选取所有<p>元素：
$("p")
动作
jQuery中的动作定义了对选择的元素进行何种操作：
$(selector).action();
例如，隐藏所有的<p>元素：
$("p").hide();
事件处理
通过on()方法来为元素添加事件处理程序：
$(selector).on(event,handler);
例如，为按钮添加一个点击事件：
$("button").on("click", function(){
alert("Hello World!");
});
jQuery常用方法
DOM操作
text()方法：设置或返回选定元素的文本内容。html()方法：设置或返回选定元素的html内容。attr()方法：设置或返回元素的属性值。val()方法：设置或返回表单元素的值。css()方法：设置或返回样式属性值。append()方法：在选定元素的结尾插入新的内容。prepend()方法：在选定元素的开头插入新的内容。after()方法：在选定元素之后插入新的内容。before()方法：在选定元素之前插入新的内容。remove()方法：删除选定元素及其子元素。
事件操作
jQuery中常用的事件操作包括：
click()方法：单击元素时触发。dblclick()方法：双击元素时触发。mouseenter()方法：鼠标指针进入元素时触发。mouseleave()方法：鼠标指针离开元素时触发。keydown()方法：当按下键盘上的任意键时触发。keyup()方法：当释放键盘上的任意键时触发。
示例说明
示例一：切换元素的类名
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.6.0/jquery.min.js"></script>
<style>
.highlight {
background-color: yellow;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("highlight");
});
});
</script>
</head>
<body>
<h2 class="highlight">jQuery ToggleClass 切换类名</h2>
<p>CSS 选择器，使您可以为每个元素设置多个样式</p>
<p>toggleClass() 方法用于对被选元素进行添加/删除类切换操作</p>
<br>
<button>切换类名</button>
</body>
</html>
该示例展示了点击按钮时，切换<p>元素的类名，从而改变其背景色。
示例二：表单验证
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
var name = $("#name").val();
var email = $("#email").val();
if (name === "") {
alert("请输入姓名");
return false;
}
if (email === "") {
alert("请输入Email地址");
return false;
}
});
});
</script>
</head>
<body>
<h2>jQuery表单验证</h2>
<p>请填写以下信息：</p>
<form>
<label>姓名：</label><br>
<input type="text" id="name" name="name"><br>
<label>Email地址：</label><br>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="提交">
</form>
</body>
</html>
该示例展示了如何使用jQuery来实现表单验证功能，当姓名或Email地址为空时，返回错误提示并阻止表单提交。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery基础知识点总结(必看) - Python技术站
微信扫一扫 
支付宝扫一扫 