目录
1.简述
jQuery是一个快速、简洁的JavaSrcipt框架。是一款免费的开放源代码的轻量级JavaScript代码库。
2.环境配置
jQuery库不需要安装,将库文件复制到站点中的某个文件夹即可。
<head>
<meta charset="utf-8" />
<title>jQuery的引入</title>
<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
</head>
3.jQuery的使用
jQuery程序中的函数,以“$”起始,$()等效于jQuery(),称为jQuery工厂函数。
$(function()){
页面加载事件
}
jQuery(function){
页面加载事件
};
jQuery语法
jQuery语法是通过选取HTML元素,并对选取的元素进行某些操作
基础语法:
$(selector).action()
- $ : 定义jQuery
- (selector) :查询和查找HTML元素
- action() :执行对元素的操作
实例:
-
$("p").hide():隐藏所有 <p> 元素
-
$("p.test").hide():隐藏所有 class="test" 的 <p> 元素
-
$("#test").hide():隐藏所有 id="test" 的元素
文档就绪事件
如果文档没有完全加载之前就运行函数,操作可能失败。(隐藏一个不存在的元素等)
使用文档就绪事件,防止文档在完全加载之前就运行jQuery代码
$(document).ready():是整个jQuery运行的核心
语法:
$(document).ready(function){
代码块
});
$(function(){
代码块
});
两种写法一致,第二种是第一种的简写方式。
元素选择器:
元素选择器基于元素名选取元素。
$(function(){
$("button").click(function(){
$("p").hide()
})
});
当点击 <button> 时,所有的 <p> 元素会隐藏
#id 选择器
#id 选择器通过HTML的元素中的id属性选取指定元素,由于id的唯一性,所以用#id选择器选取唯一元素
$(function(){
$("button").click(function(){
$("#test").hide()
})
});
当点击 <button> 时,id="test" 的元素会被隐藏
.class 选择器
通过指定的class查找元素
$(function(){
$("button").click(function(){
$(".test").hide()
})
});
点击 <button> 时,所有 class="test" 的元素会被隐藏
语法 | 描述 |
---|---|
$("*") | 选取所有元素 |
$(this) | 选取当前 HTML 元素 |
$("p.className") | 选取 class 为 className 的 <p> 元素 |
$(":button") | 选取所有 type="button" 的 <input> 元素 和 <button> 元素 |
jQuery事件
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
基本语法:
$("p").click(function(){
//动作触发后执行的代码块
});
常见事件:
1.鼠标事件
click事件:
当鼠标点击触发后调用函数
$(function(){
$("#test").click(function(){
alert(123);
});
})
当点击 id="test" 元素时触发弹窗
dblclick事件:
当鼠标双击触发后调用函数
$(function(){
$("#test").dblclick(function(){
alert(123);
});
})
双击 id="test" 元素时触发弹窗
hover事件:
鼠标悬停时触发后调用函数
$(function(){
$("#test").hover(function(){
alert(123);
},
function(){
alert(321);
});
})
当鼠标移动到 id="test" 元素上时触发第一个function函数,移出后触发第二个function函数
2.表单事件:
focus事件:
元素获得焦点时触发
$(function(){
$("#test").focus(function(){
alert(123);
});
})
当 id="test" 的元素获得焦点后触发弹窗
focus事件与click事件的区别:
- focus事件不局限与使用鼠标点击,还包括使用键盘使元素获取焦点,常用于获得焦点后改变样式
- click事件仅当用户点击元素时触发,常用于表单提交等
biur事件:
当元素失去焦点后触发
$(function(){
$("#test").blur(function(){
alert(123);
});
})
当 id=“test” 的元素失去焦点后触发弹窗