前端-jQuery-长期维护
############### jQuery简介 ################
jQuery这是非常重要的，在django项目中大量的前端都是使用jQuery进行操作 为什么要学习这个jQuery？
1，做同样的事情，jQuery比原生的js，写起来简单太多了，写起来非常的简练
2，jQuery相当于python的第三方模块，其实就是别人写好的代码，我们拿过来用，
3，没有这个jQuery也是可以的，但是比较麻烦，所以我们先学习js的dom操作，这个是基础， jQuery的学习内容？
1，改变标签
2，改变标签的属性
3，改变标签的样式，
4，事件相关
我们使用的jQuery的3.x版本，
############### jQuery选择器和筛选器 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jQuery初识</title>
</head>
<body> <div id="d1">d1</div>
<div class="c1">.c1</div>
<p class="c2">p</p>
<a class="c2" href="">a标签</a> <!--筛选器-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul> <!--not-->
<div id="d2">
<p class="c1">div</p>
<p class="c1">div</p>
<p class="c2">div</p>
<p class="c2">div</p>
</div> <!--:has-->
<div id="d3">
<div style="background-color: green">
<p>div中的p标签</p>
</div> <div style="background-color: red">
<a href="">div中的a标签</a>
</div>
</div> <!--属性选择器-->
<form action="" id="f1">
<label>用户名:
<input name="username" type="text" disabled>
</label> <label>密码:
<input name="pwd" type="password">
</label> <label>篮球:
<input name="hobby" value="basketball" type="checkbox">
</label> <label>足球:
<input name="hobby" value="football" type="checkbox">
</label> <label>男
<input name="gender" value="1" type="radio">
</label> <label>女:
<input name="gender" value="0" type="radio">
</label> </form>
<script src="jquery-3.2.1.min.js"></script>
<script> //id选择器
//这个$就是代表的jQuery()，这是jQuery的语法
$("#d1")//这种是返回一个列表，数组，必须要取出来，才是对应的标签
$("#d1")[0] //属性选择器，点后面加属性就可以了，任何属性都可以查，
$(".c1")
$(".c1")[0] //标签选择器
$("div")
$("div")[0]//这是找到div标签中的第一个 //上面是三种常用的选择器，这三种可以配合使用
$("a.c2")[0] //这就是取出了属性是c2的a标签 //找所有的选择器
$("*"); //组合选择器
$("a,#d1")//这是找到两种标签，中间用逗号分割 //层级选择器
//子孙选择器
$("form input")//这是在form标签的子孙标签中，去查到input标签，
//儿子选择器
$("label input")//在label的儿子标签中，去查到input标签，
//毗邻选择器
$("label+input")//这是找input标签，这个标签和label标签紧挨着
// 弟弟选择器
$("#p2~li") //这是找到p2标签下面的，所有的和他同级的li标签， //html的dom对象，和jQuery对象
var d1 = document.getElementById("d1")//这是一个dom对象
var $d1 = $("#d1")//这是一个jQuery对象，所有的jQuery对象的变量名字，约定俗成的，都要在前面加一个$符号，用来区分普通的dom对象，
//jQuery对象转换成dom对象，直接使用索引取出，
//dom对象转换成jQuery对象，直接使用$(dom对象)符号包一下，就是一个jQuery对象了， //筛选器
$("ul")//找到ul标签
$("ul li")//找到ul标签下面的所有li标签
$("ul li:first")//找到ul标签下面的第一个li标签
$("ul li:last")//找到ul标签下面的最后一个li标签
$("ul li:eq(2)")//找到ul标签下面的第3个li标签
$("ul li:even")//找到ul标签下面的索引是偶数的li标签
$("ul li:odd")//找到ul标签下面的索引是奇数的li标签
//隔行变色就是这样做的
$("ul li:gt(0)")//找到ul标签下面的索引大于0的li标签
$("ul li:lt(2)")//找到ul标签下面的索引是小于2的li标签 //筛选器-not
$("#d2 p:not(.c2)")//移除p标签下面，属性是c2的，移除不满足条件的 //筛选器-has
$("#d3 div:has(a)")//找到含有a标签的div //属性筛选器
$("input[name='hobby']")//找到属性是hobby 的输入框 //表单常用筛选
$(":text")
$("input[type='text']")
//这两种写法是一样的，第一种是简写 /*
:text
:password
:file
:radio
:checkbox :submit
:reset
:button //表单对象属性
:enabled
:disabled
:checked
:selected
* */ </script>
</body>
</html>
############### jQuery-筛选器2和样式操作，简单的点击事件实现灯点亮和关闭 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>筛选器示例</title> <style>
.c1 {
height: 200px;
width: 200px;
border-radius: 50%;
background-color: red;
}
.c2 {
background-color: green;
}
</style>
</head>
<body> <ul>
<li id="l0">l0</li>
<li>l1</li>
<li>l2</li>
<li id="l3">l3</li>
<li>l4</li>
<li>l5</li>
</ul> <!--父标签-->
<div id="d1">div-1
<div id="d2">div-2
<div id="d3">div-3
<a href="">a标签</a>
</div>
</div>
</div> <!--兄弟和儿子--> <div id="dd">
<p>p0</p>
<p>p1</p>
<p id="p2">p2</p>
<p>p3</p>
</div> <div class="c1"></div> <script src="jquery-3.2.1.min.js"></script>
<script>
$("#l3")//这是找到id是l3的这个标签 //这是找到这个标签的上一个
$("#l3").prev(); //这是找到这个标签的下一个
$("#l3").next(); //这是找到这个标签上面所有的标签
$("#l3").prevAll(); //这是找到这个标签下面所有的标签
$("#l3").nextAll(); //这是找到l1下面的，直到找到l3为止，不包含l3
$("#l1").nextUntil("#l3"); //找父标签
$("a").parent()
//找到父标签的父标签，这是一种链式操作
$("a").parent().parent()
//找到所有的父标签
$("a").parents()
//直到找到某一个父标签为止
$("a").parentsUntil("body") //找到子标签
$("#dd").children() //找到兄弟标签，上边下面都能找到
$("#p2").siblings() // 查找find
$("div").find("p") //这是找到div标签，在这个结果集里面再去找p标签 // ########################################
//操作标签
//添加指定的CSS类名。
$("#p2").addClass("c2");
// 移除指定的CSS类名。
$("#p2").removeClass("c2");
// 判断样式存不存在
$("#p2").hasClass("c2");
// 切换CSS类名，如果有就移除，如果没有就添加。
$("#p2").toggleClass("c2"); //样式操作实例
//灯的点亮和点灭
// 第一步：找到要操作的元素
//语法和原生的还是不一样的
$(".c1").click(function () {
//this这是一个dom对象，要转换成为jQuery对象
$(this).toggleClass("c2")
}
) </script> </body>
</html>
############### jQuery操作左侧菜单的展示和隐藏的思路 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>左侧菜单作业分解</title>
<style>
* {
margin: 0;
padding: 0;
} ul {
list-style-type: none;
} .hide {
display: none;
}
</style>
</head>
<body> <div class="left-menu">
<div class="menu-title">菜单一</div>
<div class="menu-items">
<ul>
<li><a href="">111</a></li>
<li><a href="">222</a></li>
<li><a href="">333</a></li>
</ul>
</div>
<div class="menu-title">菜单二</div>
<div class="menu-items hide">
<ul>
<li><a href="">111</a></li>
<li><a href="">222</a></li>
<li><a href="">333</a></li>
</ul>
</div>
<div class="menu-title">菜单三</div>
<div class="menu-items hide">
<ul>
<li><a href="">111</a></li>
<li><a href="">222</a></li>
<li><a href="">333</a></li>
</ul>
</div>
</div> <script src="jquery-3.2.1.min.js"></script>
<script>
// 需求分析
// 找到所有的.menu-title标签,绑定点击事件 // 点击事件具体要做的事儿
// 1. 找到当前点击菜单下面的.menu-items,把它显示出来(移除hide类)
// 2. 把其他的.menu-items隐藏,添加hide类 // 1. 找到所有的.menu-items, 隐藏
// 2. 找到当前点击菜单下面的.menu-items,把它显示出来(移除hide类) </script>
</body>
</html>
############### jQuery样式操作-操作class类-点击登录 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自定义模态框示例</title>
<style>
.cover {
position: absolute;
/*这是铺满屏幕*/
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.4);
z-index: 998;
} .modal {
height: 400px;
width: 600px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -200px;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="b1">屠龙宝刀,点击就送!</button>
<div class="cover hide"></div>
<div class="modal hide">
<form>
<p>
<label>用户名:
<input type="text">
</label>
</p>
<p>
<label>密码:
<input type="password">
</label>
</p>
<p>
<input type="submit" value="登录">
<input id="cancel" type="button" value="取消">
</p>
</form>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 找到点击弹出模态框的按钮
$("#b1").click(function () {
// 把.cover和.modal显示出来(去除掉.hide)
$(".cover").removeClass("hide"); // 显示背景
$(".modal").removeClass("hide"); // 显示模态框
}); // 找到取消按钮,绑定事件
$("#cancel").click(function () {
// 给背景和模态框都加上hide类
$(".cover").addClass("hide");
$(".modal").addClass("hide");
})
</script>
</body>
</html>
############### jQuery修改css样式 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>修改CSS样式</title>
</head>
<body> <p>乔小强</p>
<p>二哥</p>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("p").click(function () {
// 把当前点击的标签变绿
// 在处理事件的函数中用 this 表示 当前触发事件的标签
// $(this).css("color", "red");
// $(this).css("font-size", "24px"); $(this).css({"color": "pink", "font-size": "48px"});//这个写法就是直接修改的标签的style属性，里面就是css样式，
//使用原生dom怎么写的？
// 是找到元素.style.color="green"
})
</script>
</body>
</html>
############### jQuery位置相关方法 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>位置相关方法</title>
<style>
* {
margin: 0;
padding: 0;
} .c1,
.c2,
.c3 {
height: 100px;
width: 100px;
background-color: red;
} .c2 {
position: relative;
left: 200px;
top: 200px;
background-color: green;
} .c3 {
position: absolute;
left: 100px;
top: 100px;
background-color: blue;
}
</style>
</head>
<body> <div class="c1">我是div</div>
<div class="c2">
<div class="c3">我是c3</div>
</div> <script src="jquery-3.2.1.min.js"></script> <script> $(".c1").offset(); //返回一个字典：{top: 0, left: 0}，获取位置
$(".c1").offset({top:100,left:100});//这是直接通过参数设置位置
$(".c3").position(); //获取匹配元素相对父元素的偏移，没有父标签就是和offset一样的结果，从body算父标签 </script>
</body>
</html>
############### jQuery位置相关方法-返回顶部实例 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>位置相关示例之返回顶部</title>
<style>
* {
margin: 0;
} .c1 {
width: 100px;
height: 200px;
background-color: red;
} .c2 {
height: 50px;
width: 50px; position: fixed;
bottom: 15px;
right: 15px;
background-color: #2b669a;
} .hide {
display: none;
} .c3 {
height: 100px;
}
</style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div> <button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(window).scroll(function () {//scroll这个是滚动事件
if ($(window).scrollTop() > 100) {//通过控制这个按钮的hide 属性来判断是否要展示，
$("#b2").removeClass("hide");
} else {
$("#b2").addClass("hide");
}
});
$("#b2").click(function () {
$(window).scrollTop(0);//设置距离顶部的距离是0，那么就是回到顶部了
})
</script>
</body>
</html>
############### jQuery尺寸操作 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>尺寸示例</title>
<style>
.c1 {
height: 100px;
width: 200px;
padding: 10px;
margin: 20px;
background-color: red;
border: 5px solid green;
}
</style>
</head>
<body> <div>
<div class="c1">div</div>
</div>
<script src="jquery-3.2.1.min.js"></script> <script>
$(".c1").height(); //这是文本的高度
$(".c1").width();//这是文本的宽度
$(".c1").innerHeight(); //这是文本和padding的高度
$(".c1").innerWidth();//这是文本和padding的宽度
$(".c1").outerHeight();//这是文本和padding，还有border的高度
$(".c1").outerWidth();//这是文本和padding，还有border的宽度 </script> </body>
</html>
############### jQuery的文档操作 ##############
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文档操作</title>
<style>
.error {
color: red;
}
</style>
</head>
<body> <div id="d1">
<p><span>span</span></p>
<div>div</div>
</div> <form id="f1">
<p>
<label>用户名:
<input class="need" name="username" type="text">
<span class="error"></span>
</label>
</p>
<p>
<label>密码:
<input class="need" name="password" type="password">
<span class="error"></span>
</label>
</p> <p>爱好:
<label>篮球
<input name="hobby" value="basketball" type="checkbox">
</label>
<label>足球
<input name="hobby" value="football" type="checkbox">
</label>
<label>双色球
<input name="hobby" value="doublecolorball" type="checkbox">
</label>
</p> <p>性别:
<label>男
<input name="gender" value="1" type="radio">
</label>
<label>女
<input name="gender" value="0" type="radio">
</label>
<label>保密
<input name="gender" value="2" type="radio">
</label>
</p> <p>
<label for="s1">从哪儿来:</label>
<select name="from" id="s1">
<option value="010">北京</option>
<option value="021">上海</option>
<option value="020">广州</option>
</select>
</p>
<p>
<label for="s2">从哪儿来:</label>
<select name="from" id="s2" multiple>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="020">广州</option>
<option value="0755">深圳</option>
</select>
</p>
<p>
<label for="t1">个人简介:</label>
<textarea name="memo" id="t1" cols="30" rows="10"> </textarea>
</p>
<p>
<input id="b1" type="submit" value="登录">
<input id="cancel" type="button" value="取消">
</p>
</form>
<script src="jquery-3.2.1.min.js"></script> <script> // 对html和text文本操作
$("#d1");//获取id是d1的标签，这是一个jQuery对象
$("#d1")[0];//这是把jQuery对象里面的内容取出，这就是一个dom对象了
$("#d1")[0].innerHTML;//这是获取这个标签下面所有的html内容
$("#d1")[0].innerText;//这是获取这个标签下面所有的html内容
// ####################
//上面是dom操作
//使用jQuery操作
$("#d1").html();
$("#d1").text();
$("#d1").html("hehe");//这是设置html的值，但是这种设置之后，里面的子标签也会被替换
$("#d1").html("<p>123</p>>");//这是设置一个p标签，但是这种设置之后，里面的子标签也会被替换
$("#d1").text("hehe");//这是设置text的值，但是这种设置之后，里面的子标签也会被替换 //############################
// 对值操作：
$(":text").val();// 取得第一个匹配元素的当前值
$(":text").val("andy");// 设置所有匹配元素的值 //对多选框取值
$(":checkbox");//这是多选框中所有的值
$(":checkbox").val();//这是取多选框的值，但是只会返回第一个
$(":checkbox:checked");//这是取多选框中选中的值
$(":checkbox:checked").val();//这是取多选框被选中的值，但是只会返回第一个
//所以上面的两种取值方式都是有问题的，不能这么取
$("input").val();//这个取值也是默认只是去第一个input框的值，
$("input").val("1212")//但是设置值就是把所有的input框全都设置成这个了，
//这个取值和设置值的区别要记住，
//所以要循环读取才可以
var $checkbox = $(":checkbox:checked");
for (var i =0;i<$checkbox.length;i++){
console.log($checkbox[i]);
console.log($($checkbox[i]).val())
}
// 设置值
$(":checkbox:checked").val("basketball"); // 对单选框取值
$(":radio").val(); //对下拉框的单选和多选取值
$("#s1").val();
$("#s2").val();
// 设置值
$("#s2").val(["021","0755"]); //对文本框操作
$("#t1").val() </script> <script>
// 需求：点击登录按钮验证用户名和密码为不为空
// 为空就在对应的input标签下面显示一个错误提示信息 // 1. 给登录按钮绑定点击事件
// 2. 点击事件要做的事儿
// 2.1 找到input标签--> 取值 --> 判断为不为空 --> .length为不为0
// 2.2 如果不为空,则什么都不做
// 2.2 如果为空,要做几件事儿
// 2.2.1 在当前这个input标签的下面 添加一个新的标签,内容为xx不能为空 $("#b1").click(function () {
var $needEles = $(".need");//找到所有必填的input标签
for (var i = 0; i < $needEles.length; i++) {
if ($($needEles[i]).val().trim().length === 0) {
var labelName = $($needEles[i]).parent().text().trim().slice(0, -1);//父标签就是label标签，文本就是用户名密码，进行切片是把后面的冒号去掉
$($needEles[i]).next().text(labelName + "不能为空!");//next已经定位到了下面的span标签，text是对这个span标签进行设置文本
}
}
//现在点击登录相当于两个事件，一个是我们自己绑定的，一个是默认的点击会自动提交的事件，
//设置这个False就是说执行完我的这个事件之后，下面的就不执行了，这样我们可以看到效果
return false;
}) </script>
</body>
</html>
############### jQuery属性操作 ###############
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>属性操作</title>
</head>
<body> <img src="http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg" alt="">
<input type="button" id="b1" value="下一个"> <input checked type="checkbox" id="c1">
<input type="checkbox" id="c2"> <script src="jquery-3.2.1.min.js"></script> <script>
//属性设置
$("img").attr({"title":"213123"})
//属性删除
$("img").removeAttr("title") //判断一个radio，和CheckBox 有没有被选中
$("#c1").prop("checked")//返回一个布尔类型，
$("#c1").prop("checked",false)//设置值，取消选中 </script> <script>
var oldURL;
var newURL = "http://img01.yohoboys.com/contentimg/2017/08/12/21/012a1eab9842a752f8c4d98b8fc2777ad7.jpg"
$("#b1").click(function () {
var $imgEles = $("img");
// 修改img标签的src属性
oldURL = $imgEles.attr("src");
$imgEles.attr("src", newURL);
newURL = oldURL;
}); </script>
</body>
</html>
############### jQuery全选-取消-反选功能分析 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>作业需求分析</title>
</head>
<body> <table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>小东北</td>
<td>二人转演员</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>乔小强</td>
<td>xx演员</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>韩涉</td>
<td>导演</td>
</tr>
</tbody>
</table> <input type="button" id="b1" value="全选">
<input type="button" id="b2" value="反选">
<input type="button" id="b3" value="取消"> <script src="jquery-3.2.1.min.js"></script>
<script>
// 点击全选,表格中所有的checkbox都选中
// 1. 找checkbox
// 2. 全部选中 --> prop("checked", true); // 点击取消
// 1. 找checkbox
// 2. 全部取消选中 --> prop("checked", false); // 反选
// 1. 找到所有的checkbox
// 2. 判断
// 2.1 原来没选中的,要选中
// 2.2 原来选中的,要取消选中
</script>
</body>
</html>
############### jQuery文档操作 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文档操作示例</title>
</head>
<body> <ul id="u1">
<li id="l1">1</li>
<li>2</li>
<li>3</li>
</ul> <script src="jquery-3.2.1.min.js"></script> <script>
//添加标签到指定标签的后面
//使用原生的dom
var liEle = document.createElement("li");//创建
liEle.innerText = 0;//设置值
$("#u1").append("liEle");//在最末尾添加
$(liEle).appendTo("#u1");//这是另外一种写法，效果和上面一样
$("#u1").prepend("liEle");//在最前面添加
$(liEle).prependTo("#u1");//这是另外一种写法，效果和上面一样 /*
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面 添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
* */ // $("#u1").remove();// 直接把ul标签，和内部的子标签都删除了，
// $("#u1").empty();// 清空内部的子节点 </script> </body>
</html>
############### jQuery文档操作-添加一行记录 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>点击在表格最后添加一条记录</title>
</head>
<body>
<table border="1" id="t1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
<tbody>
</thead>
<tr>
<td>1</td>
<td>小强</td>
<td>吃冰激凌</td>
<td>
<button class="delete">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>二哥</td>
<td>Girl</td>
<td>
<button class="delete">删除</button>
</td>
</tr> </tbody>
</table> <button id="b1">添加一行数据</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 绑定事件
$("#b1").click(function () {
// 生成要添加的tr标签及数据
var trEle = document.createElement("tr");
$(trEle).html("<td>3</td>" +
"<td>小东北</td>" +
"<td>社会摇</td>" +
"<td><button class='delete'>删除</button></td>");
// 把生成的tr插入到表格中
$("#t1").find("tbody").append(trEle);
}); // 每一行的=删除按钮绑定事件
$(".delete").click(function () {
$(this).parent().parent().remove();
}); </script>
</body>
</html>
############### jQuery-文档操作-替换操作 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>替换操作示例</title>
</head>
<body> <p><a href="http://www.sogo.com">aaa</a></p>
<p><a href="">bbb</a></p>
<p><a href="">ccc</a></p> <button id="b1">点我!</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#b1").click(function () {
// 创建一个img标签
var imgEle = document.createElement("img");
$(imgEle).attr("src", "http://img4.imgtn.bdimg.com/it/u=1316130882,2083273552&fm=26&gp=0.jpg");
$("a").replaceWith(imgEle);
// $(imgEle).replaceAll("a");
}); </script>
</body>
</html>
############### jQuery文档操作-克隆操作 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>克隆示例</title>
</head>
<body> <button id="b1">屠龙宝刀,点我就送!</button> <script src="jquery-3.2.1.min.js"></script>
<script>
$("#b1").click(function () {
$(this).clone().insertAfter(this);
});
</script>
</body>
</html>
############### jQuery事件-给未来元素绑定事件 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>on绑定事件 点击在表格最后添加一条记录</title>
</head>
<body>
<table border="1" id="t1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小强</td>
<td>吃冰激凌</td>
<td>
<button class="delete">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>二哥</td>
<td>Girl</td>
<td>
<button class="delete">删除</button>
</td>
</tr> </tbody>
</table> <button id="b1">添加一行数据</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
//绑定事件现在有四种方法了
//1，标签内部写onclick=foo(this);
//2，原生的dom的js绑定，dom对象.onclick=function(){...}
//3，jQuery绑定事件，jQuery对象.click=function(){...}
//4，下面就是第四种也是jQuery绑定的方法，
// 4.1 jQuery对象.on("click",function(){...})
// 4.2 jQuery对象.on("click","选择器",function(){...}) 适用于给未来元素绑定事件，就是从前面的jQuery对象去找选择器，然后绑定事件，
// 以后绑定事件都使用on的方式去绑定，
// 绑定事件
$("#b1").on("click", function () {
// 生成要添加的tr标签及数据
var trEle = document.createElement("tr");
$(trEle).html("<td>3</td>" +
"<td>小东北</td>" +
"<td>社会摇</td>" +
"<td><button class='delete'>删除</button></td>");
// 把生成的tr插入到表格中
$("#t1").find("tbody").append(trEle);
}); // 每一行的删除按钮绑定事件
$("tbody").on("click", ".delete", function () {//为什么给tbody绑定删除事件，因为会有一层一层的事件捕获，tbody是一刷新页面就存在的，所以给以使用这标签
console.log(this);
$(this).parent().parent().remove();
}); </script>
</body>
</html>
############### jQuery键盘相关事件-批量操作 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>键盘相关事件</title> </head>
<body> <table border="1" id="t1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>小强</td>
<td>吃冰激凌</td>
<td>
<select>
<option value="0">下线</option>
<option value="1">上线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>二哥</td>
<td>Girl</td>
<td>
<select>
<option value="0">下线</option>
<option value="1">上线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>二哥</td>
<td>Girl</td>
<td>
<select>
<option value="0">下线</option>
<option value="1">上线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>二哥</td>
<td>Girl</td>
<td>
<select>
<option value="0">下线</option>
<option value="1">上线</option>
<option value="2">离线</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>二哥</td>
<td>Girl</td>
<td>
<select>
<option value="0">下线</option>
<option value="1">上线</option>
<option value="2">离线</option>
</select>
</td>
</tr> </tbody>
</table>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 确保绑定事件的时候DOM树是生成好的
$(document).ready(function () {
var mode = false;
var $bodyEle = $("body");
// 给文档绑定 监听键盘按键被按下去的事件，keydown是键盘按下的事件
$bodyEle.on("keydown", function () {
//
console.log(event.keyCode);
if (event.keyCode === 17) {
// 进入批量操作模式
mode = true;
console.log(mode);
}
});
// 按键抬起来的时候,退出批量操作模式，keyup 是键盘按下的事件
$bodyEle.on("keyup", function () {
//
console.log(event.keyCode);
if (event.keyCode === 17) {
// 进入批量操作模式
mode = false;
console.log(mode);
}
});
$("select").on("change", function () {
// 取到当前select的值
var value = $(this).val();
var $thisCheckbox = $(this).parent().siblings().first().find(":checkbox");
// 判断checkbox有没有被选中
if ($thisCheckbox.prop("checked") && mode) {
// 真正进入批量操作模式
var $checkedEles = $("input[type='checkbox']:checked");
for (var i = 0; i < $checkedEles.length; i++) {
// 找到同一行的select
$($checkedEles[i]).parent().siblings().last().find("select").val(value);
}
}
})
});
</script>
</body>
</html>
############### jQuery简单动画 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>简单动画效果演示</title>
</head>
<body> <img width="600" src="http://img.diudou.com/file/news/yuwen/2016-08-07/db2cd785cd6ad8f05be167f18975253c.jpg" alt=""> <div>菜单一</div>
<div class="menu-items">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</div> <script src="jquery-3.2.1.min.js"></script> <script> $("img").hide(5000);//5秒隐藏，逐渐的缩小高度和宽度
$("img").toggle(5000);//逐渐展示出来 //滑动
$(".menu-items").slideUp(3000); //往上滑动
$(".menu-items").slideDown(3000); //往下滑动
$(".menu-items").slideToggle(3000); $("img").fadeTo(5000);//这是5秒之内透明度变成0
$("img").fadeTo(5000,0.3);//这是5秒之内透明度变成0.3
/*
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
* */ </script> </body>
</html>
############### jQuery中的each操作 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>each循环示例</title>
</head>
<body> <div>111</div>
<div>222</div>
<div>333</div>
<div>444</div>
<div>555</div>
<script src="jquery-3.2.1.min.js"></script> <script>
$("div").each(function () {//jQuery提供了一个循环读取的方法，使用原生的需要进行for循环
console.log(this)//this是每一个div标签，
console.log(this.innerText)//this是每一个div标签，
}) //each的另外一种用法
var a1 = [11, 22, 33, 44, 55]
$.each(a1, function (k, v) {//如果只有一个参数，就是只打印的索引，
console.log(k, v)//k是索引，v是值
}) //如何退出each循环
var a1 = [11, 22, 33, 44, 55]
$.each(a1, function (k, v) {//如果只有一个参数，就是只打印的索引，
console.log(k, v)//k是索引，v是值
if (v === 22) {
//后续的循环不进行了,使用return false
// return false
// 如果是跳过本次循环，而不是整个循环，使用return
return;
}
})
</script> </body>
</html>
############### jQuery中的data操作 ################
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>周末作业讲解</title>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #616161;
opacity: 0.4;
z-index: 998;
} .modal {
height: 200px;
width: 300px;
background-color: white;
position: absolute;
margin-top: -100px;
margin-left: -150px;
top: 50%;
left: 50%;
z-index: 1000;
} .hide {
display: none;
}
</style>
</head>
<body> <button id="add">新增</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>街舞</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Alex</td>
<td>烫头</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>苑局</td>
<td>日天</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
</tbody>
</table> <div id="myCover" class="cover hide"></div>
<div id="myModal" class="modal hide">
<div>
<p>
<label for="modal-name">姓名</label>
<input type="text" id="modal-name">
</p>
<p>
<label for="modal-hobby">爱好</label>
<input type="text" id="modal-hobby">
</p>
<p>
<button id="modal-submit">提交</button>
<button id="modal-cancel">取消</button>
</p>
</div>
</div>
<script src="./jquery-3.2.1.min.js"></script>
<script> // 定义一个弹出模态框的函数
function showModal() {
$("#myCover,#myModal").removeClass("hide");
} // 关闭模态框
function closeModal() {
// 1. 清空模态框中的input
$("#myModal").find("input").val("");
$("#myCover,#myModal").addClass("hide");
} // 给新增按钮绑定事件
$("#add").on("click", function () {
// 把模态框弹出!
// $("#myCover").removeClass("hide");
// $("#myModal").removeClass("hide");
showModal()
}); // 模态框中的取消按钮绑定事件
$("#modal-cancel").on("click", function () {
// 2. 隐藏模态框
closeModal(); }); // 模态框中的提交按钮绑定事件
$("#modal-submit").on("click", function () {
// 1. 取到 用户 填写的 input框的值
var name = $("#modal-name").val(); // 把用户在模态框里输入的姓名获取到,保存在name变量中
var hobby = $("#modal-hobby").val(); // 把用户在模态框里输入的爱好获取到,保存在hobby变量中 var $myModalEle = $("#myModal");
// 判断,按需操作
var $currentTrEle = $myModalEle.data("currentTr");
if ($currentTrEle !== undefined) {
// 说明是编辑状态
$currentTrEle.children().eq(1).text(name);
$currentTrEle.children().eq(2).text(hobby); // 清空之前保存的当前行
$myModalEle.removeData();
} else {
// 创建tr标签把数据填进去
var trEle = document.createElement("tr");
var number = $("tr").length;
$(trEle).html("<td>" + number + "</td>" +
"<td>" + name + "</td>" +
"<td>" + hobby + "</td>" +
'<td><button class="edit-btn">编辑</button> <button class="delete-btn">删除</button></td>'
);
// 把创建好的tr添加到tbody中
$("tbody").append(trEle);
}
// 隐藏模态框
closeModal();
}); // 2. 根据是编辑 还是新增 做不同的操作
// 2.1 如果是新增操作,就生成一条新的tr,加到table的最后
// 2.2 如果是编辑操作, 根据先前 编辑 按钮那一行
// 难点在于 如何确定 编辑的是哪一行? --> 利用data()可以存具体的jQuery对象 // 给每一行的编辑按钮绑定事件
// 要使用事件委托,基于已经存在的元素(页面加载完之后存在的标签)绑定事件
$("tbody").on("click", ".edit-btn", function () {
// 把模态框弹出来
showModal();
// 把原来的数据填写到模态框中的input
var $currentTrEle = $(this).parent().parent(); // 把当前行的jQuery对象保存起来
$("#myModal").data("currentTr", $currentTrEle); var name = $currentTrEle.children().eq(1).text();
var hobby = $currentTrEle.children().eq(2).text(); // 填
$("#modal-name").val(name);
$("#modal-hobby").val(hobby);
}); // 给每一行的删除按钮绑定事件
$("tbody").on("click", ".delete-btn", function () {
// 删除被点击的删除按钮的那一行
var $currentTrEle = $(this).parent().parent();
// 更新序号
// 找到当前行后面所有的tr,依次更新序号
$currentTrEle.nextAll().each(function () {
// 取到原来的序号
var oldNumber = $(this).children().first().text();
// 将原来的序号-1,再赋值回去
$(this).children().first().text(oldNumber - 1);
});
$currentTrEle.remove(); }); </script>
</body>
</html>
############### 结束线 ################
前端-jQuery-长期维护的更多相关文章
- Web前端JQuery入门实战案例
前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
- Web前端JQuery面试题（三）
Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...
- Web前端JQuery面试题（二）
Web前端JQuery面试题(二) 1.请写出jquery的语法? <script type="text/javascript"> $(document).ready( ...
- Web前端JQuery面试题（一）
Web前端JQuery面试题(一) 一:选择器 基本选择器 什么是#id,element,.class,*,selector1, selector2, selectorN? 答: 根据给定的id匹配一 ...
- 关于前端 jQuery 面试的知识点
参考一个博主整理的一些前端 jQuery 的一些面试题 参考博客:https://www.cnblogs.com/dashucoding/p/11140325.html 参考博客:https://ww ...
- C#NPOI.RabbitMQ.EF.Attribute.HttpRuntime.Cache.AD域.List<T>根据指定字段去重.前端JQuery.Cache.I18N(多语言).data-xx(自定义属性)
使用NPOI 操作Excel 个人使用的电脑基本默认安装Excel 操作起来 调用Excel的组件便可.如果是一台服务器.没有安装Excel,也就无法调用Excel组件. 在此推荐第三方插件.NPOI ...
- 前端 jQuery副本
jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...
- 前端——jQuery介绍
目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...
- 前端-jQuery介绍
目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...
- Python之Web前端jQuery扩展
Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...
随机推荐
- PAT Advanced 1053 Path of Equal Weight (30) [树的遍历]
题目 Given a non-empty tree with root R, and with weight Wi assigned to each tree node Ti. The weight ...
- 移动端— Touch事件轮播图
虽然 以前也写过手机端页面 .当时用的jquery moblie 框架.啥也不懂 就知道复制粘贴出效果 不敢改内部样式.现在呢 了解手机端原理 一些基本的概念 视口 缩放 后 .再去想以前写的页面 ...
- JavaScript—原生轮播和无缝滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 对接memcache经验分享
接口访问日志 数据结构 分享 apiname 接口名称 apiname[cnt]接口访问次数每访问一次增加一次 这里要处理并发问题 我还没有解决: apiname[cnt][n][spent_tim ...
- bfs--奇怪的电梯P1135
计院有一个bug电梯,可能是hyk造的,很多bug,电梯只有两个按钮,“上”和“下”,电梯每层都可以停,每层都有一个数字Ki(0<=Ki<=n),当你在一层楼,你按“上”键会到1+K1层, ...
- mod_rewrite是Apache的一个非常强大的功能
mod_rewrite是Apache的一个非常强大的功能,它可以实现伪静态页面.下面我详细说说它的使用方法!对初学者很有用的哦! 1.检测Apache是否支持mod_rewrite 通过php提供的p ...
- UVA 10273
我是用暴力过的,虽然网上说刘汝佳出的这道题考的是堆,我不太懂,..用暴力时间复杂度高一些,但是一样能过 所要注意的就是周期问题,因为只要同时存在某一天超过一头牛产奶量最小,就不会杀牛,而每头牛的周期和 ...
- 十、GUI编程
GUI图形用户界面编程 GUI编程类似“搭积木”,将一个个组件放到窗口中,并通过增加“事件处理”,完成一个个程序.例如:记事本.word.画图工具等. tkinter模块 tkinter是 ...
- MySQL-SQL语句分类
MySQL中的SQL语句有:DDL,DML,DCL,DQL,TCL DDL:数据库定义语言 data Definition language 用于创建.修改.和删除数据库内的数据结构,如: 1:创建和 ...
- 如何升级Powershell How to upgrade powershell 5
查看当前版本 Win+R 输入 powershell 进入. 输入:$PSVersionTable 可以看到PS的version: 当前是2.0 下载WMF Windows Management Fr ...