-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
小职
2021-11-12
来源 ：
阅读 1141
评论 0
摘要：本篇主要介绍了前端jQuery入门到精通--jquery 处理页面的事件详解，通过具体的内容展现，希望对web前端jQuery的学习有一定的帮助。
本篇主要介绍了前端jQuery入门到精通--jquery 处理页面的事件详解，通过具体的内容展现，希望对web前端jQuery的学习有一定的帮助。
jquery事件、修改页面内容
一、复合型事件属性
1、toggle() 多次单击事件(toggle(切换))
//多次循环执行单击事件 toggle(切换)
toggle(
function(){} ,
function(){} ,
function(){}
)
toggl多次循环实现案例：
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
$(function (){
$("#btn").toggle(
function (){
//第一次单击
alert("女王陛下！")
},
//第二次单击
function (){
alert("臣，退了！")
},
function (){
//第三次单击
alert("这一退就是永远！我就要去找其他小姐姐了！");
},
)
})
</script>
</head>
<body>
<input type="button" value="点击" id="btn">
</body>
</html>
示意图：
2、hover（）鼠标移入移出
hover(
function(鼠标移入){
},
function(鼠标移出){
}
);
(1)hover移入移出案例一：
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
$(function () {
//绑定复合型事件属性hover
$("tr").hover(
function () {
alert("鼠标进入");
},
function () {
alert("鼠标移出");
}
)
})
</script>
</head>
<body>
<center>
<h3>hover实现表格中tr的移入移出案列</h3>
</center>
<table border="1" width="50%" cellspacing="0px" cellpadding="0px">
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>薪资</td>
</tr>
</thead>
<tbody>
<tr>
<td>王恒杰</td>
<td>男</td>
<td>21</td>
<td>18000</td>
</tr>
<tr>
<td>杨福君</td>
<td>女</td>
<td>19</td>
<td>4200</td>
</tr>
<tr>
<td>吴洪旭</td>
<td>男</td>
<td>23</td>
<td>20000</td>
</tr>
<tr>
<td>邓正武</td>
<td>男</td>
<td>21</td>
<td>20000</td>
</tr>
</tbody>
</table>
</body>
</html>
效果图：
(2)hover移入移出案例二：鼠标移入表格加粗变红色
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style>
.c1{
background-color: red;
font-size: 20px;
font-weight: bold;
}
</style>
<script>
$(function () {
//绑定复合型事件属性hover
$("tr").hover(
function () {
$(this).addClass("c1")
},
function () {
$(this).removeClass("c1")
}
)
})
</script>
</head>
<body>
<center>
<h3>hover实现表格中tr的移入移出案列</h3>
</center>
<table border="1" width="50%" cellspacing="0px" cellpadding="0px">
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>薪资</td>
</tr>
</thead>
<tbody>
<tr>
<td>王恒杰</td>
<td>男</td>
<td>21</td>
<td>18000</td>
</tr>
<tr>
<td>杨福君</td>
<td>女</td>
<td>19</td>
<td>4200</td>
</tr>
<tr>
<td>吴洪旭</td>
<td>男</td>
<td>23</td>
<td>20000</td>
</tr>
<tr>
<td>邓正武</td>
<td>男</td>
<td>21</td>
<td>20000</td>
</tr>
</tbody>
</table>
</body>
</html>
效果图：
二、Jquery中常用的事件属性
规律：js中的事件属性去掉on 加上()
jqueryObj. click() 单击
jqueryObj. dbclick() 双击
jqueryObj. mouseover() 移入
jqueryObj. mouseout() 移出
jqueryObj. blur();失去焦点
jqueryObj.change();下拉列表值改变
jqueryObj.focus();获取焦点
jqueryObj.keyDown();键盘按下
jqueryObj.keyUp();键盘弹起
三、标签的其他方法 获取标签对象
1. jqueryObj.parent(); 获取当前标签的父类节点//parentNOdees
2. jqueryObj.children();获取当前标签的所有子类节点//chidrenNodes
3. jqueryObj.next(); 获取当前标签的下一个兄弟节点//nextsibling
4. jqueryObj.prev();获取当前标签元素的上一个兄弟节点//previoussibling
四、Jquery中的动画效果
实现页面元素隐藏或展示时的动画效果
1. show(单位：毫秒) 从浏览器的左上角渐入
2. fadeIn(单位：毫秒) 淡入
3. slideDown() 从上到下逐渐展开
4. hide() 元素隐藏
5. fadeOut() 淡出
6. slideUp() 从下到上逐渐收缩
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery实现动画效果</title>
<style>
#d{
background-color: red;
width: 100px;
height: 100px;
display: none;
</style>
<script type="text/jscript" src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
// 从浏览器左上角渐入
$("#show").click(function(){
$("#d").show(3000);
})
//元素隐藏
$("#hide").click(function(){
$("#d").hide(3000);
})
//淡入
$("#fadeIn").click(function(){
$("#d").fadeIn(3000);
})
//淡出
$("#fadeOut").click(function(){
$("#d").fadeOut(3000);
})
//从上到下展示
$("#slideDown").click(function(){
$("#d").slideDown(3000);
})
//从下到上收缩
$("#slideUp").click(function(){
$("#d").slideUp(3000);
})
});
</script>
</head>
<body>
<!--
1. show(单位：毫秒) 从浏览器的左上角渐入
2. fadeIn(单位：毫秒) 淡入
3. slideDown() 从上到下逐渐展开
4. hide() 元素隐藏
5. fadeOut() 淡出
6. slideUp() 从下到上逐渐收缩
-->
<div id="d"></div>
<input type="button" value="点击渐出" id="show" />
<input type="button" value="点击渐入" id="hide" />
<input type="button" value="淡入" id="fadeIn" />
<input type="button" value="淡出" id="fadeOut" />
<input type="button" value="从上到下展开" id="slideDown" />
<input type="button" value="从下到上收缩" id="slideUp" />
</body>
</html>
效果展示：
五、综合案例“全选”实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function (){
//事件源头：全选的复选框
//事件属性：click点击
//监听器：实现全选
$("#selectAll").click(function (){
//:checkbox 获取当前选中的单选按钮或者复选框
//:checkbox:gt(0) 获取当前复选框大于0的复选框
//prop修改标签的属性 标签对象.prop(“属性名”,”属性值”);
//proph获取标签的属性 标签对象.prop(“属性名”);
//checked:选中
//注意：在单选框和复选框中checked只要出现checked就是选中，不管他是否等于true还是false
$(":checkbox:gt(0)").prop("checked",$("#selectAll").prop("checked"));
});
})
</script>
</head>
<body>
全选：<input type="checkbox" id="selectAll"></br>
<input type="checkbox" name="likes" value="1">
<input type="checkbox" name="likes" value="2">
<input type="checkbox" name="likes" value="3">
<input type="checkbox" name="likes" value="4">
<input type="checkbox" name="likes" value="5">
<input type="checkbox" name="likes" value="6">
<input type="checkbox" name="likes" value="7">
<input type="checkbox" name="likes" value="8">
<input type="checkbox" name="likes" value="9">
<input type="checkbox" name="likes" value="10">
</body>
</html>
效果图：
注意：在单选框和复选框中checked只要出现checked就是选中，不管他是否等于true还是false
✅ 扫码免费获取基础课程·答疑解惑·职业测评
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
