一.寻找元素(选择器和筛选器)
a.选择器
1.基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
2.层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
3.基本筛选器
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
4.属性选择器
$('[id="div1"]') $('["alex="sb"][id]')
5.表单选择器
$("[type='text']")----->$(":text") #注意只适用于input标签 : $("input:checked")
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script src="jquery-3.2.1.js"></script>
<script>
$("li").css("color","red"); #数组
$("li:first").css("color","red"); #第一个
$("li:last").css("color","red"); #第二个
$("li:eq(2)").css("color","red"); #查找索引
$("li:even").css("color","red"); #基数行
$("li:odd").css("color","red"); #偶数行
$("li:gt(1)").css("color","red"); #大于某个数
$("li:lt(2)").css("color","red"); #小于某个数
</script>
</body>
</html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p alex="sb">1111</p>
<p alex="sb">1111</p>
<p alex="sb" id="p4">1111</p>
<script src="jquery-3.2.1.js"></script>
<script>
$("[alex]").css("color","red") #都变红
$("[alex='sb']").css("color","red") #都变红
$("[alex='sb'][id='p4']").css("color","red") #最后一个变红
</script>
</body>
</html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src="jquery-3.2.1.js"></script>
<script>
$("[type='text']").css("width","300px");
$(":text").css("width","300px"); #简写
</script>
</body>
</html>
b.筛选器
1.过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
2.查找筛选器
$("div").children(".test") $("div").find(".test") $(".test").next() $(".test").nextAll() $(".test").nextUntil() $("div").prev() $("div").prevAll() $("div").prevUntil() $(".test").parent() $(".test").parents() $(".test").parentUntil() $("div").siblings()
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>left_menu</title> <style> .menu{ height: 500px; width: 30%; background-color: gainsboro; float: left; } .content{ height: 500px; width: 70%; background-color: rebeccapurple; float: left; } .title{ line-height: 50px; background-color: #425a66; color: forestgreen; } .hide{ display: none; } </style> </head> <body> <div class="outer"> <div class="menu"> <div class="item"> <div class="title" onclick=show(this);>菜单一</div> <div class="con"> <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>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>111</div> <div>111</div> <div>111</div> </div> </div> </div> <div class="content"></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>
![](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> <table border="1" id="Table"> <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.2.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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back{ background-color: rebeccapurple; height: 2000px; } .shade{ position: fixed; top: 0; bottom: 0; left:0; right: 0; background-color: coral; opacity: 0.4; } .hide{ display: none; } .models{ position: fixed; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; height: 200px; width: 200px; background-color: gold; } </style> </head> <body> <div class="back"> <input id="ID1" type="button" value="click" onclick="action1(this)"> </div> <div class="shade hide"></div> <div class="models hide"> <input id="ID2" type="button" value="cancel" onclick="action2(this)"> </div> <script src="jquery-3.2.1.js"></script> <script> function action1(self){ $(self).parent().siblings().removeClass("hide"); } function action2(self){ $(self).parent().addClass("hide").prev().addClass("hide") } </script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .outer{ width: 80%; margin: 20px auto; } .nav li{ list-style: none; float: left; width: 33.2%; height: 40px; background-color: wheat; text-align:center; line-height: 40px; border-right: solid 1px green; } .nav:after{ content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; font-size:0; } .content{ width: 100%; height: 400px; background-color: yellowgreen; } ul .active{ background-color: #204982; } .hide{ display: none; } </style> </head> <body> <div class="outer"> <ul class="nav"> <li xxx="con1" class="active" onclick="tab(this)">菜单一</li> <li xxx="con2" onclick="tab(this)">菜单二</li> <li xxx="con3"onclick="tab(this)">菜单三</li> </ul> <div class="content"> <div class="con1">111</div> <div class="con2 hide">222</div> <div class="con3 hide">333</div> </div> </div> <script src="jquery-3.2.1.js"></script> <script> function tab(self) { var index=$(self).attr("xxx"); $("."+index).removeClass("hide").siblings().addClass("hide") $(self).addClass("active").siblings().removeClass("active") } </script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="c1"> <p>ppp</p> </div> <button>button</button> <script src="jquery-3.2.1.js"></script> <script> $("button").click(function () { $("p").empty() }) </script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="outer"> <div class="iterm"> <button onclick="add(this)">+</button> <input type="text"> </div> </div> <script src="jquery-3.2.1.js"></script> <script> function add(self) { var $clone_obj=$(self).parent().clone(); $clone_obj.children("button").text("-"); $clone_obj.children("button").attr("onclick","remove_obj(this)"); $(".outer").append($clone_obj); } function remove_obj(self) { $(self).parent().remove() } </script> </body> </html>
二.操作元素(属性,css,文档处理)
a.属性操作
#--------------------------属性 $("").attr(); #新建属性 查看属性 修改属性 自己定义的属性 $("").removeAttr(); $("").prop(); #固有的属性 $("").removeProp(); #--------------------------CSS类 $("").addClass(class|fn) $("").removeClass([class|fn]) #--------------------------HTML代码/文本/值 $("").html([val|fn]) $("").text([val|fn]) $("").val([val|fn|arr]) #取固有属性,input标签 #--------------------------- $("").css("color","red")
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="div1" con="c1"></div>
<script src="jquery-3.2.1.js"></script>
<script>
console.log($("div").attr("con")) #查看属性的值
$("div").attr("con","c2") #修改属性
$("div").attr("alex","c2") #新建属性
</script>
</body>
</html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="checkbox" checked="checked">是否可见
<input type="checkbox" >是否可见
<script src="jquery-3.2.1.js"></script>
<script>
console.log($(":checkbox:first").prop("checked"))
console.log($(":checkbox:last").prop("checked"))
</script>
</body>
</html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="id1">
<p>1111</p>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
console.log($("#id1").html()); #查找
console.log($("#id1").text()); #查找
$("#id1").html("<h2>hello word</h2>") #赋值
</script>
</body>
</html>
b.文档处理
//创建一个标签对象 $("<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"> <title></title> </head> <body> <div class="c1"> <p>ppp</p> </div> <button>add</button> <script src="jquery-3.2.1.js"></script> <script> $("button").click(function () { var $ele=$("<h1></h1>"); $ele.html("hello word"); $ele.css("color","red"); // $(".c1").append($ele); #父亲增加儿子 $ele.appendTo(".c1") ; #儿子增加父亲 }) </script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="c1"> <p>ppp</p> </div> <button>add</button> <script src="jquery-3.2.1.js"></script> <script> $("button").click(function () { var $ele=$("<h1></h1>"); $ele.html("hello word"); $ele.css("color","red"); $("p").replaceWith($ele); }) </script> </body> </html>
c. css操作
#CSS $("").css(name|pro|[,val|fn]) # 位置 $("").offset([coordinates]) #相对于视口的偏移量 $("").position() #相对于已经定位的父标签的偏移量 $("").scrollTop([val]) $("").scrollLeft([val]) # 尺寸 $("").height([val|fn]) #高 $("").width([val|fn]) $("").innerHeight() #加上内边距高 $("").innerWidth() $("").outerHeight([soptions]) #内容+内边距+boder +True参数,就加上了margin $("").outerWidth([options])
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .div1,.div2{ width: 200px; height: 200px; } .div1{ background-color: #84a42b; } .div2{ background-color: red; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> <script src="jquery-3.2.1.js"></script> <script> console.log($(".div2").offset().top) console.log($(".div2").offset().left) </script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .div1,.div2{ width: 200px; height: 200px; } .div1{ background-color: #84a42b; } .div2{ background-color: red; } /*.outer{*/ /*position: relative;*/ /*}*/ </style> </head> <body> <div class="div1"></div> <div class="outer"> <div class="div2"></div> </div> <script src="jquery-3.2.1.js"></script> <script> console.log($(".div1").position().top); console.log($(".div1").position().left); console.log($(".div2").position().top); console.log($(".div2").position().left); </script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .div1,.div2{ width: 200px; height: 100px; } .div1{ background-color: #84a42b; border: 3px solid blue; padding: 20px; margin: 1px; } .div2{ background-color: red; } </style> </head> <body> <div class="div1"></div> <div class="outer"> <div class="div2"></div> </div> <script src="jquery-3.2.1.js"></script> <script> console.log($(".div1").height()); console.log($(".div1").innerHeight()); console.log($(".div1").outerHeight(true)); </script> </body> </html>
三. 循环
a.方式一
<script> arrs=[11,22,33]; arrs={"name":"egon","age":18} $.each(arrs,function (i,j) { console.log(i); console.log(j); }) </script>
b.方式二
<p>111</p> <p>222</p> <p>333</p> <script src="jquery-3.2.1.js"></script> <script> $("p").each(function () { $(this).html("hello") }) </script>
四. 事件
# 事件绑定 bind unbind
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .div1,.div2{ width: 100%; height: 800px; } .div1{ background-color: #84a42b; } .div2{ background-color: red; } .returnTop{ position: fixed; right: 20px; bottom: 20px; width: 90px; height: 50px; background-color: cyan; color: white; text-align: center; line-height: 50px; } .returnTop{ display: none; } </style> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> <li>555</li> </ul> <buton>add</buton> <script src="jquery-3.2.1.js"></script> <script> // $("ul li").click(function () { // alert("123") // }) $("ul li").bind("click",function () { #绑定事件 alert(123) }); $("ul li").unbind("click") #解除绑定 </script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul> <button>add</button> <button class="off_p">off</button> <script src="jquery-3.2.1.js"></script> <script> $(".off_p").click(function(){ $("ul").off(); // 解除所有事件 }); $("button:first").click(function(){ $("ul").append("<li>222</li>")}); $("ul").on("click","li",function(){ alert(100) }) </script> </body> </html>
五.动画效果
hide() #显示 show() #隐藏 toggle() #切换 slideDown() #滑入 slideUp() #滑出 slideToggle() #切换 fadeIn() #淡入 fadeOut() #淡出 fadeToggle() #切换 fadeTo(1000,0.4) #透明度
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>hello</div> <button onclick="f1()">显示</button> <button onclick="f2()">隐藏</button> <button onclick="f3()">切换</button> <script src="jquery-3.2.1.js"></script> <script> function f1() { $("div").show(1000) } function f2() { $("div").hide(1000) } function f3() { $("div").toggle(1000) } </script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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(){ $("#slideDown").click(function(){ $("#content").slideDown(1000); }); $("#slideUp").click(function(){ $("#content").slideUp(1000); }); $("#slideToggle").click(function(){ $("#content").slideToggle(1000); }) }); </script> <style> #content{ text-align: center; background-color: darkgrey; border: solid 1px blueviolet; padding: 50px; } </style> </head> <body> <div id="slideDown">出现</div> <div id="slideUp">隐藏</div> <div id="slideToggle">toggle</div> <div id="content">hello word</div> <script src="jquery-3.2.1.js"></script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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(2000); }); $("#out").click(function(){ $("#id1").fadeOut(2000); }); $("#toggle").click(function(){ $("#id1").fadeToggle(2000); }); $("#fadeto").click(function(){ $("#id1").fadeTo(1000,0.4); }); }); </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=" 80px;height: 80px;background-color: blueviolet"></div> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-2.1.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()) }) }) </script> </body> </html>
六. 扩展方法 (插件机制)
<script> $.extend(object) //为JQuery 添加一个静态方法。 $.fn.extend(object) //为JQuery实例添加一个方法。 jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); console.log($.min(3,4)); //----------------------------------------------------------------------- $.fn.extend({ "print":function(){ for (var i=0;i<this.length;i++){ console.log($(this)[i].innerHTML) } } }); $("p").print(); </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>111</p> <p>222</p> <p>333</p> <script src="jquery-3.2.1.js"></script> <script> 方式一: $.extend({ Myprint:function () { console.log("hello word") } }); $.Myprint() 方式二: $.fn.extend({ GetText: function () { for (var i = 0; i < this.length; i++) { console.log($(this).text()); } } }); $("p").GetText(); </script> </body> </html>
案例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .div1,.div2{ width: 100%; height: 800px; } .div1{ background-color: #84a42b; } .div2{ background-color: red; } .returnTop{ position: fixed; right: 20px; bottom: 20px; width: 90px; height: 50px; background-color: cyan; color: white; text-align: center; line-height: 50px; } .returnTop{ display: none; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="returnTop">返回顶部</div> <script src="jquery-3.2.1.js"></script> <script> $(".returnTop").click(function () { $(window).scrollTop(0); }); window.onscroll=function () { if ($(window).scrollTop()>200){ $(".returnTop").show(); } else{ $(".returnTop").hide(); } } </script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .outer{ width: 790px; height: 340px; margin: 20px auto; border: 1px darkgreen solid; position: relative; } ul.img{ list-style: none; } ul.img li{ position: absolute; top:0; left: 0; display: none; } .icon{ position: absolute; bottom: 20px;; left: 220px;; list-style: none; } .icon li{ display: inline-block; width: 30px; height: 30px; background-color: gray; text-align: center; line-height: 30px; color: white; border-radius: 100%; margin-left: 14px; } .btn{ position: absolute; top: 50%; width: 60px; height: 80px; background-color: grey; font-size: 40px; text-align: center; line-height: 80px; opacity: 0.7; margin-top: -40px; color: white; } .left{ left: 0; } .right{ right: 0; } .icon .active{ background-color: red; } </style> </head> <body> <div class="outer"> <ul class="img"> <li style="display: block" class="item"><a href="#"><img src="img/1.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/2.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/3.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/4.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/5.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/6.jpg" alt=""></a></li> </ul> <ul class="icon"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <div class="left btn"> < </div> <div class="right btn"> > </div> </div> <script src="jquery-3.2.1.js"></script> <script> var i=0; // 自动轮播: function move_right(){ if(i==5){ i=-1 } i++; // i=2 console.log(i); $(".icon li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).fadeIn(200).siblings().fadeOut(200); } function move_left(){ if(i==0){ i=6 } i--; console.log(i); $(".icon li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).fadeIn(800).siblings().fadeOut(800); } var ID=setInterval(move_right,1000); // 手动轮播 $(".outer").hover(function(){ clearInterval(ID) },function(){ ID=setInterval(move_right,1000) }); $(".icon li").mouseover(function(){ i=$(this).index(); $(".icon li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).fadeIn(200).siblings().fadeOut(200); }); // click事件 $(".right").click(move_right); $(".left").click(move_left); </script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border: 1px solid #ddd; 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(){ // 页面加载完成之后自动执行 $('#title').mouseover(function(){ $(this).css('cursor','move'); }).mousedown(function(e){ //console.log($(this).offset()); 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){ 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(){ $(this).unbind('mousemove'); }); }) </script> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .outer{ width: 790px; height: 340px; margin: 20px auto; border: 1px darkgreen solid; position: relative; } ul.img{ list-style: none; } ul.img li{ position: absolute; top: 0; left: 0; display: none; } .icon{ position: absolute; list-style: none; bottom: 20px; left: 220px; /*display: none;*/ /*background-color: rebeccapurple;*/ } .icon li{ display: inline-block; width: 30px; height: 30px; background-color: gray; text-align: center; line-height: 30px; color: white; border-radius:100%; margin-left: 14px; } .btn{ position: absolute; top: 50%; width: 60px; height: 80px; background-color: #84a42b; font-size: 40px; text-align: center; line-height: 80px; opacity: 0.7; margin-top: -40px; color: white; } .show_hide{ display: none; } .left{ left:0; } .right{ right: 0; } .icon .active{ background-color: red; } </style> </head> <body> <div class="outer"> <ul class="img"> <li style="display: block" class="item"><a href="#"><img src="img/1.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/2.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/3.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/4.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/5.jpg" alt=""></a></li> <li class="item"><a href="#"><img src="img/6.jpg" alt=""></a></li> </ul> <ul class="icon"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <div class="show_hide"> <div class="left btn"> < </div> <div class="right btn"> > </div> </div> </div> <script src="jquery-3.2.1.js"></script> <script> var i=0; function move_right() { if (i==5){ i = -1; } i++; $(".icon li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).fadeIn(200).siblings().fadeOut(200); } function move_left(){ if(i==0){ i=6 } i--; console.log(i); $(".icon li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).fadeIn(800).siblings().fadeOut(800); } var ID=setInterval(move_right,1000); $(".outer").hover(function () { $(".show_hide").show(); clearInterval(ID) },function () { $(".show_hide").hide(); ID=setInterval(move_right,1000) }); $(".icon li").mousemove(function () { i=$(this).index(); $(".icon li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).fadeIn(200).siblings().fadeOut(200); }) $(".right").click(move_right); $(".left").click(move_left); </script> </body> </html>