目录
3.1 基础语法: $(selector).action()
3.3.jQuery的ready方法与JavaScript中的onload区别
1、概念
jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
优势:
1.降低代码的耦合性,减少硬编码,不需要在元素中添加onclick,onchange等事件,可以动态向元素中填充html()或者追加append其他元素,实现软编码。
2.选择器比较多,定位元素比较容易
3.代码比较简洁
jQuery库包含以下功能:
2、jQuery的安装
2.1 jQuery的版本
2.1 jQuery的下载
jQuery有两个版本:生成环境使用的和开发测试环境使用的。
以上两个版本都可以从 jquery.com 中下载
2.2 jQuery的使用
3、jQuery语法结构
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作(actions)。
3.1 基础语法: $(selector).action()
3.2文档就绪事件
![](https://i-blog.csdnimg.cn/blog_migrate/763a198af4c07f424cd915b54d417bfe.png)
写法2:简介写法-推荐
3.3.jQuery的ready方法与JavaScript中的onload区别
4、jQuery选择器:
4.1 元素/标签选择器
4.2 #id 选择器
4.3 .class 选择器
4.4 全局选择器
匹配所有元素
$("*")
4.5 并集选择器
将每一个选择器匹配到的元素合并后一起返回。
$("div,ul,li,.mydiv")
4.6 后代选择器
在给定的祖先元素下匹配所有的后代元素
$("form input")
4.7 子选择器
4.8 相邻选择器
4.9 同辈选择器
![](https://i-blog.csdnimg.cn/blog_migrate/18e89e3b347ea87c5dae14b4ac838fdb.png)
4.10 属性选择器
![](https://i-blog.csdnimg.cn/blog_migrate/44508ab9a8ce0f8e3932fc6db5ec64a0.png)
4.12 可见性选择器
![](https://i-blog.csdnimg.cn/blog_migrate/780bd421c5d3252861e7c0139548adc3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/702d46910159d96139b1702758834c3c.png)
4.13 所有选择器的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选择器</title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script>
//1、标签选择器:
function htmlSelector(){
//获取所有的div元素(集合)
var divList=$("div");
console.log(divList);//jQuery的对象
console.log(divList.length);
for(var i=0;i<divList.length;i++){
console.log(divList[i]);//js的对象
//将js对象转换为jQuery的对象
console.log($(divList[i]));
}
}
//2、id选择器
function idSelector(){
//根据id获取到的元素是惟一的,即使页面上有重名的id,获取的是第一个
var p=$("#p1");
console.log(p.html());
}
//3、.class选择器
function classSelector(){
var list=$(".mydiv");
console.log(list.length);
}
//4、 全局选择器
function allSelector(){
var list=$("*");//包括了html、head、title.....所有标签
console.log(list.length);
for(var i=0;i<list.length;i++){
console.log(list[i]);//js的对象
}
}
//5、并集选择器
function andSelector(){
var list=$(".mydiv,p,li");
printList(list);
}
//6、后代选择器:包括所有的后代,儿子和孙子辈都有
function subSelector(){
var list=$("form input");
printList(list);
}
//7、子选择器:只有子元素
function sunSelector(){
var list=$("form>input");
printList(list);
}
//8、相邻选择器
function nextSelector(){
var list=$("label + input");
printList(list);
}
//9、同辈选择器
function sublingsSelector(){
var list=$("form ~ div");
printList(list);
}
//10、属性选择器
function attrSelector(){
var list=$("div[id]");//获取所有有id属性的div的元素集合
list=$("div[class]");//获取所有有class属性的div的元素集合
list=$("input[name='userName']");//获取所有input标签中name属性是userName元素的集合
list=$("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合
list=$("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合
list=$("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合
list=$("input[id][name^='user']");//获取所有input标签中既有id属性又有name属性以user开头的元素的集合
printList(list);
}
//11、可见性选择器
function seeSelector(){
//匹配所有的可见div元素
var list=$("div:visible");
//匹配所有的不可见div元素
var list=$("div:hidden");
//匹配所有的不可见input元素,样式有display:none的元素和type=hidden的元素
list=$("input:hidden");
printList(list);
}
//文档就绪事件:页面加载完毕之后执行:
$(function(){
seeSelector();
});
//打印集合
function printList(list){
for(var i=0;i<list.length;i++){
console.log(list[i]);
console.log(list[i].innerHTML);//非表单项元素使用该种方式输出
console.log(list[i].value);//只有表单项元素才有value
}
}
</script>
</head>
<body>
<form>
<label>用户名:</label>
<input type="hidden" name="userId" value="1001" />
<input style="display: none;" value="隐藏的input" />
<input id="userName" name="userName" value="jiaobaoyu" /><br />
<label>密码:</label>
<input name="userPass" type="password" value="1234567"/><br />
<fieldset>
电话:<input id="phone" name="phoneuser" value="13712345789"/><br/>
邮箱:<input name="emailuser" type="email" value="lina@sina.com"/>
</fieldset>
</form>
地址:<input name="addressuser1" value="北京" /><br />
<ul>
<li>li111111</li>
<li>li111111</li>
<li>li111111</li>
</ul>
<p id="p1">p111111111111</p>
<div id="div1" class="mydiv" style="display: none;" >div1</div>
<div class="mydiv">div2</div>
<div id="div3">div3</div>
</body>
</html>
5、jQuery常用函数
5.1 与标签内容相关函数
$("div").html()
获取的是第一个匹配元素的围堵标签中的所有内容,包括了嵌套在内部的标签
$("div").text();
获取的是第一个匹配元素的围堵标签中的所有文本,不包含标签的内容
$("div").val();
val()只能用在表单项元素中,div不是表单元素,所以val()获取不到任何内容
$("input").val();
input是表单项元素,val()可以获取到第一个匹配元素的围堵标签的内容
以上获取标签内容获取的都是选中的第一个元素。
5.2 与标签属性相关函数
设置属性
img.attr("src","img/cat.jpg");
img.attr("title","不服!");
移除属性
img.removeAttr("title");
获取属性
img.attr("src");
获取checked属性使用prop函数,获取到的值是boolean类型,表示是否被选中
若使用attr方法,获取到的是checked属性的值checked.
$("input[type='radio']")
$(list[i]).prop("checked")
$(list[i]).attr("checked")
注意,若是获取属性attr,获取的是匹配到的第一个元素的属性,若是设置属性,比如只要是img元素都会被绑定src属性
5.3 与标签样式相关函数
给获取的元素添加、删除、切换已有的样式
PS:样式一定是在样式表中提前定义好的,我们通过给元素添加class属性等来绑定样式。
$("div").addClass("redBg");
通过给(所有)div添加两个类属性redBg 和fontColor同时绑定两个样式。
$("div").addClass("redBg fontColor");
$("div").removeClass("fontColor");
没有参数的时候直接移除所有的样式
$("div").removeClass();
匹配元素如果有当前的样式就删除,如果没有就添加---用于切换样式
$("div").toggleClass("fontColor");
给所有的元素添加样式,样式直接添加,无需提前定义
$("input").css("border-color","blue");
$("input").css({"color":"red","border-color":"green"});
同样的,比如$("div").addClass("redBg");是给所有div元素设置class属性,绑定背景样式。
总之就是:取元素时取出的是第一个匹配的元素,若是添加属性、内容或者样式时是所有匹配的元素都被添加上了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title><script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<style>
.redBg{
background-color: red;
}
.fontColor{
color: gold;
}
</style>
<script>
//1、与内容相关的函数
function textFun(){
var str1=$("div").html();//获取的是第一个匹配元素的围堵标签中的所有内容,包括了嵌套在内部的标签
console.log(str1);
var str2=$("div").text();//获取的是第一个匹配元素的围堵标签中的所有文本,不包含标签的内容
console.log(str2);
var str3=$("div").val();//val()只能用在表单项元素中,div不是表单元素,所以val()获取不到任何内容
var str4=$("input").val();//input是表单项元素,val()可以获取到
console.log(str3);
console.log(str4);
}
//2、与属性相关的函数
function attrFun(){
var img=$("img");
//设置属性
img.attr("src","img/cat.jpg");
img.attr("title","不服!");
//移除属性
img.removeAttr("title");
//获取属性
var src=img.attr("src");
var title=img.attr("title");
console.log(src+"===="+title);
//获取checked属性使用prop函数,获取到的值是boolean类型,表示是否被选中
var list=$("input[type='radio']");
for(var i=0;i<list.length;i++){
var flag=$(list[i]).prop("checked");/*;ist[i]是js,prop是jq方法,需转换*/
console.log("checked="+flag);
}
}
//3、与css相关的函数
function cssFun(){
//给获取的元素添加、删除、切换已有的样式 PS:样式一定是在样式表中提前定义好的
$("div").addClass("redBg");
$("div").addClass("redBg fontColor");
$("div").removeClass("fontColor");
$("div").removeClass();//没有参数的时候直接移除所有的样式
//$("div").toggleClass("fontColor");//匹配元素如果有当前的样式就删除,如果没有就添加
//给所有的元素添加样式,样式直接添加,无需提前定义
$("input").css("border-color","blue");
$("input").css({"color":"red","border-color":"green"});
}
function changeCss(){
$("div").toggleClass("fontColor");//匹配元素如果有当前的样式就删除,如果没有就添加
}
/*就緒入口*/
$(function(){
cssFun();
});
</script>
</head>
<body>
<button type="button" onclick="changeCss()">切换div样式</button>
性别:<input type="radio" value="0" name="gender" checked="checked"/>女
<input type="radio" value="1" name="gender"/>男
<img src="img/a.png" title="服不服" />
<div>div1<button type="button">普通按钮1</button></div>
<div>div2<button type="button">普通按钮2</button></div>
<input name="userName" value="贾宝玉" />
<input name="password" value="123456" />
</body>
</html>
6、jQuery与js对象的转换
js转Jq-->$(js对象)
7、jQuery中的事件
7.1 常用DOM事件列表
![](https://i-blog.csdnimg.cn/blog_migrate/1bd84e8a2a6022eac4c7a4056d0c9994.png)
7.2常用的 jQuery 事件方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script>
//页面加载事件
$(function(){
//给所有的button绑定单击事件
$("button").click(function(){
//alert(this);//this是当前对象,哪个按钮触发的单击事件this就是那个按钮,this此时是JS对象
$(this).css("color","red");//给当前的触发对象添加一个css
});
//给所有的超链接绑定鼠标移上事件
$("a").mouseover(function(){
var str=$(this).html();/*获取当前元素内所有内容*/
$(this).html("鼠标移上-"+str);/*给当前元素设置内容,等价于js的innerHTML*/
});
//给所有的超链接绑定鼠标移出事件
$("a").mouseout(function(){
var str=$(this).html();
$(this).html(str.substr(5));
});
$("a").hover(function(){
$(this).css("color","red");/*给当前元素设置样式*/
});
});
</script>
</head>
<body>
<a href="#">首页</a>
<a href="#">零食</a> 更多事件方法参考jQuery的事件方法
<a href="#">鲜花</a>
<button type="button">普通按钮1</button>
<button type="button">普通按钮2</button>
<button type="button">普通按钮3</button>
</body>
</html>
鼠标放上去时
鼠标拿下来时
8、jQuery操作DOM
8.1 元素的增加
8.2 元素的克隆
![](https://i-blog.csdnimg.cn/blog_migrate/441b67871011effa28f2aa73f10f7fc9.png)
![](https://i-blog.csdnimg.cn/blog_migrate/41b4906ee49bae9412c9db90d42dccdb.png)
8.3 元素的替换
![](https://i-blog.csdnimg.cn/blog_migrate/bb6513449c7e70c3daeff1a673e18c53.png)
![](https://i-blog.csdnimg.cn/blog_migrate/8a14aa8b594047f12a52a63eb84fe6ff.png)
div替换所有p元素
8.4 元素的删除
9、jQuery效果
9.1 隐藏和显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档处理</title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<style>
div{
background: lightblue;
padding: 20px;
}
p{
background: lavenderblush;
padding: 20px;
}
</style>
<script>
$(function(){
$("#btnHide").click(function(){
//$("div").hide();
//$("div").hide(2000);
$("div").hide(2000,function(){
alert("隐藏完成!");
});
});
$("#btnShow").click(function(){
//$("div").show();
//$("div").show(2000);
$("div").show(2000,function(){
alert("显示完成!");
});
});
$("#btnToggle").click(function(){
//$("p").toggle();
//$("p").toggle(2000);
$("p").toggle(2000,function(){
alert("切换完成!");
});
});
});
</script>
</head>
<body>
<button id="btnHide">隐藏-div</button>
<button id="btnShow">显示-div</button>
<button id="btnToggle">切换显示和隐藏-p</button>
<div>div1</div>
<br/>
<div>div2</div>
<p style="display: none;">p1</p>
<p>p2</p>
</body>
</html>
9.2 淡入和淡出
![](https://i-blog.csdnimg.cn/blog_migrate/5e3dfd2986ad2dd82ad6e7b928c5e573.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><title>效果</title>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<style>
div{
background: lightblue;
padding: 20px;
}
p{
background: lavenderblush;
padding: 20px;
}
</style>
<script>
$(function(){
$("#btnIn").click(function(){
//$("div").fadeIn();
//$("div").fadeIn(2000);
$("div").fadeIn(2000,function(){
alert("淡入完成!");
});
});
$("#btnOut").click(function(){
//$("div").fadeOut();
//$("div").fadeOut(2000);
$("div").fadeOut(2000,function(){
alert("淡出完成!");
});
});
$("#btnToggle").click(function(){
//$("p").fadeToggle();
//$("p").fadeToggle(2000);
$("p").fadeToggle(2000,function(){
alert("切换完成!");
});
});
});
</script>
</head>
<body>
<button id="btnIn">淡入-div</button>
<button id="btnOut">淡出-div</button>
<button id="btnToggle">切换淡入淡出-P</button>
<div>div1</div>
<br/>
<div>div2</div>
<p style="display: none;">p1</p>
<p>p2</p>
</body>
</html>
10、基于jQuery实现表单验证
使用属性选择器来选中具体元素
使用val()/html()给元素添加内容
给每个表单项绑定离焦事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
function isUserName() {
var val = $("input[name='userName']").val();/*获取元素文本内容*/
if(val == "") {
$("span[id='userNameMsg']").html("用户名不能为 空!").css("color", "red");
return false;
} else if(/^[a-zA-z]\w{5,}/.test(val) == false) {
$("span[id='userNameMsg']").html("用户名不合 法!").css("color", "red");
return false;
}
$("span[id='userNameMsg']").html("用户名可 用!").css("color", "green");
return true;
}
function isPwd() {
var val = $("input[name='pwd1']").val();
if(val == "") {
$("span[id='pwd1Msg']").html("密码不能为 空!").css("color", "red");
return false;
} else if(val.length < 8) {
$("span[id='pwd1Msg']").html("密码长度不合 法!").css("color", "red");
return false;
}
$("span[id='pwd1Msg']").html("密码格式正 确!").css("color", "green");
return true;
}
function isPwd2() {
if($("input[name='pwd1']").val() != $("input[name='pwd2']").val()) {
$("span[id='pwd2Msg']").html("两次密码不一 致!").css("color", "red");
return false;
}
$("span[id='pwd2Msg']").html("OK!").css("color", "green");
return true;
} /*校验电话码格式-座机或者手机 */
function isTelCode(str) {
var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;
if(reg.test(str)) {
$("span[id='phoneMsg']").html("OK!").css("color", "green");
return true;
}
$("span[id='phoneMsg']").html("电话格式不合 法!").css("color", "red");
return false;
} /*校验邮件地址是否合法 */
function IsEmail(str) {
var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
if(reg.test(str)) {
$("span[id='emailMsg']").html("OK!").css("color", "green");
return true;
}
$("span[id='emailMsg']").html("邮箱地址不合 法!").css("color", "red");
return false;
} /*校验是否选择了性别*/
function isGender() {
var val = $("select[name='gender']").val();
if(val == -1) {
alert("请选择性别!");
return false;
}
return true;
}
//页面加载事件
$(function(){
$("input[name='userName']").blur(function(){
isUserName();
});
$("input[name='pwd1']").blur(function(){
isPwd();
});
$("input[name='pwd2']").blur(function(){
isPwd2();
});
$("input[name='phone']").blur(function() {
isTelCode();
});
$("input[name='email']").blur(function() {
IsEmail();
});
$("#myForm").submit(function() {
return isUserName() && isPwd() && isPwd2() && isGender() && isTelCode() && IsEmail();
});
});
</script>
</head>
<body>
<h1>注册</h1>
<form id="myForm" action="提交.html" method="get">
*用户名:<input type="text" name="userName" placeholder="请输入用户名" />
<span id="userNameMsg">用户名长度至少6位,只能包含数字、字母、下划线,必 须以字母开头</span><br />
*密码: <input type="password" name="pwd1" placeholder="请输入密码" required/>
<span id="pwd1Msg">密码长度至少8位</span><br />
*确认密码:
<input type="password" name="pwd2" placeholder="请确认密码" required/>
<span id="pwd2Msg">确认密码与密码一致</span><br /> *性别:
<select id="gender">
<option value="-1">请选择性别</option>
<option value="0">女</option>
<option value="1">男</option>
</select><br />
*电话号码:<input name="phone" required/>
<span id="phoneMsg"></span> <br />
*邮箱:<input name="email" type="email" required/>
<span id="emailMsg"></span><br />
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</body>
</html>
11、 jQuery案例
11.1 全选/全不选
当点击全选时,获取全选表单项的checked属性值flag为true即被选中然后给所有属性名name='one'表单项添加被选中的属性checked="true"
给所有单选框绑定点击事件,当点击某个单选框取消被选中时,这时候需要遍历所有单选框当找到任意一个没被选中的单选框时就修改全选的那个单选框的被选中状态为false即checked=false,若是所有单选框的checked属性都是true则修改全选的那个单选框为被选中状态checked=true
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
$(function() {
/*当点击全选时,获取全选表单项的checked属性值flag为true即被选中
然后给所有属性名name='one'表单项添加被选中的属性checked="true"
*/
$("#all").click(function() {
var flag = $(this).prop("checked");
console.log(flag);
var oneList = $("input[name='one']");
for(var i = 0; i < oneList.length; i++) {
$(oneList[i]).prop("checked", flag);
}
});
/*给所有单选框绑定点击事件,当点击某个单选框取消被选中时,
*这时候需要遍历所有单选框当找到任意一个没被选中的单选框时
*就修改全选的那个单选框的被选中状态为false即checked=false,
*若是所有单选框的checked属性都是true则修改全选的那个单选框为被选中状态checked=true
**/
$("input[name='one']").click(function() {
var oneList = $("input[name='one']");
for(var i = 0; i < oneList.length; i++) {
if(!$(oneList[i]).prop("checked")) {
$("#all").prop("checked", false);
return;
}
}
$("#all").prop("checked", true);
});
});
</script>
</head>
<body>
<table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="160px">
<tr>
<th>全选<input id="all" type="checkbox" /></th>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总计</th>
</tr>
<tr>
<td><input name="one" type="checkbox" /></td>
<td>1</td>
<td>小熊饼干1</td>
<td>¥125</td>
<td>1</td>
<td>¥125</td>
</tr>
<tr>
<td><input name="one" type="checkbox" /></td>
<td>2</td>
<td>小熊饼干2</td>
<td>¥125</td>
<td>1</td>
<td>¥125</td>
</tr>
<tr>
<td><input name="one" type="checkbox" /></td>
<td>3</td>
<td>小熊饼干3</td>
<td>¥125</td>
<td>1</td>
<td>¥125</td>
</tr>
</table>
</body>
</html>
11.2 动态时间
使用Date获取当前时间(年月日时分秒),使用html()/text()向元素中插入时间
使用定时器setInterval每一秒调用一次方法获取时间
或使用setTimeout递归调用方法获取时间
给停止按钮绑定点击事件,清除定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态时间</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
function showTime() {
var time = new Date(); /*获取当前时间 年月日时分秒*/
var y = time.getFullYear();
var mon = time.getMonth() + 1; //0-11
var d = time.getDate();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
/*向div中插入内容 年月日时分秒 val()只能用在表单中*/
$("#myTime").html(y + "年" + mon + "月" + d + "日 " + h + ":" + m + ":" + s);
}
function showTime2() {
var time = new Date();
var y = time.getFullYear();
var mon = time.getMonth() + 1; //0-11
var d = time.getDate();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
$("#myTime2").html(y + "年" + mon + "月" + d + "日 " + h + ":" + m + ":" + s);
clock2 = window.setTimeout("showTime2()", 1000);/*递归实现定时器*/
}
//setTimeout只能定时执行唯一一次,可使用递归达到定时器效果
var clock2 = window.setTimeout("showTime2()", 1000);
//页面加载事件
$(function() {
//定时器
var clock1 = window.setInterval("showTime()", 1000);
$("#btn1").click(function() {
window.clearInterval(clock1);
});
$("#btn2").click(function() {
window.clearTimeout(clock2);
});
});
</script>
</head>
<body>
<button id="btn1">停止</button>
<div id="myTime"> </div>
<button id="btn2">停止2</button>
<div id="myTime2"> </div>
</body>
</html>
11.3 动态表格
遍历表格逻辑
1.浏览器会自动把所有行tr使用tbody标签包裹起来
2.使用childern()获取当前元素的所有儿子标签
3.table表格需要两个childern才能获取到所有tr行,若一个childern只能获取到tbody,即$("#myTable").childern().childern()
4.遍历每行,每行元素trObject调用childern()获取每行的所有单元格(列)集合,时刻将js对象转成jq对象。
5.遍历每个单元格,使用Htm()获取每个单元格内容存入字符串变量str中
添加表格一条记录逻辑
1.给添加按钮绑定点击事件
2.点击按钮后,获取table元素的tbody元素,给table表格的tbody中append内部末尾追加一个行元素
3.注意,由于表格自动生成tbody,不能直接获取table表格append一个tr,这样也能追加,但追加的tr在tbody外。
删除表格一条记录逻辑
1.此种绑定事件的方式对动态添加的元素不生效
即通过 元素.click(function(){})绑定事件方式是无法绑定动态生成的任何元素的,因为这种方式是在页面加载完成后就当前页面所选中的元素进行绑定,后续动态添加且符合被选中的元素是不会被绑定,这就需要使用另一种事件绑定方式$(document).on(事件名称,要选中的元素,匿名函数)即整个文档准备完毕后再进行绑定事件。
2.使用下面这种绑定事件方式进行记录的删除,this表示当前触发的按钮
3.点击删除按钮,触发绑定的事件,获取当前元素的父级td的父级tr元素,即删除该按钮所在的行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style>
td,
th {
padding: 10px;
}
</style>
<script>
$(function() {
/*给遍历表格按钮绑定点击事件*/
$("#blBtn").click(function() {
var tab = $("#myTable"); //获取到了表格的jQuery对象
//获取表格的所有行
//tab.children()获取的是表格tbody,
//表格默认把所有tr行用tbody包裹,使用两次childer即可
var trArr=tab.children().children();
//遍历行
for(var i=0;i<trArr.length;i++){
var trObj=$(trArr[i]); /*使用$包裹,将js对象转出jq对象*/
//获取每行的单元格的集合
var tdArr=$(trObj.children()); /*同样要转成jq对象*/
//遍历每个单元格
var str="";
for(var j=0;j<tdArr.length;j++){
var tdObj=$(tdArr[j]); /*列集合中每一个js对象转出jq*/
var html=tdObj.html();/*获取单元格内所有内容包括标签*/
//获取每个单元格中的内容
str += html+"--";
}
console.log(str);
}
});
/*给添加按钮绑定点击事件
获取table,给table表格append追加一个行元素
* */
$("#addBtn").click(function() {
var tab = $("#myTable>tbody"); //获取到了表格中tbody元素的jQuery对象
var num = parseInt(Math.random() * 10) + 1;/*产生随机数*/
var tr = ' <tr > '+
'<td >' +num+'</td>'+
'<td >小熊饼干 '+num+' </td>'+
'<td >¥125</td>'+
'<td >1</td>'+
'<td ><button name ="delBtn" >删除 </button></td > '+
' </tr>';
tab.append(tr); /*向表格内部末尾追加一个行元素使用append*/
});
//此种绑定事件的方式对动态添加的元素不生效
/*$("button[name='delBtn']").click(function(){
* alert("aaaa");
*});*/
$(document).on("click", "button[name='delBtn']", function() {
$(this).parent().parent().remove();
});
});</script>
</head>
<body>
<button type="button" id="blBtn">遍历表格</button>
<button type="button" id="addBtn">添加</button>
<table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" style="text-align: center;">
<tr>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总计</th>
</tr>
<tr>
<td>1</td>
<td>小熊饼干1</td>
<td>¥125</td>
<td>1</td>
<td><button name="delBtn">删除</button></td>
</tr>
<tr>
<td>2</td>
<td>小熊饼干2</td>
<td>¥125</td>
<td>1</td>
<td><button name="delBtn">删除</button></td>
</tr>
</table>
</body>
</html>
11.4 省市级联
逻辑
1.首先来两个下拉列表,一个是省份列表,一个是城市列表,将来这些列表内容都是从数据库读取到数据通过使用html(...)动态向select元素中填充option元素,这里的省份列表直接写死了,存储城市的存储结构使用的是数组。
2.给省份列表绑定change事件(内容改变事件)
3.当省份内容发生变化时,获取对应option(就是当前选中元素this)中的value值
4.根据value值在数组中找到省份对应的所有城市,通过html(..)将每一个option填充到city的下拉列表中,达到不同的省份显示不同城市效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市级联</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<select id="province">
<option>--请选择省份--</option>
<option value="0">北京</option>
<option value="1">浙江省</option>
<option value="2">河北省</option>
<option value="3">广东省</option>
</select>
<select id="city"> </select>
</body>
</html>
<script>
$(function() {
//创建二维数组存储省份和对应的城市
var cityList = new Array();
cityList[0] = new Array("朝阳区", "海淀区", "东城区", "西城区");
cityList[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市");
cityList[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");
cityList[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");
$("#province").change(function() {
//获取到城市的下拉列表框
var city=$("#city");
//先去清空原有的列表内容
city.html("");
var arr=cityList[$(this).val()];
var str="";
for(var i=0;i<arr.length;i++){
str+='<option value=' +arr[i]+ '>'+arr[i]+ '</option>';
}
city.html(str);
});
});
</script>