python jquery
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> 轮播图
轮播图
python jquery的更多相关文章
- python: jquery实现全选 反选 取消
引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- python jquery初识
jQuery的介绍 jQuery是一个快速,小巧,功能丰富的JavaScript库.它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历和操作, 事件处理动画和Ajax更加简单.通过多功能 ...
- python + Jquery，抓取西东网上的Java教程资源网址
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2018-06-15 14:01:45 # @Author : Chenjun (320 ...
- Python Jquery学习
jquery调用方法: $(css的选择器).操作函数 语法格式: 操作函数: html 修改内容 点击button键后,jquery就会变为bootstrap 当然里面也可以进行判断,实现 ...
- python jQuery筛选器
筛选器:$(this).next() 下一个 $(this).prev 上一个 $(this).parent() 父 $(this).children() 孩 $(th ...
- python : jquery实现左侧菜单
左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
- jQuery之克隆事件--clone()与clone(true)区别
clone()与clone(true)同为克隆 clone()表示复制标签本身, clone(true)会将标签绑定的事件一起复制 来看案例: <!DOCTYPE html> <ht ...
- Python 学习 第十篇 CMDB用户权限管理
Python 学习 第十篇 CMDB用户权限管理 2016-10-10 16:29:17 标签: python 版权声明:原创作品,谢绝转载!否则将追究法律责任. 不管是什么系统,用户权限都是至关重要 ...
- python学习目录(转载)
python基础篇 python 基础知识 python 初始python python 字符编码 python 类型及变量 python 字符串详解 python 列表详解 ...
随机推荐
- 特殊权限chattr的用法
1,只能对文件进行追加操作: [root@localhost tmp]# cat yum.log 22222222222222[root@localhost tmp]# chattr +a yum.l ...
- GPS服务端（上）-Socket服务端(golang)
从第一次写GPS的服务端到现在,已经过去了八年时光.一直是用.net修修改改,从自己写的socket服务,到suppersocket,都是勉强在坚持着,没有真正的稳定过. 最近一段时间,服务端又出了两 ...
- Android Studio设置字体和主题
步骤:File >> settings >> Appearance & Behavior >> Appearance >> ...
- 深入解析C语言数组和指针
概述 指针是C语言的重点,同时也是让初学者认为最难理解的部分.有人说它是C语言的灵魂,只有深入理解指针才能说理解了C语言.暂且撇开这些观点不谈.这章是我在阅读<C和指针>这本书的读书笔记. ...
- Lucene教程 -------（一、初始Lucene）
一.lucene的介绍 lucene是一个全文检索的框架,apache组织提供了一个用java实现的全文检索的开源项目.功能非常的强大,api非常简单,并且有了全文检索的功能支持可以非常方便的实现根据 ...
- 修改GeoJson的网址
http://geojson.io 可以打开自己的json 然后修改
- SUSE 安装 iServer、iDesktop启动异常问题
前言: SUSE作为一款经典的linux发行版本,在很多企业用户中都有使用. 本文记录的是在SUSE11 SP3系统中安装iServer.iDesktop出现异常的问题. 环境: 系统:SUSE 11 ...
- 20155227 实现mypwd
20155227 实现mypwd 1 学习pwd命令 2 研究pwd实现需要的系统调用(man -k; grep),写出伪代码 3 实现mypwd 4 测试mypwd 课堂学习笔记 实现mypwd 在 ...
- PTA題目的處理（三）
题目7-1 高速公路超速處罰 1.實驗代碼 #include <stdio.h> //#include <stdlib.h> int main() { int csp,lsp; ...
- codevs 3981 动态最大子段和
3981 动态最大子段和 http://codevs.cn/problem/3981/ 题目等级 : 钻石 Diamond 题目描述 Description 题目还是简单一点好... 有n个 ...