随笔 - 1 文章 - 81 评论 - 30
前端基础之jquery
知识预览
一 jQuery是什么？
［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
［3］ 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
二 什么是jQuery对象？
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
1 $("#test").html()
2
3 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
4
5 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
6
7 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
8
9 约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
10
11 var $variable = jQuery 对象
12 var variable = DOM 对象
13
14 $variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
jquery的基础语法：$(selector).action()
参考：http://jquery.cuishifeng.cn/
三 寻找元素(选择器和筛选器)
3.1 选择器
3.1.1 基本选择器
|
1 |
|
3.1.2 层级选择器
|
1 |
|
3.1.3 基本筛选器
|
1 |
|
3.1.4 属性选择器
|
1 |
|
3.1.5 表单选择器
|
1 |
|
3.1.6 表单属性选择器
:enabled
:disabled
:checked
:selected
1 <body>
2
3 <form>
4 <input type="checkbox" value="123" checked>
5 <input type="checkbox" value="456" checked>
6
7
8 <select>
9 <option value="1">Flowers</option>
10 <option value="2" selected="selected">Gardens</option>
11 <option value="3" selected="selected">Trees</option>
12 <option value="3" selected="selected">Trees</option>
13 </select>
14 </form>
15
16
17 <script src="jquery.min.js"></script>
18 <script>
19 // console.log($("input:checked").length); // 2
20
21 // console.log($("option:selected").length); // 只能默认选中一个,所以只能lenth:1
22
23 $("input:checked").each(function(){
24
25 console.log($(this).val())
26 })
27
28 </script>
29
30
31 </body>
3.2 筛选器
3.2.1 过滤筛选器
|
1 |
|
3.2.2 查找筛选器
1 查找子标签： $("div").children(".test") $("div").find(".test")
2
3 向下查找兄弟标签： $(".test").next() $(".test").nextAll()
4 $(".test").nextUntil()
5
6 向上查找兄弟标签： $("div").prev() $("div").prevAll()
7 $("div").prevUntil()
8 查找所有兄弟标签： $("div").siblings()
9
10 查找父标签： $(".test").parent() $(".test").parents()
11 $(".test").parentUntil()
四 操作元素(属性，css，文档处理)
4.1 事件
页面载入
ready(fn) // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){})
事件绑定
//语法: 标签对象.事件(函数)
eg: $("p").click(function(){})
事件委派：
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<hr>
<button id="add_li">Add_li</button>
<button id="off">off</button>
<script src="jquery.min.js"></script>
<script>
$("ul li").click(function(){
alert(123)
});
$("#add_li").click(function(){
var $ele=$("<li>");
$ele.text(Math.round(Math.random()*10));
$("ul").append($ele)
});
// $("ul").on("click","li",function(){
// alert(456)
// })
$("#off").click(function(){
$("ul li").off()
})
</script>
事件切换
hover事件：
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 .test{
12
13 width: 200px;
14 height: 200px;
15 background-color: wheat;
16
17 }
18 </style>
19 </head>
20 <body>
21
22
23 <div class="test"></div>
24 </body>
25 <script src="jquery.min.js"></script>
26 <script>
27 // function enter(){
28 // console.log("enter")
29 // }
30 // function out(){
31 // console.log("out")
32 // }
33 // $(".test").hover(enter,out)
34
35
36 $(".test").mouseenter(function(){
37 console.log("enter")
38 });
39
40 $(".test").mouseleave(function(){
41 console.log("leave")
42 });
43
44 </script>
45 </html>
4.2 属性操作
1 --------------------------CSS类
2 $("").addClass(class|fn)
3 $("").removeClass([class|fn])
4
5 --------------------------属性
6 $("").attr();
7 $("").removeAttr();
8 $("").prop();
9 $("").removeProp();
10
11 --------------------------HTML代码/文本/值
12 $("").html([val|fn])
13 $("").text([val|fn])
14 $("").val([val|fn|arr])
15
16 ---------------------------
17 $("#c1").css({"color":"red","fontSize":"35px"})
attr方法使用：
<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见
<script>
//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
//需要使用prop方法去操作才能获得正确的结果。
// $("#chk1").attr("checked")
// undefined
// $("#chk1").prop("checked")
// false
// ---------手动选中的时候attr()获得到没有意义的undefined-----------
// $("#chk1").attr("checked")
// undefined
// $("#chk1").prop("checked")
// true
console.log($("#chk1").prop("checked"));//false
console.log($("#chk2").prop("checked"));//true
console.log($("#chk1").attr("checked"));//undefined
console.log($("#chk2").attr("checked"));//checked
</script>
4.3 each循环
我们知道，
|
1 |
|
是将css操作加到所有的标签上，内部维持一个循环；但如果对于选中标签进行不同处理，这时就需要对所有标签数组进行循环遍历啦
jquery支持两种循环方式：
方式一
格式：$.each(obj,fn)
li=[10,20,30,40];
dic={name:"yuan",sex:"male"};
$.each(li,function(i,x){
console.log(i,x)
});
方式二
格式：$("").each(fn)
$("tr").each(function(){
console.log($(this).html())
})
其中,$(this)代指当前循环标签。
each扩展
1 /*
2 function f(){
3
4 for(var i=0;i<4;i++){
5
6 if (i==2){
7 return
8 }
9 console.log(i)
10 }
11
12 }
13 f(); // 这个例子大家应该不会有问题吧!!!
14 //-----------------------------------------------------------------------
15
16
17 li=[11,22,33,44];
18 $.each(li,function(i,v){
19
20 if (v==33){
21 return ; // ===试一试 return false会怎样?
22 }
23 console.log(v)
24 });
25
26 //------------------------------------------
27
28
29 // 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行
30
31 //本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了,
32 //希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步:
33 for(var i in obj){
34
35 ret=func(i,obj[i]) ;
36 if(ret==false){
37 return ;
38 }
39
40 }
41 // 这样就很灵活了:
42 // <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true
43 // <2>如果你不想return后下面循环函数继续执行,那么就直接写return false
44
45
46 // ---------------------------------------------------------------------
4.4 文档节点处理
1 //创建一个标签对象
2 $("<p>")
3
4
5 //内部插入
6
7 $("").append(content|fn) ----->$("p").append("<b>Hello</b>");
8 $("").appendTo(content) ----->$("p").appendTo("div");
9 $("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
10 $("").prependTo(content) ----->$("p").prependTo("#foo");
11
12 //外部插入
13
14 $("").after(content|fn) ----->$("p").after("<b>Hello</b>");
15 $("").before(content|fn) ----->$("p").before("<b>Hello</b>");
16 $("").insertAfter(content) ----->$("p").insertAfter("#foo");
17 $("").insertBefore(content) ----->$("p").insertBefore("#foo");
18
19 //替换
20 $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
21
22 //删除
23
24 $("").empty()
25 $("").remove([expr])
26
27 //复制
28
29 $("").clone([Even[,deepEven]])
4.5 动画效果
显示隐藏
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="jquery-2.1.4.min.js"></script>
7 <script>
8
9 $(document).ready(function() {
10 $("#hide").click(function () {
11 $("p").hide(1000);
12 });
13 $("#show").click(function () {
14 $("p").show(1000);
15 });
16
17 //用于切换被选元素的 hide() 与 show() 方法。
18 $("#toggle").click(function () {
19 $("p").toggle();
20 });
21 })
22
23 </script>
24 <link type="text/css" rel="stylesheet" href="style.css">
25 </head>
26 <body>
27
28
29 <p>hello</p>
30 <button id="hide">隐藏</button>
31 <button id="show">显示</button>
32 <button id="toggle">切换</button>
33
34 </body>
35 </html>
滑动
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="jquery-2.1.4.min.js"></script>
7 <script>
8 $(document).ready(function(){
9 $("#slideDown").click(function(){
10 $("#content").slideDown(1000);
11 });
12 $("#slideUp").click(function(){
13 $("#content").slideUp(1000);
14 });
15 $("#slideToggle").click(function(){
16 $("#content").slideToggle(1000);
17 })
18 });
19 </script>
20 <style>
21
22 #content{
23 text-align: center;
24 background-color: lightblue;
25 border:solid 1px red;
26 display: none;
27 padding: 50px;
28 }
29 </style>
30 </head>
31 <body>
32
33 <div id="slideDown">出现</div>
34 <div id="slideUp">隐藏</div>
35 <div id="slideToggle">toggle</div>
36
37 <div id="content">helloworld</div>
38
39 </body>
40 </html>
淡入淡出
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="jquery-2.1.4.min.js"></script>
7 <script>
8 $(document).ready(function(){
9 $("#in").click(function(){
10 $("#id1").fadeIn(1000);
11
12
13 });
14 $("#out").click(function(){
15 $("#id1").fadeOut(1000);
16
17 });
18 $("#toggle").click(function(){
19 $("#id1").fadeToggle(1000);
20
21
22 });
23 $("#fadeto").click(function(){
24 $("#id1").fadeTo(1000,0.4);
25
26 });
27 });
28
29
30
31 </script>
32
33 </head>
34 <body>
35 <button id="in">fadein</button>
36 <button id="out">fadeout</button>
37 <button id="toggle">fadetoggle</button>
38 <button id="fadeto">fadeto</button>
39
40 <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
41
42 </body>
43 </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>
4.6 css操作
css位置操作
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
示例1：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .test1{
8 width: 200px;
9 height: 200px;
10 background-color: wheat;
11 }
12 </style>
13 </head>
14 <body>
15
16
17 <h1>this is offset</h1>
18 <div class="test1"></div>
19 <p></p>
20 <button>change</button>
21 </body>
22 <script src="jquery-3.1.1.js"></script>
23 <script>
24 var $offset=$(".test1").offset();
25 var lefts=$offset.left;
26 var tops=$offset.top;
27
28 $("p").text("Top:"+tops+" Left:"+lefts);
29 $("button").click(function(){
30
31 $(".test1").offset({left:200,top:400})
32 })
33 </script>
34 </html>
示例2:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin: 0;
9 }
10 .box1{
11 width: 200px;
12 height: 200px;
13 background-color: rebeccapurple;
14 }
15 .box2{
16 width: 200px;
17 height: 200px;
18 background-color: darkcyan;
19 }
20 .parent_box{
21 position: relative;
22 }
23 </style>
24 </head>
25 <body>
26
27
28
29
30 <div class="box1"></div>
31 <div class="parent_box">
32 <div class="box2"></div>
33 </div>
34 <p></p>
35
36
37 <script src="jquery-3.1.1.js"></script>
38 <script>
39 var $position=$(".box2").position();
40 var $left=$position.left;
41 var $top=$position.top;
42
43 $("p").text("TOP:"+$top+"LEFT"+$left)
44 </script>
45 </body>
46 </html>
示例3:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 <style>
8 body{
9 margin: 0;
10 }
11 .returnTop{
12 height: 60px;
13 width: 100px;
14 background-color: peru;
15 position: fixed;
16 right: 0;
17 bottom: 0;
18 color: white;
19 line-height: 60px;
20 text-align: center;
21 }
22 .div1{
23 background-color: wheat;
24 font-size: 5px;
25 overflow: auto;
26 width: 500px;
27 height: 200px;
28 }
29 .div2{
30 background-color: darkgrey;
31 height: 2400px;
32 }
33
34
35 .hide{
36 display: none;
37 }
38 </style>
39 </head>
40 <body>
41 <div class="div1 div">
42 <h1>hello</h1>
43 <h1>hello</h1>
44 <h1>hello</h1>
45 <h1>hello</h1>
46 <h1>hello</h1>
47 <h1>hello</h1>
48 <h1>hello</h1>
49 <h1>hello</h1>
50 <h1>hello</h1>
51 <h1>hello</h1>
52 <h1>hello</h1>
53 <h1>hello</h1>
54 <h1>hello</h1>
55 <h1>hello</h1>
56 <h1>hello</h1>
57 <h1>hello</h1>
58 </div>
59 <div class="div2 div"></div>
60 <div class="returnTop hide">返回顶部</div>
61
62 <script src="jquery-3.1.1.js"></script>
63 <script>
64 $(window).scroll(function(){
65 var current=$(window).scrollTop();
66 console.log(current);
67 if (current>100){
68
69 $(".returnTop").removeClass("hide")
70 }
71 else {
72 $(".returnTop").addClass("hide")
73 }
74 });
75
76
77 $(".returnTop").click(function(){
78 $(window).scrollTop(0)
79 });
80
81
82 </script>
83 </body>
84 </html>
尺寸操作
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin: 0;
9 }
10 .box1{
11 width: 200px;
12 height: 200px;
13 background-color: wheat;
14 padding: 50px;
15 border: 50px solid rebeccapurple;
16 margin: 50px;
17 }
18
19 </style>
20 </head>
21 <body>
22
23
24
25
26 <div class="box1">
27 DIVDIDVIDIV
28 </div>
29
30
31 <p></p>
32
33 <script src="jquery-3.1.1.js"></script>
34 <script>
35 var $height=$(".box1").height();
36 var $innerHeight=$(".box1").innerHeight();
37 var $outerHeight=$(".box1").outerHeight();
38 var $margin=$(".box1").outerHeight(true);
39
40 $("p").text($height+"---"+$innerHeight+"-----"+$outerHeight+"-------"+$margin)
41 </script>
42 </body>
43 </html>
扩展方法 (插件机制)
jQuery.extend(object)
扩展jQuery对象本身。
用来在jQuery命名空间上增加新函数。
在jQuery命名空间上增加两个函数:
1 <script>
2 jQuery.extend({
3 min: function(a, b) { return a < b ? a : b; },
4 max: function(a, b) { return a > b ? a : b; }
5 });
6
7
8 jQuery.min(2,3); // => 2
9 jQuery.max(4,5); // => 5
10 </script>
jQuery.fn.extend(object)
扩展 jQuery 元素集来提供新的方法（通常用来制作插件）
增加两个插件方法：
<body>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<script src="jquery.min.js"></script>
<script>
jQuery.fn.extend({
check: function() {
$(this).attr("checked",true);
},
uncheck: function() {
$(this).attr("checked",false);
}
});
$(":checkbox:gt(0)").check()
</script>
</body>
实例练习
左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left_menu</title>
<style>
.menu{
height: 500px;
width: 20%;
background-color: gainsboro;
text-align: center;
float: left;
}
.content{
height: 500px;
width: 80%;
background-color: darkgray;
float: left;
}
.title{
line-height: 50px;
background-color: wheat;
color: rebeccapurple;}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title">菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="con hide">
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="con hide">
<div>333</div>
<div>333</div>
<div>333</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
<script src="jquery.min.js"></script>
<script>
$(".item .title").mouseover(function () {
$(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");
// $(this).next().removeClass("hide");
// $(this).parent().siblings().children(".con").addClass("hide");
})
</script>
</body>
</html>
Tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
*{
margin: 0;
padding: 0;
}
.tab_outer{
margin: 20px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
/*border: 1px solid red;*/
line-height: 40px;
text-align: center;
}
.menu li{
display: inline-block;
margin-left: 14px;
padding:5px 20px;
}
.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: #2868c8;
color: white;
border-top: solid 2px rebeccapurple;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li relation="c1" class="current">菜单一</li>
<li relation="c2" >菜单二</li>
<li relation="c3">菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
</body>
<script src="jquery.min.js"></script>
<script>
$(".menu li").click(function(){
var index=$(this).attr("relation");
$("#"+index).removeClass("hide").siblings().addClass("hide");
$(this).addClass("current").siblings().removeClass("current");
});
</script>
</html>
模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
.back{
background-color: wheat;
height: 2000px;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: darkgray;
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: white;
}
</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.min.js"></script>
<script>
function action1(self){
$(self).parent().siblings().removeClass("hide");
}
function action2(self){
//$(self).parent().parent().children(".models,.shade").addClass("hide")
$(self).parent().addClass("hide").prev().addClass("hide")
}
</script>
</body>
</html>
复制样式条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="item">
<input type="button" value="+">
<input type="text">
</div>
</div>
<script src=jquery.min.js></script>
<script>
function add(self){
// 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
var $clone_obj=$(self).parent().clone();
$clone_obj.children(":button").val("-").attr("onclick","removed(this)");
$(self).parent().parent().append($clone_obj);
}
function removed(self){
$(self).parent().remove()
}
/*
$("[value=‘+‘]").click(function(){
var $clone_obj=$(this).parent().clone();
$clone_obj.children(":button").val("-").attr("class","mark");
$(this).parent().parent().append($clone_obj);
});
$(".outer").on("click",".item .mark",function(){
console.log($(this)); // $(this): .item .mark标签
$(this).parent().remove()
})
*/
</script>
</body>
</html>
注册验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form class="Form" id="form">
<p><input class="v1" type="text" name="username" mark="用户名"></p>
<p><input class="v1" type="text" name="email" mark="邮箱"></p>
<p><input type="submit" value="submit"></p>
</form>
<script src="jquery.min.js"></script>
<script>
$("#form :submit").click(function(){
flag=true;
$("#form .v1").each(function(){
$(this).next("span").remove();// 防止对此点击按钮产生多个span标签
var value=$(this).val();
if (value.trim().length==0){
var mark=$(this).attr("mark");
var ele=document.createElement("span");
ele.innerHTML=mark+"不能为空!";
$(this).after(ele);
$(ele).prop("class","error");// DOM对象转换为jquery对象
flag=false;
return false ; //-------->引出$.each的return false注意点
}
});
return flag
});
</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.min.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).on(‘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).off(‘mousemove‘);
});
})
</script>
</body>
</html>
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.1.1.js"></script>
<title>Title</title>
<style>
.outer{
width: 790px;
height: 340px;
margin: 80px auto;
position: relative;
}
.img li{
position: absolute;
list-style: none;
top: 0;
left: 0;
display: none;
}
.num{
position: absolute;
bottom: 18px;
left: 270px;
list-style: none;
}
.num li{
display: inline-block;
width: 18px;
height: 18px;
background-color: white;
border-radius: 50%;
text-align: center;
line-height: 18px;
margin-left: 4px;
}
.btn{
position: absolute;
top:50%;
width: 30px;
height: 60px;
background-color: lightgrey;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
opacity: 0.7;
margin-top: -30px;
display: none;
}
.left{
left: 0;
}
.right{
right: 0;
}
.outer:hover .btn{
display: block;
}
.num .active{
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li style="display: block"><a href=""><img src="img/1.jpg" ></a></li>
<li><a href=""><img src="img/2.jpg" ></a></li>
<li><a href=""><img src="img/3.jpg" ></a></li>
<li><a href=""><img src="img/4.jpg" ></a></li>
<li><a href=""><img src="img/5.jpg" ></a></li>
<li><a href=""><img src="img/6.jpg" ></a></li>
</ul>
<ul class="num">
<!--<li class="active"></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
</ul>
<div class="left btn"> < </div>
<div class="right btn"> > </div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
var i=0;
// 通过jquery自动创建按钮标签
var img_num=$(".img li").length;
for(var j=0;j<img_num;j++){
$(".num").append("<li></li>")
}
$(".num li").eq(0).addClass("active");
// 手动轮播
$(".num li").mouseover(function () {
i=$(this).index();
$(this).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200)
});
// 自动轮播
var c=setInterval(GO_R,1500);
function GO_R() {
if(i==img_num-1){
i=-1
}
i++;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)
}
function GO_L() {
if(i==0){
i=img_num
}
i--;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); // fadeIn,fadeOut单独另开启的线程
}
$(".outer").hover(function () {
clearInterval(c)
},function () {
c=setInterval(GO_R,1500)
});
// button 加定播
$(".right").click(GO_R);
$(".left").click(GO_L)
</script>
</body>
</html>
时间： 2024-10-12 23:36:31