一、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>