1 jquery的快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--需求: 点击按钮后, 再div中显示当前时间-->
</head>
<body>
<input type="button" value="显示时间 传统js" id="btn"/>
<input type="button" value="显示时间 jquery" id="btn2"/>
<div id="mydiv"></div>
<div id="mydiv2"></div>
<!--倒入jquery包-->
<script src="js/jquery-3.3.1.js"></script>
<script>
// 需求: 点击按钮后, 再div中显示当前时间, 传统js
document.querySelector("#btn").onclick = function() {
document.querySelector("#mydiv").innerHTML = "传统js操作: " + new Date().toLocaleString();
}
// 需求: 点击按钮后, 再div中显示当前时间, jquery
// 前提: 因为jquery是第三方的, 所以需要倒入jquery的包
// jQuery("#btn2").click(function () {
// jQuery("#mydiv2").html("jquery操作: " + new Date().toLocaleString());
// });
$("#btn2").click(function () {
$("#mydiv2").html("jquery操作222222: " + new Date().toLocaleString());
});
</script>
</body>
</html>
2 传统js的onoload 和 jquery的onload 的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>与window.onload的区别</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
// alert(111);
// 传统js的页面加载完成后执行
// window.onload = function () {
// alert(2222)
// }
// jquery 的页面加载完成后执行
$(function() {
alert(55555)
});
// jquery的页面加载完成后 不会覆盖
$(function() {
alert(7777)
});
// 多个传统js的页面加载完成后执行, 后面的会把前面的覆盖掉
window.onload = function () {
alert(6666)
}
// alert(3333)
</script>
</head>
<body>
<script type="text/javascript">
// alert(4444);
/**
* jQuery中每个入口函数都会依次执行
*/
/**
* 只会执行最后这一次,后面的覆盖前面的
*/
</script>
</body>
</html>
3 jquery对象和js对象的相互转化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS对象与JQ对象转换</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<h2>JS对象与JQ对象的转换</h2>
<input type="text" id="company" value="传智播客">
<input type="button" id="b1" value="JS得到值">
<input type="button" id="b2" value="JQ得到值">
<script type="text/javascript">
// 需求1: 点击按钮1, 采用js方式获取输入框内容
document.querySelector("#b1").onclick = function() {
//var val = document.querySelector("#company").value;
//console.log("传统js获取 ===== " + val);
// 需求3: jquery对象 是否可以调用 js对象的属性或方法? 结果 undefined, 代表拿不到, 不能
// var val3 = $("#company").value;
// console.log("需求3: jquery对象 是否可以调用 js对象的属性或方法? ====== " + val3);
// 需求4: 如何让jquery对象 调用 js对象的属性和方法呢? 解决: 将jquery对象转成js对象, jquery对象[0]
var val4 = $("#company")[0].value;
console.log("需求4 将jquery对象转成js对象 =====" + val4);
}
// 需求2: 点击按钮2, 采用jquery方式获取输入框内容
$("#b2").click(function () {
//var val = $("#company").val();
//console.log("jquery获取: =========== " + val);
// 需求5: js对象是否可以调用jquery对象的属性和方法? 结果 报错, 证明 不能调用
// var val5 = document.querySelector("#company").val();
// console.log("需求5: js对象是否可以调用jquery对象的属性和方法? =========== " + val5);
// 需求6: 目标让js对象调用jquery对象的属性和方法, 解决: 将js对象转化成jquery对象, 如何转化: $(js对象)
var val6 = $(document.querySelector("#company")).val();
console.log("需求6: 目标让js对象调用jquery对象的属性和方法 =========== " + val6);
});
</script>
</body>
</html>
4 基本选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>基本选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style type="text/css">
div, span {
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div .mini {
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
div .mini01 {
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
</style>
</head>
<body>
<input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/>
<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/>
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/>
<h1>有一种奇迹叫坚持</h1>
<div id="one">
id为one
</div>
<div id="two" class="mini">
id为two class是 mini
<div class="mini">class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini">class是 mini</div>
<div class="mini">class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini01">class是 mini01</div>
<div class="mini">class是 mini</div>
</div>
<div id="mover">
div 动画
</div>
<span class="spanone">class为spanone的span元素</span>
<span class="mini">class为mini的span元素</span>
</body>
<script type="text/javascript">
// 1) 点击按钮1 改变 id 为one的元素的背景色为红色
$("#b1").click(function () {
$("#one").css("background", "red");
});
// 2) 点击按钮2 改变元素名为 <div> 的所有元素的背景色为 红色。
$("#b2").click(function () {
$("div").css("background", "red");
});
// 3) 点击按钮3 改变 class 为 mini 的所有元素的背景色为 红色
$("#b3").click(function () {
$(".mini").css("background", "red");
})
</script>
</html>
5 层级选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>层次选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style type="text/css">
div, span {
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div .mini {
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
div .mini01 {
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
</style>
</head>
<body>
<input type="button" value="改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>
<input type="button" value="改变 <body> 内子 <div> 的背景色为 红色" id="b2"/>
<input type="button" value="改变 id为two的下一个div兄弟元素的背景色为红色" id="b3"/>
<input type="button" value="改变id为two的后面同级兄弟div元素的背景色为红色" id="b4"/>
<h1>有一种奇迹叫坚持</h1>
<div id="one">
id为one
</div>
<div id="two" class="mini">
id为two class是 mini
<div class="mini">class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini">class是 mini</div>
<div class="mini">class是 mini</div>
</div>
<div class="one">
class是 one
<div class="mini01">class是 mini01</div>
<div class="mini">class是 mini</div>
</div>
<span class="spanone">span</span>
</body>
<script type="text/javascript">
//1) 改变 <body> 内所有 <div> 的背景色为红色,子孙都算
$("#b1").click(function () {
$("body div").css("background", "red")
});
//2) 改变 <body> 内子 <div> 的背景色为 红色
$("#b2").click(function () {
$("body > div").css("background", "red")
});
//3) 改变 id为two的下一个div兄弟元素的背景色为红色
$("#b3").click(function () {
$("#two + div").css("background", "red")
});
//4) 改变id为two的后面同级兄弟div元素的背景色为红色
$("#b4").click(function () {
$("#two ~ div").css("background", "red")
});
</script>
</html>
6 基本过滤选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>基本过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style type="text/css">
table {
margin: auto;
border-collapse: collapse;
width: 525px;
}
tr {
height: 30px;
text-align: center;
}
.girl {
width: 260px;
height: 260px;
border: 1px solid gray;
float: left;
}
</style>
</head>
<body>
<input type="button" value="第一行的背景色为浅灰色" id="b1"/>
<input type="button" value="最后一行的背景色为浅绿色" id="b2"/>
<input type="button" value="除第1行和最后1行的其它行背景色为浅黄色" id="b3"/>
<input type="button" value="索引值为偶数的行背景色为浅粉色" id="b4"/>
<input type="button" value="索引值为奇数的行背景色为aquamarine色" id="b5"/>
<input type="button" value="索引值大于 3 的tr元素的背景色为oldlace色" id="b6"/>
<input type="button" value="索引值等于 3 的tr元素的背景色为antiquewhite" id="b7"/>
<input type="button" value="索引值为小于 3 的tr元素背景色为yellowgreen" id="b8"/>
<hr />
<div style="width: 525px; margin: auto;">
<table border="1" align="center">
<caption><h3>学生信息列表</h3></caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>家庭住址</th>
<th>成绩</th>
</tr>
<tr>
<td>1001</td>
<td>孙悟空</td>
<td>男</td>
<td>72</td>
<td>花果山</td>
<td>90</td>
</tr>
<tr>
<td>1002</td>
<td>猪八戒</td>
<td>男</td>
<td>36</td>
<td>高老庄</td>
<td>78</td>
</tr>
<tr>
<td>2002</td>
<td>沙僧</td>
<td>男</td>
<td>30</td>
<td>流沙河</td>
<td>67</td>
</tr>
<tr>
<td>3000</td>
<td>唐三藏</td>
<td>男</td>
<td>26</td>
<td>东土</td>
<td>87</td>
</tr>
<tr>
<td>4000</td>
<td>白骨精</td>
<td>女</td>
<td>18</td>
<td>白骨洞</td>
<td>96</td>
</tr>
<tr>
<td>5000</td>
<td>蜘蛛精</td>
<td>女</td>
<td>17</td>
<td>盘丝洞</td>
<td>95</td>
</tr>
<tr>
<td>总成绩</td>
<td colspan="5">3045</td>
</tr>
</table>
</div>
<br />
</body>
<script type="text/javascript">
//1) 改变第一行的背景色为浅灰色
$("#b1").click(function () {
//标签选择器,过滤得到第0元素
$("tr:first").css("background", "lightgray");
});
//2) 改变最后一行的背景色为浅绿色
$("#b2").click(function () {
$("tr:last").css("background", "lightgreen");
});
//3) 改变除第1行和最后1行的其它行背景色为浅黄色
$("#b3").click(function () {
$("tr:not(:last):not(:first)").css("background", "lightyellow");
});
//4) 改变索引值为偶数的行背景色为浅粉色,下标从0开始
$("#b4").click(function () {
$("tr:not(:first):even").css("background","lightpink");
});
//5) 改变索引值为奇数的行背景色为aquamarine色
$("#b5").click(function () {
$("tr:not(:first):odd").css("background","aquamarine");
});
//6) 改变索引值大于 3 的tr元素的背景色为oldlace色
$("#b6").click(function () {
//注:从0开始
$("tr:gt(3)").css("background","oldlace");
});
//7) 改变索引值等于 3 的tr元素的背景色为antiquewhite
$("#b7").click(function () {
$("tr:eq(3)").css("background","antiquewhite");
});
//8) 改变索引值为小于 3 的tr元素背景色为yellowgreen
$("#b8").click(function () {
$("tr:lt(3)").css("background","yellowgreen");
});
</script>
</html>
7 表单过滤选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表单属性过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style type="text/css">
div,
span {
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div .mini {
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
div .mini01 {
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
</style>
</head>
<body>
<input type="button" value="val() 方法改变表单内可用文本框元素的值" id="b1" />
<input type="button" value="val() 方法改变表单内不可用 <input> 元素的值" id="b2" />
<input type="button" value="length 属性获取(单选和多选)选框选中的个数" id="b3" />
<input type="button" value="length 属性获取下拉列表选中的个数" id="b4" />
<br><br>
<input type="text" value="不可用值1" disabled="disabled">
<input type="text" value="可用值1">
<input type="text" value="不可用值2" disabled="disabled">
<input type="text" value="可用值2">
<br><br>
<input type="checkbox" name="items" value="美容">美容
<input type="checkbox" name="items" value="IT">IT
<input type="checkbox" name="items" value="金融">金融
<input type="checkbox" name="items" value="管理">管理
<br><br>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<br><br>
<!--multiple表示多选-->
<select name="job" id="job" multiple="multiple" size=4>
<option>程序员</option>
<option>中级程序员</option>
<option>高级程序员</option>
<option>系统分析师</option>
</select>
<select name="edu" id="edu">
<option>本科</option>
<option>博士</option>
<option>硕士</option>
<option>大专</option>
</select>
</body>
<script type="text/javascript">
//1) val() 方法改变表单内可用文本框 <input> 元素的值
$("#b1").click(function () {
$("input[type=text]:enabled").val("绝不后退");
});
//2) val() 方法改变表单内不可用 <input> 元素的值
$("#b2").click(function () {
$("input[type=text]:disabled").val("敢于亮剑");
});
//3) length 属性获取选框选checked中的个数
$("#b3").click(function () {
var len = $("input:checked").length
console.log("length 属性获取选框选checked中的个数 ===== " + len);
});
//4) length 属性获取下拉列表选中的个数
$("#b4").click(function () {
let len2 = $("select option:selected").length;
console.log("length 属性获取下拉列表选中的个数 ===== " + len2);
});
</script>
</html>
8 html_text_val
<!DOCTYPE html>
<html>
<head>
<title>html和text和val</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input type="button" id="b1" value="设置值value"/>
<input type="button" id="b2" value="获取值value"/>
<input type="button" id="b3" value="设置html"/>
<input type="button" id="b4" value="获取值html"/>
<input type="button" id="b5" value="设置text"/>
<input type="button" id="b6" value="获取text"/>
<hr/>
<input id="myinput" type="text" name="username" value="张三"/><br/>
<div id="mydiv"><p><a href="#">标题标签</a></p></div>
</body>
<script type="text/javascript">
// 设置值value
$("#b1").click(function () {
$("#myinput").val("戚继光");
});
// 获取值value
$("#b2").click(function () {
var val = $("#myinput").val();
console.log("获取输入框内容: ====== " + val);
});
//设置html
$("#b3").click(function () {
$("#mydiv").html("<h1 style='color:red'>敢于亮剑, 绝不后退!</h1>");
});
//获取值html
$("#b4").click(function () {
let htmlStr = $("#mydiv").html();
console.log("htmlStr ========== " + htmlStr);
});
//设置text
$("#b5").click(function () {
$("#mydiv").text("<h1 style='color:red'>敢于亮剑, 绝不后退!</h1>");
});
//获取text
$("#b6").click(function () {
let textStr = $("#mydiv").text();
console.log("textStr ========== " + textStr);
});
</script>
</html>
9 属性 attr prop
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>获取属性</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input type="button" id="b1" value="获取北京节点的name属性值"/>
<input type="button" id="b2" value="设置北京节点的name属性的值为dabeijing"/>
<input type="button" id="b3" value="新增北京节点的discription属性 属性值是didu"/>
<input type="button" id="b4" value="删除北京节点的name属性"/>
<input type="button" id="b5" value="获得hobby的选中状态"/>
<ul>
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
</ul>
爱好:<input type="checkbox" id="hobby" value="游泳"/>游泳
</body>
<script type="text/javascript">
//获取北京节点的name属性值
$("#b1").click(function () {
var val = $("#bj").attr("name");
console.log("val = " + val);
});
//设置北京节点的name属性的值为"首都"
$("#b2").click(function () {
$("#bj").attr("name", "首都");
});
//新增北京节点的discription属性 属性值是didu
$("#b3").click(function () {
$("#bj").attr("discription", "didu");
});
//删除北京节点的name属性
$("#b4").click(function () {
$("#bj").removeAttr("name");
});
//获得hobby的选中状态
$("#b5").click(function () {
var isChecked = $("#hobby").prop("checked");
console.log("isChecked ===== " +isChecked);
});
</script>
</html>
10 跟样式相关的操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>样式操作</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style type="text/css">
.one{
width: 200px;
height: 140px;
margin: 20px;
background: red;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
/*待用的样式*/
.second{
width: 222px;
height: 220px;
margin: 20px;
background: yellow;
border: pink 3px dotted;
float:left;
font-size: 22px;
font-family:Roman;
}
</style>
</head>
<body>
<input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/>
<input type="button" value=" addClass" id="b2"/>
<input type="button" value="removeClass" id="b3"/>
<input type="button" value=" 切换样式" id="b4"/>
<input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/>
<input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/>
<hr/>
<h1>有一种奇迹叫坚持</h1>
<h2>自信源于努力</h2>
<div id="one" class="aaa">
id为one
</div>
</body>
<script type="text/javascript">
// 采用属性增加样式(改变id=one的样式),样式名为second
$("#b1").click(function () {
//会覆盖之前的属性
document.getElementById("one").className = "second";
});
// addClass
$("#b2").click(function () {
//不会覆盖原来的类,只是追加新的类
$("#one").addClass("second");
});
// removeClass
$("#b3").click(function () {
//移除一个类
$("#one").removeClass("second");
});
// 切换样式
$("#b4").click(function () {
//有就是移除,没有就是添加
$("#one").toggleClass("second");
});
// 通过css()获得id为one背景颜色
$("#b5").click(function () {
//1个参数是获取样式值
var val = $("#one").css("background");
console.log("背景色: " + val);
});
// 通过css()设置id为one背景颜色为绿色
$("#b6").click(function () {
//2个参数是设置样式值
$("#one").css("background", "green");
});
</script>
</html>
11 元素的创建和添加
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>内部插入脚本</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input type="button" id="b1" value="将反恐放置到city的后面"/>
<input type="button" id="b2" value="将反恐放置到city的最前面"/>
<input type="button" id="b3" value="将反恐放在天津前面"/>
<input type="button" id="b4" value="将反恐放在天津后面"/>
<input type="button" id="b5" value="创建一个广州的节点"/>
<hr/>
<ol id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ol>
<ul id="game">
<li id="fk" name="fankong">反恐</li>
<li id="xj" name="xingji">星际</li>
</ul>
</body>
<script type="text/javascript">
//将反恐放置到city的后面
$("#b1").click(function () {
//注:append还有剪切的功能
// $("#city").append($("#fk"));
//复制的功能,克隆。主操作方是父元素
// $("#city").append($("#fk").clone());
//子元素向父元素中追加,主操作方是子元素
$("#fk").prependTo($("#city"))
});
//将反恐放置到city的最前面
$("#b2").click(function () {
$("#city").prepend($("#fk"))
});
//将反恐放在天津前面
$("#b3").click(function () {
$("#tj").before($("#fk"));
});
//将反恐放在天津后面
$("#b4").click(function () {
$("#tj").after($("#fk"));
});
//创建一个广州的节点,加到城市中:<li id="gz" name="guangzhou">广州</li>
$("#b5").click(function () {
// $("#city").append("<li id=\"gz\" name=\"guangzhou\">广州</li>")
$("#city").append(`<li id="gz" name="guangzhou">广州2222</li>`);
});
</script>
</html>
12 自杀和清空标签内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>删除节点</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input type="button" id="b1" value="从city中删除北京" />
<input type="button" id="b2" value="删除city中所有的子节点" />
<hr/>
<ol id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ol>
</body>
<script type="text/javascript">
//从city中删除<li id="bj" name="beijing">北京</li>节点
$("#b1").click(function () {
$("#bj").remove();
});
//删除city中所有的子节点,观察city本身有没有删除
$("#b2").click(function () {
$("#city").empty();
});
</script>
</html>
13 事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多个事件的写法</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
/*
1. 文本框得到焦点和失去焦点分别显示不同的背景色
2. 松开按键,将字母转成大写,再显示在文本框中
3. 使用链式写法实现相同的功能*/
$(function () {
// // 需求1: 输入框 得到焦点背景变黄
// $("#t1").focus(function () {
// $("#t1").css("background", "yellow");
// });
//
// //需求2: 输入框 失去焦点背景 变成浅绿色
// $("#t1").blur(function () {
// // $("#t1").css("background", "lightgreen");
// // this 指的是 绑定事件的js对象
// $(this).css("background", "lightgreen");
// });
//
// //需求3: 松开按钮 将字母变成大写
// $("#t1").keyup(function () {
// $("#t1").val($("#t1").val().toUpperCase());
// });
// 需求4: 合并式
$("#t1").focus(function () {
$("#t1").css("background", "yellow");
}).blur(function () {
// $("#t1").css("background", "lightgreen");
// this 指的是 绑定事件的js对象
$(this).css("background", "lightgreen");
}).keyup(function () {
$("#t1").val($("#t1").val().toUpperCase());
});
})
</script>
</head>
<body>
用户名:
<input type="text" id="t1" />
</body>
</html>
14 隔行变色 和 全选/全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行换色/全选全不选</title>
<style type="text/css">
table {
border-collapse: collapse;
}
tr {
height: 35px;
text-align: center;
}
a:link {
text-decoration: none;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 隔行变色
$("tr:gt(0):even").css("background", "lightyellow");
$("tr:gt(0):odd").css("background", "lightgreen");
// 全选/全不选功能
$("#all").click(function(){
// 让所有的复选框和当前标签的选中状态保持一致
// this 指的是 $("#all"), 是js对象
// this.checked 获取全选/全不选的状态
$("input[name='item']").prop("checked", this.checked);
});
})
</script>
</head>
<body>
<table id="tab1" border="1" width="700" align="center">
<tr style="background-color: #999999;">
<td><input type="checkbox" id="all"></td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td><input type="checkbox" name="item"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="item"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="item"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="item"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
15 模拟购物车案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车的实现</title>
<style type="text/css">
table {
width: 400px;
border-collapse: collapse;
margin: auto;
}
td,th {
text-align: center;
height: 30px;
}
.container {
width: 400px;
margin: auto;
text-align: right;
}
img {
width: 100px;
height: 100px;
}
th {
background-color: lightgray;
}
tr:hover {
background-color: lightyellow;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
<script type="text/javascript">
//添加到购物车
function addRow() {
// 1 获取用户输入的商品名
var pname = $("#pname").val();
// 5 判断 如果商品名为空, 提示商品名不得为空
if(pname==null || pname.trim()=="") {
alert("请填写商品名!");
// 让商品名输入框 获取焦点
$("#pname").focus();
return; // 结束当前方法
}
// 2 组装添加的内容
var content = `<tr>
<td><img src="img/girl.jpg" /></td>
<td>
${pname}
</td>
<td>
<!--this表示当前按钮-->
<input type="button" value="删除" οnclick="delItem(this)">
</td>
</tr>`;
// 3 将内容追加到购物车标签中
$("#cart").append(content);
// 4 清空内容 输入框内容
$("#pname").val("");
}
//目标: 删除当前行
function delItem(delBtn) {
// 删除按钮 -> 父元素 <td> -> 父元素 <tr> -> 删除tr
$(delBtn).parent().parent().remove();
}
</script>
</head>
<body>
<div class="container">
<table border="1">
<tbody id="cart">
<tr>
<th>
图片
</th>
<th>
商品名
</th>
<th>
操作
</th>
</tr>
<tr>
<td><img src="img/sx.jpg" /></td>
<td>
三星Note7
</td>
<td>
<!--this表示当前按钮-->
<input type="button" value="删除" onclick="delItem(this)">
</td>
</tr>
</tbody>
</table>
<br />
商品名:
<input type="text" id="pname" value="" />
<input type="button" value="添加到购物车" onclick="addRow()" />
</div>
</body>
</html>
作业:
1 案例13, 案例14, 案例15 今天必须敲熟