JavaScript-⑨（jQuery）
正选&反选
jquery是帮助查找节点，属性操作，节点插入，事件绑定。做DOM不好用的功能。过滤节点，做常用slidedown动画。ajax封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/jquery.js"></script>
<script>
// $(document).ready(function(){
// let $items=$("input[name=item]");
// let $all=$("#all");
// let $reverse=$("#reverse");
// $all.on("click",function(){
// $items.prop("checked",true);
// })
// $reverse.on("click",function(){
// $items.each(function(idx,ele){
// ele.checked=!ele.checked
// })
// })
// })
$(()=>{
let $items=$("input[name=item]");
let $all=$("#all"); //全选
let $reverse=$("#reverse");//反选
$all.on("click",function(){
$items.prop("checked",true);
});
$reverse.on("click",function(){
$items.each(function(idx,ele){
ele.checked=!ele.checked
});
});
})
</script>
</head>
<body>
<input type="button" value="反选" id="reverse"><br>
<input type="checkbox" name="item" id="">
选项1
<br>
<input type="checkbox" name="item" id="">
选项2
<br>
<input type="checkbox" name="item" id="">
选项3
<br>
<input type="checkbox" name="item" id="">
选项4
<br>
<input type="checkbox" name="item" id="">
选项5
<br>
<input type="checkbox" name="item" id="">
选项6
<br>
<input type="checkbox" name="item" id="">
选项7
<br>
<input type="checkbox" name="item" id="">
选项8
<br>
<input type="checkbox" name="item" id="">
选项9
<br>
<input type="checkbox" name="item" id="">
选项10
<br>
<input type="button" value="全选" id="all">
</body>
</body>
</html>
增加全选的动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/jquery.js"></script>
<script>
$(document).ready(function(){
let $items=$("input[name=item]");
console.log($items);
let $all=$("#all");
let $reverse=$("#reverse");
$all.on("click",function(){
$items.prop("checked",true)
.css("border","1px solid red")
.hide()
.show(3000);
})
$reverse.on("click",function(){
$items.each(function(idx,ele){
ele.checked=!ele.checked
})
})
})
</script>
</head>
<body>
<input type="button" value="反选" id="reverse"><br>
<input type="checkbox" name="item" id="">
选项1
<br>
<input type="checkbox" name="item" id="">
选项2
<br>
<input type="checkbox" name="item" id="">
选项3
<br>
<input type="checkbox" name="item" id="">
选项4
<br>
<input type="checkbox" name="item" id="">
选项5
<br>
<input type="checkbox" name="item" id="">
选项6
<br>
<input type="checkbox" name="item" id="">
选项7
<br>
<input type="checkbox" name="item" id="">
选项8
<br>
<input type="checkbox" name="item" id="">
选项9
<br>
<input type="checkbox" name="item" id="">
选项10
<br>
<input type="button" value="全选" id="all">
</body>
</body>
</html>
方格选中的地方会不断从隐藏到出现
认识选择符（struct_selector）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/jquery.js"></script>
<script>
$(()=>{
// $("div button").css("color","red")
$("div> #btn").css("color","red");
$("div+p").css("color","red");
$("div~p").css("color","red");
})
</script>
</head>
<body>
<p>红吗？</p>
<div>
<p><button>点我1</button></p>
</div>
<div><button id="btn">点我2</button></div>
<div>div</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</body>
</html>
attribute_selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/jquery.js"></script>
<script>
$(()=>{
$("input[name=user]").css("border","2px solid red");//name是user的文本框
$("input[name^=us]").css("border","2px solid red");//以us开头的
$("input[name$=er]").css("border","2px solid red");//以er结尾的
$("input[name*=e]").css("border","2px solid red");//所有包含e的
$("input[name=user][value=chen]").css("border","2px solid red");
})
</script>
</head>
<body>
<input type="text" name="user" id="" value="chen">
<input type="text" name="user" id="" value="">
<input type="text" name="us" id="" value="">
<input type="text" name="er" id="" value="">
<input type="text" name="se" id="" value="">
</body>
</html>
index_selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/jquery.js"></script>
<script>
$(()=>{
$("p:odd").css("color","red");//奇数,但是列表中数组下标是从0开始
// $("p:eq(0)").css("color","red");
// $("p:gt(1)").css("color","red");
})
</script>
</head>
<body>
<div>d1</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<span>sp1</span>
<div>d2</div>
<p>p4</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/jquery.js"></script>
<script>
$(()=>{
// $("p:odd").css("color","red");
$("p:eq(0)").css("color","red");
// $("p:gt(1)").css("color","red");
})
</script>
</head>
<body>
<div>d1</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<span>sp1</span>
<div>d2</div>
<p>p4</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/jquery.js"></script>
<script>
$(()=>{
// $("p:odd").css("color","red");
// $("p:eq(0)").css("color","red");
$("p:gt(1)").css("color","red");//大于1
})
</script>
</head>
<body>
<div>d1</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<span>sp1</span>
<div>d2</div>
<p>p4</p>
</body>
</html>
nth-of-type和nth-child
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(()=>{
// 全部
// $("p").css("border","1px solid red");
// 找p2作为p标签，第一个div中第二个子元素
// first-of-type是第几个子元素（）从一开始
// $("p:nth-child(2n)").css("border","1px solid red");//2的整数倍。所有的元素放到一起
// $("p:only-child").css("border","1px solid red");//唯一的p，唯一子标签
$("p:nth-of-type(2n)").css("color","red");
})
</script>
</head>
<body>
<!-- div>(p>{p$})*6 -->
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
<div>
<p>p21</p>
<span>sp1</span>
<p>p22</p>
<p>p23</p>
<p>p24</p>
<p>p25</p>
<span>sp2</span>
<p>p26</p>
</div>
<div>
<p>haha</p>
</div>
<div>
<span>hahahahah</span>
<p>haha</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(()=>{
// 全部
// $("p").css("border","1px solid red");
// 找p2作为p标签，第一个div中第二个子元素
// first-of-type是第几个子元素（）从一开始
// $("p:nth-child(2n)").css("border","1px solid red");//2的整数倍。所有的元素放到一起
$("p:only-child").css("border","1px solid red");//唯一的p，唯一子标签
// $("p:nth-of-type(2n)").css("color","red");
})
</script>
</head>
<body>
<!-- div>(p>{p$})*6 -->
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
<div>
<p>p21</p>
<span>sp1</span>
<p>p22</p>
<p>p23</p>
<p>p24</p>
<p>p25</p>
<span>sp2</span>
<p>p26</p>
</div>
<div>
<p>haha</p>
</div>
<div>
<span>hahahahah</span>
<p>haha</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(()=>{
// 全部
// $("p").css("border","1px solid red");
// 找p2作为p标签，第一个div中第二个子元素
// first-of-type是第几个子元素（）从一开始
$("p:nth-child(2n)").css("border","1px solid red");//2的整数倍。所有的元素放到一起
// $("p:only-child").css("border","1px solid red");//唯一的p，唯一子标签
// $("p:nth-of-type(2n)").css("color","red");
})
</script>
</head>
<body>
<!-- div>(p>{p$})*6 -->
<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</div>
<div>
<p>p21</p>
<span>sp1</span>
<p>p22</p>
<p>p23</p>
<p>p24</p>
<p>p25</p>
<span>sp2</span>
<p>p26</p>
</div>
<div>
<p>haha</p>
</div>
<div>
<span>hahahahah</span>
<p>haha</p>
</div>
</body>
</html>
empty
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(function(){
// $("p:empty").remove();
// $("p:has(span)").remove();
// $("p:parent").remove();
})
</script>
</head>
<body>
<p>p1</p>
<p id="p1">p2</p>
<p>p3</p>
<p>p4</p>
<p>p5 <span>1233</span></p>
</body>
</html>
disabled
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.js"></script>
<script>
//加载之后不能输入
$(()=>{
console.log($("input:enabled"));
$("input:enabled").prop("disabled",true);
// $("input:disabled").removeAttr("disabled");//让不可用的可用
})
</script>
</head>
<body>
<input type="text" name="user" id="">
<!-- //不可以用 -->
<input type="text" name="age" disabled id="">
</body>
</html>
此时不能使用
现在让可以输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.js"></script>
<script>
//加载之后不能输入
$(()=>{
console.log($("input:enabled"));
// $("input:enabled").prop("disabled",true);
$("input:disabled").removeAttr("disabled");//让不可用的可用
})
</script>
</head>
<body>
<input type="text" name="user" id="">
<!-- //不可以用 -->
<input type="text" name="age" disabled id="">
</body>
</html>
全选和反选 修订版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.js"></script>
<script>
// $(document).ready(function(){
// let $items=$("input[name=item]");
// let $all=$("#all");
// let $reverse=$("#reverse");
// $all.on("click",function(){
// $items.prop("checked",true);
// })
// $reverse.on("click",function(){
// $items.each(function(idx,ele){
// ele.checked=!ele.checked
// })
// })
// })
$(function(){
$("#all").click(function(){
$("input[name=item]").prop("checked",true);
})
$("#reverse").click(function(event){
$("input[name=item]").each(function(idx,ele){
//ele是DOM对象
//ele需要转换为jQuery使用
// let value=$(ele.prop("checked"));
// $(ele).attr("checked",!value);
ele.checked=!ele.checked;
})
})
})
</script>
</head>
<body>
<input type="button" value="反选" id="reverse"><br>
<input type="checkbox" name="item" id="">
选项1
<br>
<input type="checkbox" name="item" id="">
选项2
<br>
<input type="checkbox" name="item" id="">
选项3
<br>
<input type="checkbox" name="item" id="">
选项4
<br>
<input type="checkbox" name="item" id="">
选项5
<br>
<input type="checkbox" name="item" id="">
选项6
<br>
<input type="checkbox" name="item" id="">
选项7
<br>
<input type="checkbox" name="item" id="">
选项8
<br>
<input type="checkbox" name="item" id="">
选项9
<br>
<input type="checkbox" name="item" id="">
选项10
<br>
<input type="button" value="全选" id="all">
</body>
</html>
鼠标悬停效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.js"></script>
<style>
div{
width: 300px;
height: 300px;
background-color: aquamarine;
}
.glad{
/* //鼠标悬停 */
background-color: red;
}
</style>
<script>
$(()=>{
$("div").mouseover(function(){
// console.log(this);
// $(this).addClass("glad");
$(this).toggleClass("glad");
$(this).css("boxShadow","5px 5px 5px black");
}).mouseout(function(){
// $(this).removeClass("glad");
$(this).toggleClass("glad");
$(this).css("boxShadow","");
})
})
</script>
</head>
<body>
<div></div>
</body>
</html>
效果：
静态
鼠标在div上的时候
筛选（content—selector）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/jquery.js"></script>
<script>
$(function(){
$("#search").keyup(function(event){
// if(event.keyCode==13){
// let selector="p:contains('"
// +event.target.value+"')";
// $("p").css("backgroundColor","")
// $(selector).css("backgroundColor","gray")
// }
let timeout;
if(!timeout){
timeout=setTimeout(function(){
if(event.target.value.trim()!=""){
let selector="p:contains('"
+event.target.value+"')";
$("p").css("backgroundColor","")
$(selector).css("backgroundColor","gray")
}
},1000)
}else{
clearInterval(timeout);
timeout=undefined;
}
})
})
</script>
</head>
<body>
<input type="text" name="search" id="search">
<p>chengzixiang</p>
<p>raojingjing</p>
<p>yangchao</p>
<p>suishicai</p>
<p>linghuchong</p>
<p>xiaofeng</p>
</body>
</html>
animate动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.js"></script>
<script>
// $(function(){
// })
$(()=>{
//动画
//显示隐藏的div
// $("div:hidden").removeClass("hide");
// $("div:hidden").show(2000);//缓慢显示
// $("div:hidden").slideDown(2000);//缓慢
// $("div:hidden").fadeIn(2000);
// $("div:hidden").fadeOut(2000);
// $("div:visible").addClass("hide");
// $("div:visible").hide(1000);//大小透明度都改变
// $("div:visible").slideUp(2000);//改高度
// $("div:visible").fadeOut(2000);//透明度消失
//指定要达到效果——自定义
//左边——向右平移
$("div:visible").animate({
left:"600px"
},2000)
})
</script>
<style>
div{
width: 200px;
height: 200px;
background-color: rgba(0, 255, 255, 0.534);
margin: 10px;
position: absolute;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="hide"></div>
<div></div>
</body>
</html>
效果：向右移动
注意：注释的动画效果也是可以使用的