1、jQuery 简介
1.1 jQuery
--->jQuery是一个优秀的JavaScript框架，其宗旨是——WRITE LESS,DO MORE,写更少的代 码,做更多的事情。
--->jQuery是一个快速的，简洁的JavaScript库使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
--->jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
--->jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
1.2 jQuery 对象
- jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
- jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
比如：
$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
var variable = DOM 对象
基本语法：$(selector).action()
2、寻找元素（选择器和筛选器）
2.1 选择器
2.1.1 基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div")
2.1.2层级选择器 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
2.1.3 基本筛选器 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
2.1.4 属性选择器 $('[id="div1"]') $('["alex="sb"][id]')
2.1.5 表单选择器 $("[type='text']")----->$(":text") 注意只适用于input标签
$("input:checked")
2.2 筛选器
2.2.1 过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
2.2.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()
实例 左侧菜单
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>left_menu</title>
6
7 <script src="js/jquery-2.2.3.js"></script>
8 <script>
9 function show(self){
10 // console.log($(self).text())
11 $(self).next().removeClass("hide")
12 $(self).parent().siblings().children(".con").addClass("hide")
13
14 }
15 </script>
16 <style>
17 .menu{
18 height: 500px;
19 30%;
20 background-color: gainsboro;
21 float: left;
22 }
23 .content{
24 height: 500px;
25 70%;
26 background-color: rebeccapurple;
27 float: left;
28 }
29 .title{
30 line-height: 50px;
31 background-color: #425a66;
32 color: forestgreen;}
33
34
35 .hide{
36 display: none;
37 }
38
39
40 </style>
41 </head>
42 <body>
43
44 <div class="outer">
45 <div class="menu">
46 <div class="item">
47 <div class="title" onclick="show(this);">菜单一</div>
48 <div class="con">
49 <div>111</div>
50 <div>111</div>
51 <div>111</div>
52 </div>
53 </div>
54 <div class="item">
55 <div class="title" onclick="show(this);">菜单二</div>
56 <div class="con hide">
57 <div>111</div>
58 <div>111</div>
59 <div>111</div>
60 </div>
61 </div>
62 <div class="item">
63 <div class="title" onclick="show(this);">菜单三</div>
64 <div class="con hide">
65 <div>111</div>
66 <div>111</div>
67 <div>111</div>
68 </div>
69 </div>
70
71 </div>
72 <div class="content"></div>
73
74 </div>
75
76 </body>
77 </html>
实例 tab切换
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>tab</title>
6 <script src="js/jquery-2.2.3.js"></script>
7 <script>
8 function tab(self){
9 var index=$(self).attr("xxx")
10 $("#"+index).removeClass("hide").siblings().addClass("hide")
11 $(self).addClass("current").siblings().removeClass("current")
12
13 }
14 </script>
15 <style>
16 *{
17 margin: 0px;
18 padding: 0px;
19 }
20 .tab_outer{
21 margin: 0px auto;
22 60%;
23 }
24 .menu{
25 background-color: #cccccc;
26 /*border: 1px solid red;*/
27 line-height: 40px;
28 }
29 .menu li{
30 display: inline-block;
31 }
32 .menu a{
33 border-right: 1px solid red;
34 padding: 11px;
35 }
36 .content{
37 background-color: tan;
38 border: 1px solid green;
39 height: 300px;
40 }
41 .hide{
42 display: none;
43 }
44
45 .current{
46 background-color: darkgray;
47 color: yellow;
48 border-top: solid 2px rebeccapurple;
49 }
50 </style>
51 </head>
52 <body>
53 <div class="tab_outer">
54 <ul class="menu">
55 <li xxx="c1" class="current" onclick="tab(this);">菜单一</li>
56 <li xxx="c2" onclick="tab(this);">菜单二</li>
57 <li xxx="c3" onclick="tab(this);">菜单三</li>
58 </ul>
59 <div class="content">
60 <div id="c1">内容一</div>
61 <div id="c2" class="hide">内容二</div>
62 <div id="c3" class="hide">内容三</div>
63 </div>
64
65 </div>
66 </body>
67 </html>
3、操作元素（属性CSS和文档处理）
3.1 属性操作
$("p").text() $("p").html() $(":checkbox").val()
$(".test").attr("alex") $(".test").attr("alex","sb")
$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")
$(".test").prop("checked",true)
$(".test").addClass("hide")
实例 编辑框正反选
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="js/jquery-2.2.3.js"></script>
7 <script>
8
9 function selectall(){
10
11 $("table :checkbox").prop("checked",true)
12 }
13 function che(){
14
15 $("table :checkbox").prop("checked",false)
16 }
17
18 function reverse(){
19
20
21 // var idlist=$("table :checkbox")
22 // for(var i=0;i<idlist.length;i++){
23 // var element=idlist[i];
24 //
25 // var ischecked=$(element).prop("checked")
26 // if (ischecked){
27 // $(element).prop("checked",false)
28 // }
29 // else {
30 // $(element).prop("checked",true)
31 // }
32 //
33 // }
34
35
36
37 $("table :checkbox").each(function(){
38 if ($(this).prop("checked")){
39 $(this).prop("checked",false)
40 }
41 else {
42 $(this).prop("checked",true)
43 }
44
45 });
46
47
48
49 // li=[10,20,30,40]
50 //// dic={name:"yuan",sex:"male"}
51 // $.each(li,function(i,x){
52 // console.log(i,x)
53 // })
54
55 }
56
57 </script>
58 </head>
59 <body>
60
61 <button onclick="selectall();">全选</button>
62 <button onclick="che();">取消</button>
63 <button onclick="reverse();">反选</button>
64
65 <table border="1">
66 <tr>
67 <td><input type="checkbox"></td>
68 <td>111</td>
69 </tr>
70 <tr>
71 <td><input type="checkbox"></td>
72 <td>222</td>
73 </tr>
74 <tr>
75 <td><input type="checkbox"></td>
76 <td>333</td>
77 </tr>
78 <tr>
79 <td><input type="checkbox"></td>
80 <td>444</td>
81 </tr>
82 </table>
83
84
85
86 </body>
87 </html>
实例 模态对话框
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>批量编辑</title>
6 <!--<link rel="stylesheet" href="css/mycss.css" />-->
7 <style>
8 *{
9 margin: 0;
10 padding: 0;
11 }
12 body {
13 font-family: 'Open Sans', sans-serif;
14 font-weight: 300;
15 line-height: 1.42em;
16 color:rebeccapurple;
17 background-color:goldenrod;
18 }
19
20 h1 {
21 font-size:3em;
22 font-weight: 300;
23 line-height:1em;
24 text-align: center;
25 color: #4DC3FA;
26 }
27 .blue {
28 color: #185875;
29 }
30 .yellow {
31 color: #FFF842;
32 }
33
34 /*!*弹出层罩子*!*/
35 #full {
36 background-color:gray;
37 left:0;
38 opacity:0.7;
39 position:absolute;
40 top:0;
41 filter:alpha(opacity=30);
42 }
43
44 .modified {
45 background-color: #1F2739;
46 border:3px solid whitesmoke;
47 height:400px;
48 left:50%;
49 margin:-200px 0 0 -200px;
50 padding:1px;
51 position:fixed;
52 /*position:absolute;*/
53 top:50%;
54 400px;
55 display:none;
56 }
57 li {
58 list-style: none;
59 margin: 20px 0 0 50px;
60 color: #FB667A;
61 }
62 input[type="text"] {
63 padding: 10px;
64 border: solid 1px #dcdcdc;
65 /*transition: box-shadow 3s, border 3s;*/
66
67 }
68
69 .iputbutton {
70 margin: 60px 0 0 50px;
71 color: whitesmoke;
72 background-color: #FB667A;
73 height: 30px;
74 100px;
75 border: 1px dashed;
76
77 }
78
79
80
81
82 .container th h1 {
83 font-weight: bold;
84 font-size: 1em;
85 text-align: left;
86 color: #185875;
87 }
88
89 .container td {
90 font-weight: normal;
91 font-size: 1em;
92 }
93
94 .container {
95
96 80%;
97 margin: 0 auto;
98
99 }
100
101 .container td, .container th {
102 padding-bottom: 2%;
103 padding-top: 2%;
104 padding-left:2%;
105 }
106
107 /*单数行*/
108 .container tr:first-child {
109 background-color: red;
110 }
111
112 /*偶数行*/
113 .container tr:not(first-child){
114 background-color: cyan;
115 }
116
117 .container th {
118 background-color: #1F2739;
119 }
120
121 .container td:last-child {
122 color: #FB667A;
123 }
124 /*鼠标进过行*/
125 .container tr:hover {
126 background-color: #464A52;
127 }
128 /*鼠标进过列*/
129 .container td:hover {
130 background-color: #FB667A;
131 color: #403E10;
132 font-weight: bold;
133 transform: translate3d(5px, -5px, 0);
134 }
135
136
137
138
139
140 </style>
141 <script src="jquery-2.2.3.js"></script>
142 <script>
143 //点击【编辑】显示
144
145 $(function () {
146
147
148 $("table[name=host] tr:gt(0) td:last-child").click(function (event) {
149
150 alert("234");
151 // $("#full").css({height:"100%","100%"});
152
153 $(".modified").data('current-edit-obj', $(this));
154
155 $(".modified,#full").show();
156
157 var hostname = $(this).siblings("td[name=hostname]").text();
158 $(".modified #hostname").val(hostname);
159 var ip = $(this).siblings("td[name=ip]").text();
160 $(".modified #ip").val(ip);
161 var port = $(this).siblings("td[name=port]").text();
162 $(".modified #port").val(port);
163 });
164 //取消编辑
165 $(".modified #cancel").bind("click", function () {
166 $(".modified,#full").hide();
167 });
168
169 // 确定修改
170 $(".modified #ok").bind("click", function (event) {
171 var check_status = true;
172 var ths = $(".modified").data('current-edit-obj');
173 var hostname = $(".modified #hostname").val().trim();
174 var ip = $(".modified #ip").val().trim();
175 var port = $(".modified #port").val().trim();
176 var port = parseInt(port);
177 console.log(port);
178 // 端口为空设置为22
179 if (isNaN(port)) {
180 alert("您没有设置正常的SSH端口号，将采用默认22号端口");
181 var port = 22;
182 }else if ( port > 65535) {
183 // 如果端口不是一个数字 或者端口大于65535
184 var check_status = false;
185 $(".modified #port").css("border-color","red");
186 alert("端口号超过范围!")
187 };
188 // 主机和ip不能是空
189 if ( hostname == ""){
190 var check_status = false;
191 $(".modified #hostname").css("border-color","red");
192 }else if (ip == "") {
193 var check_status = false;
194 $(".modified #ip").css("border-color","red");
195 };
196 if (check_status == false){
197 return false;
198 }else{
199 //$(this).css("height","60px") 为什么不用$(this),而用$()
200 $(ths).siblings("td[name=hostname]").text(hostname);
201 $(ths).siblings("td[name=ip]").text(ip);
202 $(ths).siblings("td[name=port]").text(port);
203 $(".modified,#full").hide();
204 };
205
206 });
207
208 });
209
210 </script>
211 </head>
212 <body>
213 <h1>
214 <span class="blue"><</span>Homework1<span class="blue">></span> <span class="yellow">HostList</span>
215 </h1>
216 <div id="full">
217 <div class="modified">
218 <li>主机名：<input id="hostname" type="text" value="" />*</li>
219 <li>ip地址：<input id="ip" type="text" value="" />*</li>
220 <li>端口号：<input id="port" type="text" value="" />[0-65535]</li>
221 <div id="useraction">
222 <input class="iputbutton" type="button" name="确定" id="ok" value="确定"/>
223 <input class="iputbutton" type="button" name="取消" id="cancel" value="取消"/>
224 </div>
225 </div>
226 </div>
227 <table class="container" name="host">
228 <tr>
229 <th><h1>主机名</h1></th>
230 <th><h1>IP地址</h1></th>
231 <th><h1>端口</h1></th>
232 <th><h1>操作</h1></th>
233
234 </tr>
235 <tr>
236 <td name="hostname">web01</td>
237 <td name="ip">192.168.2.1</td>
238 <td name="port">22</td>
239 <td>编辑 </td>
240 </tr>
241 <tr>
242 <td name="hostname">web02</td>
243 <td name="ip">192.168.2.2</td>
244 <td name="port">223</td>
245 <td>编辑 </td>
246 </tr>
247 <tr>
248 <td name="hostname">web03</td>
249 <td name="ip">192.168.2.3</td>
250 <td name="port">232</td>
251 <td>编辑 </td>
252 </tr>
253 <tr>
254 <td name="hostname">web04</td>
255 <td name="ip">192.168.2.4</td>
256 <td name="port">232</td>
257 <td>编辑 </td>
258 </tr>
259 </table>
260
261
262 </body>
263 </html>
3.2 CSS操作
3.2.1(样式) css("{color:'red',backgroud:'blue'}")
3.2.2(位置) offset() position() scrollTop() scrollLeft()
3.2.3(尺寸) height() width()
实例 返回顶部
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="js/jquery-2.2.3.js"></script>
7 <script>
8
9
10 window.onscroll=function(){
11
12 var current=$(window).scrollTop();
13 console.log(current)
14 if (current>100){
15
16 $(".returnTop").removeClass("hide")
17 }
18 else {
19 $(".returnTop").addClass("hide")
20 }
21 }
22
23
24 function returnTop(){
25 // $(".div1").scrollTop(0);
26
27 $(window).scrollTop(0)
28 }
29
30
31
32
33 </script>
34 <style>
35 body{
36 margin: 0px;
37 }
38 .returnTop{
39 height: 60px;
40 100px;
41 background-color: darkgray;
42 position: fixed;
43 right: 0;
44 bottom: 0;
45 color: greenyellow;
46 line-height: 60px;
47 text-align: center;
48 }
49 .div1{
50 background-color: orchid;
51 font-size: 5px;
52 overflow: auto;
53 500px;
54 }
55 .div2{
56 background-color: darkcyan;
57 }
58 .div3{
59 background-color: aqua;
60 }
61 .div{
62 height: 300px;
63 }
64 .hide{
65 display: none;
66 }
67 </style>
68 </head>
69 <body>
70 <div class="div1 div">
71 <p>hello</p>
72 <p>hello</p>
73 <p>hello</p>
74 <p>hello</p>
75 <p>hello</p>
76 <p>hello</p>
77 <p>hello</p>
78 <p>hello</p>
79 <p>hello</p>
80 <p>hello</p>
81 <p>hello</p>
82 <p>hello</p>
83 <p>hello</p>
84 <p>hello</p>
85 <p>hello</p>
86 <p>hello</p>
87 <p>hello</p>
88 <p>hello</p>
89
90 </div>
91 <div class="div2 div"></div>
92 <div class="div3 div"></div>
93 <div class="returnTop hide" onclick="returnTop();">返回顶部</div>
94 </body>
95 </html>
实例 滚动菜单
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7
8 body{
9 margin: 0px;
10 }
11 img {
12 border: 0;
13 }
14 ul{
15 padding: 0;
16 margin: 0;
17 list-style: none;
18 }
19 .clearfix:after {
20 content: ".";
21 display: block;
22 height: 0;
23 clear: both;
24 visibility: hidden;
25 }
26
27 .wrap{
28 980px;
29 margin: 0 auto;
30 }
31
32 .pg-header{
33 background-color: #303a40;
34 -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
35 -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
36 box-shadow: 0 2px 5px rgba(0,0,0,.2);
37 }
38 .pg-header .logo{
39 float: left;
40 padding:5px 10px 5px 0px;
41 }
42 .pg-header .logo img{
43 vertical-align: middle;
44 110px;
45 height: 40px;
46
47 }
48 .pg-header .nav{
49 line-height: 50px;
50 }
51 .pg-header .nav ul li{
52 float: left;
53 }
54 .pg-header .nav ul li a{
55 display: block;
56 color: #ccc;
57 padding: 0 20px;
58 text-decoration: none;
59 font-size: 14px;
60 }
61 .pg-header .nav ul li a:hover{
62 color: #fff;
63 background-color: #425a66;
64 }
65 .pg-body{
66
67 }
68 .pg-body .catalog{
69 position: absolute;
70 top:60px;
71 200px;
72 background-color: #fafafa;
73 bottom: 0px;
74 }
75 .pg-body .catalog.fixed{
76 position: fixed;
77 top:10px;
78 }
79
80 .pg-body .catalog .catalog-item.active{
81 color: #fff;
82 background-color: #425a66;
83 }
84
85 .pg-body .content{
86 position: absolute;
87 top:60px;
88 700px;
89 margin-left: 210px;
90 background-color: #fafafa;
91 overflow: auto;
92 }
93 .pg-body .content .section{
94 height: 500px;
95 }
96 </style>
97 </head>
98 <body>
99
100 <div class="pg-header">
101 <div class="wrap clearfix">
102 <div class="logo">
103 <a href="#">
104 <img src="images/3.jpg">
105 </a>
106 </div>
107 <div class="nav">
108 <ul>
109 <li>
110 <a href="#">首页</a>
111 </li>
112 <li>
113 <a href="#">功能一</a>
114 </li>
115 <li>
116 <a href="#">功能二</a>
117 </li>
118 </ul>
119 </div>
120
121 </div>
122 </div>
123 <div class="pg-body">
124 <div class="wrap">
125 <div class="catalog">
126 <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
127 <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
128 <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
129 </div>
130 <div class="content">
131
132 <div menu="function1" class="section">
133 <h1>第一章</h1>
134 </div>
135 <div menu="function2" class="section">
136 <h1>第二章</h1>
137 </div>
138 <div menu="function3" class="section">
139 <h1>第三章</h1>
140 </div>
141 </div>
142 </div>
143 </div>
144
145 <script type="text/javascript" src="js/jquery-2.2.3.js"></script>
146 <script type="text/javascript">
147
148
149 window.onscroll=function(){
150 var ws=$(window).scrollTop()
151 if (ws>50){
152 $(".catalog").addClass("fixed")
153 }
154 else {
155 $(".catalog").removeClass("fixed")
156 }
157 $(".content").children("").each(function(){
158
159 var offtop=$(this).offset().top;
160 // console.log(offtop)
161 var total=$(this).height()+offtop;
162
163 if (ws>offtop && ws<total){
164
165 if($(window).height()+$(window).scrollTop()==$(document).height()){
166 var index=$(".catalog").children(" :last").css("fontSize","40px").siblings().css("fontSize","12px")
167 console.log(index)
168 target='div[auto-to="'+index+'"]';
169 $(".catalog").children(target).css("fontSize","40px").siblings().css("fontSize","12px")
170
171 }
172 else{
173 var index=$(this).attr("menu");
174 target='div[auto-to="'+index+'"]';
175 $(".catalog").children(target).css("fontSize","40px").siblings().css("fontSize","12px")
176 }
177
178
179 }
180
181 })
182
183 }
184
185 </script>
186
187
188 </body>
189 </html>
3.3 文档处理
内部插入 $("#c1").append("<b>hello</b>") $("p").appendTo("div")
prepend() prependTo()
外部插入 before() insertBefore() after insertAfter()
replaceWith() remove() empty() clone()
实例 clone方法的应用
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6
7 </head>
8 <body>
9 <div class="outer">
10 <div class="condition">
11
12 <div class="icons" style="display:inline-block">
13 <a onclick="add(this);"><button>+</button></a>
14 </div>
15
16 <div class="input" style="display:inline-block">
17 <input type="checkbox">
18 <input type="text" value="alex">
19 </div>
20 </div>
21 </div>
22
23 <script src="js/jquery-2.2.3.js"></script>
24 <script>
25
26 function add(self){
27 var $duplicate = $(self).parent().parent().clone();
28 $duplicate.find('a[onclick="add(this);"]').attr('onclick',"removed(this)").children("").text("-");
29 $duplicate.appendTo($(self).parent().parent().parent());
30
31 }
32 function removed(self){
33
34 $(self).parent().parent().remove()
35
36 }
37
38 </script>
39 </body>
40 </html>
3.4 事件
3.4.1
$(document).ready(function(){}) -----------> $(function(){})
3.4.2
$("p").click(function(){})
$("p").bind("click",function(){})
$("ul").delegate("li","click",function(){})
实例 拖动面板
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <div style="border: 1px solid #ddd; 600px;position: absolute;">
9 <div id="title" style="background-color: black;height: 40px;color: white;">
10 标题
11 </div>
12 <div style="height: 300px;">
13 内容
14 </div>
15 </div>
16 <script type="text/javascript" src="jquery-2.2.3.js"></script>
17 <script>
18 $(function(){
19 // 页面加载完成之后自动执行
20 $('#title').mouseover(function(){
21 $(this).css('cursor','move');
22 }).mousedown(function(e){
23 //console.log($(this).offset());
24 var _event = e || window.event;
25 // 原始鼠标横纵坐标位置
26 var ord_x = _event.clientX;
27 var ord_y = _event.clientY;
28
29 var parent_left = $(this).parent().offset().left;
30 var parent_top = $(this).parent().offset().top;
31
32 $(this).bind('mousemove', function(e){
33 var _new_event = e || window.event;
34 var new_x = _new_event.clientX;
35 var new_y = _new_event.clientY;
36
37 var x = parent_left + (new_x - ord_x);
38 var y = parent_top + (new_y - ord_y);
39
40 $(this).parent().css('left',x+'px');
41 $(this).parent().css('top',y+'px');
42
43 })
44 }).mouseup(function(){
45 $(this).unbind('mousemove');
46 });
47 })
48 </script>
49 </body>
50 </html>
放大镜
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>bigger</title>
6 <style>
7 *{
8 margin: 0;
9 padding:0;
10 }
11 .outer{
12 height: 350px;
13 350px;
14 border: dashed 5px cornflowerblue;
15 }
16 .outer .small_box{
17 position: relative;
18 }
19 .outer .small_box .float{
20 height: 175px;
21 175px;
22 background-color: darkgray;
23 opacity: 0.4;
24 fill-opacity: 0.4;
25 position: absolute;
26 display: none;
27
28 }
29
30 .outer .big_box{
31 height: 400px;
32 400px;
33 overflow: hidden;
34 position:absolute;
35 left: 360px;
36 top: 0px;
37 z-index: 1;
38 border: 5px solid rebeccapurple;
39 display: none;
40
41
42 }
43 .outer .big_box img{
44 position: absolute;
45 z-index: 5;
46 }
47
48
49 </style>
50 </head>
51 <body>
52
53
54 <div class="outer">
55 <div class="small_box">
56 <div class="float"></div>
57 <img src="small.jpg">
58
59 </div>
60 <div class="big_box">
61 <img src="big.jpg">
62 </div>
63
64 </div>
65
66
67 <script src="js/jquery-2.2.3.js"></script>
68 <script>
69
70 $(function(){
71
72 $(".small_box").mouseover(function(){
73
74 $(".float").css("display","block");
75 $(".big_box").css("display","block")
76
77 })
78 $(".small_box").mouseout(function(){
79
80 $(".float").css("display","none");
81 $(".big_box").css("display","none")
82
83 })
84
85
86
87 $(".small_box").mousemove(function(e){
88
89 var _event=e || window.event;
90
91 var float_width=$(".float").width();
92 var float_height=$(".float").height();
93
94 console.log(float_height,float_width);
95
96 var float_height_half=float_height/2;
97 var float_width_half=float_width/2;
98 console.log(float_height_half,float_width_half);
99
100
101 var small_box_width=$(".small_box").height();
102 var small_box_height=$(".small_box").width();
103
104
105
106 // 鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理
107 var mouse_left=_event.clientX-float_width_half;
108 var mouse_top=_event.clientY-float_height_half;
109
110 if(mouse_left<0){
111 mouse_left=0
112 }else if (mouse_left>small_box_width-float_width){
113 mouse_left=small_box_width-float_width
114 }
115
116
117 if(mouse_top<0){
118 mouse_top=0
119 }else if (mouse_top>small_box_height-float_height){
120 mouse_top=small_box_height-float_height
121 }
122
123 $(".float").css("left",mouse_left+"px");
124 $(".float").css("top",mouse_top+"px")
125
126 var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);
127 var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);
128
129 console.log(percentX,percentY)
130
131 $(".big_box img").css("left", -percentX*mouse_left+"px")
132 $(".big_box img").css("top", -percentY*mouse_top+"px")
133
134
135 })
136
137
138 })
139
140
141 </script>
142 </body>
143 </html>
3.5 动画效果
实例 隐藏与显示
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="js/jquery-2.2.3.js"></script>
7 <script>
8 /**
9 * Created by yuan on 16/5/5.
10 */
11
12 $(document).ready(function(){
13 $("#hide").click(function(){
14 $("p").hide(1000);
15 });
16 $("#show").click(function(){
17 $("p").show(1000);
18 });
19
20 //用于切换被选元素的 hide() 与 show() 方法。
21 $("#toggle").click(function(){
22 $("p").toggle();
23 })
24
25 for (var i= 0;i<7;i++){
26 // 颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
27 $("<div>").appendTo(document.body);
28 }
29 $("div").click(function(){
30 $(this).hide(2000);
31 });
32 });
33
34 </script>
35 <link type="text/css" rel="stylesheet" href="style.css">
36 </head>
37 <body>
38 <!--1 隐藏与显示-->
39 <!--2 淡入淡出-->
40 <!--3 滑动-->
41 <!--4 效果-回调:每一个动画执行完毕之后所能执行的函数方法或者所能做的一件事-->
42
43
44 <p>hello</p>
45 <button id="hide">隐藏</button>
46 <button id="show">显示</button>
47 <button id="toggle">隐藏/显示</button>
48
49 </body>
50 </html>
实例 淡入淡出
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="js/jquery-2.2.3.js"></script>
7 <script>
8 $(document).ready(function(){
9 $("#in").click(function(){
10 $("#id1").fadeIn(1000);
11 $("#id2").fadeIn(1000);
12 $("#id3").fadeIn(1000);
13
14 });
15 $("#out").click(function(){
16 $("#id1").fadeOut(1000);
17 $("#id2").fadeOut(1000);
18 $("#id3").fadeOut(1000);
19
20 });
21 $("#toggle").click(function(){
22 $("#id1").fadeToggle(1000);
23 $("#id2").fadeToggle(1000);
24 $("#id3").fadeToggle(1000);
25
26 });
27 $("#fadeto").click(function(){
28 $("#id1").fadeTo(1000,0.4);
29 $("#id2").fadeTo(1000,0.5);
30 $("#id3").fadeTo(1000,0);
31
32 });
33 });
34
35
36
37 </script>
38
39 </head>
40 <body>
41 <button id="in">fadein</button>
42 <button id="out">fadeout</button>
43 <button id="toggle">fadetoggle</button>
44 <button id="fadeto">fadeto</button>
45
46 <div id="id1" style="display:none; 80px;height: 80px;background-color: blueviolet"></div>
47 <div id="id2" style="display:none; 80px;height: 80px;background-color: orangered "></div>
48 <div id="id3" style="display:none; 80px;height: 80px;background-color: darkgreen "></div>
49
50 </body>
51 </html>
3.6 扩展(插件机制)
- jquery.extend({})
- jquery.fn.extend({})
实例 商城菜单
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <meta name="viewport" content="width=device-width">
6 <meta http-equiv="X-UA-Compatible" content="IE=8">
7 <title>购物商城</title>
8 <style>
9
10 *{
11 margin: 0;
12 padding: 0;
13 }
14 .hide{
15 display:none;
16 }
17
18
19 .header-nav {
20 height: 39px;
21 background: #c9033b;
22 }
23 .header-nav .bg{
24 background: #c9033b;
25 }
26
27 .header-nav .nav-allgoods .menuEvent {
28 display: block;
29 height: 39px;
30 line-height: 39px;
31 text-decoration: none;
32 color: #fff;
33 text-align: center;
34 font-weight: bold;
35 font-family: 微软雅黑;
36 color: #fff;
37 100px;
38 }
39 .header-nav .nav-allgoods .menuEvent .catName {
40 height: 39px;
41 line-height: 39px;
42 font-size: 15px;
43 }
44
45 .header-nav .nav-allmenu a {
46 display: inline-block;
47 height: 39px;
48 vertical-align: top;
49 padding: 0 15px;
50 text-decoration: none;
51 color: #fff;
52 float: left;
53 }
54
55 .header-menu a{
56 color:#656565;
57 }
58
59 .header-menu .menu-catagory{
60 position: absolute;
61 background-color: #fff;
62 border-left:1px solid #fff;
63 height: 316px;
64 230px;
65 z-index: 4;
66 float: left;
67 }
68 .header-menu .menu-catagory .catagory {
69 border-left:4px solid #fff;
70 height: 104px;
71 border-bottom: solid 1px #eaeaea;
72 }
73 .header-menu .menu-catagory .catagory:hover {
74 height: 102px;
75 border-left:4px solid #c9033b;
76 border-bottom: solid 1px #bcbcbc;
77 border-top: solid 1px #bcbcbc;
78 }
79
80 .header-menu .menu-content .item{
81 margin-left:230px;
82 position:absolute;
83 background-color:white;
84 height:314px;
85 500px;
86 z-index:4;
87 float:left;
88 border: solid 1px #bcbcbc;
89 border-left:0;
90 box-shadow: 1px 1px 5px #999;
91 }
92
93 </style>
94 </head>
95 <body>
96
97 <div class="pg-header">
98
99 <div class="header-nav">
100 <div class="container narrow bg">
101 <div class="nav-allgoods left">
102 <a id="all_menu_catagory" href="#" class="menuEvent">
103 <strong class="catName">全部商品分类</strong>
104 <span class="arrow" style="display: inline-block;vertical-align: top;"></span>
105 </a>
106 </div>
107 </div>
108 </div>
109 <div class="header-menu">
110 <div class="container narrow hide">
111 <div id="nav_all_menu" class="menu-catagory">
112 <div class="catagory" float-content="one">
113 <div class="title">家电</div>
114 <div class="body">
115 <a href="#">空调</a>
116 </div>
117 </div>
118 <div class="catagory" float-content="two">
119 <div class="title">床上用品</div>
120 <div class="body">
121 <a href="http://www.baidu.com">床单</a>
122 </div>
123 </div>
124 <div class="catagory" float-content="three">
125 <div class="title">水果</div>
126 <div class="body">
127 <a href="#">橘子</a>
128 </div>
129 </div>
130 </div>
131
132 <div id="nav_all_content" class="menu-content">
133 <div class="item hide" float-id="one">
134
135 <dl>
136 <dt><a href="#" class="red">厨房用品</a></dt>
137 <dd>
138 <span>| <a href="#" target="_blank" title="勺子">勺子</a> </span>
139 </dd>
140 </dl>
141 <dl>
142 <dt><a href="#" class="red">厨房用品</a></dt>
143 <dd>
144 <span>| <a href="#" target="_blank" title="菜刀">菜刀</a> </span>
145
146 </dd>
147 </dl>
148 <dl>
149 <dt><a href="#" class="red">厨房用品</a></dt>
150 <dd>
151 <span>| <a href="#">菜板</a> </span>
152 </dd>
153 </dl>
154 <dl>
155 <dt><a href="#" class="red">厨房用品</a></dt>
156 <dd>
157 <span>| <a href="#" target="_blank" title="碗">碗</a> </span>
158
159 </dd>
160 </dl>
161
162 </div>
163 <div class="item hide" float-id="two">
164 <dl>
165 <dt><a href="#" class="red">厨房用品</a></dt>
166 <dd>
167 <span>| <a href="#" target="_blank" title="">角阀</a> </span>
168
169 </dd>
170 </dl>
171 <dl>
172 <dt><a href="#" class="red">厨房用品</a></dt>
173 <dd>
174 <span>| <a href="#" target="_blank" title="角阀">角阀</a> </span>
175
176 </dd>
177 </dl>
178 <dl>
179 <dt><a href="#" class="red">厨房用品</a></dt>
180 <dd>
181 <span>| <a href="#" target="_blank" title="角阀">角阀</a> </span>
182
183 </dd>
184 </dl>
185
186 </div>
187 <div class="item hide" float-id="three">
188 <dl>
189 <dt><a href="#" class="red">厨房用品3</a></dt>
190 <dd>
191 <span>| <a href="#" target="_blank" title="角阀">角阀3</a> </span>
192
193 </dd>
194 </dl>
195 <dl>
196 <dt><a href="#" class="red">厨房用品3</a></dt>
197 <dd>
198 <span>| <a href="http://www.meilele.com/category-jiaofa/" target="_blank" title="角阀">角阀3</a> </span>
199
200 </dd>
201 </dl>
202 </div>
203 </div>
204 </div>
205 </div>
206
207 </div>
208
209
210 <script src="js/jquery-2.2.3.js"></script>
211
212 <script type="text/javascript">
213 $(document).ready(function () {
214
215 Change_Menu('#all_menu_catagory','#nav_all_menu', '#nav_all_content');
216
217 });
218
219
220
221 function Change_Menu(all_menu_catagory,menu, content) {
222 $all_menu_catagory = $(all_menu_catagory);
223 $menu = $(menu);
224 $content = $(content);
225
226 $all_menu_catagory.bind("mouseover", function () {
227 $menu.parent().removeClass('hide');
228 });
229 $all_menu_catagory.bind("mouseout", function () {
230 $menu.parent().addClass('hide');
231 });
232
233 $menu.children().bind("mouseover", function () {
234 $menu.parent().removeClass('hide');
235 $item_content = $content.find('div[float-id="' + $(this).attr("float-content") + '"]');
236 $item_content.removeClass('hide').siblings().addClass('hide');
237 });
238 $menu.bind("mouseout", function () {
239 $content.children().addClass('hide');
240 $menu.parent().addClass('hide');
241 });
242 $content.children().bind("mouseover", function () {
243
244 $menu.parent().removeClass('hide');
245 $(this).removeClass('hide');
246 });
247 $content.children().bind("mouseout", function () {
248
249 $(this).addClass('hide');
250 $menu.parent().addClass('hide');
251 });
252 }
253 </script>
254
255
256 </body>
257 </html>
实例 编辑框
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 .edit-mode{
8 background-color: #b3b3b3;
9 padding: 8px;
10 text-decoration: none;
11 color: white;
12 }
13 .editing{
14 background-color: #f0ad4e;
15 }
16 </style>
17 </head>
18 <body>
19
20 <div style="padding: 20px">
21 <input type="button" onclick="CheckAll('#edit_mode', '#tb1');" value="全选" />
22 <input type="button" onclick="CheckReverse('#edit_mode', '#tb1');" value="反选" />
23 <input type="button" onclick="CheckCancel('#edit_mode', '#tb1');" value="取消" />
24
25 <a id="edit_mode" class="edit-mode" href="javascript:void(0);" onclick="EditMode(this, '#tb1');">进入编辑模式</a>
26
27 </div>
28 <table border="1">
29 <thead>
30 <tr>
31 <th>选择</th>
32 <th>主机名</th>
33 <th>端口</th>
34 <th>状态</th>
35 </tr>
36 </thead>
37 <tbody id="tb1">
38 <tr>
39 <td><input type="checkbox" /></td>
40 <td edit="true">v1</td>
41 <td>v11</td>
42 <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在线</td>
43 </tr>
44 <tr>
45 <td><input type="checkbox" /></td>
46 <td edit="true">v1</td>
47 <td>v11</td>
48 <td edit="true" edit-type="select" sel-val="2" global-key="STATUS">下线</td>
49 </tr>
50 <tr>
51 <td><input type="checkbox" /></td>
52 <td edit="true">v1</td>
53 <td>v11</td>
54 <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在线</td>
55 </tr>
56 </tbody>
57 </table>
58
59 <script type="text/javascript" src="js/jquery-2.2.3.js"></script>
60 <script>
61 /*
62 监听是否已经按下control键
63 */
64 window.globalCtrlKeyPress = false;
65
66 window.onkeydown = function(event){
67 if(event && event.keyCode == 17){
68 window.globalCtrlKeyPress = true;
69 }
70 };
71 window.onkeyup = function(event){
72 if(event && event.keyCode == 17){
73 window.globalCtrlKeyPress = false;
74 }
75 };
76
77 /*
78 按下Control，联动表格中正在编辑的select
79 */
80 function MultiSelect(ths){
81 if(window.globalCtrlKeyPress){
82 var index = $(ths).parent().index();
83 var value = $(ths).val();
84 $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){
85 $(this).parent().parent().children().eq(index).children().val(value);
86 });
87 }
88 }
89 </script>
90 <script type="text/javascript">
91
92 $(function(){
93 BindSingleCheck('#edit_mode', '#tb1');
94 });
95
96 function BindSingleCheck(mode, tb){
97
98 $(tb).find(':checkbox').bind('click', function(){
99 var $tr = $(this).parent().parent();
100 if($(mode).hasClass('editing')){
101 if($(this).prop('checked')){
102 RowIntoEdit($tr);
103 }else{
104 RowOutEdit($tr);
105 }
106 }
107 });
108 }
109
110 function CreateSelect(attrs,csses,option_dict,item_key,item_value,current_val){
111 var sel= document.createElement('select');
112 $.each(attrs,function(k,v){
113 $(sel).attr(k,v);
114 });
115 $.each(csses,function(k,v){
116 $(sel).css(k,v);
117 });
118 $.each(option_dict,function(k,v){
119 var opt1=document.createElement('option');
120 var sel_text = v[item_value];
121 var sel_value = v[item_key];
122
123 if(sel_value==current_val){
124 $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).attr('selected',true).appendTo($(sel));
125 }else{
126 $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).appendTo($(sel));
127 }
128 });
129 return sel;
130 }
131
132 STATUS = [
133 {'id': 1, 'value': "在线"},
134 {'id': 2, 'value': "下线"}
135 ];
136
137 BUSINESS = [
138 {'id': 1, 'value': "车上会"},
139 {'id': 2, 'value': "二手车"}
140 ];
141
142 function RowIntoEdit($tr){
143 $tr.children().each(function(){
144 if($(this).attr('edit') == "true"){
145 if($(this).attr('edit-type') == "select"){
146 var select_val = $(this).attr('sel-val');
147 var global_key = $(this).attr('global-key');
148 var selelct_tag = CreateSelect({"onchange": "MultiSelect(this);"}, {}, window[global_key], 'id', 'value', select_val);
149 $(this).html(selelct_tag);
150 }else{
151 var orgin_value = $(this).text();
152 var temp = "<input value='"+ orgin_value+"' />";
153 $(this).html(temp);
154 }
155
156 }
157 });
158 }
159
160 function RowOutEdit($tr){
161 $tr.children().each(function(){
162 if($(this).attr('edit') == "true"){
163 if($(this).attr('edit-type') == "select"){
164 var new_val = $(this).children(':first').val();
165 var new_text = $(this).children(':first').find("option[value='"+new_val+"']").text();
166 $(this).attr('sel-val', new_val);
167 $(this).text(new_text);
168 }else{
169 var orgin_value = $(this).children().first().val();
170 $(this).text(orgin_value);
171 }
172
173 }
174 });
175 }
176
177 function CheckAll(mode, tb){
178 if($(mode).hasClass('editing')){
179
180 $(tb).children().each(function(){
181
182 var tr = $(this);
183 var check_box = tr.children().first().find(':checkbox');
184 if(check_box.prop('checked')){
185
186 }else{
187 check_box.prop('checked',true);
188
189 RowIntoEdit(tr);
190 }
191 });
192
193 }else{
194
195 $(tb).find(':checkbox').prop('checked', true);
196 }
197 }
198
199 function CheckReverse(mode, tb){
200
201 if($(mode).hasClass('editing')){
202
203 $(tb).children().each(function(){
204 var tr = $(this);
205 var check_box = tr.children().first().find(':checkbox');
206 if(check_box.prop('checked')){
207 check_box.prop('checked',false);
208 RowOutEdit(tr);
209 }else{
210 check_box.prop('checked',true);
211 RowIntoEdit(tr);
212 }
213 });
214
215
216 }else{
217 //
218 $(tb).children().each(function(){
219 var tr = $(this);
220 var check_box = tr.children().first().find(':checkbox');
221 if(check_box.prop('checked')){
222 check_box.prop('checked',false);
223 }else{
224 check_box.prop('checked',true);
225 }
226 });
227 }
228 }
229
230 function CheckCancel(mode, tb){
231 if($(mode).hasClass('editing')){
232 $(tb).children().each(function(){
233 var tr = $(this);
234 var check_box = tr.children().first().find(':checkbox');
235 if(check_box.prop('checked')){
236 check_box.prop('checked',false);
237 RowOutEdit(tr);
238
239 }else{
240
241 }
242 });
243
244 }else{
245 $(tb).find(':checkbox').prop('checked', false);
246 }
247 }
248
249 function EditMode(ths, tb){
250 if($(ths).hasClass('editing')){
251 $(ths).removeClass('editing');
252 $(tb).children().each(function(){
253 var tr = $(this);
254 var check_box = tr.children().first().find(':checkbox');
255 if(check_box.prop('checked')){
256 RowOutEdit(tr);
257 }else{
258
259 }
260 });
261
262 }else{
263
264 $(ths).addClass('editing');
265 $(tb).children().each(function(){
266 var tr = $(this);
267 var check_box = tr.children().first().find(':checkbox');
268 if(check_box.prop('checked')){
269 RowIntoEdit(tr);
270 }else{
271
272 }
273 });
274
275 }
276 }
277
278
279 </script>
280
281 </body>
282 </html>