接上一个文章
jquery在线手册|jQuery API中文手册|jQuery速查表|jQuery参考手册|jQuery API|jQuery在线文档|jQuery最新手册 (jq22.com)
一个简单的按键调用jQuery函数实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
<script type="text/javascript" src="script/jquery.1.7.2.js"></script>
<script type="text/javascript">
// window.onload = function (){
// var btnObj = document.getElementById("btn01");
// btnObj.onclick = function (){
// alert("js原生按钮")
// }
// }
$(function (){ //表示页面加载完成之后，相当于Windows。onload = function（）{}
var $btnObj = $("#btn01"); //表示按id查询标签对象
$btnObj.click(function (){ //绑定单击事件
alert("jQuery 的单击事件");
});
});
</script>
</head>
<body>
<button id="btn01">按钮</button>
</body>
</html>使用jQuery前一定要先引入jQuery库
<script type="text/javascript" src="script/jquery.1.7.2.js"></script>怎么为按钮添加点击响应函数？
1、使用jQuery查询到标签对象
2、使用标签对象.click(function(){});
$ 是jQuery的核心函数，能完成jQuery的很多功能、$（）就是调用$这个函数
1、传入参数为【函数】时
表示页面加载完成之后，相当于window.onload = function(){}
<script type="text/javascript" src="script/jquery.1.7.2.js"></script>
<script type="text/javascript">
$(function () { //表示页面加载完成之后，相当于Windows。onload = function（）{}
alert("页面加载完成之后，自动调用");
});
</script>2、传入参数为【HTML字符串】时
会创建这个HTML对象
<script type="text/javascript" src="script/jquery.1.7.2.js"></script>
<script type="text/javascript">
$(function () { //表示页面加载完成之后，相当于Windows。onload = function（）{}
$("<div>" +
" <span>div1</span>" +
" <span>div2</span>" +
"</div>").appendTo("body");
});
</script>
3、传入参数为【选择器字符】时
$("#id属性值")； id选择器，根据id查询标签对象
$("标签名"); 标签名选择器，根据指定的标签名查询标签对象
$(".calss属性值"); 类选择器，可以根据class属性查询标签对象
4、传入参数为【DOM对象】时
会把这个dom对象转换为jQuery对象
基本选择器（重点）
jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery.1.7.2.js"></script>
<script type="text/javascript">
$(function (){
//1、选择id为one的元素“background-color”,"#bbffaa"
$("#btn1").click(function (){
//css()方法可以设置和获取样式
$("#one").css("background-color","#bbffaa")
});
//2、选择class为mini的所有元素
$("#btn2").click(function (){
$(".mini").css("background-color","#bbffaa")
});
//3、选择元素名为div的所有元素
$("#btn3").click(function (){
$("div").css("background-color","#bbffaa")
});
//4、选择所有的元素
$("#btn4").click(function (){
$("*").css("background-color","#bbffaa")
});
//5、选择所有的span元素和id为two的元素
$("#btn5").click(function (){
$("span,#two").css("background-color","#bbffaa")
});
});
</script>
</head>
<body>
<input type="button" value="选择 id 为one的元素" id="btn1">
<input type="button" value="选择 class 为mini的所有元素" id="btn2">
<input type="button" value="选择 元素名是div的所有元素" id="btn3">
<input type="button" value="选择 所有元素" id="btn4">
<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5">
<br>
<div class="one" id="one">
id为one，class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two，class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div class="none" style="display: none">style的display为“none”的div</div>
<div class="hide">class为“hide”的div</div>
<div>
包含input的type为“hidden”的div<input type="hidden" size="8">
</div>
<span class="one" id="span">^^span元素^^</span>
</body>
</html>层级选择器（重点）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery.1.7.2.js"></script>
<script type="text/javascript">
$(function (){
//1、选择body内的所有div元素
$("#btn1").click(function (){
//css()方法可以设置和获取样式
$("body div").css("background-color","#bbffaa")
});
//2、在body内，选择div子元素
$("#btn2").click(function (){
$("body > div").css("background-color","#bbffaa")
});
//3、选择 id为one的下一个div元素
$("#btn3").click(function (){
$("#one + div").css("background-color","#bbffaa")
});
//4、选择id为two的元素后面的所有div兄弟元素
$("#btn4").click(function (){
$("#two ~ div").css("background-color","#bbffaa")
});
});
</script>
</head>
<body>
<input type="button" value="选择body内的所有div元素" id="btn1">
<input type="button" value="在body内，选择div子元素" id="btn2">
<input type="button" value="选择 id为one的下一个div元素" id="btn3">
<input type="button" value="选择 选择id为two的元素后面的所有div兄弟元素" id="btn4">
<br>
<div class="one" id="one">
id为one，class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two，class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div class="none" style="display: none">style的display为“none”的div</div>
<div class="hide">class为“hide”的div</div>
<div>
包含input的type为“hidden”的div<input type="hidden" size="8">
</div>
<span class="one" id="span">^^span元素^^</span>
</body>
</html>过滤选择器
标签前置
:first 获取第一个元素
:last 获取最后一个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从0开始计数
:odd 匹配所有索引值奇数的元素，从0开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 选择所有的标题元素
:animated 选择当前正在执行动画的所有元素
:focus 匹配当前获取焦点的元素。
内容选择器
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配含有选择器所匹配的元素的元素
:parent 匹配含有子元素或者文本的元素
属性过滤
表单过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../script/jquery.1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//1.对表单内 可用input赋值操作
$("#btn1").click(function(){
//val()可以操作表单项的value属性值
//他可以设置和获取
$(":text:enabled").val("我是大帅哥")
});
//2. 对表单内 不可以用input 赋值操作
$("#btn2").click(function (){
$(":text:disabled").val("我是大帅哥")
});
//3.获取多选框选中的个数 使用size()方法获取选取到的元素集合的元素个数
$("#btn3").click(function (){
$(":checkbox:checked")
});
//4.获取多选框，每个选中的value值
$("#btn4").click(function (){
//获取全部选中的复选框标签对象
var $checkboies = $(":checkbox:checked");
//老式遍历
// for (var i = 0;i<$checkboies.length;i++){
// alert($checkboies[i].value);
// }
//each方法是jQuery对象提供用来遍历元素的方法
//在遍历的function函数中，有一个this对象，这个this对象，就是当前遍历到的dom对象
$checkboies.each(function (){
alert(this.value);
})
});
//5. 获取下拉框选中的内容
$("#btn5").click(function (){
//获取选中的option标签对象
var $checkboies = $("select option:checked")
//遍历，获取option标签中的文本内容
$checkboies.each(function (){
alert(this.innerHTML)
})
});
})
</script>
</head>
<body>
<h3>表单对象属性过滤选择器</h3>
<button id="btn1">对表单内 可用input赋值操作</button>
<button id="btn2">对表单内 不可以用input 赋值操作</button><br><br>
<button id="btn3">获取多选框选中的个数</button>
<button id="btn4">获取多选框，每个选中的value值</button><br><br>
<button id="btn5">获取下拉框选中的内容</button><br><br>
<form id="form1" action="#">
可用元素：<input name="add" value="可用文本框1"><br>
可用元素：<input name="email" disabled="disabled" value="不可用文本框1"><br>
可用元素：<input name="che" value="可用文本框2"><br>
可用元素：<input name="add" disabled="disabled" value="不可用文本框1"><br>
<br>
多选框：<br>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<br><br>
下拉列表1：<br>
<select name="test" multiple="multiple" style="..." id="sele1">
<option value="">浙江</option>
<option value="">辽宁</option>
<option value="" selected="selected">北京</option>
<option value="">天津</option>
<option value="" selected="selected">广州</option>
<option value="">湖北</option>
</select>
<br><br>
下拉列表2：<br>
<select name="test2">
<option value="">浙江</option>
<option value="">辽宁</option>
<option value="" selected="selected">北京</option>
<option value="">天津</option>
<option value="">广州</option>
<option value="">湖北</option>
</select>
</form>
</body>
</html>过滤
属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性</title>
<script type="text/javascript" src="../script/jquery.1.7.2.js"></script>
<script type="text/javascript">
$(function (){
//不传参数，是获取，传递参数是设置
// alert($("div").html());//获取
// $("div").html("<h1>我是div中的标题</h1>")//设置
// alert($("div").text());//设置
// $("div").text("<h1>我是div中的标题</h1>")//设置
$("button").click(function (){
alert($("#username").val());//获取
$("#username").val("超级6");//设置
});
})
</script>
</head>
<body>
<div>我是div标签 <span>我是div中的span</span></div>
<input type="text" name="username" id="username" />
<button>操作输入框</button>
</body>
</html>属性属性
全选，反选，不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选反选不选</title>
<script type="text/javascript" src="../script/jquery.1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//给全选绑定单击事件
$("#checkedAllBt").click(function () {
$(":checkbox").prop("checked", true);
});
//给全不选绑定单击事件
$("#checkedNoBtn").click(function () {
$(":checkbox").prop("checked", false);
});
//反选单击事件
$("#checkedRevBtn").click(function () {
$(":checkbox[name='items']").each(function () {
//在each遍历的funtion函数中，有一个tish对象。这个this对象是当前正在遍历到的dom对象
this.checked = !this.checked;
});
//要检查 是否满选
// 获取全部的球类个数
var allConut = $(":checkbox[name='items']").length;
// 再获取选中的球类的个数
var checkedCount = $(":checkbox[name='items']:checked").length;
//方法一
if (allConut == checkedCount) {
$("#checkedAllBox").prop("checked", true);
} else {
$("#checkedAllBox").prop("checked", false);
}
//方法二
// $("#checkedAllBox").prop("checked",allConut == checkedCount)
});
//绑定【提交】按钮
$("#sendBtn").click(function () {
$(":checkbox[name='items']:checked").each(function () {
alert(this.value);
});
});
//给【全选、全不选】绑定单击事件
$("#checkedAllBox").click(function () {
//在事件的funtion函数中，有一个this对象，这个this对象是当前正在响应事件是dom对象
$(":checkbox[name='items']").prop("checked", this.checked);
});
//给所有球类的绑定单击事件
$(":checkbox[name='items']").click(function () {
var allConut = $(":checkbox[name='items']").length;
// 再获取选中的球类的个数
var checkedCount = $(":checkbox[name='items']:checked").length;
$("#checkedAllBox").prop("checked", allConut == checkedCount)
});
})
</script>
</head>
<body>
<form method="post" action="">
你的爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
<br>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br>
<input type="button" id="checkedAllBt" value="全选">
<input type="button" id="checkedNoBtn" value="全不选">
<input type="button" id="checkedRevBtn" value="反选">
<input type="button" id="sendBtn" value="提交">
</form>
</body>
</html>DOM的增删改
内部插入
appendTo() a.appendTo(b) 把a插入到b子元素末尾，成为最后一个元素
prependTo() a.prependTo(b) 把a插入到b子元素前面，成为第一个元素
外部插入
insertAfter() a.insertAfter(b) 得到ba,同级，生成兄弟
insertBefore() a.insertBefore(b) 得到ab，同级，生成兄弟
替换：
replaceWith() a.replaceWith(b) 用b替换掉a
replaceAll() a.repalceAll(b) 用a替换掉所有b
删除
remove() a.remove() 删除a标签
empty() a.empty() 删除a标签内的内容，但标签留下来
练习：从左到右，从右到左
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右</title>
<style type="text/css">
select{
width: 100px;
height: 140px;
}
div{
width: 130px;
float: left;
text-align: center;
}
</style>
<script type="text/javascript" src="../script/jquery.1.7.2.js"></script>
<script type="text/javascript">
//加载全部
$(function (){
//绑定第一个按钮【选中添加到右边】单击事件
$("button:eq(0)").click(function (){
$("select:eq(0) option:selected").appendTo($("select:eq(1)"));
});
//绑定第二个按钮【选中添加到右边】单击事件
$("button:eq(1)").click(function (){
$("select:eq(0) option").appendTo($("select:eq(1)"));
});
//绑定第三个按钮【选中添加到左边】单击事件
$("button:eq(2)").click(function (){
$("select:eq(1) option:selected").appendTo($("select:eq(0)"));
});
//绑定第四个按钮【全部添加到左边】单击事件
$("button:eq(3)").click(function (){
$("select:eq(1) option").appendTo($("select:eq(0)"));
});
})
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="opt01">选项1</option>
<option value="opt02">选项2</option>
<option value="opt03">选项3</option>
<option value="opt04">选项4</option>
<option value="opt05">选项5</option>
<option value="opt06">选项6</option>
<option value="opt07">选项7</option>
<option value="opt08">选项8</option>
</select>
<button>选中添加到右边</button>
<button>全部添加到右边</button>
</div>
<div id="rigth">
<select multiple="multiple" name="sel02">
</select>
<button>选中添加到左边</button>
<button>全部添加到左边</button>
</div>
</body>
</html>练习：动态添加和删除
第一种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态添加和删除</title>
<script type="text/javascript" src="../script/jquery.1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//绑定提交
$("#addEmpButton").click(function () {
var empName = $("#empName").val();
var email = $("#email").val();
var salary = $("#salary").val();
//创建一个行标签对象，添加到显示数据的表格中
var $tianjia = $("<tr>" +
" <td>" + empName + "</td>" +
" <td>" + email + "</td>" +
" <td>" + salary + "</td>" +
" <td><a href=\"deleteEmp?id=001\">Delete</a></td>" +
" </tr>")
//显示到上方表格中
$tianjia.appendTo("#employeeTab")
$tianjia.find("a").click(function () {
//在事件响应的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象
var $trObj = $(this).parent().parent();
var $name = $trObj.find("td:first").text();
/*
* confirm是JavaScript语言提供的一个确认提示框函数。你给她传什么，她就提示什么
* 当用户点击了确定，就返回true，当用户点击了取消，则返回false
* */
if (confirm("你确定要删除[" + $name + "]吗？")) {
$trObj.remove();
}
//return false 可以阻止元素的默认行为
return false;
});
});
//给a标签即【删除】键
$("a").click(function () {
//在事件响应的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象
var $trObj = $(this).parent().parent();
var $name = $trObj.find("td:first").text();
/*
* confirm是JavaScript语言提供的一个确认提示框函数。你给她传什么，她就提示什么
* 当用户点击了确定，就返回true，当用户点击了取消，则返回false
* */
if (confirm("你确定要删除[" + $name + "]吗？")) {
$trObj.remove();
}
//return false 可以阻止元素的默认行为
return false;
});
})
</script>
</head>
<body>
<table id="employeeTab" border="1" align="center">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th></th>
</tr>
<tr>
<td>Tom</td>
<td>ton@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Tom</td>
<td>ton@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Tom</td>
<td>ton@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv" align="center">
<h4>添加新员工</h4>
<table border="1">
<tr>
<td class="word">name:</td>
<td class="inp"><input type="text" name="empName" id="empName"/></td>
</tr>
<tr>
<td class="word">email:</td>
<td class="inp"><input type="text" name="email" id="email"/></td>
</tr>
<tr>
<td class="word">salary:</td>
<td class="inp"><input type="text" name="salary" id="salary"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>第二种方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态添加和删除第二种方法</title>
<script type="text/javascript" src="../script/jquery.1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//这就是和第一种方法不一样的地方
//创建一个复用的删除的function函数
var deleteFun = function () {
//在事件响应的function函数中，有一个this对象，这个this对象是当前正在响应事件的dom对象
var $trObj = $(this).parent().parent();
var $name = $trObj.find("td:first").text();
/*
* confirm是JavaScript语言提供的一个确认提示框函数。你给她传什么，她就提示什么
* 当用户点击了确定，就返回true，当用户点击了取消，则返回false
* */
if (confirm("你确定要删除[" + $name + "]吗？")) {
$trObj.remove();
}
//return false 可以阻止元素的默认行为
return false;
};
//绑定提交
$("#addEmpButton").click(function () {
var empName = $("#empName").val();
var email = $("#email").val();
var salary = $("#salary").val();
//创建一个行标签对象，添加到显示数据的表格中
var $tianjia = $("<tr>" +
" <td>" + empName + "</td>" +
" <td>" + email + "</td>" +
" <td>" + salary + "</td>" +
" <td><a href=\"deleteEmp?id=001\">Delete</a></td>" +
" </tr>")
//显示到上方表格中
$tianjia.appendTo("#employeeTab")
$tianjia.find("a").click(deleteFun);
});
//给a标签即【删除】键
$("a").click(deleteFun);
})
</script>
</head>
<body>
<table id="employeeTab" border="1" align="center">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th></th>
</tr>
<tr>
<td>Tom</td>
<td>ton@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Tom</td>
<td>ton@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Tom</td>
<td>ton@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv" align="center">
<h4>添加新员工</h4>
<table border="1">
<tr>
<td class="word">name:</td>
<td class="inp"><input type="text" name="empName" id="empName"/></td>
</tr>
<tr>
<td class="word">email:</td>
<td class="inp"><input type="text" name="email" id="email"/></td>
</tr>
<tr>
<td class="word">salary:</td>
<td class="inp"><input type="text" name="salary" id="salary"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>第一种方法代码冗余，第二种把代码一样的封装成一个函数，用的时候调用就行了
CSS样式操作
addClass 添加样式
removerClass 删除样式
toggleClass 有就删除，没有就添加
offset 获取和设置元素的坐标
jQuery动画
基本动画
show() 将隐藏的元素显示
hide() 将可见的元素隐藏
toggle() 可见就隐藏，不可见就显示。
//以上动画方法都可以添加参数。
1、第一个参数是动画 执行的时长，以毫秒为单位
2、第二个参数是动画的回调函数（动画完成后自动调用的函数）
淡入淡出动画
fadeln() 淡入（慢慢可见）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值 0透明；1完全可见；0.5半透明
fadeToggle() 淡入淡出切换
jQuery事件操作
$(function(){});
和
window.onload = function(){}
的区别
他们分别是什么时候触发？
1、jQuery的页面加载完成之后是浏览器的内核解析完页面的标签建好DOM对象之后马上执行
2、原生JS的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成
他们的触发顺序？
1、jQuery页面加载完成后先执行
2、原生JS的页面加载完成之后
他们执行的次数？
1、原生JS的页面加载完成之后，只会执行最后一次的赋值函数。
2、jQuery的页面加载完成之后是全部把注册的function函数，依次顺序全部执行
jQuery中其他事件处理方法：
click（） 它可以绑定单击事件，以及触发单击事件
mouseover（） 鼠标移入事件
mouseout() 鼠标移出事件
bind（） 可以给元素一次性绑定一个或者多个事件
one（） 使用上跟bind一样。但是one方法绑定事件只会响应一次
unbind（） 跟bind方法相反的操作，解除事件的绑定
live（） 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效
事件的冒泡
什么是事件的冒泡？
事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应
那么如何阻止事件冒泡呢？
在事件函数体内，return false；可以阻止事件的冒泡传递
JavaScript事件对象
事件对象，是封装有触发的事件信息的一个JavaScript对象
如何获取呢JavaScript事件对象呢？
在给元素绑定事件的时候，在事件的function（event）参数列表中添加一个参数，这个参数名，我们习惯取名为event。
这个event就是JavaScript传递参数事件处理函数的事件对象。
比如：
1、在原生JavaScript获取 事件对象
window.onload = function (){
document.getElementById("id").onclick = function (event){
console.log(event);
}
}
2、jQuery代码获取事件对象
$(function () {
$("#id").click(function (){
console.log(event);
});
})
3、使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
$("#q").bind("mouseover mouseout",function (event){
if (event.type == "mouseover"){
console.log("鼠标移入");
}else {
console.log("鼠标移出");
}
})
使用jQuery来验证表单（注册页，简单版）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script type="text/javascript" src="../script/jquery.1.7.2.js"></script>
<script type="text/javascript">
//页面加载完成之后
$(function () {
//给注册按钮绑定单击事件
$("#sub_btn").click(function () {
// 验证用户名：必须由字母，数字下划线组成，并且长度为5到12位
//1、获取用户名输入框里的内容
var usernameTest = $("#username").val();
//2、创建正则表达式对象
var usernamePatt = /^\w{5,12}$/;
//3、使用test方法验证
if (!usernamePatt.test(usernameTest)) {
//4、提示用户结果
$("span.errorMsg").text("用户名不合法")
return false;
}
// 验证密码：必须由字母，数字下划线组成，并且长度为5到12位
//1、获取密码输入框里的内容
var passwordTest = $("#password").val();
//2、创建正则表达式对象
var passwordPatt = /^[a-z0-9_-]{6,18}$/;
//3、使用test方法验证
if (!passwordPatt.test(passwordTest)) {
//4、提示用户结果
$("span.errorMsg").text("密码不合法")
return false;
}
// 验证确认密码：和密码相同
// 1、获取确认密码
var repwdTest = $("#repwd").val();
// 2、和密码比较
if (repwdTest !== passwordTest) {
$("span.errorMsg").text("密码不一致")
return false;
}
// 邮箱验证：XXXXX@XXX.com
//获取输入框内容
var emailTest = $("#email").val();
//创建正则表达
var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
//比较
if (!emailPatt.test(emailTest)) {
//4、提示用户结果
$("span.errorMsg").text("邮箱不合法")
return false;
}
// 验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。
var codeTest = $("#code").val();
//去掉前后的空格
codeTest = $.trim(codeTest)
if (codeTest == null || codeTest == "") {
$("span.errorMsg").text("请输入验证码")
return false;
}
$("span.errorMsg").text("")
});
})
</script>
</head>
<body>
<form action="#">
<label>用户名称：</label>
<input class="itxt" type="text" placeholder="请输入用户名"
autocomplete="off" tabindex="1"
name="username" id="username"/>
<br>
<br>
<label>用户密码：</label>
<input class="itxt" type="password" placeholder="请输入密码"
autocomplete="off" tabindex="1"
name="password" id="password"/>
<br>
<br>
<label>确认密码：</label>
<input class="itxt" type="password" placeholder="请输入密码"
autocomplete="off" tabindex="1"
name="repwd" id="repwd"/>
<br>
<br>
<label>电子邮件：</label>
<input class="itxt" type="text" placeholder="请输入邮箱地址"
autocomplete="off" tabindex="1"
name="email" id="email"/>
<br>
<br>
<label>验证码：</label>
<input class="itxt" type="text" id="code"/>
<br>
<br>
<input type="submit" value="注册" id="sub_btn">
<br>
<br>
<br>
<br>
<div class="tit">
<span class="errorMsg"></span>
</div>
</form>
</body>
</html>
367
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
