本文介绍了JQuery中的事件冒泡及阻止方法、事件委托的概念与应用、元素节点操作技巧，并通过实例展示了表单验证的过程。
继续JQuery的学习，今天学习了JQuery事件冒泡，事件委托，元素节点操作，JavaScript中的正则表达式以及一个表单验证的实例。
事件冒泡
- 子元素的事件被触发之后，会向上级传导，一级一级触发父级，爷爷级元素的事件，像冒泡泡一样
- 阻止事件冒泡的方法
- event.stopPropagation
- return false
- 事件冒泡的作用
- 允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子集元素上）
- 在对象层的不同级别捕获事件
<style>
.grandpa{
width: 300px;
height: 300px;
background-color: aqua;
}
.parent{
width: 200px;
height: 200px;
background-color: blue;
}
.son{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script src="../代码/js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('.son').click(function(event){
console.log("儿子元素的点击事件被触发了");
// return false; // 父级元素和爷爷级元素的事件都不会被触发
})
$('.parent').click(function(event){
console.log('爸爸元素的点击事件被触发了');
// 阻止事件冒泡
// 方法一，使用event对象的stopPropagation()方法
// event.stopPropagation();
// 方法二:使用return false
return false;
})
$('.grandpa').click(function(){
console.log('爷爷的点击事件被触发了');
})
})
</script>
</head>
<body>
<div class="grandpa"> 我是爷爷元素
<div class="parent"> 我是爸爸元素
<div class="son">我是儿子元素</div>
</div>
</div>
</body> - return false除了可以阻止事件冒泡，还可以阻止默认的行为，如，阻止表单的点击submit按钮就会提交表单内容的默认操作
小练习_页面弹框
*样式文件代码省略。。。
<script src="./js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btn01').click(function () {
// 显示弹框
$("#pop").show();
console.log('show');
// 阻止事件冒泡
return false;
})
$(document).click(function () {
// 点击文档任何区域都隐藏
$("#pop").hide();
console.log('hide');
})
$('.pop_con').click(function () {
// 点击弹出框 阻止传递
return false;
})
$('#shutoff').click(function () {
// 点击×号 弹框消失
$("#pop").hide();
})
})
</script>
</head>
<body class="body">
<input type="button" value="弹出弹框" id="btn01">
<div class="pop_main" id="pop">
<div class="pop_con">
<div class="pop_title">
<h3>系统提示</h3>
<a href="#" id="shutoff">×</a>
</div>
<div class="pop_detail">
<p class="pop_text">亲！请关注近期的优惠活动！</p>
</div>
<div class="pop_footer">
</div>
</div>
<div class="mask"></div>
</div>
</body>
事件委托
概念
- 委托：我把卖房子这件事委托给中介
- 在js中，委托是指，利用事件冒泡的原理，子级元素将自己的事件委托给父级元素，由父级执行响应的操作
- Q:为什么要委托给父级，自己可以处理的呀？
- A:委托的好处有两条：
- 1.可以减少事件绑定次数，提高性能
- 2.可以让新加入的子元素也可以拥有相同的操作（直接绑定就不可以，需要重新绑定）
用法
- 一般的绑定事件
...
$(function(){
$ali = $('#list li');
$ali.click(function(){
$(this).css({color:'red'});
});
})
...
<ul id ='list'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
...- 事件委托的写法
...
$(function(){
// 作用1：值绑定一次点击事件，提高资源利用率
//参数1：要委托的子元素 参数2：要委托的事件 参数3：触发事件执行的方法
$('.ul').delegate('li', 'click', function(){
// 打印当前点击元素的值
var val = $(this).val();
console.log(val);
})
// 给ul列表添加一个值为6的li
// 可以直接被关联点击事件
// 作用2：新添加的子元素可以直接被绑定事件（一般的事件绑定不可以，需要重新绑定事件）
$('.ul').append('<li value="6">6</li>');
...
<ul class="ul">
<li value="1">1</li>
<li value="2">2</li>
<li value="3">3</li>
<li value="4">4</li>
<li value="5">5</li>
</ul>
...练习_toDoList
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style type="text/css">
.list_con {
width: 600px;
margin: 50px auto 0;
}
.inputtxt {
width: 550px;
height: 30px;
border: 1px solid #ccc;
padding: 0px;
text-indent: 10px;
}
.inputbtn {
width: 40px;
height: 32px;
padding: 0px;
border: 1px solid #ccc;
}
.list {
margin: 0;
padding: 0;
list-style: none;
margin-top: 20px;
}
.list li {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
.list li span {
float: left;
}
.list li a {
float: right;
text-decoration: none;
margin: 0 10px;
}
</style>
<script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// 给btn1按钮关联事件
$('#btn1').click(function(event){
// 获取用户输入的信息
var input = $('.inputtxt').val();
// 判断用户输入是否为空
if (input){
// 给列表增加一个元素
$('.list').append('<li><span>'+input+'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a><a href="javascript:;" class="edit">编辑</a></li>')
}else{
alert('输入不能为空');
}
// 清空输入框
$('.inputtxt').val('');
})
// 给每一个a标签关联事件
$('.list').delegate('a', 'click', function(){
// 判断点击的是哪种标签
var className = $(this).prop('class');
console.log(className);
// 不同的标签分别处理
switch(className){
// 向下移动
case 'down':
// 获取点击元素下面的一个元素
var $after = $(this).parent().next();
// 判断是否已经移动到最底部
if ($after.length!=0){
// 将当前元素移动到下一个元素的后面
$after.after($(this).parent());
}else{
// 提示已经移动到了最下方
alert('已经移动到了最下方');
};
break;
// 向上移动
case 'up':
// 获取点击元素的上一条元素
var $before = $(this).parent().prev();
// 判断是否移到了最上方
if ($before.length!=0){
// 将当前元素移动到上一个元素的上方
$before.before($(this).parent());
}else{
// 提示已经移动到了最上方
alert('已经移动到了最上方');
}
break;
// 删除元素
case 'del':
// 获取当前元素并且删除
$(this).parent().remove();
break;
// 编辑内容
case 'edit':
//
break;
default:
break;
}
})
})
</script>
</head>
<body>
<div class="list_con">
<h2>To do list</h2>
<input type="text" name="" id="txt1" class="inputtxt">
<input type="button" name="" value="增加" id="btn1" class="inputbtn">
<ul id="list" class="list">
<li>
<span>学习html</span>
<a href="javascript:;" class="up"> ↑ </a>
<a href="javascript:;" class="down"> ↓ </a>
<a href="javascript:;" class="del">删除</a>
<a href="javascript:;" class="edit">编辑</a>
</li>
<li>
<span>学习css</span>
<a href="javascript:;" class="up"> ↑ </a>
<a href="javascript:;" class="down"> ↓ </a>
<a href="javascript:;" class="del">删除</a>
<a href="javascript:;" class="edit">编辑</a>
</li>
<li>
<span>学习javascript</span>
<a href="javascript:;" class="up"> ↑ </a>
<a href="javascript:;" class="down"> ↓ </a>
<a href="javascript:;" class="del">删除</a>
<a href="javascript:;" class="edit">编辑</a>
</li>
</ul>
</div>
</body>
</html>
元素节点操作
- 指在js语句中对html文件中的标签在相应节点进行增删操作
- 有两种使用场景
- 移动现有标签的位置
- 将新创建的标签插到现有标签中
- 创建新标签
var $div = $('<div>');//创建一个空的div
var $div2 = $('<div>这是一个div元素</div>')；
移动或者插入标签的方法
- append()和appendTO():在当前元素的内部，添加元素到最后
- prepend()和prependTO():在当前元素的内部，添加元素到开首
- after()和insertAfter(): 在当前元素的后面插入元素
- before()和insertBefore():在当前元素的前面插入元素
删除元素
- remove()
在元素内添加移动元素
......
$(function(){
// 创建一个空的div对象
var $div = $('<div>');
// 创建一个有内容的div对象
var $div1 = $('<div>4444</div>')
// 在div_con元素的子元素的最后面添加一个元素
// $div1.appendTo($('.div_con'));
$('.div_con').append($div1);
// 在div_con元素的子元素的最前面添加一个元素
var $div2 = $('<div>0000</div>');
// $div2.prependTo($('.div_con'));
$('.div_con').prepend($div2);
// 将div_con元素的子元素的最前面的元素移动到最后
$('.div_con').append($div2);
})
......
<div class="div_con">
<div class="div1">1111</div>
<div class="div2">2222</div>
<div class="div3">3333</div>
</div>在元素前后添加元素，移动元素，删除元素
......
$(function(){
// 在元素div1 的前面添加一个元素
var $div0 = $('<div>0000</div>');
// $div0.insertBefore($('.div1'));
$('.div1').before($div0);
// 在元素div3 的后面添加一个元素
var $div4 = $('<div>4444</div>');
// $div4.insertAfter($('.div3'));
$('.div3').after($div4);
// 将第一次添加的元素移动到div的后面
$('.div2').after($div0);
// 删除前面三个元素
$('.div1').remove();
$('.div2').remove();
$($div0).remove();
})
......
<div class="div1">1111</div>
<div class="div2">2222</div>
<div class="div3">3333</div>
......- 需要委托的元素必须是接受委托的元素的子元素
- 可同时委托多个事件，中间用空格隔开
正则表达式
- 用来匹配字符串中想要的部分的符号串
- 写法：
var re = new RegExp('规则'，‘可选参数’)；
var re = /规则/参数 ； 规则符号的意义
常用正则规则
//用户名验证：(数字字母或下划线6到20位)
var reUser = /^\w{6,20}$/;
//邮箱验证：
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
//密码验证：
var rePass = /^[\w!@#$%^&*]{6,20}$/;
//手机号码验证：
var rePhone = /^1[34578]\d{9}$/;
表单验证实例
表单验证实例.png
//html文件和CSS文件省略。。。。。。
$(function () {
// 用一些布尔变量 存放每一个的判断结果
var error_username = true;
var error_psw = true;
var error_rpsw = true;
var error_email = true;
var error_allow = false;
//用户名验证：(数字字母或下划线6到20位)
var reUser = /^\w{6,20}$/;
//邮箱验证：
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
//密码验证：
var rePass = /^[\w!@#$%^&*()]{6,20}$/;
var $user_name = $("#user_name");//用户名
var $psw = $("#psw");//密码
var $rpsw = $("#rpsw");//重复密码
var $email = $("#email");//邮箱
var $allow = $("#allow");//同意协议
// 失去焦点的时候做验证
$user_name.blur(function () {
// 做验证用户名
checkUsername();
}).focus(function () {
// 获取焦点后把提示的标签隐藏
$user_name.next().hide();
})
function checkUsername() {
// 获取所有的用户名
var username = $user_name.val();
// 获取提示的标签
var $spantip = $user_name.next();
// 验证是否为空
if (username == '') {
$spantip.html('用户名不能为空').show();
error_username = true;
return;
}
if (reUser.test(username)) {
// 验证成功
error_username = false;
} else {
error_username = true;
$spantip.html('用户名是数字字母或下划线6到20位').show();
}
}
// 失去焦点的时候做验证
$psw.blur(function () {
// 做验证密码
checkPsw();
}).focus(function () {
// 获取焦点后把提示的标签隐藏
$psw.next().hide();
})
function checkPsw() {
// 获取所有的用户名
var psw = $psw.val();
// 获取提示的标签
var $spantip = $psw.next();
// 验证是否为空
if (psw == '') {
error_psw = true;
$spantip.html('密码不能为空').show();
return;
}
if (rePass.test(psw)) {
// 验证成功
error_psw = false;
} else {
error_psw = true;
$spantip.html('密码是数字字母下划线和!@#$%^&*()').show();
}
}
// 失去焦点的时候做验证
$rpsw.blur(function () {
// 做验证重复密码
checkRPsw();
}).focus(function () {
// 获取焦点后把提示的标签隐藏
$rpsw.next().hide();
})
// 验证重复密码
function checkRPsw() {
// 获取密码
var psw = $psw.val();
// 获取重复的密码
var rpsw = $rpsw.val();
var $tip = $rpsw.next();
// 判断是否相同
if (psw == rpsw) {
error_rpsw = false;
} else {
error_rpsw = true;
$tip.html('两次密码不一致').show();
}
}
// 失去焦点的时候做验证
$email.blur(function () {
// 做验证邮箱
checkEmail();
}).focus(function () {
// 获取焦点后把提示的标签隐藏
$email.next().hide();
})
function checkEmail() {
// 获取所有的用户名
var email = $email.val();
// 获取提示的标签
var $tip = $email.next();
// 验证是否为空
if (email == '') {
error_email = true;
$tip.html('邮箱不能为空').show();
return;
}
if (reMail.test(email)) {
// 验证成功
error_email = false;
} else {
error_email = true;
$tip.html('邮箱格式不对').show();
}
}
$allow.click(function () {
// 获取checkbox的选中状态
var isChecked = $(this).prop('checked');
// var isChecked = $(this).is(':checked')
$tip = $(this).nextAll('span');
if (isChecked) {
// 如果选中 提示隐藏
$tip.hide();
error_allow = false;
} else {
error_allow = true;
$tip.html('必须勾选').show();
}
})
// 表单的提交事件
$('.form1').submit(function () {
// 全部验证一遍
checkUsername();
checkPsw();
checkRPsw();
checkEmail();
// and &&
if (!error_username && !error_psw && !error_rpsw && !error_email && !error_allow) {
// 没问题
alert('提交了呵呵')
} else {
return false;
}
})
})
扫一扫
4297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
