javascript之 jquery-------------------基础
一，什么是jquery
jquery是由美国人 John Resig 创建的，继prototype后又一个javascript框架，优势是，文档说明很全，各种应用也说的很详细，同时还有许多成熟的插件可以选择，他是轻量级的js库，压缩后只有21kb。
二，jquery对象
jquery对象是通过jquery包装DOM对象后所产生的对象，就是jquery对象，是jquery独有的，可以用jquery里的方法，如 $(".test").html()
三，寻找元素（选择器和筛选器）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> <script> $(document).ready(function () { //----------------选择器----------------- //基本选择器 // $("*").css("color","red");// 所有 // $(".d1").css("color","red"); // $("#d2").css("color","red"); // $(".d4 div").css("color","red"); // $("p").css("color","red"); // $(".d1,.d3,p").css("color","red") //层级选择器 //后代 //$(".d4 ").css("color","red"); //$(".d4 div").css("color","red"); // 当前标签的下一个div标签 //$(".d1+div").css("color","red"); // 当前标签的儿子标签 // $(".d4>div,p").css("color","red"); // 当前标签下的所有div标签，不包含当前标签 // $(".d1~div").css("color","red") //属性选择器 // $("[id='d2']").css("color","red"); //表单选择器---->只适用于input标签 //$("[type='text']").css("color","red") //$(":text").css("color","red") //推荐 //------------筛选器------------------ //基本筛选器 //li标签的第一个 // $("li:first").css("color","red"); //li标签的最后一个 // $("li:last").css("color","red"); // eq是按索引来查找的 // $("li:eq(2)").css("color","red") // even 是取索引是偶数的，从0开始 $("li:even").css("color","red"); // odd 是取索引是奇数的，从0开始 $("li:odd").css("color","green"); // gt 是从索引0，一直到最后，但不包括自己 // $("li:gt(1)").css("color","red") ; // ---过滤筛选器-------------推荐 //$("li").eq(1).css("color","red") //$("li").first().css("color","red") //$("li").last().css("color","red") //hasClass 获取ul的后代的li标签，是否有类名叫test的，返回true或false //alert($("ul li").hasClass("test")) }) </script> </head> <body> <div class="item">第1层</div> <div class="d1">第1层的兄弟</div> <div id="d2">第2层的兄弟</div> <div class="d3">第3层的兄弟</div> <div class="d4"> <div>第4层的儿子</div> <p>第四层儿子的兄弟</p> </div> <input type="text" value="123"><br> <input type="text" value="123"> <ul style="list-style: none;"> <li>11111</li> <li>22222</li> <li>33333</li> <li>44444</li> <li>44444</li> <li>44444</li> <li>44444</li> </ul> </body> </html>
用jquery实现的左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ width: 300px; height: 700px; background-color: #4767b2; } .title{ background-color: white; color: #339900; } .hide{ display: none; } </style> <script src="jquery-3.2.1.js"></script> <script> $(document).ready(function () { $(".title").click(function () { //alert(111) // console.log(self); console.log($(this)); console.log(this); $(this).next().removeClass("hide"); $(this).parent().siblings().children(".con").addClass("hide"); //console.log($a) }) }) </script> </head> <body> <div class="outer"> <div class="menu"> <div class="item"> <div class="title">菜单一</div> <div class="con"> <div>111</div> <div>222</div> <div>333</div> </div> </div> <div class="item"> <div class="title">菜单二</div> <div class="con hide"> <div>111</div> <div>222</div> <div>333</div> </div> </div> <div class="item"> <div class="title">菜单三</div> <div class="con hide"> <div>111</div> <div>222</div> <div>333</div> </div> </div> </div> </div> </body> </html>
用jquery和js实现的tab切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; list-style: none; } .hide{ display: none; } .active{ background-color: #2459a2; } .outer{ width: 400px; height: 400px; background-color: #999999; } .nav li{ float: left; width: 32.78%; height: 40px; line-height: 40px; text-align: center; border: 1px solid green; } </style> <script src="jquery-3.2.1.js"></script> <script> //js和jquery 结合使用 $(document).ready(function () { var $lis = $("li"); for (var i=0;i<$lis.length;i++){ $lis.click(function () { $(this).addClass("active").siblings().removeClass("active") var $name = $(this).attr("f"); $("."+ $name).removeClass("hide").siblings().addClass("hide") }) } }) </script> </head> <body> <div class="outer"> <ul class="nav"> <li f="con1" class="active">菜单一</li> <li f="con2">菜单二</li> <li f="con3">菜单三</li> </ul> <div class="content"> <div class="con1">1111111111111111111111111111111</div> <div class="con2 hide">22222222222222222222222222222222</div> <div class="con3 hide">333333333333333333333333333333333</div> </div> </div> </body> </html>
筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
<script>
$(document).ready(function () {
//-------------------查找筛选器---------------------------//
//--------------子类筛选器-----------------//
//console.log($(".c1").children(".c1-son")[0])
// // 父标签下的所有子标签
// console.log($(".c1").children("div"));
//
// //父标签下的指定标签 需要加上子标签
// console.log($(".c1").find("p").css("color","red"))
//---------------兄弟筛选器---向下的---------------//
//下面的第一个兄弟标签
// console.log($(".c1-son").next()[0]);
//下面的所有兄弟标签
//console.log($(".c1-son").nextAll())
// 开始到结束，不包括这俩标签，只显示中间的兄弟标签，
// console.log($(".c1-son").nextUntil("a"));
// console.log($(".c1-son").nextUntil(".c2"))
//---------------兄弟筛选器---向上的---------------//
// 获取指定标签的上一个兄弟标签
// console.log($(".p1").prev().css("color","red"));
// $("a").prev().css("color","red")
// 获取指定标签的上面所有兄弟标签
// $(".c2").prevAll().css("color","red")
// 获取指定元素，上面所有的兄弟标签，直到截止标签，不包含他俩
// $(".c2").prevUntil(".c1-son").css("color","red")
//-----------------------父类筛选器----------------、、//
// 获取指定元素的 父级标签，包括自己
// $(".c1-son-son").parent().css("color","red")
// 获取指定元素的 父亲，祖父，一直到body标签
//$(".c1-son-son").parents().css("color","red")
// 获取指定元素，的父元素，直到遇到截止元素
//$(".c1-son-son").parentsUntil(".c1").css("color","red")
//--------------------获取 所有的兄弟标签，不包含自己；-----------------------------
$(".p1").siblings().css("color","red");
$(".c2-son").siblings().css("color","red")
})
</script>
</head>
<body>
body标签
<div class="c1">c1的标签
<div class="c1-son">c1的儿子标签
<div class="c1-son-son">哈哈</div>
<div class="c1-son-son">哈哈11</div>
</div>
<p class="p1">这是一个p标签
<!--<p>这是p的儿子</p>-->
</p>
<a href="#">这是一个a标签</a>
<div class="c2">c2的标签
<div class="c22-son">c2的儿子</div>
<div class="c2-son">c2的儿子</div>
<div class="c2333-son">c2的儿子</div>
<div class="c244-son">c2的儿子</div>
</div>
</div>
</body>
</html>
四，操作元素（属性，css，文档处理）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
<script>
//--------------属性--------------
$(document).ready(function () {
$(".con").click(function () {
//attr 只能 修改自定义的属性，不能修改固定属性
//alert($(":text").attr("name","d3"));
//prop 操作固有属性
//alert($(":text").prop("type","checked"))
//
// $(":submit").removeProp();
// // 删除自定义属性
// $(":text").removeAttr("name")
//--------------css类------------------
//添加class
// $(".d1").addClass("d55");
//
// //删除class
// $(".d4").removeClass("d9")
// ---------------HTML代码/文本/值----------------
//拿标签和文本
// console.log($(".d4").html());
//
// // 只拿文本内容
// console.log($(".d5").text());
//
// //添加标签和文本
// $(".d4").html("<p>aaa</p>");
//
// //只添加文本
// $(".d5").text("<h1>sadfafd</h1>");
// 只拿有固有属性，value属性的 value值 input标签 button标签
// console.log($(":text").val());
//console.log($(":submit").val());
//console.log($(":checkbox").val());
//console.log($(":button").val());
});
});
</script>
</head>
<body>
<div class="d1">
<!--<button class="con">button</button>-->
<input type="text" value="111">
<input type="button" value="23123">
</div>
<div class="d4 d9">div
<a href="">aaaa</a>
</div>
<div class="d5">div2
<p>ppppppp</p>
</div>
</body>
</html>
文档操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
//--------------内部插入------------------
// append 是在父标签的最后插入
// $(".c1").append($("<p>afsds</p>"));
// prepend 是在父标签内的最上边插入
//$(".c1").prepend($("<h1>afsds</h1>"))
// 在div标签里插入 p标签 最后插入
var $a = $("<p>asdf</p>");
// $a.appendTo("div");
// // 在div标签里 插入 p标签 ，最上插入
// $a.prependTo("div")
//---------------外部插入------------//
// 兄弟及， 在下面插入
// $(".c1").after($a);
//兄弟级 ，在上面
//$(".c1").before($a)
//标签位置反过来了
// 弟及， 在下面插入
// $a.insertAfter(".c1");
//
// //兄弟级 ，在上面
// $a.insertBefore(".c1");
//----------------替换----------------
// 把 div标签 替换成 p标签
//$("div").replaceWith($("<p>"))
// $("p").replaceWith("<div></div>");
// 替换的内容是文本的话 ，也替换
//$("p").replaceWith("dsfsdf");
//-----------删除------------
// empty 保留标签，清空标签的内容
//$(".c1").empty()
//$(".c1").empty("#p1")
// remove 删除整个标签,全部删掉
//$(".c1").remove();
//------------- 复制 clone---------------//
$("#p1").clone().appendTo("body");
$(".c1").clone().appendTo("body");
//$("body").append($a)
})
})
</script>
</head>
<body>
<div><button>button</button></div>
<div class="c1">div
<p id="p1">ppppppppppppppppppppp</p>
</div>
<p>pppppppp</p>
</body>
</html>
table案例，全选，反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../day54%20-----》jquery框架/jquery-3.2.1.js"></script> <script> $(document).ready(function () { for (var $i=0;$i<$(".item").length;i++) { $("button").click(function () { //alert($(this).text()); if ($(this).text() == "全选") { $(".item").prop("checked", true); // alert($(this).text()); } else if ($(this).text() == "取消") { $(".item").prop("checked", false) } else { $(".item").each(function () { $(this).prop("checked",!$(this).prop("checked")) }) } }) } }) </script> </head> <body> <h1>表格实例</h1> <button class="all">全选</button> <button class="reverse">反选</button> <button class="cancel">取消</button> <hr> <table border="2px" class="server_tb"> <tr> <td><input type="checkbox" class="item"></td> <td>1111</td> <td>1111</td> <td>1111</td> </tr> <tr> <td><input type="checkbox" class="item"></td> <td>1111</td> <td>1111</td> <td>1111</td> </tr> <tr> <td><input type="checkbox" class="item"></td> <td>1111</td> <td>1111</td> <td>1111</td> </tr> <tr> <td><input type="checkbox" class="item"></td> <td>1111</td> <td>1111</td> <td>1111</td> </tr> </table> </body> </html>
复制样式条
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="outer"> <div class="item"> <input type="button" value="+" onclick="removed()"> <input type="text"> </div> </div> </body> <script src="jquery-3.2.1.js"></script> <script> $(":button").click(function () { //$(".outer .item").clone().appendTo(".outer") var $clone = $(this).parent().clone(); $clone.children(":button").val("--").attr("onclick","removed(this)"); $(".outer").append($clone) }); function removed(self) { console.log(self); $(self).parent().remove() } </script> </html>
五，动画效果
hide隐藏，和，show显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="chia">aaaa</div>
<h1>这是一个标题</h1>
<p id="aa">这是一个段落</p>
<p class="c1">这是另一个段落</p>
<p class="c2">这是另一个段落111</p>
<p class="c3">这是另一个段落222</p>
<button class="hide">点我隐藏</button>
<button class="show">点我显示</button>
</body>
<script src="jquery-3.2.1.js">
</script>
<script>
// hide()隐藏 加参数，毫秒单位
$(document).ready(function () {
$(".hide").click(function () {
$("p").hide(2000);
//$("#aa").hide()
});
//show()显示
$(".show").click(function () {
$("p").show(1000);
});
// 鼠标事件
$(".chia").mouseenter(function () {
alert("你鼠标放错位置了")
});
});
// //隐藏所有div标签
// $("div").hide();
//
// // 隐藏所有p标签
// $("p").hide();
//
//
// // 隐藏所有id为aa的标签
// $("#aa").hide();
//
// // 隐藏所有class为c1的标签
// $(".c1").hide();
//
// //隐藏p标签下的class为c3的标签
// $(" p.c3").hide()
</script>
</html>
toggle方法（包含了显示和隐藏，不用单个点击了）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
<script>
//显示被隐藏的元素，并隐藏已显示的元素：
$(document).ready(function () {
$("button").click(function () {
$("p").toggle(1000)
})
})
</script>
</head>
<body>
<p>领导说：同志们好</p>
<p>领导说：同志们辛苦了</p>
<p>同志们说：首长好</p>
<p>同志们：为人民服务</p>
<button>显示/隐藏</button>
</body>
</html>
fadeIn淡入 ，和 fadeOut 淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.i2{
display: none;
}
</style>
<script src="jquery-3.2.1.js"></script>
<script>
$(document).ready(function () {
$("#b1").click(function () {
$(".i1").fadeOut("show")
});
$("#b2").click(function () {
$(".i1").fadeIn(1000)
});
$("#b3").click(function () {
$(".i1").fadeToggle(2000,function () {
$(".i2").fadeToggle(1000)
})
})
})
</script>
</head>
<body>
<div>
<img class="i1" src="11.jpg" style="height: 400px">
<br>
<img class="i2" src="334.png">
<button id="b1">点我淡入</button>
<button id="b2">点我淡出</button>
<button id="b3">淡入/淡出</button>
</body>
</html>
slideDown出现，和，slideUp隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width: 100%;
height: 100px;
background-color: #2459a2;
text-align: center;
line-height: 100px;
font-size: 40px;
}
</style>
<script src="jquery-3.2.1.js"></script>
<script>
$(document).ready(function () {
$("#slideDown").click(function () {
$(".content").slideDown(1000)
});
$("#slideUp").click(function () {
$(".content").slideUp(1000)
});
$("#slideToggle").click(function () {
$(".content").slideToggle(2000)
})
})
</script>
</head>
<body>
<div class="content">hello world</div>
<button id="slideDown">出现</button>
<button id="slideUp">隐藏</button>
<button id="slideToggle">出现/隐藏</button>
</body>
</html>
回调函数（在方法 内，在加上一个函数）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width: 100%;
height: 100px;
background-color: #2459a2;
text-align: center;
line-height: 100px;
font-size: 40px;
}
</style>
<script src="jquery-3.2.1.js"></script>
<script>
$(document).ready(function () {
$("#slideDown").click(function () {
// 回调函数就是 在slideDown方法内，在加一个函数的参数
$(".content").slideDown(1000,function () {
// 出现之后，给隐藏了
$(".content3").hide()
})
});
$("#slideUp").click(function () {
$(".content").slideUp(1000)
});
$("#slideToggle").click(function () {
$(".content").slideToggle(2000)
})
})
</script>
</head>
<body>
<div class="content">hello world</div>
<div class="content3">hello world</div>
<button id="slideDown">出现</button>
<button id="slideUp">隐藏</button>
<button id="slideToggle">出现/隐藏</button>
</body>
</html>
六，jquery的循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
<script>
// --------------方式一、、--------
// 数组
$li = [12,22,33,44];
//函数里需要放两个参数，i是索引值，j是值
$.each($li,function (i,j) {
console.log(i,j)
});
// 集合
// k对应的是 key， q对应的是value
$dic = {"name":"gy","age":25,"sex":"man"};
$.each($dic,function (k,q) {
console.log(k,q)
});
//--------------方式二，，--------------
$("#l1").each(function () {
console.log($(this).html())
})
</script>
</head>
<body>
<ul>
<li id="l1">111</li>
<li id="l1">222</li>
<li id="l1">333</li>
<li id="l1">444</li>
</ul>
</body>
</html>
