一、jQuery是什么？
1.jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多JavaScript高手加入其team
2.jQuery是继prototype之后有一个优秀的JavaScript框架。其宗旨是——WRITE LESS.DO MORE!
3.它是轻量级的js库（压缩后只有21k），这是其他的js库所不及的，它兼容CSS3，还兼容各种浏览器
4.jQuery是一个快速的，简洁的JavaScript库，使用户能更方便地处理HTMLdocuments、event、实现动画效果，并且方便地为网站提供AJAX交互。
5.jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用说得很详细，同时还有许多成熟的插件可供选择。
二、什么是jQuery对象？
jQuery对象就是通过包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象。那么它就可以使用jQuery里的方法：
$("#p1") -------> jQuery对象
var ele=document.getElementById("p1") ele------>DOM对象
jQuery与DOM对象下的方法和属性不能混用
jquery对象：
jQuery.方法====$.方法
基础语法：$（selector）.action（）
selector：查找想操作的标签
三、寻找元素（选择器和筛选器）
3.1：选择器
1 基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
2 层级选择器
$(".outer div")：后代选择器
$(".outer>div")：子代选择器
$(".outer+div")：毗邻选择器
$(".outer~div")：普通兄弟选择器
3 基本筛选器
$("li:last")：最后一个 $("li:first")：第一个
$("li:eq(2)")：索引为2
$("li:odd")：奇数 $("li:even")：偶数
$("li:gt(1)")：大于 $("li:lt(5)")：小于
4 属性选择器
$(‘[id="div1"]‘)：id为div1的标签 $(‘["alex="sb"][id]‘)：alex属性为sb并且有id属性
5 表单选择器
$("[type=‘text‘]")
简写：$(":text") 注意只适用于input标签 :$("input:checked")
3.2：筛选器
3.2.1：过滤筛选器
$("li").eq(2)：推荐写法
$("li").first()：第一个
$("li").last()：最后一个
$("ul li").hasclass("test")：有class的值是test
3.2.2：查找筛选器
1.查找子标签：
$("div").children(".test")：所有子代中的.test标签
$("div").find(".test")：所有后代中的.test标签
2.向下查找兄弟标签：
$(".test").next():下一个兄弟标签
$(".test").nextAll()：找到下面所有的兄弟标签
$(".test").nextUntil(条件)：直到条件成立停止，同样顾头不顾尾，最后一个取不到
3.向上查找兄弟标签：
$("div").prev()：上一个兄弟标签
$("div").prevAll()：找到上面所有的兄弟标签
$("div").prevUntil(条件)：直到条件成立停止，顾头不顾尾
4.查找所有兄弟标签：
$("div").siblings()
5.查找父标签：
$(".test").parent()：找父标签
$(".test").parents()：找多个父标签，父标签的父标签也是父标签，一直找到body层
$(".test").parentUntil(条件)：找所有的父标签直到条件成立停止，顾头不顾尾
注意：jQuery支持链式操作，比如：
$("#d1").next().css("color","red").next().css("color","green");
四、操作元素（属性，css，文档处理）
4.1：事件
4.1.1：页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
写法：
$(document).read(function(){
// 在这里写你的JS代码...
})
简写：
$(function(){
// 你在这里写你的代码
})
4.1.2：事件绑定
//语法: 标签对象.事件(函数)
eg: $("p").click(function(){})
4.1.3：事件委派（父标签把方法委派给子标签）
on方法：事件绑定不再给指定的标签绑定，而是绑定给父标签
语法：$("父级标签").on(eve,[selector],[data],fn)
// 在选择元素上绑定一个或多个事件的事件处理函数。
off：解除事件（绑定谁解除谁）
events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
4.2：属性操作
--------------------------CSS类
$("").addClass(class名)：添加类
$("").removeClass([class名])：删除类
--------------------------属性
$("").attr();：
$("").attr("属性")：取值
$("").attr(“属性”，“值”)：赋值
$("").removeAttr();：删除属性
$("").prop()：用于checked、selected属性
$("").prop("属性")：取值
$("").prop(“属性”，“值”)：赋值
$("").removeProp();
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("#c1").css({"color":"red","fontSize":"35px"})
4.3：each循环
jQuery支持两种循环方式，方式一（类下的方法）：
格式：$each（obj，callback）
li=[10,20,30,40];
$.each(li,function(i,x){
console.log(i,x)
});
在这里i是索引，x是值
方式二（实例下的方法）：
格式：$("").each(fn)
$("tr").each(function(){
console.log($(this).html())
})
在这里,$(this)代指当前循环标签。
扩展
li=[11,22,33,44];
$.each(li,function(i,v){
if (v==33){
return ;
}
console.log(v)
});
//each的参数function内如果出现return 结束档次循环，类似于continue；
如果出现return false，结束的是整个each循环，类似break。
//结果是11,22,44；因为这里每次循环都执行一个函数，当v==33的时候只是结束了一次函数
4.4：文档节点处理
//创建一个标签对象，用变量名拿对象时要加$，表示这是一个jquery对象 $("<p>") //内部插入 $("").append(content|fn)：追加到最后一个位置 ----->$("p").append("<b>Hello</b>"); $("").appendTo(content)：子标签添加到父标签里面的最后 ----->$("p").appendTo("div"); $("").prepend(content|fn)：添加到第一个位置 ----->$("p").prepend("<b>Hello</b>"); $("").prependTo(content)：子标签添加到父标签里面的首尾 ----->$("p").prependTo("#foo"); //外部插入 $("").after(content|fn)：添加兄弟标签到后面 ----->$("p").after("<b>Hello</b>"); $("").before(content|fn)：添加兄弟标签到前面 ----->$("p").before("<b>Hello</b>"); $("").insertAfter(content)：标签添加到某个兄弟标签的后面 ----->$("p").insertAfter("#foo"); $("").insertBefore(content)：标签添加到某个兄弟标签的前面 ----->$("p").insertBefore("#foo"); //替换 $("").replaceWith(content|fn)：直接oldnode替换成newnode ----->$("p").replaceWith("<b>Paragraph. </b>"); //删除 $("").empty()：清空节点内容 $("").remove([expr])：删除节点（删谁谁调用） //复制 $("").clone([Even[,deepEven]])
4.5：动画效果
1.基本
.show([speed, [easing], [fn]])：显示 //显示隐藏的匹配元素。 .hide([speed, [easing], [fn]])：隐藏 //隐藏显示的匹配元素。 .toggle([speed], [easing], [fn]) //如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。 参数介绍： speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”。 fn:在动画完成时执行的函数，每个元素执行一次。
2.滑动
.slideDown([speed, [easing], [fn]])：显示 //通过高度变化（向下增大）来动态地显示所有匹配的元素。 .slideUp([speed, [easing], [fn]])：隐藏 //通过高度变化（向下减小）来动态地隐藏所有匹配的元素。 .slideToggle([speed, [easing], [fn]]) //通过高度变化来切换所有匹配元素的可见性。 参数同上
3.淡入淡出
.fadeIn([speed, [easing], [fn]])：显示 //通过不透明度的变化来实现所有匹配元素的淡入效果。 .fadeOut([speed, [easing], [fn]])：隐藏 //通过不透明度的变化来实现所有匹配元素的淡出效果。 .fadeTo([speed, [easing], [fn]]) //把所有匹配元素的不透明度以渐进方式调整到指定的不透明度。 .fadeToggle([speed, [easing], [fn]]) //通过不透明度的变化来切换所有匹配元素的淡入和淡出效果。
<!DOCTYPE html>
<html lang="en">
<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;
padding: 0;
}
.image_carousel{
position: relative;
left: 0;
top:0;
/*border: 1px solid;*/
width: 790px;
height: 340px;
margin: 138px auto;
overflow: hidden;
}
.image_list li{
list-style: none;
position: absolute;
left: 0;
top:0;
}
.cut_button{
position: absolute;
/*z-index: 1;*/
left: 37%;
bottom: 22px;
width: 194px;
height: 12px;
background-color: hsla(0,0%,100%,.3);
padding: 5px 10px;
border-radius: 12px;
line-height: 12px;
text-align: center;
}
.cut_button_list li{
display:inline-block;
width: 12px;
height: 12px;
background-color: #fff;
list-style: none;
margin-left: 4px;
margin-right: 4px;
border-radius: 100%;
}
.cut_button_list li:hover{
background-color: #db192a;
}
.btn a{
font-size: 25px;
color: white;
position: absolute;
bottom: 141px;
width: 30px;
height: 60px;
background-color: RGBA(0,0,0,0.3);
line-height: 60px;
text-align: center;
text-decoration: none;
}
.last a{
left: 0;
}
.next a{
right: 0;
}
a:hover{
background-color: RGBA(0,0,0,0.7);
}
</style>
</head>
<body>
<div class="image_carousel">
<div class="image">
<ul class="image_list">
<li class="img"><a href=""><img id="img1" src="//img12.360buyimg.com/da/jfs/t6946/30/363119663/215517/327addf9/597594f1N6d4f6f9a.jpg" ></a></li>
<li class="img"><a href=""><img id="img2" src="//img1.360buyimg.com/da/jfs/t6838/58/1188598350/101456/93ca512d/597e7d28N65750c3d.jpg" ></a></li>
<li class="img"><a href=""><img id="img3" src="//img12.360buyimg.com/da/jfs/t5614/73/8258277091/129172/cd6b7ea5/59793d03N8173f093.jpg" ></a></li>
<li class="img"><a href=""><img id="img4" src="//img11.360buyimg.com/da/jfs/t5728/157/8872231321/301637/86d6fc6a/597fdcf3N78181b6c.jpg" ></a></li>
<li class="img"><a href=""><img id="img5" src="//img12.360buyimg.com/da/jfs/t5839/154/8380421091/51117/6f3d50fb/5979ad9dN277885bf.jpg" ></a></li>
<li class="img"><a href=""><img id="img6" src="//img11.360buyimg.com/da/jfs/t7027/263/1474527209/100106/e209db17/598165beNf30e7083.jpg" ></a></li>
<li class="img"><a href=""><img id="img7" src="//img10.360buyimg.com/da/jfs/t6040/352/7744875341/73277/88588ea2/59814f5fN4746e6f0.jpg" ></a></li>
<li class="img"><a href=""><img id="img8" src="//img11.360buyimg.com/babel/jfs/t6886/165/1330183705/71170/e069d1e5/59802506N0c042758.jpg" ></a></li>
</ul>
</div>
<div class="cut_button">
<ul class="cut_button_list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="last btn"><a> < </a></div>
<div class="next btn"><a> > </a></div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
var x=0; //定义全局变量用来标识两轮播图位置
//轮播图切换函数
function cut_img() {
$(".cut_button_list li").eq(x).css("background-color","#db192a").siblings().css("background-color","#fff");
$(".image_list li").eq(x).fadeIn(1000).siblings().fadeOut(1000);
}
//自动切换图片函数
function auto_cut_img() {
if (x!==$(".img").length-1){
x++;
}
else {
x=0;
}
cut_img()
}
var ID;
cut_img();
ID=setInterval(auto_cut_img,2000); //启动定时器
$(".cut_button_list li").mouseover(function () {
x=$(this).index();
cut_img()
});
$(".image_carousel").hover(function () {
clearInterval(ID);
},function () {
ID=setInterval(auto_cut_img,2000);
});
//上一张图按钮
$(".last").click(function () {
if (x!==0){
x--;
}
else {
x=$(".img").length-1;
}
cut_img()
});
//下一张图按钮
$(".next").click(function () {
auto_cut_img()
})
</script>
</body>
</html>
4.自定义
.animate(params, [speed], [easing], [fn]) //用于创建自定义动画的函数。 参数介绍： params:一组包含作为动画属性和终值的样式属性和及其值的集合。 speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”。 fn:在动画完成时执行的函数，每个元素执行一次。
4.6：CSS操作
1.CSS位置操作
$("").offset([coordinates])：偏移，有两个属性，分别是top和left，位置是以左上角的位置来判断的（针对整个窗口去拿位置）
赋值方式：$("").offset({left:200,top:200})
$("").position()：定位，也有一个top值和left值（针对父级已定位标签去拿位置）
$("").scroll：滚动条滚动时触发的事件
$("").scrollTop([val])：调上下的滚动条
返回顶部，要给整个窗口加，$(window).scrolltop（0），可以取值可以赋值
$("").scrollLeft([val])：调左右的滚动条
$("").css("cursor","move")：cursor改变鼠标样式
<!DOCTYPE html>
<html lang="en">
<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</title>
<script src="../day45jQuery/jquery-3.2.1.js"></script>
<style>
*{
margin: 0;
}
.s1{
width: 200px;
height: 200px;
background-color: #396bb3;
}
</style>
</head>
<body>
<div class="s1"></div>
<script>
var mouse_x=0;
var mouse_y=0;
$(".s1").mouseover(function () {
$(this).css("cursor","move")
});
$(".s1").mousedown(function (e) {
mouse_x=e.clientX;
mouse_y=e.clientY;
var $box_top=$(".s1").offset().top;
var $box_left=$(".s1").offset().left;
$(document).mousemove(function (e) {
var new_mouse_x=e.clientX;
var new_mouse_y=e.clientY;
$(".s1").offset({"left":$box_left+new_mouse_x-mouse_x,"top":$box_top+new_mouse_y-mouse_y})
})
});
$(document).mouseup(function () {
$(this).off("mousemove")
})
</script>
</body>
</html>
状态事件对象：event
event对象是保存事件触发状态的对象，由操作系统发送
ele.onkeydown=function (e) {
e=e||window.event;
console.log(String.fromCharCode(e.keyCode));
e.keyCode拿到的是键盘按下键的asc码，然后用String.fromCharCode方法拿到用户按下的键
e.clientX：拿到鼠标的X轴坐标
e.clientY：拿到鼠标的Y轴坐标
2.尺寸操作
$("").height([val|fn])：拿的是文本框的高
$("").width([val|fn])：拿的是文本框的宽
$("").innerHeight()：加上padding的高
$("").innerWidth()：加上padding的宽
$("").outerHeight([soptions])：再加上border的高，如果里面的参数加上ture，会连Maggin都算上
$("").outerWidth([options])：加上border的宽，同上
练习
<!DOCTYPE html>
<html lang="en">
<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</title>
<script src="jquery-3.2.1.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.navbar{
float: left;
width: 100%;
height: 50px;
background-color: #272425;
}
.left_menu{
float: left;
width: 20%;
margin-left: -1px;
height: 500px;
border-right: 1px solid;
}
.right_content{
position: relative;
top: 0;
left: 0;
float: left;
width: 77%;
height: 500px;
padding-left: 40px;
margin-right: -1px;
}
.operation{
margin-top: 20px;
color: white;
width: 100%;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #396bb3;
}
.operation_list{
list-style: none;
}
.operation_list li{
margin: 10px;
font-size: 14px;
}
.operation_list li a{
color: #396bb3;
text-decoration: none;
}
.book_info{
width: 100%;
font-size: 14px;
}
td{
width: 50px;
height: 40px;
border-top: 1px solid #e1e1e1;
}
.search_box{
width: 100%;
height: 100px;
}
#search_bar{
padding: 10px;
position: absolute;
right: 144px;
top: 36px;
width: 200px;
border-radius: 7px;
border: 1px solid #e1e1e1;
}
.search_btn{
color: white;
border-radius: 5px;
padding: 9px;
background-color: #396bb3;
position: absolute;
right: 93px;
top: 34px;
}
.hide{
display: none;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: black;
opacity: 0.4;
}
.model,.model2{
width: 500px;
height: 400px;
background-color:white;
position: fixed;
top: 50%;
left:50%;
margin-top: -200px;
margin-left: -250px;
}
.btn{
width: 50px;
height: 30px;
border-radius: 5px;
color: white;
}
.del_btn{
background-color: #ff1732;
}
.btn2{
background-color: #396bb3;
}
.btn3{
background-color: #4cff82;
}
.edit_btn{
background-color: #ffdd3f;
}
.cancel_btn{
background-color: #ff1732;
}
.input_field{
height: 30px;
border-radius: 5px;
margin: 10px;
}
.model{
padding-left: 150px;
}
#put_info{
margin-left: 100px;
}
#cancle{
margin-left: 50px;
}
.head{
width: 80%;
height: 100%;
margin: 0 auto;
}
.title{
float: left;
color: white;
font-size: 28px;
line-height: 100%;
margin-top: 8px;
}
.index_link{
float: left;
color: #e1e1e1;
font-size: 15px;
margin-top: 15px;
margin-left: 80px;
text-decoration: none;
}
.copyright{
line-height: 30px;
text-align: center;
font-size: 14px;
}
</style>
</head>
<body>
<div class="outer">
<div class="navbar">
<div class="head">
<div class="title">图书管理系统</div>
<div ><a href="" class="index_link">首页</a></div>
</div>
</div>
<div class="left_menu">
<div class="operation">操作</div>
<ul class="operation_list">
<!--<li><a href="" >>>>添加书籍</a></li>-->
<li><a href="" >>>>草稿箱</a></li>
<li><a href="" >>>>设置默认编辑器</a></li>
<li><a href="" >>>>备份书籍</a></li>
</ul>
</div>
<div class="right_content">
<div class="search_box">
<form action="">
<input type="text" placeholder="Title" id="search_bar">
</form>
<button class="search_btn">查找</button>
</div>
<button class="btn2 btn" id="add_info">添加</button>
<table class="book_info">
<tr>
<td>图书编号</td>
<td>书名</td>
<td>作者</td>
<td>价格</td>
<td>分类</td>
<td>上架时间</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>囚徒健身</td>
<td>保罗·威德(美)</td>
<td>79￥</td>
<td>健身</td>
<td>2013年10月</td>
<td>
<button class="edit_btn btn">编辑</button>
<button class="del_btn btn">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>万历十五年</td>
<td>黄仁宇</td>
<td>18￥</td>
<td>历史</td>
<td>1990年1月1日</td>
<td>
<button class="edit_btn btn">编辑</button>
<button class="del_btn btn">删除</button>
</td>
</tr>
</table>
</div>
<div class="shade hide"></div>
<div class="model hide">
<div>图书编号：<input type="text" class="input_field" value=""></div>
<div> 书名：<input type="text" class="input_field" value=""></div>
<div> 作者：<input type="text" class="input_field" value=""></div>
<div> 价格：<input type="text" class="input_field" value=""></div>
<div> 分类：<input type="text" class="input_field" value=""></div>
<div>上架时间：<input type="text" class="input_field" value=""></div>
<button class="btn3 btn" id="put_info">提交</button>
<button class="cancel_btn btn" id="cancle">取消</button>
</div>
<div class="copyright">
<p>©All rights reserved</p>
<p><b>Powered by</b> Amos</p>
</div>
</div>
<script>
var x; //用来判断是添加还是编辑
//点击添加信息，弹出空对话框
$("#add_info").click(function () {
$(".shade,.model").removeClass("hide");
$(":text").val("")
});
//点击取消，收回对话框
$("#cancle").click(function () {
$(".shade,.model").addClass("hide");
});
//点击提交信息，
$("#put_info").click(function () {
//添加页面
if (x==undefined){
var $tr=$("<tr>");
$(".model :text").each(function () {
var $td=$("<td>");
$td.text($(this).val());
$tr.append($td);
});
var $td=$("<td>");
var $edit_btn=$("<button>");
var $del_btn=$("<button>");
$td.append($edit_btn.text("编辑").addClass("edit_btn").addClass("btn"));
$td.append($del_btn.text("删除").addClass("del_btn").addClass("btn"));
$tr.append($td);
$(".book_info").append($tr);
$(".shade,.model").addClass("hide");
}
//编辑页面
else {
//创建新的tr节点，添加td节点
var $tr=$("<tr>");
$(".model :text").each(function () {
var $td=$("<td>");
$td.text($(this).val());
$tr.append($td);
});
//拿新建的tr内容去替换旧的tr内容
$tr.children().each(function () {
var $index_val=$(this).index();//拿到索引
$(edit_obj[$index_val]).text($(this).text())
});
x=undefined;//把x恢复成原装
$(".shade,.model").addClass("hide"); //关闭对话框
}
});
//点击删除按钮
$(".book_info").on("click",".del_btn",function () {
$(this).parent().parent().remove()
});
//点击编辑按钮
$(".book_info").on("click",".edit_btn",function () {
x=1;
edit_obj=$(this).parent().siblings();//定义全局变量让上面知道在操作哪行
$(this).parent().siblings().each(function () {
var $input_field=$(".model :text");
var index_val=$(this).index(); //拿到每个格子的索引值
//把每个框的value值换成表格里的值
$($input_field[index_val]).val($(this).text());
});
$(".shade,.model").removeClass("hide"); //弹出对话框
})
</script>
</body>
</html>
