48-1 jQuery
一、jquery简介
1、jquery是什么
通俗的讲，就是一些用JavaScript写好的函数打包放在一个js文件里，需要时直接调用即可（这叫框架）。其最大的优势是：简洁、超好的兼容性。
英文官网： http://jquery.com/
中文文档： http://jquery.cuishifeng.cn/
下载： http://jquery.com/download/ # 右键单击：从链接另存文件为 调用： <script src="jquery-3.2.1.js"></script> 注意：压缩版是在生产环境中用的，是将非压缩版中的缩进等统统去掉，所以查看时不容易分清逻辑结构。
生产环境中的应用现状：
中小公司大量使用jquery，因为它大而全（小公司无力去写个自己的框架）；而大公司不会原封不动的用jquery，而是会根据自己的实际情况开发出个框架，自己用自己的，这样效率更高。手机端不能用jQuery。
2、jquery对象
（1）jQuery对象是什么
jQuery 对象是由DOM对象封装产生的。符号表示为：$
$ <==> jQuery # 符号"$"与符号"jQuery"等价
对于同一个元素，通过jQuery方式获取得到的对象与通过DOM获取得到的对象其实是不一样的：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="di">test</div> <script src="jquery-3.2.1.js"></script> <script> var ret = document.getElementById("di"); // 获取DOM对象 console.log(ret); var $ret2 = $("#di"); // 获取jQuery对象 console.log($ret2); for (i in $ret2){ // ret2类似于一个字典，键为0的值就是DOM对象。 console.log(i); console.log($ret2[i]); } </script> </body> </html>
约定当获取的是 jQuery 对象时， 在变量前面加上“$”符号（根据变量的命名规则，首字符可以是"$"符号）。这样做完全是为了方便一看就知道是jQuery对象，并不是语法上的硬性规定，没有其他特殊含义。
var $variable = jQuery 对象 var variable = DOM 对象
所以：jQuery与DOM对象的方法不可以混用， 如果一个对象是 jQuery 对象, 那么它只可以使用 jQuery 里的方法，比如：
$("#test").html() <==> document.getElementById(" test ").innerHTML;
（2）jQuery对象与DOM对象的转换
DOM对象转为 jQuery对象：
$(document.getElementById("msg")) // 通过$()转换成jquery对象
jQuery对象转为DOM对象：
$(this)[0] // 方式1：jQuery对象中，索引0对应的值就是DOM对象
$(this).get(0) // 方式2：通过jQuery自带的get方法
3、基本语法
$(selector).action()
二、获取元素(重要的选择器和筛选器)
1、选择器
（1）基本选择器
$("*") 选择所有元素
$("#id") 根据元素id选择
$(".class") 根据类选择
$("tag") 根据元素的标签选择
$(".class,p,div") 同时选择.class类的元素和所有的p、div标签的元素
（2）层级选择器
$(".outer div") 选择.outer类标签内的所有div元素
$(".outer>div") 仅在儿子一层找div标签
$(".outer+div") 毗邻：紧随的下一个div标签，中间不能有间隔的标签
$(".outer~div") 下一个div标签，中间可以有间隔的标签
（3）基本筛选选择器
$(".div2 li:first") 选择.div2类标签内的第一个li标签
$(".div2 li:last") 选择.div2类标签内的最后一个li标签
$(".div2 li:eq(2)") 选择索引值为2的标签（索引值从0开始）
$(".div2 li:lt(2)") 小于索引2的
$(".div2 li:gt(2)") 大于索引2的
（4）属性选择器
$("[alex]") 所有含alex属性的标签
$("[alex='lsb']") 所有alex属性等于lsb的标签
（5）表单选择器
是一种特殊的属性选择器。仅适用于找某种input标签。
$("[type='text']") ----简写为---> $(":text")
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> <!--<style>--> <!--div{--> <!--color: red;--> <!--}--> <!--</style>--> </head> <body> <div class="div1">hello div1</div> <div class="div2">hello div2 <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul> </div> <p id="p1" alex="lsb">hello p1</p> <p id="p2" alex="dsb">hello p2</p> <div class="outer"> <div> <p>hello p3</p> </div> <p>hello p4</p> </div> <div>hello div3</div> <p id="p5">hello p5</p> <input type="text"> <input type="button"> <script> // 基本选择器 // $("*").css("color", "red"); // $("div").css("color", "red"); // $("#p2").css("color", "red"); // $(".div2").css("color", "red"); // 层级选择器 // $(".div2, #p2").css("color", "red"); // $(".outer p").css("color", "red"); // $(".outer>p").css("color", "red"); // 仅在儿子一层找 // $(".outer+p").css("color", "red"); //毗邻：紧随的下一个p标签，中间不能有间隔的标签 // $(".outer~p").css("color", "red"); // 下一个p标签，中间可以有间隔的标签 // 基本筛选器 // $(".div2 li:first").css("color", "red"); // $(".div2 li:last").css("color", "red"); // $(".div2 li:eq(2)").css("color", "red"); // 按索引，从0开始 // $(".div2 li:lt(2)").css("color", "red"); // 小于索引2的 // $(".div2 li:gt(2)").css("color", "red"); // 大于索引2的 // 属性选择器 // $("[alex]").css("color", "red"); // 所有含alex属性的标签 // $("[alex='lsb']").css("color", "red"); // 所有alex属性等于lsb的标签 // 表单选择器 // $(":button").css("width", "50px"); // input标签的属性选择，可以简写为这样的形式 </script> </body> </html>
2、筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
</head>
<body>
<div class="div1">hello1
<div class="div8">hello8</div>
<div class="div10">hello10</div>
<div class="div11">hello11</div>
<div class="div2"> hello2
<div class="div3"> hello3</div>
</div>
<div class="div3">hello4</div>
<div class="div5">hello5</div>
<div class="div6">hello6</div>
<div class="div7">hello7</div>
</div>
<div class="div9">hello9</div>
<script>
// $(".div1").children(".div3").css("color", "red"); // 只找儿子层的div3
// $(".div1").find(".div3").css("color", "red"); // 找.div1类下所有层的div3
// $(".div2").next().css("color","red"); // 在.div2的同层级标签中，找.div2的下一个
// $(".div2").nextAll().css("color","red"); // 在.div2的同层级标签中，找.div2的之后所有的
// $(".div2").nextUntil(".div6").css("color","red"); // 往后直到div6，但不包括div6
// $(".div2").prev().css("color", "red");
// $(".div2").prevAll().css("color", "red");
// $(".div2").prevUntil(".div8").css("color", "red"); // 往前直到div8，但不包括div8
// $(".div3").parent().css("color", "red");
// $(".div3").parents().css("color", "red"); //一直往外找，是一个集合。最后相当于所有的标签都会应用这一设置
// $(".div3").parentsUntil(".div1").css("color", "red"); //一直往外找，直到div1这一层，且不包括div1这层
$(".div2").siblings().css("color", "red");
</script>
</body>
</html>
（1）过滤筛选器
$("li").first() 选择第一个li标签
$("li").eq(2) 选择索引为2个li标签
$("li").hasClass("test"); 如果存在属于test类的li，则返回True
（2）查找筛选器
$(".div1").children(".div3") 只找.div1下儿子层的.div3
$(".div1").find(".div3") 找.div1下所有层的.div3
$(".div2").next() 在.div2的同层级标签中，找.div2的下一个标签
$(".div2").nextAll() 在.div2的同层级标签中，找.div2的之后所有的标签
$(".div2").nextUntil(".div6") 往后直到.div6，但不包括.div6
$(".div2").prev() 在.div2的同层级标签中，找.div2的前一个标签
$(".div2").prevAll() 在.div2的同层级标签中，找.div2的之前所有的标签
$(".div2").prevUntil(".div8") 往前直到div8，但不包括div8
$(".div3").parent() 找.div3的父级标签
$(".div3").parents() 一直往外找，是一个集合。最后相当于所有的标签都会应用这一设置
$(".div3").parentsUntil(".div1") 一直往外找，直到div1这一层，且不包括div1这层
$(".div2").siblings() 找同胞。即与.div2同级的所有标签，但不包括.div2自身
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>left_menu</title> <style> .menu{ height: 500px; width: 30%; background-color: rgb(150, 150, 150); float: left; } .title{ line-height: 50px; color: white;} .hide{ display: none; } .con{ background-color: rgb(200, 200, 200); } </style> </head> <body> <div class="outer"> <div class="menu"> <div class="item"> <div class="title" onclick="show(this);">菜单一</div> <div class="con hide"> <div>111</div> <div>111</div> <div>111</div> </div> </div> <div class="item"> <div class="title" onclick="show(this);">菜单二</div> <div class="con hide"> <div>222</div> <div>222</div> <div>222</div> </div> </div> <div class="item"> <div class="title" onclick="show(this);">菜单三</div> <div class="con hide"> <div>333</div> <div>333</div> <div>333</div> </div> </div> </div> </div> <script src="jquery-3.2.1.js"></script> <script> function show(self){ $(self).next().removeClass("hide"); $(self).parent().siblings().children(".con").addClass("hide"); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{ margin: 0px; padding: 0px; } .tab_outer{ margin: 0px auto; width: 60%; } .menu{ background-color: #cccccc; /*border: 1px solid red;*/ line-height: 40px; } .menu li{ display: inline-block; } .menu a{ border-right: 1px solid red; padding: 11px; } .content{ background-color: tan; border: 1px solid green; height: 300px; } .hide{ display: none; } .current{ background-color: darkgray; color: yellow; border-top: solid 2px rebeccapurple; } </style> </head> <body> <div class="tab_outer"> <ul class="menu"> <li xxx="c1" class="current" onclick="tab(this);">菜单一</li> <!--通过xxx属性值为c1与下面id为c1的标签建立联系--> <li xxx="c2" onclick="tab(this);">菜单二</li> <li xxx="c3" onclick="tab(this);">菜单三</li> </ul> <div class="content"> <div id="c1">内容一</div> <div id="c2" class="hide">内容二</div> <div id="c3" class="hide">内容三</div> </div> </div> <script src="jquery-3.2.1.js"></script> <script> function tab(self){ // 更改标签样式： $(self).addClass("current"); /*在DOM中取对象时直接self就表示对象了。jQuery都需要用$()包一下，封装成个jQuery对象*/ $(self).siblings().removeClass("current"); // 因为支持链式操作，所有上面两句可以简写为： // $(self).addClass("current").siblings().removeClass("current") // 更改内容样式： var s=$(self).attr("xxx"); // 获取xxx对象的属性值，DOM中用getAttribute $("#"+s).removeClass("hide"); $("#"+s).siblings().addClass("hide"); } </script> </body> </html>
个人理解：选择器、筛选器两种方式获取标签，相当于两个维度，使jQuery对标签的定位功能变的非常强大，且简单 。
三、操作元素
1、操作元素的内容
$("p").text(value) 设定p元素的内部文本为value。若value为空表示查看该text
$("p").html(value) 设定p元素的内部html为value。若value为空表是查看该html。.html()相当于DOM的.innerHTML()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> </head> <body> <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> // 用法一：通过选择器选中对象 // $("table tr").each(function () { // console.log($(this).html()) // this表示所循环到的当前标签 // }) // 用法二：自己手动传入对象 // li=[10, 20, 30, 40]; // $.each(li, function(i, x){ // console.log(i, x); /* 第一参数是索引，第二参数是值 */ // }) // dic={name:"yuan", sex:"male"}; // $.each(dic, function(i, x){ // console.log(i, x); /* 第一参数是索引，第二参数是值 */ // }) </script> </body> </html> each遍历循环
2、操作元素的属性
（1）属性
$(":checkbox").val(value) 设定type为checkbox的input标签的value值。若value为空表示查看该value值
$("select").val([1, 2, 3]) select框为多选时，设定其多选的预设值
$("#test").attr("alex") 查看#test标签的alex属性的值
$("#test").attr("alex","sb") 设定#test标签的alex属性的值为sb
$("#ck").attr("checked","checked") 选中
$("#ck").removeAttr("checked") 取消
$("#ck").prop("checked") 判断是否被点击选中，若被选中值为true，否则为false
$("#ck").prop("checked",true) 选中
$("#ck").prop("checked",false) 取消
（2）class类
$("#test").addClass("hide") 为每个匹配的元素添加指定的类名
$("#test").removeClass("hide") 从所有匹配的元素中删除全部或者指定的类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> <script> function selectall(){ $("table :checkbox").prop("checked",true) } function che(){ $("table :checkbox").prop("checked",false) } function reverse(){ $("table :checkbox").each(function(){ if ($(this).prop("checked")){ $(this).prop("checked",false) } else { $(this).prop("checked",true) } }); } </script> </head> <body> <button onclick="selectall();">全选</button> <button onclick="che();">取消</button> <button onclick="reverse();">反选</button> <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> </body> </html>
3、操作元素的样式
（1）样式
$("div").css("color"); # 取得第一个div标签的color样式属性的值
$("div").css("color","red"); # 将所有div字体设为红色
$("p").css({ "color": "red", "font-size": "50px" }); # 将所有div字体设为红色，字号设为50px
（2）位置
① offset()
offset()始终返回元素相对于document边缘的距离。
$("#div2").offset(); # 返回值：{top: 50, left: 58}
$("#div2").offset().left; # 返回距窗口左边缘多少像素。js中字典可以用"."取值
$("#div2").offset().top; # 返回距窗口上边缘多少像素
$("#div2").offset({top:10,left:30}); # 设定距窗口上边缘和距窗口左边缘的像素数
② position()
position()获取元素相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于document的距离。
$("#div2").position() # 返回值：{top: 0, left: 0}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #outer{ width:200px; height:200px; background-color:yellow; position:relative; left:100px; } #inner{ width:100px; height:100px; background-color:blue; position:absolute; left:50px; top:60px; } </style> </head> <body> <div id="outer"> <div id="inner"></div> </div> <script src="jquery-3.2.1.js"></script> <script> console.log($("#inner").position().left); //输出：50 console.log($("#inner").position().top); //输出：60 console.log($("#outer").position().left); //输出：108 console.log($("#outer").position().top); //输出：8 console.log($("#inner").offset().left); //输出：$("#outer").offset().left+50 console.log($("#inner").offset().top); //输出：$("#outer").offset().top+60 </script> </body> </html>
③scrollTop、scrollLeft
获取或设定滚动条中滑块的位置。
$('div').scrollTop() # 获取div元素相对滚动条顶部的偏移
$('div').scrollTop(20) # 跳转到指定偏移
$(window).scrollTop() # 获取当前窗口相对滚动条顶部的偏移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height:500px;
width:200px;
background-color: yellow;
overflow:auto; /*内容太多，超出本层是自动添加滚轮*/
}
</style>
<script src="jquery-3.2.1.js"></script>
</head>
<body>
<div onscroll="func1()"> <!--onscroll监听滚轮的滚动-->
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
</div>
<script>
function func1(){
console.log($('div').scrollTop()); /* 量化滚动的多少*/
}
</script>
</body>
</html>
（3）尺寸
$("p").height(); # 获取第一个p元素的高度
$("p").height(20); # 设定所有p元素的高度为20px
$("p").width(); # 获取第一个p元素的宽度
$("p").width(20); # 设定所有p元素的宽度为20px
$("p").innerHeight(); # 获取第一个匹配元素内部区域高度（包括补白、不包括边框）
$("p").innerWidth(); # 获取第一个匹配元素内部区域宽度（包括补白、不包括边框）
$("p").outerHeight(); # 获取第一个匹配元素外部高度（默认包括补白和边框）
$("p").outerWidth(); # 获取第一个匹配元素外部宽度（默认包括补白和边框）
# 补充：outerHeight([options])，设置为 true 时，计算边距在内，默认为false
4、元素本身的新增、删除、清空、复制、替换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> </head> <body> <div id="div1"> <div id="div2"></div> <div id="div3"></div> </div> <div id="div4"> <p>hello p</p> <span>hello span</span> </div> <script> // var son_element=$("p"); // var parent_element=$("#div1"); // parent_element.append(son_element); // 放在 parent_element标签儿子层的最后一个位置。 // son_element.appendTo(parent_element); // 同上 // parent_element.prepend(son_element); // 放在 parent_element标签儿子层的最前一个位置。 // son_element.prependTo(parent_element); // // parent_element.before(son_element); // 放在 parent_element同层的parent_element之前一个位置。 // son_element.insertBefore(parent_element); // 同上 // parent_element.after(son_element); // 放在 parent_element同层的parent_element之前一个位置。 // son_element.insertAfter(parent_element); // 同上 // $("span").replaceWith($("#div3")); // 将span替换为div标签 // $("span").remove() // 删除span标签 // $("span").empty() // 将span标签的内容清空 </script> </body> </html>
（1）新增
# 内部插入 parent_element.append(son_element); // 放在 parent_element标签儿子层的最后一个位置。 son_element.appendTo(parent_element); // 同上 parent_element.prepend(son_element); // 放在 parent_element标签儿子层的最前一个位置。 son_element.prependTo(parent_element); # 外部插入 parent_element.before(son_element); // 放在 parent_element同层的parent_element之前一个位置。 son_element.insertBefore(parent_element); // 同上 parent_element.after(son_element); // 放在 parent_element同层的parent_element之前一个位置。 son_element.insertAfter(parent_element); // 同上
（2）删除
$("span").remove() // 删除span标签
（3）清空
$("span").empty() // 将span标签的内容清空
（4）复制
$("span").clone()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="outer"> <div class="item"> <input type="button" value="+" onclick="func1(this)"> <input type="text"> </div> </div> <script src="jquery-3.2.1.js"></script> <script> function func1(self){ var Cln = $(self).parent().clone(); Cln.children(":button").val("-"); Cln.children(":button").attr("onclick","func2(this)"); $("#outer").append(Cln); } function func2(self){ $(self).parent().remove(); } </script> </body> </html>
（5）替换
$("span").replaceWith($("#div3")); // 将span替换为div标签
四、事件绑定
1、事件绑定的方式
（1）基本的
$("p").click(function(){
alert(123) # 注意格式，要绑定的函数被包裹在 function(){...}中
});
（2）最新的
# 最新的：
$("p").on("click",function(){
alert(123);
})
# 原来的：
$("p").bind("click",function(){
alert(123);
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>helop</p>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<input type="button" value="+" onclick="add()">
<script src="jquery-3.2.1.js"></script>
<script>
// $("ul li").click(function(){ // 基本写法的问题：新加入的li不会被绑定上事件
// alert(123);
// });
$("ul").on("click","li",function(){ // 新加入的li也会被绑定上事件
alert(123);
});
function add(){
$("ul").append("<li>555</li>")
}
</script>
</body>
</html>
# on写法传入 data 参数
$("p").on("click", {foo2:"bar"},func1);
function func1(event){
alert(event.data.foo2); //如何去取传入的对象
}
2、各种事件
（1） ready()
等同于DOM中window.onload
通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
$(document).ready(function(){
$("p").css("color","red");
});
# 简写为:
$(function(){
$("p").css("color","red");
})
（2）mouse相关
mousemove 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件 mousedown 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件 mouseup 当在元素上放松鼠标按钮时，会发生 mouseup 事件 mouseout 当鼠标指针从元素上移开时，发生 mouseout 事件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid #ddd;width: 600px;position: absolute;">
<div id="title" style="background-color: black;height: 40px;color: white;">标题</div>
<div style="height: 300px;">内容</div>
</div>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script>
$(function(){ // ready事件，页面加载完成之后自动执行下面代码
$('#title').mouseover(function(){ // mouseover事件
$(this).css('cursor','move');
}).mousedown(function(e){ // mousedown事件、链式操作
var _event = e; // 或者写等于 window.event也可以;
var ord_x = _event.clientX; // 原始鼠标横纵坐标位置
var ord_y = _event.clientY; // 原始鼠标横纵坐标位置
var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
$(this).bind('mousemove', function(e){ // mousemove事件
var _new_event = e; // 或者写等于 window.event也可以;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY;
var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y);
$(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px');
})
}).mouseup(function(){ // mouseup事件
$(this).unbind('mousemove'); // 解除mousemove事件
});
})
</script>
</body>
</html>
（3）scroll
当用户滚动(拖动元素旁边的滑块或滚动鼠标滚轮)指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
- 监听元素的滚动事件
当元素里面内容的高度超出元素本身的高度，且此元素的 overflow 设为auto时，元素右侧会自动添加滚动条。可滚动查看到被隐藏的内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height:500px; width:200px; background-color: yellow; overflow:auto; /*内容太多，超出本层是自动添加滚轮*/ } </style> </head> <body> <div id="dp"> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> <p>p</p> </div> <script src="jquery-3.2.1.js"></script> <script> $("#dp").scroll(function(){ <!--scroll监听滚轮的滚动--> func1() }); function func1(){ console.log($('#dp').scrollTop()); /* 量化滚动的多少*/ } </script> </body> </html>
- 监听窗口的滚动事件
当整个 document 文档的高度超出当前浏览器窗口本身的高度时，浏览器窗口右侧会自动添加滚动条。可滚动查看到被隐藏的内容。
$(window).scroll( function() { /* ...do something... */ } );
在应用滚动事件时，常涉及到的3个高度：
$(document).height() // 文档高度
$(window).height() // 浏览器窗口高度
$('#dp').scrollTop() // 滚动条滑动了多少
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> <style> .menu{ position:absolute; left:200px; top:48px; bottom:0; width:220px; border:1px solid red; } .menu a{ display:block; } .fix{ position:fixed; top: 0; } .active{ color:white; background-color: #366db0; } </style> </head> <body style="margin: 0;"> <div style="height: 48px;background-color: #303a40"></div> <div id="div2" class="menu"> <a b="1">菜单一</a> <a b="2">菜单二</a> <a b="3">菜单三</a> <a b="4">菜单四</a> </div> <div id="content" style="position:absolute;left:420px;right:200px;top:48px;bottom:0;border:1px solid green;"> <div id="div1" a="1" style="height:500px; background-color: rebeccapurple"></div> <div a="2" style="height:900px; background-color: #303a40"></div> <div a="3" style="height:1000px; background-color: #84a42b"></div> <div a="4" style="height:800px; background-color: #336699"></div> </div> <script> /* 监听窗口的滚动事件 */ $(window).scroll(function(){ /* 获取滚动了多少，即当前窗口中的内容相对窗口滚动条顶部的偏移 */ var st=$(window).scrollTop(); /* 设置窗口左侧菜单的样式 */ if(st>48){ /* 偏移大于48px时，对div2进行定位设置 */ $('#div2').addClass('fix'); }else{ /* 偏移小于48px时，取消对div2的定位设置 */ $('#div2').removeClass('fix'); /* 偏移小于48px时，取消对div2的所有孩子的样式设置 */ $('#div2').children().removeClass('active'); } /* 窗口右侧内容区的滚动对左侧菜单样式的影响 */ $("#content").children().each(function(){ /* 每一个孩子的顶端距窗口（或者说最右侧窗口滚动条）顶端的，当前距离 */ var winTop=$(this).offset().top-st; /* 每一个孩子的底端距窗口（或者说最右侧窗口滚动条）顶端的，当前距离 */ var winBottom=winTop+$(this).height(); /* 通过内容区孩子的展示情况，影响左侧菜单样式 */ if (winTop<=0 && winBottom>0){ var a=$(this).attr("a"); $(".menu a[b='"+a+"']").addClass("active").siblings().removeClass("active"); /*注意传入变量的写法*/ return; /*这里return的作用是终止后续循环*/ } }); /* 当前文档的总高度 */ docHeight=$(document).height(); /* 当前窗口的总高度 */ winHeight=$(window).height(); /* 文档已经到最底部时，最后一个菜单，必须设置为激活样式*/ if(st+winHeight==docHeight){ $(".menu :last").addClass("active").siblings().removeClass("active"); } }) </script> </body> </html>
3、动画效果
（1）显示隐藏
$("p").hide(1000); // 用1000ms时间渐渐隐藏
$("p").show(1000); // 用1000ms时间渐渐显示
$("p").toggle(); //用于切换被选元素的 hide() 与 show() 方法
<!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(){
$("#hide").click(function(){
$("p").hide(1000); // 用1000ms时间渐渐隐藏
});
$("#show").click(function(){
$("p").show(1000);
});
$("#toggle").click(function(){ //用于切换被选元素的 hide() 与 show() 方法。
$("p").toggle();
});
});
</script>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">隐藏/显示</button>
</body>
</html>
（2）淡入淡出
$("#id1").fadeIn(1000); // 用1000ms时间淡入
$("#id1").fadeOut(1000); // 用1000ms时间淡出
$("#id1").fadeToggle(1000); // 在淡入和淡出间切换
$("#id1").fadeTo(1000,0.4); // 淡化到某一个透明度，第二参数是透明度
<!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(){
$("#in").click(function(){
$("#id1").fadeIn(1000);
$("#id2").fadeIn(1000);
$("#id3").fadeIn(1000);
});
$("#out").click(function(){
$("#id1").fadeOut(1000);
$("#id2").fadeOut(1000);
$("#id3").fadeOut(1000);
});
$("#toggle").click(function(){
$("#id1").fadeToggle(1000);
$("#id2").fadeToggle(1000);
$("#id3").fadeToggle(1000);
});
$("#fadeto").click(function(){
$("#id1").fadeTo(1000,0.4); /* 第二参数为透明度 */
$("#id2").fadeTo(1000,0.5);
$("#id3").fadeTo(1000,0);
});
});
</script>
</head>
<body>
<button id="in">fadein</button>
<button id="out">fadeout</button>
<button id="toggle">fadetoggle</button>
<button id="fadeto">fadeto</button>
<div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
<div id="id2" style="display:none; width: 80px;height: 80px;background-color: orangered "></div>
<div id="id3" style="display:none; width: 80px;height: 80px;background-color: darkgreen "></div>
</body>
</html>
（3）滑入滑出
$("#content").slideDown(1000); // 用1000ms时间滑出
$("#content").slideUp(1000); // 用1000ms时间滑入
$("#content").slideToggle(1000); // 在滑入滑出间切换
<!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(){
$("#flipshow").click(function(){
$("#content").slideDown(1000);
});
$("#fliphide").click(function(){
$("#content").slideUp(1000);
});
$("#toggle").click(function(){
$("#content").slideToggle(1000);
})
});
</script>
<style>
#flipshow,#content,#fliphide,#toggle{
padding: 5px;
text-align: center;
background-color: blueviolet;
border:solid 1px red;
}
#content{
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flipshow">出现</div>
<div id="fliphide">隐藏</div>
<div id="toggle">toggle</div>
<div id="content">helloworld</div>
</body>
</html>
（4）回调
$("p").hide(1000,function(){ // 回调:每一个动画执行完毕之后所能执行的函数方法
alert('动画结束')
});
<!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").hide(1000,function(){ <!--4 效果-回调:每一个动画执行完毕之后所能执行的函数方法或者所能做的一件事-->
alert('动画结束')
});
})
});
</script>
</head>
<body>
<button>隐藏</button>
<p>helloworld helloworld helloworld</p>
</body>
</html>
4、扩展机制
通过extend自定义方法。
（1）类的层面写的扩展，必须通过类调用
$.extend({
getmax:function(a, b){ // 通过键值对，定义方法
return a>b?a:b; // 三元运算：如果a>b成立返回a，否则返回b。三元指的>?:三个运算符
}
});
alert($.getmax(5,8))
（2）实例层面写的方法，必须通过标签（即实例）调用
$.fn.extend({
print:function(){
console.log($(this).html());
}
});
$("p").print();
生产环境中常用的写法：
将扩展方法放在自执行函数里面。意义：放到私有域里面，避免与其他内容产生冲突
(function($){
$.fn.extend({
print:function(){
console.log($(this).html());
}
});
})(jQuery);
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<title>购物商城</title>
<style>
*{
margin: 0;
padding: 0;
}
.hide{
display:none;
}
.header-nav {
height: 39px;
background: #c9033b;
}
.header-nav .container .menuEvent {
display: block;
width: 100px;
line-height: 39px;
text-align: center;
text-decoration: none;
color: #fff;
font-size: 15px;
font-weight: bold;
font-family: 微软雅黑;
}
.header-menu a{
color:#656565;
}
.header-menu .menu-catagory{
position: absolute;
background-color: #fff;
border-left:1px solid #fff;
height: 316px;
width: 230px;
z-index: 4;
float: left;
}
.header-menu .menu-catagory .catagory {
border-left:4px solid #fff;
height: 104px;
border-bottom: solid 1px #eaeaea;
}
.header-menu .menu-catagory .catagory:hover {
height: 102px;
border-left:4px solid #c9033b;
border-bottom: solid 1px #bcbcbc;
border-top: solid 1px #bcbcbc;
}
.header-menu .menu-content .item{
margin-left:230px;
position:absolute;
background-color:white;
height:314px;
width:500px;
z-index:4;
float:left;
border: solid 1px #bcbcbc;
border-left:0;
box-shadow: 1px 1px 5px #999;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="header-nav">
<div class="container">
<a id="all_menu_catagory" href="#" class="menuEvent">
<strong class="catName">全部商品分类</strong>
</a>
</div>
</div>
<div class="header-menu">
<div class="container hide">
<div id="nav_all_menu" class="menu-catagory">
<div class="catagory" float-content="one">
<div class="title">家电</div>
<div class="body">
<a href="#">空调</a>
</div>
</div>
<div class="catagory" float-content="two">
<div class="title">床上用品</div>
<div class="body">
<a href="http://www.baidu.com">床单</a>
</div>
</div>
<div class="catagory" float-content="three">
<div class="title">水果</div>
<div class="body">
<a href="#">橘子</a>
</div>
</div>
</div>
<div id="nav_all_content" class="menu-content">
<div class="item hide" float-id="one">
<dl>
<dt><a href="#" class="red">厨房用品1</a></dt>
<dd>
<span>| <a href="#" target="_blank" title="勺子">勺子</a> </span>
</dd>
</dl>
<dl>
<dt><a href="#" class="red">厨房用品2</a></dt>
<dd>
<span>| <a href="#" target="_blank" title="菜刀">菜刀</a> </span>
</dd>
</dl>
<dl>
<dt><a href="#" class="red">厨房用品3</a></dt>
<dd>
<span>| <a href="#">菜板</a> </span>
</dd>
</dl>
<dl>
<dt><a href="#" class="red">厨房用品4</a></dt>
<dd>
<span>| <a href="#" target="_blank" title="碗">碗</a> </span>
</dd>
</dl>
</div>
<div class="item hide" float-id="two">
<dl>
<dt><a href="#" class="red">厨房用品</a></dt>
<dd>
<span>| <a href="#" target="_blank" title="">角阀</a> </span>
</dd>
</dl>
<dl>
<dt><a href="#" class="red">厨房用品</a></dt>
<dd>
<span>| <a href="#" target="_blank" title="角阀">角阀</a> </span>
</dd>
</dl>
<dl>
<dt><a href="#" class="red">厨房用品</a></dt>
<dd>
<span>| <a href="#" target="_blank" title="角阀">角阀</a> </span>
</dd>
</dl>
</div>
<div class="item hide" float-id="three">
<dl>
<dt><a href="#" class="red">厨房用品3</a></dt>
<dd>
<span>| <a href="#" target="_blank" title="角阀">角阀3</a> </span>
</dd>
</dl>
<dl>
<dt><a href="#" class="red">厨房用品3</a></dt>
<dd>
<span>| <a href="http://www.meilele.com/category-jiaofa/" target="_blank" title="角阀">角阀3</a> </span>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
Change_Menu('#all_menu_catagory','#nav_all_menu', '#nav_all_content');
});
function Change_Menu(all_menu_catagory,menu, content) {
$all_menu_catagory = $(all_menu_catagory);
$menu = $(menu);
$content = $(content);
$all_menu_catagory.bind("mouseover", function () {
$menu.parent().removeClass('hide');
});
$all_menu_catagory.bind("mouseout", function () {
$menu.parent().addClass('hide');
});
$menu.children().bind("mouseover", function () {
$menu.parent().removeClass('hide');
$item_content = $content.find('div[float-id="' + $(this).attr("float-content") + '"]');
$item_content.removeClass('hide').siblings().addClass('hide');
});
$menu.bind("mouseout", function () {
$content.children().addClass('hide');
$menu.parent().addClass('hide');
});
$content.children().bind("mouseover", function () {
$menu.parent().removeClass('hide');
$(this).removeClass('hide');
});
$content.children().bind("mouseout", function () {
$(this).addClass('hide');
$menu.parent().addClass('hide');
});
}
</script>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; /* 去掉浏览器的自带的margin */ padding: 0; /* 去掉浏览器的自带的padding */ } ul{ list-style: none; /* 去掉列表项前的小圆点 */ } .outer{ margin: 50px auto; /* 盒子在body中margin为：上下50px， 左右居中 */ width: 790px; height: 340px; position: relative; } .img li{ position: absolute; top: 0; left: 0; } .num{ position: absolute; bottom: 10px; width: 100%; /* 因为 .num已经脱离文档流，不设定宽度默认为自身宽度 */ text-align: center; } .num li{ display: inline-block; height: 20px; width: 20px; background-color: gray; color: white; text-align: center; /* 文本水平居中 */ line-height: 20px; /* 文本垂直居中 */ border-radius: 50%; margin: 0 5px; } .btn{ position: absolute; top: 50%; /* 是将 .btn 左上顶点放在外层盒子垂直方向50%的位置 */ margin-top: -30px; height: 60px; width: 30px; background-color: gray; color: white; text-align: center; line-height:60px; opacity: 0.8; display: none; } .outer:hover .btn{ display: block; } .left_btn{ left:0; } .right_btn{ right:0; } .current{ background-color: red!important; } </style> </head> <body> <div class="outer"> <ul class="img"> <li><a><img src="img/01.jpg"></a></li> <li><a><img src="img/02.jpg"></a></li> <li><a><img src="img/03.jpg"></a></li> <li><a><img src="img/04.jpg"></a></li> </ul> <ul class="num"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div class="left_btn btn"> < </div> <div class="right_btn btn"> > </div> </div> <script src="jquery-3.2.1.min.js"></script> <script> // 自动轮播 var time=setInterval(move, 3000); /* 定时器，每隔1.5s执行move */ i=0; function move(){ if (i==3){ i=-1 } i=i+1; $(".num li").eq(i).addClass("current").siblings().removeClass("current"); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); } $(".outer").hover(function(){ /* hover后可加两个函数，第一个函数鼠标移入时执行，第二步函数鼠标移除时执行 */ clearInterval(time); /* 鼠标移入时，停止move */ },function(){ time=setInterval(move, 3000); /* 鼠标移出时，恢复move */ }); // 手动轮播——数字标控制 $(".num li").mouseover(function(){ $(this).addClass("current").siblings().removeClass("current"); /* 操作数字标变色 */ var index=$(this).index(); /* 获取当前li再ul中的索引 */ i=index; /* 手动轮播打断自动轮播时，给自动重设i */ $(".img li").eq(index).show().fadeIn(1000).siblings().fadeOut(1000); }); // 手动轮播——左右按钮控制 $(".right_btn").click(function(){ move() }); $(".left_btn").click(function(){ move() /*自己写往左的函数moveL 略*/ }) </script> </body> </html>
参考：
http://www.cnblogs.com/yuanchenqi/articles/5663118.html
浙公网安备 33010602011771号