jquery
一.寻找元素(选择器和筛选器)
a.选择器
1.基本选择器
|
1
|
$("*") $("#id") $(".class") $("element") $(".class,p,div")
|
2.层级选择器
|
1
|
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
|
3.基本筛选器
|
1
|
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
|
4.属性选择器
|
1
|
$('[id="div1"]') $('["alex="sb"][id]')
|
5.表单选择器
|
1
2
|
$("[type='text']")----->$(":text")
#注意只适用于input标签 : $("input:checked") |
<!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> 基本选择器 演示
基本选择器 演示
<!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> 属性选择器 演示
属性选择器 演示
<!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.过滤筛选器
|
1
|
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
|
2.查找筛选器
|
1
2
3
4
5
6
7
8
9
|
$("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()
|
<!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> 实例之左侧菜单 演示
实例之左侧菜单 演示
<!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="" 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> 正选 反选 取消
正选 反选 取消
<!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> 模态窗口
模态窗口
<!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> Tab 切换 演示
Tab 切换 演示
<!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> empty remove 演示
empty remove 演示
<!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> clone input标签 演示
clone input标签 演示
二.操作元素(属性，css，文档处理)
a.属性操作
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
#--------------------------属性$("").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")
|
<!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> attr 演示
attr 演示
<!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>
prop 演示
<!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> html text 演示
html text 演示
b.文档处理
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
//创建一个标签对象
$("<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]])
|
<!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> append appendTo 演示
append appendTo 演示
<!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> replaceWith 替换演示
replaceWith 替换演示
c. css操作
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
#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]) |
<!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> offset 演示
offset 演示
<!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> position 演示
position 演示
<!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.方式一
|
1
2
3
4
5
6
7
8
9
10
|
<script> arrs=[11,22,33];
arrs={"name":"egon","age":18}
$.each(arrs,function (i,j) {
console.log(i);
console.log(j);
})
</script>
|
b.方式二
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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>
|
四. 事件
|
1
2
3
4
5
|
# 事件绑定bindunbind |
<!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("")
// }) $("ul li").bind("click",function () { #绑定事件
alert(123)
}); $("ul li").unbind("click") #解除绑定 </script> </body>
</html> bind unbind 演示
bind unbind 演示
<!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> on 事件绑定 解除绑定 演示
on 事件绑定 解除绑定 演示
五.动画效果
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
hide() #显示
show() #隐藏
toggle() #切换
slideDown() #滑入
slideUp() #滑出
slideToggle() #切换
fadeIn() #淡入
fadeOut() #淡出
fadeToggle() #切换
fadeTo(1000,0.4) #透明度
|
<!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> 显示 隐藏 切换 演示
显示 隐藏 切换 演示
<!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> 滑入 滑出 演示
滑入 滑出 演示
<!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="width: 80px;height: 80px;background-color: blueviolet"></div> </body>
</html> 谈入 谈出 演示
谈入 谈出 演示
<!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> 回调函数
回调函数
六. 扩展方法 (插件机制)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<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>
|
<!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> 两种方式 演示
两种方式 演示
案例
<!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> 滚动条 返回顶部 scrollTop
滚动条 返回顶部 scrollTop
<!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>
轮播图
<!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(){
// 页面加载完成之后自动执行
$('#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> 面板拖动
面板拖动
<!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> 轮播图
轮播图