第一章
1.1 jQuery简介
什么是Jquery?
jQuery的本质就是JavaScript
只是将JavaScript的某些方法封装成一个库，
极大简化了原生JavaScript开发。
（潜台词：JS怎么用，Jquery就怎么用，只是把JS的代码简化了）
什么是库? lib
“库”--->（library--文库，图书馆）--> 将一些相关函数方法进行封装以便使用。
类似于jar包。
Jquery的优势：
1.轻量级，jquery库的大小仅仅几十kb
2.强大的选择器
（用更精简的代码即可获取指定的html元素，
摈弃了之前通过document.getElement等方法，并支持批量操作元素）
3.浏览器的兼容性，能兼容大部分市面上的浏览器
4.等等...
jQuery的版本：
主要分为1.x.x 2.x.x 3.x.x
jQuery的三个版本功能几乎相同，主要是浏览器的兼容性不同，
随着版本的升高，jQuery逐步放弃了对老旧浏览器的兼容
1.2 引入jQuery
就理解为 引入的一个外部的JS 这个外部的JS就是Jquery
如下：
<script src="xxx" ></script>
然后再另外的script标签中就可以既使用JS代码 也可以使用Jquery代码
如何引用：
1.下载jquery的js文件 但是Hbuiler内置了如何操作：
A.选中js文件夹
B.右键创建一个js文件
C.在下方选中jquery1.x 然后重命名即可
D.不要去动里面的代码
2.在script标签中引入刚刚下载的jquery文件
<script src="js/jquery.js"></script>
3.设置语法提示库
右下角 选择jquery xxx
4.测试
通过alert($) ; 如何正确弹窗就说明OK了 反之失败
凡是在控制台看到了这一行代码：$ is not defined
就表示Jquery没有引入成功
Jquery的压缩版：
在开发中：会经常看见xxxx.min.xx格式的文件
看到了这个min就理解为压缩版即可。
就是去除了空格、换行、注释等，让占据空间变小而已。
没有min关键字的就是未压缩版
了解即可。
压缩版理解为 上线版 项目都上线了，希望项目的体积越小。
未压缩版理解为 开发版 项目还没有上线，我随时需要对代码进行修改
// 1.引入js的路径有问题或忘记引入jquery
// 2.顺序问题,要先引入jquery 再写相关的代码 script的顺序问题
// 3.不要在引入的jquery的script标签内部写代码
1.3 jQuery魔力
//魔力1---体现代码的简化
//分别用JS和Jquery来将页面中的h1标签的内容 修改为 你好
//实现
// document.getElementsByTagName("h1")[0].innerText = "你好";
//jquery实现 暂时先将$("h1") 理解为 获取所有的h1标签
// $("h1").text("你好");
<h1>hello js</h1>
<h1>hello js</h1>
<h1>hello js</h1>
<h1>hello js</h1>
<h1>hello js</h1>
<h1>hello js</h1>
<script src="js/jquery.js">
</script>
<script>
//魔力2---批量操作元素的简化
//分别用JS和Jquery来将页面中所有的h1标签的内容 修改为 你好
//JS实现
// var h1 = document.getElementsByTagName("h1");
// for (let i = 0; i < h1.length; i++) {
// h1[i].innerText = "你好";
// }
//jquery实现 暂时先将$("h1") 理解为 获取所有的h1标签
$("h1").text("你好");
</script>
1.4 jQuery常见方法
<input type="text" id="a1" value="123" />
<h3>这是一个h3标签</h3>
<p style="color: red;">这是p标签</p>
<button>按钮</button>
<script src="js/jquery.js"></script>
<script>
//暂时先将$("xx") 理解为是获取xx元素 且暂时理解为它是jquery对象
//暂时将 document.getElementByXxx 理解为JS对象
//注意: js对象无法使用Juqery的相关用法 Juqery对象也无法使用JS的相关用法
//Jquery中常见方法如下:
// val() text() html() css() attr() prop()
//将input组件的值修改
// document.getElementById("a1").value = "你好";
// $("input").val("鸟");
//注意事项: js的value是属性 jquery的val是方法
//val使用场景:只能修改表单元素 且拥有value值的组件
//例如文本框密码框 但是像h1标签 span标签就无法使用该方法
//val的2种用法:
//1.取值:
// var str = $("input").val();
// alert(str);
//2.赋值
// $("input").val("~~~");
//注意事项: js的innerText是属性 jquery的text是方法
//text使用场景:只能修改非表单元素
//例如h1标签 span标签 但是像文本框密码框就无法使用该方法
//text的2种用法:
//1.取值:
// var str = $("h3").text();
// alert(str);
//2.赋值
// $("h3").text("!!!");
//注意事项: js的innerHtml是属性 jquery的html是方法
//html使用场景:只能修改非表单元素
//例如h1标签 span标签 但是像文本框密码框就无法使用该方法
//html和text的区别是:前者会将html标签识别 后者只会解析成文本
//html的2种用法:
//1.取值:
// var str = $("h3").html();
// alert(str);
//2.赋值
// $("h3").html("!!!");
//注意事项: js的style.xxx是属性 jquery的css是方法
//css使用场景:修改或获取HTML元素的CSS的样式
//css的2种用法:
//1.取值:
// var str = $("p").css("color");
// alert(str);
// 2.赋值
// $("p").css("color" , "yellow");
//attr使用场景:修改或获取HTML元素的属性 该属性的值 不为true或false
//常见的属性A类(等于一个具体的值):id class name type src href
//attr的2种用法:
//1.取值:
// var str = $("input").attr("id");
// alert(str);
// 2.赋值
// $("input").attr("id" , "aaa");
// $("button").attr("disabled","disabled");//没问题
//但是你会发现 无法通过attr将其修改为 可以使用
//prop使用场景:修改或获取HTML元素的属性 该属性的值 为true或false
//常见的属性B类(等于一个true或false):disable readonly checked
// var str = $("button").prop("disabled");
// alert(str);
$("button").prop("disabled",false);
</script>
1.5 其他知识
<script src="js/jquery.js">
</script>
<script>
//了解即可 只要你保证你的js代码 放在HTML最下方 就可以不用写它
//文档就绪函数意义: 将HTML加载完毕之后 再执行
// $(function(){
// //代码~~
// });
//看到上面的代码 就需要知道 他是文档就绪函数
</script>
<script>
// jquery对象：
// $(“xxx”)函数会返回一个对象，这个对象被称为jQuery对象。
// 例如刚刚所学习的css(),html()等都是jQuery对象的专属方法。
// dom对象：就是JS通过document对象获取的对象
// 例如document.getElementById();
// js对象无法使用Juqery的相关用法 Juqery对象也无法使用JS的相关用法
//js对象和jquery对象的区别:
// 下表列出了dom对象和jQuery对象进行一些操作的对比
// 1.原生JavaScript都是通过更改属性来实现
// 2.jQuery对象都是通过调用方法来实现
// 3.JavaScript是单独操作--如需批量操作需要借助for循环
// 4.jQuery是批量操作--如需单独设置，就确保其只有一个元素
</script>
<script src="js/jquery.js"></script>
<script>
//jqury对象的名字是: $
//jqury对象的名字是: jQuery
alert($==jQuery);//true
$("aa");
jQuery("aa");
//上述两行代码的意义一样,都表示获取aa元素
</script>
第二章
2.1 复习css选择器
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
CSS选择器： 方便获取HTML的元素
*/
/*
1.标签选择器：直接通过标签名即可获取元素
表示将所有的p标签都设置为红色
*/
p{
color: red;
}
/*
2.类(class)选择器：语法：.xxx 表示获取class为xxx的元素
*/
.a{
font-size: 20px;
}
/*
3.id选择器：语法：#xxx 表示获取id为xxx的元素 注意：确保id在本网页的唯一性
*/
#b{
font-size: 120px;
}
/*
4.群组选择器：语法：xxx,xxx,xxx 通过,分割将所有选择器进行统一操作
例如下面的写法表示：获取id为b class为a的 p标签
*/
#b,.a,p{
font-size: 120px;
}
/*
5.后代选择器：语法：父 子 通过空格获取父下面的所有的子元素包括孙子...
*/
.a1 li{
color: red;
}
/*
6.子代选择器：语法：父>子 通过大于号获取父下面的子元素 只能获取儿子
*/
#aaa>.a{
color: red;
}
</style>
</head>
<body>
<p class="a">啊啊啊</p>
<p class="a">啊啊啊</p>
<p id="b">啊啊啊</p>
<p class="a">啊啊啊</p>
<p>啊啊啊</p>
<hr>
<ul class="a1">
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
<li>ee</li>
<span>ff</span>
</ul>
<span id="aaa">
<span class="a">我是儿子a</span>
<span class="a">我是儿子a</span>
<span class="b">我是儿子b
<span class="a">我是孙子a</span>
</span>
</span>
</body>
2.2 jQuery对象讲解
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js"></script>
<script>
$( function(){
let p = $("p").text();
console.log(p);//不会报错,但是无法得到理想值
} );
</script>
</head>
<body>
<p>我是p标签</p>
<script src="js/jquery.js"></script>
<script>
$("p").text("~~~")
//$(xxx) 的相关概念
//jquery中最常见的函数. 有2个作用:
//1. 作为元素选择器 来获取元素.(修改元素。)
// 只需要要css选择器 通过字符串的形式作为参数传递进行即可
// 例如$("p") 表示获取所有的p标签
// 例如$(".p") 表示获取所有class为p的元素
//2. 预加载函数（文档就绪函数） 先将HTML加载完成 再来执行我 用法:将function作为参数传递即可
//如果可以保证js代码在HTML下方. 就可以不用该函数
</script>
</body>
2.3 jQuery自创选择器
<span>111</span>
<span>222</span>
<span>333</span>
<span>444</span>
<span>555</span>
<script src="js/jquery.js"></script>
<script>
//jquery不仅可以使用CSS选择器 也有自带的选择器
// :eq(xxx)选择器 表示获取第xxx个 0表示第一个
// $("span:eq(4)").text("~~~")
// :lt(xxx)选择器 表示获取小于xxx的元素 0表示第一个
// $("span:lt(4)").text("~~~")
// :gt(xxx)选择器 表示获取大于xxx的元素 0表示第一个
// $("span:gt(2)").text("~~~")
// :not选择器--> 表示获取除了指定位置外的其他元素
// $("span:not(:gt(2))").text("~~~");
</script>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
float: left;
margin-left: 20px;
}
</style>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<script src="js/jquery.js"></script>
<script>
//:even选择器 获取下标为偶数
$("div:even").css("background-color","Red");
//:odd选择器 获取下标为为奇数
$("div:odd").css("background-color","blue");
//:first选择器 获取下标为0
$("div:first").css("background-color","yellow");
//:last选择器 获取最后一个
$("div:last").css("background-color","pink");
</script>
</body>
2.4 盒子变色案例
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<script src="js/jquery.js"></script>
<script>
//div的特点: 默认高根据内容来 默认宽 :默认100% 所以块级元素 div hr p
//div
//在页面上绘制5个div 宽高各位100px 排成一行
setInterval(function(){
if( $("div:eq(2)").css("background-color") =="rgb(255, 0, 0)" ){
$("div:eq(2)").css("background-color" , "yellow");
$("div:not(:eq(2))").css("background-color" , "red");
}else{
$("div:eq(2)").css("background-color" , "red");
$("div:not(:eq(2))").css("background-color" , "yellow");
}
},1000);
</script>
2.5 隔行变色案例
<table border="1px" style="width: 500px;">
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>地址</td>
<td>性别</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>22</td>
<td>湖南</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>22</td>
<td>湖南</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>22</td>
<td>湖南</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>22</td>
<td>湖南</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>22</td>
<td>湖南</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>22</td>
<td>湖南</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>22</td>
<td>湖南</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>jack</td>
<td>22</td>
<td>湖南</td>
<td>男</td>
</tr>
</table>
<script src="js/jquery.js"></script>
<script>
$("tr:odd").css("background-color","yellow");
$("tr:even").css("background-color","blue");
$("tr:first").css("background-color","Red");
$("tr:last").css("background-color","pink");
</script>
第三章
3.1 使用jQuery操作dom元素
<div>
<p>111</p>
<p>222</p>
<p>333</p>
<p>444</p>
</div>
<script src="js/jquery.js"></script>
<script>
//dom : 文档对象模型 就是HTML元素
//js中如何操作DOM节点
// document.write("<p>我是p标签</p>");
//缺点:无法在指定的位置生成元素
//$() 函数的2个用法:
//用法1:放入一个字符串(选择器)表示获取元素 例如$("p") $("#abc") $(".del")
//用法2:放入一个函数，表示文档就绪函数 例如 $(function(){代码...})
//用法3:如下所示
//jquery创建节点的方法如下：
//1.创建节点 语法如下:
// $("xxxxx"); xxx表示你要创建的dom元素 例如 $("<p>我是p标签<p>");
//此时仅仅是创建了节点.理解为是孤儿节点. 需要将其插入到某个节点中.
//例如 放入body标签中 方法div标签中等等.
//插入方法1:append() 表示插入到指定元素内部的尾端.
//语法: $("aa").append("bb") 表示将bb插入到aa内部的尾端
//需求如下:
//在div的尾端插入一个值为555的p标签
//1.创建一个值为555的p标签
// let a = $("<p>555<p>");
// //调用方法即可
// $("div").append(a);
//插入方法2:prepend() 表示插入到指定元素内部的首端.
//语法: $("aa").prepend("bb") 表示将bb插入到aa内部的首端
//需求如下:
//在div的首端插入一个值为000的p标签
// //1.创建一个值为000的p标签
// let a = $("<p>000<p>");
// //调用方法即可
// $("div").prepend(a);
//插入方法3:after() 表示插入到指定元素的后面. 兄弟关系
//语法: $("aa").after("bb") 表示将bb插入到aa的后面
//需求如下:
//在111的后面插入一个1.5 1.5 1.5
//1.创建一个值为000的p标签
// let a = $("<p>1.5 1.5 1.5<p>");
//调用方法即可
// $("p:eq(0)").after(a);
//插入方法4:before() 表示插入到指定元素的前面. 兄弟关系
//语法: $("aa").before("bb") 表示将bb插入到aa的前面
//需求如下:
//在333的前面插入一个2.5 2.5 2.5
//1.创建一个值为2.5 2.5 2.5的p标签
// let a = $("<p>2.5 2.5 2.5<p>");
//调用方法即可
// $("p:eq(2)").before(a);
//上述的方法 可以实现 在任意位置创建新的节点.
//下述的方法 可以实现 删除任意位置的节点:
//方法1: remove()
//语法如下: $("xx").remove(); 将xx元素彻底删除 不仅删除了值 而且删除了标签
//需求如下: 将444的p标签删除
// $("p:eq(3)").remove();
//方法2: empty() 清空
//语法如下: $("xx").empty(); 将xx元素删除值 但是不删除标签
//需求如下: 将444的p标签删除
// $("p:eq(3)").empty();
//克隆节点
//语法: $("xxx").clone(); 将xxx元素复制一份
//注意事项:上一步仅仅只是复制 此时理解为孤儿节点. 任然需要通过append prepend after before进行粘贴
//例如:将111复制一份到444的后面
let a = $("p:eq(0)").clone();
$("p:eq(3)").after(a);
</script>
3.2 克隆盒子案例
<button>按钮</button>
<script src="js/jquery.js"></script>
<script>
//需求如下:点击按钮,实现按钮的复制.1-2-4-8-16-32-64
$("button").click(function(){
// alert(123);
let a = $("button:eq(0)").clone(true);
$("button").after(a);
});
//备注:clone仅仅是复制了样式 如果想要复制功能 只需要在clone()加上一个true
</script>
3.3 show和hide方法
<button>按钮</button> <br>
<img src="img/0.jpg">
<script src="js/jquery.js"></script>
<script>
//$("xx").hide();隐藏XX元素
//$("xx").show();显示XX元素
//$("xx").toggle();来回切换：显示或隐藏XX元素
$("button").click(function(){
// if($("img").css("display")=="inline"){
// $("img").hide();
// }else{
// $("img").show();
// }
$("img").toggle();
});
</script>
3.4 addClass和removeClass方法
<head>
<meta charset="utf-8">
<title></title>
<style>
.a{
font-size: 50px;
}
.b{
color: red;
}
.c{
background-color: aqua;
}
</style>
</head>
<body>
<p>你好</p>
<script src="js/jquery.js"></script>
<script>
//$("xx").addClass("a");给元素添加类名为a
//$("xx").removeClass("aa);给元素移除类名为a
// $("p").addClass("a");
// $("p").addClass("b");
// $("p").addClass("c");
//jquery对象的特点: 调用任意方法的返回值 依然是它本身
$("p").addClass("a").addClass("b").addClass("c").click(function(){
alert(123);
}).mouseover(function(){
alert(567)
}).removeClass("c");
</script>
</body>
3.5 获取当前元素
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
<button>按钮7</button>
<script src="js/jquery.js"></script>
<script>
//$("xx").index();返回当前元素在兄弟中下标
$("button").click(function(){
// $(this);获取当前的元素
alert( $(this).index() )
});
</script>
3.6 简单的轮播图
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
width: 400px;
height: 150px;
}
li{
float: left;
margin-left: 30px;
color: pink;
}
ul{
position: absolute;
top: 100px;
left: 0;
}
div{
position: relative;
width: 400px;
margin: auto;
}
</style>
</head>
<body>
<div>
<img src="img/0.jpg" />
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="js/jquery.js"></script>
<script>
$("li").mouseover(function(){
//获取当前li标签的下标
let index = $(this).index();
$("img").attr("src","img/"+index+".jpg");
indexImg = index;
$("li").css("color","pink");
$("li:eq("+index+")").css("color","red");
})
var indexImg = 0;
setInterval(function(){
indexImg++;
if (indexImg==6) {
indexImg = 0;
}
$("img").attr("src","img/" + indexImg +".jpg");
$("li").css("color","pink");
$("li:eq("+indexImg+")").css("color","red");
},2000)
</script>
</body>
3.7 each方法
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<script src="js/jquery.js"></script>
<script>
//each方法的语法: $("xx").each( function(){ 代码体 } );
//遍历xx元素.每遍历一次 就执行一次代码体.
//这种写法 较为局限 但是也很重要
// $("p").text("你好");
var arr = ["这是第1条新闻","这是第2条新闻","这是第3条新闻","这是第4条新闻","这是第5条新闻"]
$("p").each(function(){
$(this).text( arr[$(this).index()] );
});
</script>
3.8 LoL选项卡案例
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:400px;
height: 300px;
background-color: pink;
margin: auto;
}
ul{
list-style: none;
}
li{
float: left;
margin-left: 20px;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<ul>
<li>综合</li>
<li>公告</li>
<li>赛事</li>
<li>攻略</li>
<li>社区</li>
</ul>
<br><br><br>
<a href="#"> </a> <br><br>
<a href="#"> </a> <br><br>
<a href="#"> </a> <br><br>
<a href="#"> </a> <br><br>
<a href="#"> </a> <br><br>
<a href="#"> </a> <br><br>
</div>
<script src="js/jquery.js"></script>
<script>
//暂时模拟去数据库拿数据
let arr = [
["这是第1条综合数据~~~~~~~~~~","这是第2条综合数据~~~~~~~~~~","这是第3条综合数据~~~~~~~~~~","这是第4条综合数据~~~~~~~~~~","这是第5条综合数据~~~~~~~~~~","这是第6条综合数据~~~~~~~~~~"],
["这是第1条公告数据~~~~~~~~~~","这是第2条公告数据~~~~~~~~~~","这是第3条公告数据~~~~~~~~~~","这是第4条公告数据~~~~~~~~~~","这是第5条公告数据~~~~~~~~~~","这是第6条公告数据~~~~~~~~~~"],
["这是第1条赛事数据~~~~~~~~~~","这是第2条赛事数据~~~~~~~~~~","这是第3条赛事数据~~~~~~~~~~","这是第4条赛事数据~~~~~~~~~~","这是第5条赛事数据~~~~~~~~~~","这是第6条赛事数据~~~~~~~~~~"],
["这是第1条攻略数据~~~~~~~~~~","这是第2条攻略数据~~~~~~~~~~","这是第3条攻略数据~~~~~~~~~~","这是第4条攻略数据~~~~~~~~~~","这是第5条攻略数据~~~~~~~~~~","这是第6条攻略数据~~~~~~~~~~"],
["这是第1条社区数据~~~~~~~~~~","这是第2条社区数据~~~~~~~~~~","这是第3条社区数据~~~~~~~~~~","这是第4条社区数据~~~~~~~~~~","这是第5条社区数据~~~~~~~~~~","这是第6条社区数据~~~~~~~~~~"]
];
$("li").mouseover(function(){
//将所有的颜色都还原
$("li").css("color" , "black");
//悬停在哪里 就将li标签文字颜色改成蓝色
$(this).css("color" , "blue");
//将li标签对应的所有新闻展示出来
//获取li标签的下标
let index = $(this).index();
let a_index = 0;
$("a").each(function(){
//注意index方法返回的是当前元素在兄弟节点的下标
//由于a标签的兄弟不仅仅只有a还有ul标签和br标签
// 所以这里的值不为012345 而是一堆可能没规律的数
//解决方式:在外面加一个变量 负责计数
// let i = $(this).index();
// console.log(i);
$(this).text ( arr[index][ a_index++ ] ) ;
});
});
</script>
</body>
3.9 学生表格的crud
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
td{
width: 400px;
height: 30px;
}
input{
width: 100px;
}
</style>
</head>
<body>
<a id="show_hide" href="#">折叠信息</a> <br>
<table border="1px" style="border: 1px solid black;text-align: center;" cellpadding="0" cellspacing="0">
<Tr>
<Td>编号</Td>
<Td>姓名</Td>
<Td>年龄</Td>
<Td>删除</Td>
</Tr>
</table>
<a id="add" href="#">添加学生</a>
<br>
<div style="display: none;" id="add_student_form">
编号:<input type="text" id="id" /><br>
姓名:<input type="text" id="name" /><br>
年龄:<input type="text" id="age" /><br>
<button id="add_btn">添加</button> <br>
</div>
<script src="js/jquery.js"></script>
<script>
$("#show_hide").click(function(){
//xx元素的显示或隐藏 通过show 或hide方法来实现
//缺点:需要利用2个方法,且需要判断是显示还是隐藏
//toggle自动的进行显示和隐藏的切换
$("table").toggle();
});
//很多学生 通过数组来存储. 1个学生拥有多个属性肯定通过obj对象来实现
//总结就是:声明一个数组,数组内部由多个obj对象实现
//obj对象别名:在js中我们一般习惯性的将对象称为json对象 {"key" : "value"}
//不管JSON对象的属性是什么类型 统一使用字符串类型(暂时不说为什么，因为是规范)
var students = [
{
"id" : "1001",
"name": "李四",
"age" : "20"
},
{
"id" : "1002",
"name": "王五",
"age" : "22"
},
{
"id" : "1003",
"name": "赵六",
"age" : "23"
},
{
"id" : "1004",
"name": "张三",
"age" : "18"
}
];
//遍历学生 然后输出到表格内部 渲染数据
for(let i = 0 ;i<students.length;i++){
$("table").append( $("<tr><td class='db'>" +students[i].id+"</td><td class='db'>" +students[i].name+"</td><td class='db'>" +students[i].age+"</td><td><a class='del' href='#'>删除</a></td></tr>") )
}
$("#add").click(function(){
//思路:点击添加学生的超链接 显示一个新增学生的表单. 但是由于表单内部的元素较多.不方便使用append方法
//所以:提前创建一个表单.通过显示或隐藏
$("#add_student_form").toggle();
})
$("#add_btn").click(function(){
$("table").append( $("<tr><td class='db'>" + $("#id").val() +"</td><td class='db'>" + $("#name").val() +"</td><td class='db'>" + $("#age").val() +"</td><td><a class='del' href='#'>删除</a></td></tr>") )
$("#id").val("");$("#name").val("");$("#age").val("");
$("#add_student_form").hide();
$(".del").click(function(){
$(this).parent().parent().remove();
})
$(".db").click(function(){
//先存好值
let val1 = $(this).text();
console.log(val1)
//将td内部的值 替换成一个input组件
$(this).html("<input class='update' type='text' >");
//自动获得焦点 备注:这里没有像往常一样还在内部写了一个funtion,因为这里的需求就是获取焦点
//此时焦点在文本框的首段 需要改成尾端
$(".update").focus().val(val1);
$(".update").blur(function(){
let str = $(this).val();
$(this).parent().text(str);
})
});
})
$(".del").click(function(){
$(this).parent().parent().remove();
})
$(".db").dblclick(function(){
//先存好值
let val1 = $(this).text();
console.log(val1)
//将td内部的值 替换成一个input组件
$(this).html("<input class='update' type='text' >");
//自动获得焦点 备注:这里没有像往常一样还在内部写了一个funtion,因为这里的需求就是获取焦点
//此时焦点在文本框的首段 需要改成尾端
$(".update").focus().val(val1);
$(".update").blur(function(){
let str = $(this).val();
$(this).parent().text(str);
})
});
</script>
</body>
扫一扫
4713
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
