jQuery进阶
1. 元素显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background: gold;
display: none;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $btn = $('#btn');
var $div = $('.box');
$btn.click(function(){
// 将元素隐藏
// $div.hide();
// 将元素显示
// $div.show();
// 切换显示和隐藏
$div.toggle();
});
})
</script>
</head>
<body>
<input type="button" value="显示和隐藏" id="btn">
<div class="box"></div>
</body>
</html>
2. 操作元素的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red{
color: red;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $a = $('#link01');
var $div = $('#div01');
// 读取标签的属性值
var sId = $a.prop('id');
// console.log(sId);
// 写属性值, 设置属性值
$a.prop({'href':'http://www.baidu.com', 'title':'这是去到百度的链接', 'class':'red'});
// 操作标签包裹的内容
// 读取标签包裹的内容
var sTr = $div.html();
// alert(sTr);
// 修改标签包裹的内容
$div.html('<a href="http://www.itcast.cn">传智播客</a>');
$div.html('<ul><li>列表文字</li><li>列表文字</li><li>列表文字</li></ul>');
})
</script>
</head>
<body>
<a href="#" id="link01">这是一个链接</a>
<div id="div01">
<p>这是div01里面的p标签</p>
</div>
</body>
</html>
3. jQuery实现聊天效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.talk_con{
width:600px;
height:500px;
border:1px solid #666;
margin:50px auto 0;
background:#f9f9f9;
}
.talk_show{
width:580px;
height:420px;
border:1px solid #666;
background:#fff;
margin:10px auto 0;
overflow:auto;
}
.talk_input{
width:580px;
margin:10px auto 0;
}
.whotalk{
width:80px;
height:30px;
float:left;
outline:none;
}
.talk_word{
width:420px;
height:26px;
padding:0px;
float:left;
margin-left:10px;
outline:none;
text-indent:10px;
}
.talk_sub{
width:56px;
height:30px;
float:left;
margin-left:10px;
}
.atalk{
margin:10px;
}
.atalk span{
display:inline-block;
background:#0181cc;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
.btalk{
margin:10px;
text-align:right;
}
.btalk span{
display:inline-block;
background:#ef8201;
border-radius:10px;
color:#fff;
padding:5px 10px;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// 写出对应功能代码
$(function(){
var $words = $('#words');
var $who = $('#who');
var $talk = $('#talkwords');
var $btn = $('#talksub');
// 给按钮绑定click事件
$btn.click(function(){
// 获取下拉框的value属性值
// var sVal01 = $who.prop('value');
// 获取输入框的value属性值
// var sVal02 = $talk.prop('value');
// 输入完毕后清空输入框里面的内容
// $talk.prop('value', "");
// 上面操作value属性可以简化成用val()方法的形式
var sVal01 = $who.val();
var sVal02 = $talk.val();
$talk.val("");
if(sVal02 == ""){
alert("输入框为空，请输入内容后发送！");
return;
}
var sTr = "";
if(sVal01 == 0){
// A说
sTr = '<div class="atalk"><span>A说：'+sVal02+'</span></div>';
$words.html($words.html()+sTr);
}else{
// B说
sTr = '<div class="btalk"><span>B说：'+sVal02+'</span></div>';
$words.html($words.html()+sTr);
}
});
})
</script>
</head>
<body>
<div class="talk_con">
<div class="talk_show" id="words">
<div class="atalk"><span>A说：吃饭了吗？</span></div>
<div class="btalk"><span>B说：还没呢，你呢？</span></div>
</div>
<div class="talk_input">
<select class="whotalk" id="who">
<option value="0">A说：</option>
<option value="1">B说：</option>
</select>
<input type="text" class="talk_word" id="talkwords">
<input type="button" value="发送" class="talk_sub" id="talksub">
</div>
</div>
</body>
</html>
4. jQuery事件
blur() 元素失去焦点
focus() 元素获得焦点
change() 当表单元素的值发生改变时
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
ready() DOM加载完成
submit() 用户递交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $input = $('#input01');
var $form = $('#form01');
// 绑定失去焦点的事件
// $input.blur(function(){
// // alert($input.val());
// alert($(this).val());
// });
$form.submit(function(){
// 阻止表单提交
// 如果发现输入的内容不合法，就阻止表单提交
// 此时点击提交不会修改url
return false;
});
})
</script>
</head>
<body>
<form id="form01">
<label>用户名：</label>
<input type="text" id="input01" name="username">
<input type="submit" value="提交">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $input = $('#input01');
var $form = $('#form01');
// 绑定获得焦点的事件
// 绑定focus事件，会反复触发，一般不这么用，一般用click事件代替
// $input.focus(function(){
// alert($(this).val());
// });
// focus一般用在让输入框一开始就获得焦点
// 也就是说光标直接就放在表单上了，可以直接进行操作
$input.focus();
// 绑定change事件
// 修改完失去焦点才触发这个事件
$input.change(function(){
alert($(this).val());
});
})
</script>
</head>
<body>
<form id="form01">
<label>用户名：</label>
<input type="text" id="input01" name="username">
<input type="submit" value="提交">
</form>
</body>
</html>
- 鼠标移入移出事件
- 尽量使用mouseenter()和mouseleave()，不管有没有子元素都不会出问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background: gold;
margin: 50px auto;
}
.box2{
width: 100px;
height: 100px;
background: green;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('.box');
// 绑定鼠标移入事件
// $div.mouseover(function(){
// // animate会在变化时有一个过程，显示成一个动画
// $(this).animate({'margin-top':100});
// });
// // 绑定鼠标移出事件
// $div.mouseout(function(){
// $(this).animate({'margin-top':50});
// });
// 主子冒泡问题，下面的函数不会往上传
// 鼠标移入事件，进入子元素不触发
$div.mouseenter(function(){
// animate会在变化时有一个过程，显示成一个动画
$(this).animate({'margin-top':100});
});
// 绑定鼠标移出事件，进入子元素不触发
$div.mouseleave(function(){
$(this).animate({'margin-top':50});
});
})
</script>
</head>
<body>
<div class="box">
<div class="box2"></div>
</div>
</body>
</html>
5. jQuery使用正则表达式 – 表单验证
常用正则规则
//用户名验证：(数字字母或下划线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}$/;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
// 定义正则表达式
var reTest01 = /a/;
var reTest02 = /a/i; // i表示忽略大小写
var reTest03 = /\d+/;
var reTest04 = /^\d+$/; // 限制开头和结尾都是数字
var sTr01 = 'abcd';
var sTr02 = 'ABCD';
var sTr03 = '123456';
var sTr04 = '123456abcde';
// 使用正则表达式来验证字符串
// test是懒惰匹配，只要有匹配就成功
// alert(reTest01.test(sTr01)); // true
// alert(reTest01.test(sTr02)); // false
// alert(reTest02.test(sTr01)); // true
// alert(reTest02.test(sTr02)); // true
// alert(reTest03.test(sTr03)); // true
// alert(reTest03.test(sTr04)); // true
alert(reTest04.test(sTr03)); // true
alert(reTest04.test(sTr04)); // false
</script>
</head>
<body>
</body>
</html>
92
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
