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 width: 30%; 20 background-color: gainsboro; 21 float: left; 22 } 23 .content{ 24 height: 500px; 25 width: 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 width: 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 width: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 width: 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 width: 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%",width:"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 width: 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 width: 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 width: 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 width: 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 width: 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 width: 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;width: 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 width: 350px; 14 border: dashed 5px cornflowerblue; 15 } 16 .outer .small_box{ 17 position: relative; 18 } 19 .outer .small_box .float{ 20 height: 175px; 21 width: 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 width: 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; width: 80px;height: 80px;background-color: blueviolet"></div> 47 <div id="id2" style="display:none; width: 80px;height: 80px;background-color: orangered "></div> 48 <div id="id3" style="display:none; width: 80px;height: 80px;background-color: darkgreen "></div> 49 50 </body> 51 </html> 3.6 扩展(插件机制)
- jquery.extend({})
- jquery.fn.extend({})
实例 商城菜单
实例 编辑框
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>