目录：
一 jquery简介
1 jquery是什么
- jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
- jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
- 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
- jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
- jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
- jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
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对象与DOM对象间的转换 例： obj = document.getElementById('sel') $(obj) //DOM对象 ---> jQuery对象 $('#sel') $('#sel')[0] //jQuery对象 ---> DOM对象
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
var variable = DOM 对象
基本语法：$(selector).action()
jquery processon:https://www.processon.com/view/link/5b7d6458e4b0534c9bb76ad9#map
二 寻找元素(重要的选择器和筛选器)
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>
三 操作元素(属性 CSS 和 文档处理)
3.1 属性操作
$("p").text() $("p").html() $(":checkbox").val() $("p").text('') $("p").html('') $(":checkbox").val('')
$(".test").attr("alex") $(".test").attr("alex","sb")
$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")
$(".test").prop("checked",true) .removeProp()
$(".test").addClass("hide") .removeClass() toggleClass()
注：三个标签有val方法
input
textarea
select
实例 编辑框正反选
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 </body> 85 </html>
实例 模态对话框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-3.4.0.js"></script> 7 <script> 8 function action1(self) { 9 $(self).parent().siblings().removeClass("hide"); 10 } 11 function action2(self) { 12 $(self).parent().parent().children(".shade,.models").addClass("hide") 13 } 14 // function action(act){ 15 // var ele=document.getElementsByClassName("shade")[0]; 16 // var ele2=document.getElementsByClassName("models")[0]; 17 // if(act=="show"){ 18 // ele.classList.remove("hide"); 19 // ele2.classList.remove("hide"); 20 // }else { 21 // ele.classList.add("hide"); 22 // ele2.classList.add("hide"); 23 // } 24 // } 25 </script> 26 <style> 27 .back{ 28 background-color: rebeccapurple; 29 height: 2000px; 30 } 31 .shade{ 32 position: fixed; 33 top: 0; 34 bottom: 0; 35 left:0; 36 right: 0; 37 background-color: coral; 38 opacity: 0.4; 39 } 40 .hide{ 41 display: none; 42 } 43 .models{ 44 position: fixed; 45 top: 50%; 46 left: 50%; 47 margin-left: -100px; 48 margin-top: -100px; 49 height: 200px; 50 width: 200px; 51 background-color: gold; 52 } 53 </style> 54 </head> 55 <body> 56 <div class="back"> 57 <input id="ID1" type="button" value="click" onclick="action1(this)"> 58 </div> 59 <div class="shade hide"></div> 60 <div class="models hide"> 61 <input id="ID2" type="button" value="cancel" onclick="action2(this)"> 62 </div> 63 </body> 64 </html>
3.2 CSS操作
3.2.1(样式) css("{color:'red',backgroud:'blue'}") css('color','red')
3.2.2(位置) offset() position()
scrollTop() 监听滑轮上下滚动值，也可设置滚动值scrollTop(0) scrollLeft() 左右
offset().top 直接获取到顶部的距离 offset().left 获取到左边的距离
3.2.3(尺寸) height() width() 获取当前标签自己的高宽
$(window).height() 窗口高度 $(document).height() 整个文档高度
innerHeight() 相当于height+padding innerWidth() 相当于width+padding
outerHeight() 参数为false时，相当于height+padding+border;true时相当于height+padding+border+margin outerWidth()同理
实例 返回顶部
<style> #returntop{ position:fixed; border-radius:50%; right:30px; bottom:0; cursor:pointer; height:60px; width:60px; background:black; } #fhdb{ text-decoration: none; color: white; display: inline-block; height: 40px; width: 40px; margin-top:10px; margin-left:15px; } </style> <div id="returntop"><a id="fhdb" href="#ml">返回顶部</a></div>
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 body{ 8 margin: 0px; 9 } 10 img { 11 border: 0; 12 } 13 ul{ 14 padding: 0; 15 margin: 0; 16 list-style: none; 17 } 18 .clearfix:after { 19 content: "."; 20 display: block; 21 height: 0; 22 clear: both; 23 visibility: hidden; 24 } 25 .wrap{ 26 width: 980px; 27 margin: 0 auto; 28 } 29 .pg-header{ 30 background-color: #303a40; 31 -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); 32 -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); 33 box-shadow: 0 2px 5px rgba(0,0,0,.2); 34 } 35 .pg-header .logo{ 36 float: left; 37 padding:5px 10px 5px 0px; 38 } 39 .pg-header .logo img{ 40 vertical-align: middle; 41 width: 110px; 42 height: 40px; 43 } 44 .pg-header .nav{ 45 line-height: 50px; 46 } 47 .pg-header .nav ul li{ 48 float: left; 49 } 50 .pg-header .nav ul li a{ 51 display: block; 52 color: #ccc; 53 padding: 0 20px; 54 text-decoration: none; 55 font-size: 14px; 56 } 57 .pg-header .nav ul li a:hover{ 58 color: #fff; 59 background-color: #425a66; 60 } 61 .pg-body{ 62 } 63 .pg-body .catalog{ 64 position: absolute; 65 top:60px; 66 width: 200px; 67 background-color: #fafafa; 68 bottom: 0px; 69 } 70 .pg-body .catalog.fixed{ 71 position: fixed; 72 top:10px; 73 } 74 .pg-body .catalog .catalog-item.active{ 75 color: #fff; 76 background-color: #425a66; 77 } 78 .pg-body .content{ 79 position: absolute; 80 top:60px; 81 width: 700px; 82 margin-left: 210px; 83 background-color: #fafafa; 84 overflow: auto; 85 } 86 .pg-body .content .section{ 87 height: 500px; 88 } 89 </style> 90 </head> 91 <body> 92 <div class="pg-header"> 93 <div class="wrap clearfix"> 94 <div class="logo"> 95 <a href="#"> 96 <img src="images/3.jpg"> 97 </a> 98 </div> 99 <div class="nav"> 100 <ul> 101 <li> 102 <a href="#">首页</a> 103 </li> 104 <li> 105 <a href="#">功能一</a> 106 </li> 107 <li> 108 <a href="#">功能二</a> 109 </li> 110 </ul> 111 </div> 112 </div> 113 </div> 114 <div class="pg-body"> 115 <div class="wrap"> 116 <div class="catalog"> 117 <div class="catalog-item" auto-to="function1"><a>第1张</a></div> 118 <div class="catalog-item" auto-to="function2"><a>第2张</a></div> 119 <div class="catalog-item" auto-to="function3"><a>第3张</a></div> 120 </div> 121 <div class="content"> 122 <div menu="function1" class="section"> 123 <h1>第一章</h1> 124 </div> 125 <div menu="function2" class="section"> 126 <h1>第二章</h1> 127 </div> 128 <div menu="function3" class="section"> 129 <h1>第三章</h1> 130 </div> 131 </div> 132 </div> 133 </div> 134 <script type="text/javascript" src="jquery-3.4.0.js"></script> 135 <script type="text/javascript"> 136 window.onscroll=function(){ 137 var ws=$(window).scrollTop() 138 if (ws>50){ 139 $(".catalog").addClass("fixed") 140 } 141 else { 142 $(".catalog").removeClass("fixed") 143 } 144 $(".content").children("").each(function(){ 145 var offtop=$(this).offset().top; 146 // console.log(offtop) 147 var total=$(this).height()+offtop; 148 if (ws>offtop && ws<total){ 149 if($(window).height()+$(window).scrollTop()==$(document).height()){ 150 var index=$(".catalog").children(" :last").css("fontSize","40px").siblings().css("fontSize","12px") 151 console.log(index) 152 target='div[auto-to="'+index+'"]'; 153 $(".catalog").children(target).css("fontSize","40px").siblings().css("fontSize","12px") 154 } 155 else{ 156 var index=$(this).attr("menu"); 157 target='div[auto-to="'+index+'"]'; 158 $(".catalog").children(target).css("fontSize","40px").siblings().css("fontSize","12px") 159 } 160 } 161 }) 162 } 163 </script> 164 </body> 165 </html>
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 body{overflow:auto;} 12 .title{ 13 height:48px; 14 background-color:black; 15 } 16 .menu{ 17 position:absolute; 18 top:48px; 19 left:200px; 20 bottom:0; 21 width:220px; 22 border:1px solid red; 23 } 24 #menu div{ 25 background-color:yellow; 26 color:black; 27 } 28 .menu div a{ 29 display:block; 30 width:220px; 31 } 32 .act{ 33 background-color:#336699; 34 color:white; 35 } 36 #content{ 37 position:absolute; 38 top:48px; 39 left:420px; 40 bottom:0; 41 right:200px; 42 border:1px solid red; 43 } 44 .fff{ 45 position:fixed; 46 top:0; 47 } 48 .retTop{ 49 position:fixed; 50 bottom:5px; 51 right:5px; 52 height:20px; 53 width:100px; 54 cursor:pointer; 55 } 56 </style> 57 <script src="jquery-3.4.0.js"></script> 58 <script> 59 window.onscroll = function(){ 60 var scrollTop = $(window).scrollTop(); //滑轮距离顶部滚动值 61 if (scrollTop > 48){ 62 $('.menu').addClass('fff'); 63 }else { 64 $('.menu').removeClass('fff'); 65 $('.menu a').removeClass('act'); 66 } 67 $('#content').children().each(function(){ 68 var eleTop = $(this).offset().top; //本标签距离窗口顶部的高度 69 var winTop = eleTop - scrollTop; //本标签在滚轮滑动后距离窗口顶部的高度 70 var winBottomTop = eleTop + $(this).height() - scrollTop; //本标签在滚轮滑动后距离窗口底部的高度 71 var docHeight = $(document).height(); //整个文档高度 72 var winHeight = $(window).height(); //窗口高度 73 if (docHeight - winHeight == scrollTop){ 74 $('#menu a:last').addClass('act').parent().siblings().children().removeClass('act'); 75 }else { 76 if (winTop <= 0 && winBottomTop > 0){ 77 var a = $(this).attr('a'); 78 $('#menu a[b="'+a+'"]').addClass('act').parent().siblings().children().removeClass('act'); 79 <!-- return；--> 80 } 81 } 82 }) 83 } 84 function retTop(){ 85 $(window).scrollTop(0); 86 } 87 </script> 88 </head> 89 <body> 90 <div class="title"></div> 91 <div id="menu" class="menu"> 92 <div><a b="1">menu1</a></div> 93 <div><a b="2">menu2</a></div> 94 <div><a b="3">menu3</a></div> 95 </div> 96 <div id="content"> 97 <div a="1" style="height:600px;background-color:red;"></div> 98 <div a="2" style="height:800px;background-color:blue;"></div> 99 <div a="3" style="height:400px;background-color:green;"></div> 100 </div> 101 <div class="retTop" onclick="retTop()">返回顶部</div> 102 </body> 103 </html>
3.3 文档处理
内部插入 $("#c1").append("<b>hello</b>") $("p").appendTo("div")
prepend() prependTo()
外部插入 before() insertBefore() after insertAfter()
replaceWith() replaceAll() remove() detach() empty() clone()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <button id="btn">删除</button> 9 10 <ul> 11 <li class="item">alex</li> 12 </ul> 13 14 <div class="box"></div> 15 <script src="jquery.js"> 16 17 </script> 18 19 <script> 20 $(function () { 21 $('.item').after('<li>wusir</li>'); 22 $('<li>wusir2</li>').insertAfter($('.item')); 23 24 $('.item').replaceWith('<li id="active">wusir3</li>'); 25 26 $('#btn').click(function() { 27 28 //删除整个节点 它自己的事件 也删除 29 // var $btn = $(this).remove(); 30 //删除整个节点 它自己的事件 保留 31 // var $btn = $(this).detach(); 32 33 // $('.box').append($btn); 34 35 // $('ul').empty(); 36 37 $('ul').html(''); 38 }); 39 }) 40 </script> 41 </body> 42 </html>
实例 clone方法的应用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="outer"> 9 <div class="item"> 10 <input type="button" value="+" onclick="fun1(this)"> 11 <input type="text"> 12 </div> 13 </div> 14 <script src="jquery-3.4.0.js"></script> 15 <script> 16 function fun1(self) { 17 var Clone=$(self).parent().clone(); 18 Clone.children(":button").val("-").attr("onclick","func2(this)"); 19 $("#outer").append(Clone) 20 } 21 function func2(self) { 22 $(self).parent().remove() 23 } 24 </script> 25 </body> 26 </html>
3.4 事件
jQuery常用事件processon：https://www.processon.com/view/link/5ad1c48de4b0b74a6dd65426#map
3.4.1
$(document).ready(function(){}) -----------> $(function(){})
3.4.2
$("p").click(function(){})
$('ul').on('click','li',function(){}) //事件委托（可为新创建的li标签添加相同的事件,第二个参数为后代）bind已废弃，因为on可以代替bind（$('ul li').on('click',function(){})）
$('ul').off('click','li',function(){}) //事件解除$('ul li').off('click',function(){})
$('button').hover(function1(){},function2(){}) //合成事件，进入button时执行function1，离开button时执行function2
$("p").bind("click",function(){}) //基本已废弃
$("ul").delegate("li","click",function(){}) //基本已废弃
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <ul> 9 <li class="item1"> 10 <a href="javascript:void(0);" id="a">alex</a> 11 </li> 12 <!-- <li>武sir</li> --> 13 </ul> 14 <script src="jquery.js"></script> 15 <script> 16 $(function () { 17 18 19 // 绑定事件 如果使用事件委托的方式 以后的页面不会出现问题 20 21 // 第二个参数 表示的是后代的选择器 22 23 // 事件委托（代理） 很重要 如果未来 出现 未来添加的元素 优先考虑事件委托 24 25 26 $('ul').on('click','#a',function () { 27 alert(this.innerText); 28 }); 29 // $('ul li').click(function () { 30 // alert(this.innerText); 31 // }); 32 33 $('ul').append('<li><a href="javascript:void(0);">wusir</a></li>'); 34 35 }) 36 </script> 37 </body> 38 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <button>按钮</button> 9 <script src="jquery.js"></script> 10 <script> 11 $(function () { 12 13 /* 14 $('button').mouseenter(function(event) { 15 16 }); 17 18 $('button').mouseleave(function(event) { 19 20 }); 21 */ 22 23 $('button').hover(function() { 24 /* Stuff to do when the mouse enters the element */ 25 console.log('进入'); 26 }, function() { 27 /* Stuff to do when the mouse leaves the element */ 28 console.log('离开'); 29 }); 30 }) 31 </script> 32 </body> 33 </html>
1 //如果同一个元素同时绑定了单击事件和双击事件，那么就会造成冲突现象，比如我们双击此元素指向触发双击事件，但是也完全满足单击事件的条件，不但双击事件触发了，单击事件同样也会被触发，下面就通过代码实例介绍一下如何解决它们的冲突问题，代码如下: 2 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset=" utf-8"> 7 <meta name="author" content="http://www.softwhy.com/" /> 8 <title>Title</title> 9 <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 10 <script type="text/javascript"> 11 $(function(){ 12 var timer=null; 13 $("#bt").on("click",function(){ 14 clearTimeout(timer); 15 timer=setTimeout(function(){ 16 $("#thediv").append("单击事件触发"); 17 },300); 18 }) 19 20 $("#bt").on("dblclick",function(){ 21 clearTimeout(timer); 22 $("#thediv").append("双击事件触发"); 23 }) 24 }) 25 </script> 26 <body> 27 <div id="thediv"></div> 28 <input type="button" id="bt" value="查看效果"/> 29 </body> 30 </html> 31 32 33 //以上代码实现解决了单击和双击冲突的现象，单击或者双击按钮的时候只会有一个事 34 // 单双击 的时间 间隔 是300ms事件触发。 35 36 //实现原理:就是延迟单击事件处理函数中相关代码的执行（当然并不是说单击事件没有触发），也就是当第一次点击按钮的时候，如果300毫秒内没有点击第二次，那么就认为这是一次单击事件，然后执行相关的代码，如果300毫秒内又点击了第二次，那么就会取消定时间函数的执行，单击事件处理函数中的相关代码将不会被执行，只会执行双击事件处理函数中的代码。
事件对象event
event.preventDefault() 阻止默认事件
event.stopPropagation() 阻止冒泡
event.target 事件对象
实例 拖动面板
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-3.4.0.js"></script> 17 <script> 18 $("#title").mouseover(function () { 19 $(this).css("cursor","move") 20 }).mousedown(function (event) { 21 var start_x=event.screenX; 22 var start_y=event.screenY; 23 var parent_left=$(this).parent().offset().left; 24 var parent_top=$(this).parent().offset().top; 25 $(this).on("mousemove",function (e) { 26 var new_x=e.screenX; 27 var new_y=e.screenY; 28 var new_parent_x=parent_left+(new_x-start_x); 29 var new_parent_y=parent_top+(new_y-start_y); 30 $(this).parent().css("left",new_parent_x+"px"); 31 $(this).parent().css("top",new_parent_y+"px"); 32 }).mouseup(function () { 33 $(this).off("mousemove") 34 }) 35 }) 36 </script> 37 </body> 38 </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 </script> 140 </body> 141 </html>
3.5 动画效果
延迟动画 delay(时间)
$('a').mouseenter(function(){
$('div').delay(1000).show(2000);
})
1 语法： 2 3 $(selector).animate({params}, speed, callback); 4 作用：执行一组CSS属性的自定义动画。 5 6 第一个参数表示：要执行动画的CSS属性（必选） 7 8 第二个参数表示：执行动画时长（可选） 9 10 第三个参数表示：动画执行完后，立即执行的回调函数（可选） 11 12 代码如下： 13 14 <!DOCTYPE html> 15 <html> 16 <head lang="en"> 17 <meta charset="UTF-8"> 18 <title></title> 19 <style> 20 div { 21 position: absolute; 22 left: 20px; 23 top: 30px; 24 width: 100px; 25 height: 100px; 26 background-color: green; 27 } 28 </style> 29 <script src="jquery-3.3.1.js"></script> 30 <script> 31 jQuery(function () { 32 $("button").click(function () { 33 var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100}; 34 var json2 = { 35 "width": 100, 36 "height": 100, 37 "left": 100, 38 "top": 100, 39 "border-radius": 100, 40 "background-color": "red" 41 }; 42 43 //自定义动画 44 $("div").animate(json, 1000, function () { 45 $("div").animate(json2, 1000, function () { 46 alert("动画执行完毕！"); 47 }); 48 }); 49 50 }) 51 }) 52 </script> 53 </head> 54 <body> 55 <button>自定义动画</button> 56 <div></div> 57 </body> 58 </html>
1 $(selector).stop(true, false); 2 里面的两个参数，有不同的含义。 3 4 第一个参数： 5 6 true：后续动画不执行。 7 8 false：后续动画会执行。 9 10 第二个参数： 11 12 true：立即执行完成当前动画。 13 14 false：立即停止当前动画。 15 16 PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。 17 18 19 20 案例：鼠标悬停时，弹出下拉菜单（下拉时带动画） 21 22 <!DOCTYPE html> 23 <html> 24 <head lang="en"> 25 <meta charset="UTF-8"> 26 <title></title> 27 <style type="text/css"> 28 * { 29 margin: 0; 30 padding: 0; 31 } 32 33 ul { 34 list-style: none; 35 } 36 37 .wrap { 38 width: 330px; 39 height: 30px; 40 margin: 100px auto 0; 41 padding-left: 10px; 42 background-color: pink; 43 } 44 45 .wrap li { 46 background-color: green; 47 } 48 49 .wrap > ul > li { 50 float: left; 51 margin-right: 10px; 52 position: relative; 53 } 54 55 .wrap a { 56 display: block; 57 height: 30px; 58 width: 100px; 59 text-decoration: none; 60 color: #000; 61 line-height: 30px; 62 text-align: center; 63 } 64 65 .wrap li ul { 66 position: absolute; 67 top: 30px; 68 display: none; 69 } 70 </style> 71 <script src="jquery-3.3.1.js"></script> 72 <script> 73 //入口函数 74 $(document).ready(function () { 75 //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。 76 var jqli = $(".wrap>ul>li"); 77 78 //绑定事件 79 jqli.mouseenter(function () { 80 $(this).children("ul").stop().slideDown(1000); 81 }); 82 83 //绑定事件(移开隐藏) 84 jqli.mouseleave(function () { 85 $(this).children("ul").stop().slideUp(1000); 86 }); 87 }); 88 </script> 89 90 </head> 91 <body> 92 <div class="wrap"> 93 <ul> 94 <li> 95 <a href="javascript:void(0);">一级菜单1</a> 96 <ul> 97 <li><a href="javascript:void(0);">二级菜单2</a></li> 98 <li><a href="javascript:void(0);">二级菜单3</a></li> 99 <li><a href="javascript:void(0);">二级菜单4</a></li> 100 </ul> 101 </li> 102 <li> 103 <a href="javascript:void(0);">二级菜单1</a> 104 <ul> 105 <li><a href="javascript:void(0);">二级菜单2</a></li> 106 <li><a href="javascript:void(0);">二级菜单3</a></li> 107 <li><a href="javascript:void(0);">二级菜单4</a></li> 108 </ul> 109 </li> 110 <li> 111 <a href="javascript:void(0);">三级菜单1</a> 112 <ul> 113 <li><a href="javascript:void(0);">三级菜单2</a></li> 114 <li><a href="javascript:void(0);">三级菜单3</a></li> 115 <li><a href="javascript:void(0);">三级菜单4</a></li> 116 </ul> 117 </li> 118 </ul> 119 </div> 120 </body> 121 </html> 122 123 ps: 124 125 javascript:void(0); //跟javascript:;效果一样 126 上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。
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 ul{ 12 list-style-type: none; 13 } 14 .outer{ 15 margin:50px auto; 16 height:500px; 17 width:640px; 18 position:relative; 19 } 20 .img li{ 21 position:absolute; 22 left: 0; 23 top:0; 24 } 25 .num{ 26 position: absolute; 27 bottom:10px; 28 text-align: center; 29 width:100%; 30 } 31 .num li{ 32 display:inline-block; 33 height:20px; 34 width:20px; 35 background-color: gray; 36 color:white; 37 text-align: center; 38 line-height: 20px; 39 border-radius: 50%; 40 margin:5px; 41 } 42 .btn{ 43 position:absolute; 44 height:60px; 45 width:30px; 46 background-color: dimgrey; 47 color:white; 48 text-align: center; 49 line-height: 60px; 50 top:50%; 51 margin-top: -30px; 52 display: none; 53 } 54 .left-btn{ 55 left: 0; 56 } 57 .right-btn{ 58 right:0; 59 } 60 .outer:hover .btn{ 61 display:block; 62 } 63 .current{ 64 background-color: #cc0000!important; 65 } 66 67 </style> 68 </head> 69 <body> 70 <div class="outer"> 71 <ul class="img"> 72 <li><a><img src="1.JPEG"></a> </li> 73 <li><a><img src="2.jpg"></a> </li> 74 <li><a><img src="3.jpg"></a> </li> 75 <li><a><img src="4.jpg"></a> </li> 76 </ul> 77 <ul class="num"> 78 <li class="current">1</li> 79 <li>2</li> 80 <li>3</li> 81 <li>4</li> 82 </ul> 83 <div class="left-btn btn"><</div> 84 <div class="right-btn btn">></div> 85 </div> 86 <script src="jquery-3.4.0.js"></script> 87 <script> 88 $('.num li').mouseover(function () { 89 $(this).addClass('current').siblings().removeClass('current'); 90 var index=$(this).index(); 91 i=index; 92 $('.img li').eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000); 93 }); 94 var time=setInterval(move,1500); 95 var i=0; 96 function move() { 97 if (i==3) { 98 i=-1; 99 } 100 i++; 101 $('.num li').eq(i).addClass('current').siblings().removeClass('current'); 102 $('.img li').eq(i).stop().fadeIn(1500).siblings().stop().fadeOut(1000); 103 } 104 function movel(){ 105 if (i==0) { 106 i=4; 107 } 108 i--; 109 $('.num li').eq(i).addClass('current').siblings().removeClass('current'); 110 $('.img li').eq(i).stop().fadeIn(1500).siblings().stop().fadeOut(1000); 111 } 112 $('.outer').hover(function () { 113 clearInterval(time); 114 },function f() { 115 time=setInterval(move,1500); 116 }); 117 $('.left-btn').click(function () { 118 movel(); 119 }); 120 $('.right-btn').click(function () { 121 move(); 122 }); 123 </script> 124 </body> 125 </html>
实例 隐藏与显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p style="display: none">hello world</p> <input id="show" type="button" value="显示"> <input id="hide" type="button" value="隐藏"> <input id="toggle" type="button" value="toggle"> <script src="jquery-3.4.0.js"></script> <script> $("#show").click(function () { $("p").show(2000); }); $("#hide").click(function () { $("p").hide(1000); }); $("#toggle").click(function () { $("p").toggle(1000); }); </script> </body> </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 /** 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 <p>hello</p> 44 <button id="hide">隐藏</button> 45 <button id="show">显示</button> 46 <button id="toggle">隐藏/显示</button> 47 48 </body> 49 </html>
实例 淡入淡出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div" style="display:none ;width: 200px;height: 200px;background-color: rebeccapurple"></div> <input id="In" type="button" value="fadeIn"> <input id="out" type="button" value="fadeout"> <input id="toggle" type="button" value="fadetoggle"> <input id="fadeto" type="button" value="fadeto"> <script src="jquery-3.4.0.js"></script> <script> $("#In").click(function () { $("div").fadeIn(2000); }) $("#out").click(function () { $("div").fadeOut(1000); }) $("#toggle").click(function () { $("div").fadeToggle(1000); }); $("#fadeto").click(function () { $("div").fadeTo(1000,0.4); }); </script> </body> </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>
实例 滑动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.4.0.js"></script> <script> $(document).ready(function(){ $("#flipshow").click(function(){ $("#content").slideDown(1000); }); $("#fliphide").click(function(){ $("#content").slideUp(1000); }); $("#toggle").click(function(){ $("#content").slideToggle(1000); }) }); </script> <style> #flipshow,#content,#fliphide,#toggle{ padding: 5px; text-align: center; background-color: blueviolet; border:solid 1px red; } #content{ padding: 50px; display: none; } </style> </head> <body> <div id="flipshow">出现</div> <div id="fliphide">隐藏</div> <div id="toggle">toggle</div> <div id="content">helloworld</div> </body> </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 $("#flipshow").click(function(){ 10 $("#content").slideDown(1000); 11 }); 12 $("#fliphide").click(function(){ 13 $("#content").slideUp(1000); 14 }); 15 $("#toggle").click(function(){ 16 $("#content").slideToggle(1000); 17 }) 18 }); 19 </script> 20 <style> 21 #flipshow,#content,#fliphide,#toggle{ 22 padding: 5px; 23 text-align: center; 24 background-color: blueviolet; 25 border:solid 1px red; 26 27 } 28 #content{ 29 padding: 50px; 30 display: none; 31 } 32 </style> 33 </head> 34 <body> 35 36 <div id="flipshow">出现</div> 37 <div id="fliphide">隐藏</div> 38 <div id="toggle">toggle</div> 39 40 <div id="content">helloworld</div> 41 42 </body> 43 </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 9 $(document).ready(function(){ 10 $("button").click(function(){ 11 $("p").hide(1000,function(){ 12 alert('动画结束') 13 }) 14 15 // $("p").css('color','red').slideUp(1000).slideDown(2000) 16 }) 17 }); 18 </script> 19 </head> 20 <body> 21 <button>隐藏</button> 22 <p>helloworld helloworld helloworld</p> 23 24 </body> 25 </html>
3.6 扩展(插件机制)
- jquery.extend({}) //$直接调用函数
- jquery.fn.extend({}) //加了fn表示$加标签对象来调用函数
简单演示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <p>hello ppp</p> 9 <script src="jquery-3.4.0.js"></script> 10 <script> 11 // $.extend({ 12 // getmax:function (a,b) { 13 // return a<b?a:b 14 // } 15 // }); 16 // alert($.getmax(5,8)) 17 18 // $.fn.extend({ 19 // print:function () { 20 // console.log($(this).html()) 21 // } 22 // }); 23 // $("p").print(); 24 25 // f=function () { 26 // alert(123) 27 //}; 28 //f(); 29 //-------等同于---- 30 //(function (a) { 31 // alert(a) 32 //})(234); 33 34 num 35 (function ($) { 36 var num=13; 37 $.fn.extend({ 38 print:function () { 39 console.log($(this).html()) 40 } 41 }); 42 })(jQuery); 43 <!--可以加私有域（作用域）可保护内部变量不受外部干扰--> 44 $("p").print() 45 </script> 46 </body> 47 </html>
实例 商城菜单
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 width: 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 width: 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 width: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 </body> 256 </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 </script> 279 280 </body> 281 </html>
