jQuery
jQuery
jQuery是什么
1.jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。
2.jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
3.它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器
4.jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。
5.jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择,而且速度要比原生的快。
6.jQuery的版本分为1.x系列和2.x、3.x系列,1.x系列兼容低版本的浏览器,2.x、3.x系列放弃支持低版本浏览器,目前使用最多的是1.x系列的。
补充:
jQuery下载网站:http://jquery.com/
jQuery在线帮助文档:http://jquery.cuishifeng.cn/
什么是jQuery对象
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的。简单说jQuery对象就是“$”。
比如:$(“#test”).html();
意思是:获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码: document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定:如果获取的是 jQuery 对象, 那么要在变量前面加上$。比如var $div
jQuery对象和DOM对象互相转换
因为jQuery对象和DOM对象不能使用各自的方法,所以有时候需要相互转换
$div[0] //jQuery对象转为DOM对象,原来jQuery对象不可以用DOM对象的方法,现在就可以使用了,比如:$(".div")[0].innerHTML
$(DOM对象) //将DOM对象转变成jQuery对象。
jQuery的引入方式
<script src="js/jquery-1.12.4.min.js"></script>
jQuery是一个函数库,一个js文件,上面就是导入的操作,写具体的jQuery代码还是在<script></script>中
jQuery的基本语法
$(selector).action()
selector:指的是选择
action:指的是操作
例如:
$("div").css("color","red");
jQuery选择器
jQuery的选择器和css中的选择器大致是一样的,我就不重复说了,特殊的我会做相应的说明
基本选择器
$("*") $("#id") $(".class") $("div") $(".class,p,div")
层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div") //“~”这个和“+”差不多,但是不要求紧挨着了
基本筛选器
$("li:first") $("li:last") $("li:eq(2)") $("li:even") $("li:gt(1)") //eq是按下标取,gt是大于这个下标的,lt是小于这个下标的
属性选择器
$('[id="div1"]') $('[why="yes"][id="id1"]') //注意引号问题,第二个是多重过滤器
表单选择器
$("[type='text']")----->$(":text") //“:”是简写形式,注意只适用于input标签 : $("input:checked")
length属性
查看jQuery对象内元素个数,0说明没有元素
var $div = $('#box'); alert($div.length);
jQuery过滤器
过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test") //hasclass是筛选标签里面是否有该class,返回的是布尔值
//这个和基本筛选器很类似,但是这个更灵活
查找筛选器
$("div").children(".test") //children只查找儿子层
$("div").find(".test") //find是对象里面都查找 $(".test").next(),$(".test").nextAll(),$(".test").nextUntil("#end") //next只改下面的第一个,nextAll改下面的全部,nextUntil是到那个设置的选择器之间(左开右开区间)的改变。例如:$("li").eq(2).nextAll("#end").css("color","red"); $("div").prev(),$("div").prevAll(),$("div").prevUntil() //同上,这个是向上的查找 $("test").parent(),$(".test").parents(),$(".test").parentUntil() //同上,只是向外层找 $("div").siblings() //跟他同级的,但是不包括它的
元素操作
属性操作:
属性:
$("").attr(); //根据属性名取值,标签特有的和用户自定义的都可以取出来。里面写一个参数,返回这个属性的值,写两个参数是改变这个属性的值。如果取的是checked的话,取值取到的是里面的属性值,如果没写checked属性的话,返回undefined //$("div").attr("con") 是查看属性里面的值
//$("div").attr("con","c2") 是设置属性里面的值
$("").removeAttr(); $("").prop(); //根据属性名取值,但是只能取标签特有(自带)的属性。如果取的是checked,而标签里没写这个属性,返回false,如果有这个属性且值是checked,返回true $("").removeProp();
attr和prop详解:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<input id="chk1" type="checkbox" />是否可见 <input id="chk2" type="checkbox" checked="checked" />是否可见 <script> //对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。 //对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。 //像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此 //需要使用prop方法去操作才能获得正确的结果。 // $("#chk1").attr("checked") // undefined // $("#chk1").prop("checked") // false // ---------手动选中的时候attr()获得到没有意义的undefined----------- // $("#chk1").attr("checked") // undefined // $("#chk1").prop("checked") // true console.log($("#chk1").prop("checked"));//false console.log($("#chk2").prop("checked"));//true console.log($("#chk1").attr("checked"));//undefined console.log($("#chk2").attr("checked"));//checked </script>
css类添加/移除:
$("").addClass(class|fn); $("").removeClass([class|fn]);
$("").toggleClass([class|fn]); //有,就删除,没有,就增加
css样式:
$("").css("color","red") //设置css样式,里面的参数也可以用字典方式进行设置
HTML代码/文本/值
$("").html([val|fn]); //相当于js中的innerHTML,没有参数的话,有标签就把标签也取出来。
//$(".p").html("<h1>hello</h1>"); 这个会进行渲染 $("").text([val|fn]); //相当于js中的innertext,没有参数的话,只取标签里的内容
//$(".p").text("<h1>hello</h1>"); 这个不会进行渲染,它会整体变成里面的文本
$("").val([val|fn|arr]); //取标签的value值,value只能是这个标签的固有属性(也就是说不是自定义属性)才能取出来,里面加值可以进行value值的修改
//$(":text").val(); 取样式为text的input标签的value值
//$(":text").val("89"); 给这个value重新赋值
jQuery的遍历
方式一:
$.each(arr,functioin(x,y){ console.log(x); //下标 console.log(y); //值 } //这个是用来遍历数组的,each中的第一个参数为数组变量
方式二:
$("p").each(function){ console.log($(this)) //所有的p标签的值 $(this).html("hello") }
实例:
正反选:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button onclick="selectall();">全选</button> <button onclick="cancel();">取消</button> <button onclick="reverse();">反选</button> <hr> <table border="1"> <tr> <td><input type="checkbox"></td> <td>111</td> </tr> <tr> <td><input type="checkbox"></td> <td>222</td> </tr> <tr> <td><input type="checkbox"></td> <td>333</td> </tr> <tr> <td><input type="checkbox"></td> <td>444</td> </tr> </table> <script src="jquery-3.1.1.js"></script> <script> function selectall() { $(":checkbox").each(function () { $(this).prop("checked",true) }) } function cancel() { $(":checkbox").each(function () { $(this).prop("checked",false) }) } function reverse() { $(":checkbox").each(function () { if($(this).prop("checked")){ $(this).prop("checked",false) } else { $(this).prop("checked",true) } }) } </script> </body> </html>
文档处理
这个类似js中的节点的增删改查
//创建一个标签对象 $("<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) ----->$("p").replaceWith("<b>Paragraph. </b>"); //删除 $("").empty() //标签的内容清空,但是标签还在 $("").remove([expr]) //整个标签都删除 //复制 $("").clone([Even[,deepEven]])
例子:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>05-元素节点操作</title> <style> .box{ width: 200px; height: 200px; background: red; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { // 1.创建节点 var $div = $("<div>"); var $a = $("<a href='#'>链接标签</a>"); // 2.插入增加 // 2.1 在当前元素的内部 //2.1.1 在后面 // $(".box").append($a); // $a.appendTo($(".box")); //2.1.2 前面 // $(".box").prepend($a); // $a.prependTo($(".box")); // 2.2 在当前元素的外部 //2.2.1 前面 // $a.insertBefore($(".box")); // $(".box").before($a); //2.2.2 后面 // $a.insertAfter($(".box")); $(".box").after($a); // 3.删除节点 $(".box").remove(); }) </script> </head> <body> <div class="box"> div内部内容 </div> </body> </html>
css操作
CSS
$("").css(name|pro|[,val|fn]) 位置: $("").offset([coordinates]) //相对于视口(网页,也就是body标签)的偏移量。它拿到的是一个对象,它只有两个属性,top和left,如果想看它里面的具体属性,例如:$(".div1").offset().top $("").position() //相当于已定位的父标签的偏移量,其他同上 $("").scrollTop([val]) //获取滚动条的位置,需要监听事件window.onscroll=function(){console.log($(window).scrollTop());} $("").scrollLeft(val]) //这个是左右,同上 尺寸: $("").height([val|fn]) //获取内容高度 $("").width([val|fn]) //获取内容宽度 $("").innerHeight() //获取内容高度,包括padding $("").innerWidth() $("").outerHeight([soptions]) //获取内容高度,包括border和padding,里面加入参数true,获取的就也包括margin了 $("").outerWidth([options])
事件绑定
鼠标事件
click //单击 mouseover mouseout //进入子元素 会触发事件 mouseenter mouseleave //进入子元素 不会触发事件 hover //监听鼠标进入,离开区域事件
例子:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>09-鼠标的事件</title> <style> .red{ width: 400px; height: 400px; background: red; overflow: hidden; } .green{ height: 100px; background: green; margin-top:100px; font-size: 30px; color: white; font-weight: bold; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { // 1.click // 2.mouseover mouseout 进入子元素 会触发事件 var index = 0; $('.red').mouseover(function () { index++; $('.green').html(index); }) $('.red').mouseout(function () { index++; $('.green').html(index); }) // 3.mouseenter mouseleave 进入子元素 不会触发事件 // $('.red').mouseenter(function () { // index++; // $('.green').html(index); // }) // $('.red').mouseleave(function () { // index++; // $('.green').html(index); // }) // 4.hover 监听 进入 移开 // $('.red').hover(function (event) { // console.log(event.type); // index++; // $('.green').html(index); // if (event.type == "mouseenter") { // } else { // } // }) }) </script> </head> <body> <div class="red"> <div class="green"></div> </div> </body> </html>
焦点事件
focus //获得焦点事件,focus()方法是自动获取焦点 blur //失去焦点事件
例子:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>01-jquery的属性操作2</title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { //1.获取焦点事件 // 自动获取焦点 不传参数 // $('.one').focus(); // 监听获取焦点的事件 $('.one').focus(function () { console.log('获取焦点!') }) // 2.失去焦点 blur $('.one').blur(function () { console.log('失去焦点!') }) }) </script> </head> <body> <!-- 焦点 事件 输入框 --> <input type="text" class="one"> <input type="text" class="two"> </body> </html>
绑定事件
方法一: $("ul li").click(function(){}) //简写 方法二 $("ul li").bind("click",function(){}) //完整写法
解除绑定事件
$("ul li").unbind("click")
事件委托
$("").on(eve,[selector],[data],fn) //四个参数分别对应的是事件,选择器,参数,函数
例子:
$("ul").on("click","li",function(){}); //过程是,click先找ul,ul再将事件委托给下面的li去执行。这样就实现了新加入的li标签也可以有单击事件
[data]参数的调用: function myHandler(event) { alert(event.data.foo); } $("li").on("click", {foo: "bar"}, myHandler)
注:旧版本中事件委托格式不一样,是下面的样子:
$('.list').delegate('li','click',function () { $(this).css({'color':'red'}) })
事件加载
如果script标签写在body前,会执行不了,因为找不到标签,加入这两个方法就可以执行了
方法一:
$(document).ready(function(){
内容
}); 方法二: $(functioin(){
内容
});
事件传播
和js一样在事件传播过程中,如果父元素有同类型事件监听,被同时激活
两种阻止方式: 第一种:在function的参数加一个任意名的参数,一般写event,然后添加参数的stopPropagation()方法 第二种:函数中加return false;
例子:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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="js/jquery-1.12.4.min.js"></script> <style> .div1{ width: 200px; height: 200px; background-color: red; } .div2{ width: 100px; height: 100px; background-color: blue; } </style> </head> <body> <div class="div1"> <div class="div2"></div> </div> </body> <script> $(".div1").click(function(){ alert("外层"); }) $(".div2").click(function(ev){ alert("里层"); ev.stopPropagation(); // return false; }) </script> </html>
实际例子:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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"> <link rel="stylesheet" href="css/main.css"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { $("#btn01").click(function () { //1.弹出提示框 // $("#pop").show(); $("#pop").fadeIn(); //淡入 //阻止冒泡 return false; }) //特殊的使用window 操作知识为了演示知识点 $(window).click(function () { //隐藏提示框 // $("#pop").hide(); $("#pop").fadeOut(); //淡出 }) $(".pop_con").click(function () { //阻止冒泡 return false; }); //X 的按钮 $("#shutoff").click(function () { //关闭整个的提示框 $("#pop").fadeOut(); return false; }); }) </script> </head> <body> <input type="button" value="弹出弹框" id="btn01"> <div class="pop_main" id="pop"> <div class="pop_con"> <div class="pop_title"> <h3>系统提示</h3> <a href="#" id="shutoff">×</a> </div> <div class="pop_detail"> <p class="pop_text">亲!请关注近期的优惠活动!</p> </div> <div class="pop_footer"> </div> </div> <div class="mask"></div> </div> </body> </html>
阻止默认的提交事件
两种阻止方式: 第一种:和前面差不多,是event.preventDefault(); 第二种:函数中加return false
例子:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>阻止默认程序</title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { $("#form1").submit(function (event) { //1. // return false; //2. event.preventDefault(); }); }) </script> </head> <body> <form action="" id="form1"> <input type="text" value="内容" name="username"> <input type="submit"> </form> </body> </html>
动画效果
$("div").fadeTo(1000,0.4) //第一个参数表示一秒完成,第二个参数表示淡入到透明度为0.4
注:1到3中的括号里都可以加时间,单位是毫秒,表示用多少毫秒来完成这个动作
案例:层级菜单1
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>02-层级菜单案例</title> <style> /*1.初始化*/ ul,li{ list-style: none; margin: 0; padding: 0; } a{ text-decoration: none; } /*2.设置 外层menu的大小 居中*/ .menu{ width: 200px; margin: 50px auto 0; } /*3.设置a标签的文字,大小样式*/ .menu .level1,.menu li ul a{ width: 200px; height: 30px; line-height: 30px; background-color: #3366cc; text-indent: 10px; color:#fff; display: block; } /*4.添加 每个格子的下划线*/ .menu .level1{ border-bottom:1px solid #afc6f6; } /*5.设置 内层格子的背景*/ .menu li ul a{ font-size:14px; text-indent:20px; background-color:#7aa1ef; } /*6.给内层盒子 添加底部边框*/ .menu li ul li{ border-bottom:1px solid #afc6f6; } /*7.给内层盒子的a 标签 添加伪类*/ .menu li ul a:hover{ background-color:#f6b544; } /*8.设置内部盒子隐藏, 第一个格子打开*/ .menu li ul{ display: none; } .menu li .current{ display: block; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { // 1.获取标签 var $btns = $('.level1'); // 2.监听按钮的点击 slideDown up $btns.click(function () { // 3.点的这个按钮(下面的列表)--打开,其他的列表关闭 // 3.1获取下面的列表 var $nextUl = $(this).next(); // 3.2 打开 动画 $nextUl.slideDown(); // 3.3 nextul 获取父元素 var $parentLi = $nextUl.parent(); // 3.4 其他的LI标签 var $otherLis = $parentLi.siblings(); // 3.5获取其他的ul 子元素 var $ul = $otherLis.children('ul'); // 3.6关闭 $ul.slideUp(); }) }) </script> </head> <body> <ul class="menu"> <li> <a href="#" class="level1">水果</a> <ul class="current"> <li><a href="">苹果</a></li> <li><a href="">香蕉</a></li> <li><a href="">梨子</a></li> <li><a href="">火龙果</a></li> </ul> </li> <li> <a href="#" class="level1">海鲜</a> <ul> <li><a href="#">蛏子</a></li> <li><a href="#">扇贝</a></li> <li><a href="#">龙虾</a></li> <li><a href="#">象拔蚌</a></li> </ul> </li> <li> <a href="#" class="level1">肉类</a> <ul> <li><a href="#">内蒙古羊肉</a></li> <li><a href="#">进口牛肉</a></li> <li><a href="#">野猪肉</a></li> </ul> </li> <li> <a href="#" class="level1">蔬菜</a> <ul> <li><a href="#">娃娃菜</a></li> <li><a href="#">西红柿</a></li> <li><a href="#">西芹</a></li> <li><a href="#">胡萝卜</a></li> </ul> </li> <li> <a href="#" class="level1">速冻</a> <ul> <li><a href="#">冰淇淋</a></li> <li><a href="#">湾仔码头</a></li> <li><a href="#">海参</a></li> <li><a href="#">牛肉丸</a></li> </ul> </li> </ul> </body> </html>
层级菜单2
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>02-层级菜单案例</title> <style> /*1.初始化*/ ul,li{ list-style: none; margin: 0; padding: 0; } a{ text-decoration: none; } /*2.设置 外层menu的大小 居中*/ .menu{ width: 200px; margin: 50px auto 0; } /*3.设置a标签的文字,大小样式*/ .menu .level1,.menu li ul a{ width: 200px; height: 30px; line-height: 30px; background-color: #3366cc; text-indent: 10px; color:#fff; display: block; } /*4.添加 每个格子的下划线*/ .menu .level1{ border-bottom:1px solid #afc6f6; } /*5.设置 内层格子的背景*/ .menu li ul a{ font-size:14px; text-indent:20px; background-color:#7aa1ef; } /*6.给内层盒子 添加底部边框*/ .menu li ul li{ border-bottom:1px solid #afc6f6; } /*7.给内层盒子的a 标签 添加伪类*/ .menu li ul a:hover{ background-color:#f6b544; } /*8.设置内部盒子隐藏, 第一个格子打开*/ .menu li ul{ display: none; } .menu li .current{ display: block; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { // 1.获取标签 var $btns = $('.level1'); // 2.监听按钮的点击 slideDown up $btns.click(function () { // 3.点击当前的按钮, 下面的ul(slideDown),找ul的父元素LI, // 再 找 LI其他平级元素(Li),在其他LI的子元素ul, slideUp $(this).next().slideDown().parent().siblings().children('ul').slideUp(); }) }) </script> </head> <body> <ul class="menu"> <li> <a href="#" class="level1">水果</a> <ul class="current"> <li><a href="">苹果</a></li> <li><a href="">香蕉</a></li> <li><a href="">梨子</a></li> <li><a href="">火龙果</a></li> </ul> </li> <li> <a href="#" class="level1">海鲜</a> <ul> <li><a href="#">蛏子</a></li> <li><a href="#">扇贝</a></li> <li><a href="#">龙虾</a></li> <li><a href="#">象拔蚌</a></li> </ul> </li> <li> <a href="#" class="level1">肉类</a> <ul> <li><a href="#">内蒙古羊肉</a></li> <li><a href="#">进口牛肉</a></li> <li><a href="#">野猪肉</a></li> </ul> </li> <li> <a href="#" class="level1">蔬菜</a> <ul> <li><a href="#">娃娃菜</a></li> <li><a href="#">西红柿</a></li> <li><a href="#">西芹</a></li> <li><a href="#">胡萝卜</a></li> </ul> </li> <li> <a href="#" class="level1">速冻</a> <ul> <li><a href="#">冰淇淋</a></li> <li><a href="#">湾仔码头</a></li> <li><a href="#">海参</a></li> <li><a href="#">牛肉丸</a></li> </ul> </li> </ul> </body> </html>
回调函数
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/jquery-1.12.4.min.js"></script> </head> <body> <button>hide</button> <p>helloworld helloworld helloworld</p> <script> $("button").click(function(){ $("p").hide(1000,function(){ alert($(this).html()) //当执行完hide后,执行这个函数 }) }) </script> </body> </html>
扩展方法
在平时使用的时候我们可以使用"$."然后调用jQuery提供的方法,有时候我们想要使用自己写的方法,然后通过这种方式调用,这就需要拓展方法。
我们平时调用方法的时候有两种方式,一个是$.方法,一个是$("选择器").方法
这两种方式添加拓展方法的方式分别是:
一、$.extend({自定义方法});或者jQuery.extend({自定义方法});
二、$.fn.extend({自定义方法});或者jQuery.fn.extend({自定义方法});
例子:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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> </head> <body> <div>111111</div> <div>222222222</div> <p>333333333</p> </body> <script src="js/jquery-1.12.4.min.js"></script> <script> $.extend({ comeOn: function(){alert("我来了");}, max: function(a, b) { return a > b ? a : b; } }); $.comeOn(); console.log($.max(3,4)); $.fn.extend({ "print":function(){ for (var i=0;i<this.length;i++){ //this就相当于选择器找到的jQuery对象 console.log($(this)[i].innerHTML) //$(this)[i]相当于将jQuery中的元素变成DOM对象,所以用的是innerHTML } } }); $("div").print(); </script> </html>
Ajax
这个是jQuery中实现前后交互的功能,这个我推荐一个人的博客,写的很清楚 https://www.cnblogs.com/jackson0714/p/AJAX.html#_label3
实例:
选项卡
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>选项卡</title> <style> .tap_con{ width: 500px; height: 350px; margin: 50px auto 0; } .tap_btns{ height: 50px; } .tap_btns input{ width: 100px; height: 50px; background-color: lightgray; border: 0px; outline: none; } .tap_btns .active{ background-color: gold; } .tab_cons{ height: 300px; background-color: gold; } .tab_cons div{ height: 300px; line-height: 300px; text-align: center; /* 隐藏 */ display: none; font-size: 30px; } .tab_cons .current{ display: block; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { // 1.获取三个按钮 var $btns = $('.tap_btns input'); // 2.获取三个div var $divs = $('.tab_cons div'); // 3.监听按钮点击 $btns.click(function () { // 4.点击 哪个按钮 哪个按钮黄色(addclass),其他的按钮删除class $(this).addClass('active').siblings().removeClass('active'); // 5.点击按钮index对应的div显示(current),其他的div删除class $divs.eq($(this).index()).addClass('current').siblings().removeClass('current'); }) }) </script> </head> <body> <div class="tap_con"> <div class="tap_btns"> <input type="button" value="按钮一" class="active"> <input type="button" value="按钮二"> <input type="button" value="按钮三"> </div> <div class="tab_cons"> <div class="current">按钮一对应的内容</div> <div>按钮二对应的内容</div> <div>按钮三对应的内容</div> </div> </div> </body> </html>
铺展动画
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>13-jquery的动画</title> <style> .box{ width: 0px; height: 300px; background: red; } .box1{ width: 0px; height: 300px; background: green; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script src="js/jquery.color.js"></script> <script> $(document).ready(function () { // 动画; 动画属性,动画时长(毫秒),动画样式(先快后慢,先慢后快),动画结束的监听 // jquery 动画 对尺寸有作用 px结尾 // margin-top // margin-left $('.box').animate( { "width":"1000px", "background-color":"green" }, 5000, function () { $('.box').animate({"height":"500px"},2000) } ) // $('.box').animate( // { // "width":"1000px", // }, // 5000, // "linear", // function () { // console.log('动画结束了!') // } // ) // $('.box1').animate( // { // "width":"1000px", // }, // 5000, // "swing", // ) }) </script> </head> <body> <div class="box"> </div> <div class="box1"> </div> </body> </html>
对话框
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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> <style type="text/css"> .talk_con{ width:600px; height:500px; border:1px solid #666; margin:50px auto 0; background:#f9f9f9; } .talk_show{ width:580px; height:420px; border:1px solid #666; background:#fff; margin:10px auto 0; overflow:auto; } .talk_input{ width:580px; margin:10px auto 0; } .whotalk{ width:80px; height:30px; float:left; outline:none; } .talk_word{ width:420px; height:26px; padding:0px; float:left; margin-left:10px; outline:none; text-indent:10px; } .talk_sub{ width:56px; height:30px; float:left; margin-left:10px; } .atalk{ margin:10px; } .atalk span{ display:inline-block; background:#0181cc; border-radius:10px; color:#fff; padding:5px 10px; } .btalk{ margin:10px; text-align:right; } .btalk span{ display:inline-block; background:#ef8201; border-radius:10px; color:#fff; padding:5px 10px; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { // 1.标签4个 var $sendBtn = $('#talksub'), // 对话框 $showWords = $('#words'), // A ,B $who = $('#who'), // 输入框 $content = $('#talkwords'); // 2.监听发送按钮 $sendBtn.click(function () { // 3.判断空 .val() if ($content.val() == "") { alert('请输入内容!'); return; } // 4.判断 A ,B var sNewContent = "" var sOldContent = $showWords.html(); if ($who.val() == "0") {//A sNewContent = sOldContent + '<div class="atalk"><span>A说: ' + $content.val() + '</span></div>'; } else {//B sNewContent = sOldContent + '<div class="btalk"><span>B说: ' + $content.val() + '</span></div>'; } // 5.赋值 .html() 整体替换 $showWords.html(sNewContent); // 6.输入完毕 清空输入框 $content.val(""); }) }) </script> </head> <body> <div class="talk_con"> <!--1.对话框--> <div class="talk_show" id="words"> <div class="atalk"><span>A说:吃饭了吗?</span></div> <div class="btalk"><span>B说:还没呢,你呢?</span></div> </div> <!--2.选择人和 输入内容和发送--> <div class="talk_input"> <select class="whotalk" id="who"> <option value="0">A说:</option> <option value="1">B说:</option> </select> <input type="text" class="talk_word" id="talkwords"> <input type="button" value="发送" class="talk_sub" id="talksub"> </div> </div> </body> </html>
连续动画
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>jquery的动画</title> <style> div{ width: 100px; height: 100px; } .box{ background-color: red; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script src="js/jquery.color.js"></script> <script> $(function () { //注意点: jquery中的动画 一般对 尺寸生效 px //渐变色动画 color.js的函数库 //1.获取标签 setInterval(fnTest,1000) function fnTest() { var $div = $(".box"); $div.animate({ "margin-top":500, "margin-left":500 },1000) $div.animate({ "margin-top":100, "margin-left":1000 },1000) $div.animate({ "margin-top":0, "margin-left":0 },1000) } // $div.animate({ // "margin-top":500, // "margin-left":500 // },1000,function () { // $div.animate({ // "margin-top": 100, // "margin-left": 1000 // }, 1000, function () { // $div.animate({ // "margin-top": 0, // "margin-left": 0 // }, 1000, function () { // }); // }); // }); }) </script> </head> <body> <div class="box"></div> <div class="box1"></div> </body> </html>
to do list
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todolist</title> <style type="text/css"> .list_con{ width:600px; margin:50px auto 0; } .inputtxt{ width:550px; height:30px; border:1px solid #ccc; padding:0px; text-indent:10px; } .inputbtn{ width:40px; height:32px; padding:0px; border:1px solid #ccc; } .list{ margin:0; padding:0; list-style:none; margin-top:20px; } .list li{ height:40px; line-height:40px; border-bottom:1px solid #ccc; } .list li span{ float:left; } .list li a{ float:right; text-decoration:none; margin:0 10px; } </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function () { // 1.获取对应的标签 var $txt = $("#txt1"); var $addBtn = $("#btn1"); var $list = $(".list"); // 2.监听增加 $addBtn.click(function () { // 3.判断输入是否为空 var sContent = $txt.val(); if (sContent == "") { alert("输入不能为空"); return; } //3.1 增加节点 jquery对象 var $newLi = $('<li><span>' + sContent +'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>'); $newLi.appendTo($list); //3.2清空输入的内容 $txt.val(""); }) // 4.删除 排序 上 下 $list.delegate("a","click",function () { //根据类名称来判断 删除 上 下 var sClassName = $(this).prop("class"); if (sClassName == "del") {//删除 //li $(this).parent().remove(); } else if (sClassName == "up"){//上 //1.获取上面的标签 var $upLi = $(this).parent().prev(); //判断是否 到头了 if ($upLi.length == 0) { alert("到头了"); return; } //2.获取当前标签 var $currentLi = $(this).parent(); //3.调换位置 $upLi.insertAfter($currentLi); } else if (sClassName == "down"){//下 //1.获取下面的标签 var $downLi = $(this).parent().next(); //判断是否 到底了 if ($downLi.length == 0) { alert("到底了"); return; } //2.获取当前标签 var $currentLi = $(this).parent(); //3.调换位置 $downLi.insertBefore($currentLi); } }); }) </script> </head> <body> <div class="list_con"> <h2>To do list</h2> <input type="text" name="" id="txt1" class="inputtxt"> <input type="button" name="" value="增加" id="btn1" class="inputbtn"> <ul id="list" class="list"> <li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li> <li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li> <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li> </ul> </div> </body> </html>