此文转至：https://www.cnblogs.com/suoning/p/5683047.html ,再次感谢博主分享！
一、简介
定义
jQuery创始人是美国John Resig，是优秀的Javascript框架；
jQuery是一个轻量级、快速简洁的javaScript库。源码戳这
jQuery对象
jQuery产生的对象时jQuery独有的，只能自己调用
书写规则
支持链式操作；
在变量前加"$"符号（var $variable = jQuery 对象）；
注：此规定并不是强制要求。
二.选择器
基本选择器、层级选择器、属性选择器 与CSS类似。
基本筛选器
$('li:first') //第一个元素 $('li:last') //最后一个元素 $("tr:even") //索引为偶数的元素，从 0 开始 $("tr:odd") //索引为奇数的元素，从 0 开始 $("tr:eq(1)") //给定索引值的元素 $("tr:gt(0)") //大于给定索引值的元素 $("tr:lt(2)") //小于给定索引值的元素 $(":focus") //当前获取焦点的元素 $(":animated") //正在执行动画效果的元素
内容选择器
$("div:contains('nick')") //包含nick文本的元素 $("td:empty") //不包含子元素或者文本的空元素 $("div:has(p)") //含有选择器所匹配的元素 $("td:parent") //含有子元素或者文本的元素
表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的单行文本框
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域
$("input:checked") //所有选中的元素
$("select option:selected") //select中所有选中的option元素
筛选器
过滤
$("p").eq(0) //当前操作中第N个jQuery对象,类似索引
$('li').first() //第一个元素
$('li').last() //最后一个元素
$(this).hasClass("test") //元素是否含有某个特定的类,返回布尔值
$('li').has('ul') //包含特定后代的元素
查找
$("div").children() //div中的每个子元素,第一层
$("div").find("span") //div中的包含的所有span元素,子子孙孙
$("p").next() //紧邻p元素后的一个同辈元素
$("p").nextAll() //p元素之后所有的同辈元素
$("#test").nextUntil("#test2") //id为"#test"元素之后到id为'#test2'之间所有的同辈元素,掐头去尾
$("p").prev() //紧邻p元素前的一个同辈元素
$("p").prevAll() //p元素之前所有的同辈元素
$("#test").prevUntil("#test2") //id为"#test"元素之前到id为'#test2'之间所有的同辈元素,掐头去尾
$("p").parent() //每个p元素的父元素
$("p").parents() //每个p元素的所有祖先元素,body,html
$("#test").parentsUntil("#test2") //id为"#test"元素到id为'#test2'之间所有的父级元素,掐头去尾
$("div").siblings() //所有的同辈元素,不包括自己
三、属性操作
基本属性操作
$("img").attr("src"); //返回文档中所有图像的src属性值
$("img").attr("src","test.jpg"); //设置所有图像的src属性
$("img").removeAttr("src"); //将文档中图像的src属性删除
$("input[type='checkbox']").prop("checked", true); //选中复选框
$("input[type='checkbox']").prop("checked", false);
$("img").removeProp("src"); //删除img的src属性
CSS类
$("p").addClass("selected"); //为p元素加上 'selected' 类
$("p").removeClass("selected"); //从p元素中删除 'selected' 类
$("p").toggleClass("selected"); //如果存在就删除,否则就添加
HTML代码/文本/值
$('p').html(); //返回p元素的html内容
$("p").html("Hello <b>nick</b>!"); //设置p元素的html内容
$('p').text(); //返回p元素的文本内容
$("p").text("nick"); //设置p元素的文本内容
$("input").val(); //获取文本框中的值
$("input").val("nick"); //设置文本框中的内容
四、CSS操作
样式
$("p").css("color"); //访问查看p元素的color属性
$("p").css("color","red"); //设置p元素的color属性为red
$("p").css({ "color": "red", "background": "yellow" }); //设置p元素的color为red，background属性为yellow（设置多个属性要用{}字典形式）
位置
$('p').offset() //元素在当前视口的相对偏移,Object {top: 122, left: 260}
$('p').offset().top
$('p').offset().left
$("p").position() //元素相对父元素的偏移,对可见元素有效，Object {top: 117, left: 250}
$(window).scrollTop() //获取滚轮滑的高度
$(window).scrollLeft() //获取滚轮滑的宽度
$(window).scrollTop('100') //设置滚轮滑的高度为100
尺寸
$("p").height(); //获取p元素的高度
$("p").width(); //获取p元素的宽度
$("p:first").innerHeight() //获取第一个匹配元素内部区域高度(包括补白、不包括边框)
$("p:first").innerWidth() //获取第一个匹配元素内部区域宽度(包括补白、不包括边框)
$("p:first").outerHeight() //匹配元素外部高度(默认包括补白和边框)
$("p:first").outerWidth() //匹配元素外部宽度(默认包括补白和边框)
$("p:first").outerHeight(true) //为true时包括边距
五、文档处理
内部插入
$("p").append("<b>nick</b>"); //每个p元素内后面追加内容
$("p").appendTo("div"); //p元素追加到div内后
$("p").prepend("<b>Hello</b>"); //每个p元素内前面追加内容
$("p").prependTo("div"); //p元素追加到div内前
外部插入
$("p").after("<b>nick</b>"); //每个p元素同级之后插入内容
$("p").before("<b>nick</b>"); //在每个p元素同级之前插入内容
$("p").insertAfter("#test"); //所有p元素插入到id为test元素的后面
$("p").insertBefore("#test"); //所有p元素插入到id为test元素的前面
替换
$("p").replaceWith("<b>Paragraph. </b>"); //将所有匹配的元素替换成指定的HTML或DOM元素
$("<b>Paragraph. </b>").replaceAll("p"); //用匹配的元素替换掉所有 selector匹配到的元素
删除
$("p").empty(); //删除匹配的元素集合中所有的子节点，不包括本身
$("p").remove(); //删除所有匹配的元素,包括本身
$("p").detach(); //删除所有匹配的元素(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)
复制
$("p").clone() //克隆元素并选中克隆的副本
$("p").clone(true) //布尔值指事件处理函数是否会被复制
六、事件
页面载入
当页面载入成功后再运行的函数事件
$(document).ready(function(){
do something...
});
//简写
$(function($) {
do something...
});
页面处理
//bind 为每个匹配元素绑定事件处理函数，绑定多个用{}。
$("p").bind("click", function(){
alert( $(this).text() );
});
$(menuF).bind({
"mouseover":function () {
$(menuS).parent().removeClass("hide");
},"mouseout":function () {
$(menuS).parent().addClass("hide");
}
});
$("p").one( "click", fun...) //one 绑定一个一次性的事件处理函数
$("p").unbind( "click" ) //解绑一个事件
页面委派
// 与bind 不同的是当时间发生时才去临时绑定。
$("p").delegate("click",function(){
do something...
});
$("p").undelegate(); //p元素删除由 delegate() 方法添加的所有事件
$("p").undelegate("click") //从p元素删除由 delegate() 方法添加的所有click事件
事件
$("p").click(); //单击事件
$("p").dblclick(); //双击事件
$("input[type=text]").focus() //元素获得焦点时,触发 focus 事件
$("input[type=text]").blur() //元素失去焦点时,触发 blur事件
$("button").mousedown()//当按下鼠标时触发事件
$("button").mouseup() //元素上放松鼠标按钮时触发事件
$("p").mousemove() //当鼠标指针在指定的元素中移动时触发事件
$("p").mouseover() //当鼠标指针位于元素上方时触发事件
$("p").mouseout() //当鼠标指针从元素上移开时触发事件
$(window).keydown() //当键盘或按钮被按下时触发事件
$(window).keypress() //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup() //当按钮被松开时触发事件
$(window).scroll() //当用户滚动时触发事件
$(window).resize() //当调整浏览器窗口的大小时触发事件
$("input[type='text']").change() //当元素的值发生改变时触发事件
$("input").select() //当input 元素中的文本被选择时触发事件
$("form").submit() //当提交表单时触发事件
$(window).unload() //用户离开页面时
(event object) 对象
所有的事件函数都可以传入event参数方便处理事件
$("p").click(function(event){
alert(event.type); //"click"
});
(evnet object)属性方法：
event.pageX //事件发生时，鼠标距离网页左上角的水平距离
event.pageY //事件发生时，鼠标距离网页左上角的垂直距离
event.type //事件的类型
event.which //按下了哪一个键
event.data //在事件对象上绑定数据，然后传入事件处理函数
event.target //事件针对的网页元素
event.preventDefault() //阻止事件的默认行为(比如点击链接，会自动打开新页面)
event.stopPropagation() //停止事件向上层元素冒泡
七、效果
基本
$("p").show() //显示隐藏的匹配元素
$("p").show("slow"); //参数表示速度,("slow","normal","fast"),也可为900毫秒
$("p").hide() //隐藏显示的元素
$("p").toggle(); //切换 显示/隐藏
滑动
$("p").slideDown("900"); //用900毫秒时间将段落滑下
$("p").slideUp("900"); //用900毫秒时间将段落滑上
$("p").slideToggle("900"); //用900毫秒时间将段落滑上，滑下
淡入淡出
$("p").fadeIn("900"); //用900毫秒时间将段落淡入
$("p").fadeOut("900"); //用900毫秒时间将段落淡出
$("p").fadeToggle("900"); //用900毫秒时间将段落淡入,淡出
$("p").fadeTo("slow", 0.6); //用900毫秒时间将段落的透明度调整到0.6
八、对象访问
$.trim() //去除字符串两端的空格
$.each() //遍历一个数组或对象，for循环
$.inArray() //返回一个值在数组中的索引位置，不存在返回-1
$.grep() //返回数组中符合某种标准的元素
$.extend() //将多个对象，合并到第一个对象
$.makeArray() //将对象转化为数组
$.type() //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等
$.isArray() //判断某个参数是否为数组
$.isEmptyObject() //判断某个对象是否为空(不含有任何属性)
$.isFunction() //判断某个参数是否为函数
$.isPlainObject() //判断某个参数是否为用"{}"或"new Object"建立的对象
$.support() //判断浏览器是否支持某个特性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <script src="../../jquery-1.12.4.js"></script> 10 <script> 11 li = [11,22,33]; 12 $.each(li,function (k,v) { 13 console.log(this); 14 console.log(k,v); 15 if (k == 1){ 16 return false; 17 } 18 }) 19 </script> 20 21 22 <script> 23 function myEach(obj,func) { 24 for (var i=0;i<obj.length;i++){ 25 var current = obj[i]; 26 var ret = func(i,current); 27 if (ret == false){ 28 break; 29 } 30 } 31 } 32 33 var li = [10,20,30]; 34 myEach(li,function (k,v) { 35 console.log(k,v); 36 return false; 37 }) 38 </script> 39 </body> 40 </html>
九、插件拓展机制
//方式一 jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } }); $("input[type=checkbox]").check(); $("input[type=radio]").uncheck();
//方式二
jQuery.extend({
min: function(a, b) { return a < b ? a : b; }, //三元运算
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); //2
jQuery.max(4,5); //5
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="title">111</div> 9 <div class="title">222</div> 10 11 <script src="../../jquery-1.12.4.js"></script> 12 <script> 13 jQuery.fn.extend({ 14 show1: function () { 15 var val = this.text(); 16 val = val + "sb"; 17 return val; 18 }, 19 show2: function () { 20 21 } 22 }); 23 var ret = $(".title").show1(); 24 console.log(ret); 25 26 27 jQuery.extend({ 28 s1: function (arg) { 29 var val = $(arg).text(); 30 return val + "sb"; 31 }, 32 s2: function () { 33 34 } 35 }); 36 var ret2 = $.s1(".title"); 37 console.log(ret2); 38 </script> 39 </body> 40 </html>
十、实例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .divH { 8 height: 1800px; 9 } 10 .divT { 11 50px; 12 height: 50px; 13 font-size: 23px; 14 background-color: #2F4F4F; 15 color: white; 16 position: fixed; 17 right: 18px; 18 bottom: 18px; 19 } 20 .divT:hover{ 21 cursor: pointer; 22 } 23 .hide { 24 display: none; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="divH"></div> 30 <div class="divT hide" onclick="ReturnTop();"><strong>返回顶部</strong></div> 31 32 <script src="../../jquery-1.12.4.js"></script> 33 <script> 34 window.onscroll = function () { 35 var current = $(window).scrollTop(); 36 if (current > 180){ 37 $(".divT").removeClass("hide"); 38 }else { 39 $(".divT").addClass("hide"); 40 } 41 }; 42 43 function ReturnTop() { 44 $(window).scrollTop(0); 45 } 46 </script> 47 </body> 48 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .menu{ 8 height: 600px; 9 30%; 10 background-color: #2F4F4F; 11 float: left; 12 } 13 .title{ 14 line-height: 50px; 15 color: #ddd; 16 } 17 .title:hover{ 18 cursor: pointer; 19 color: lightcyan; 20 font-size: 18px; 21 } 22 .hide{ 23 display: none; 24 } 25 </style> 26 </head> 27 28 <body> 29 <div class="outer"> 30 <div class="menu"> 31 <div class="item"> 32 <div class="title" onclick="Show(this);">菜单一</div> 33 <div class="con"> 34 <div>111</div> 35 <div>111</div> 36 <div>111</div> 37 </div> 38 </div> 39 <div class="item"> 40 <div class="title" onclick="Show(this);">菜单二</div> 41 <div class="con hide"> 42 <div>222</div> 43 <div>222</div> 44 <div>222</div> 45 </div> 46 </div> 47 <div class="item"> 48 <div class="title" onclick="Show(this);">菜单三</div> 49 <div class="con hide"> 50 <div>333</div> 51 <div>333</div> 52 <div>333</div> 53 </div> 54 </div> 55 </div> 56 </div> 57 58 <script src="../../jquery-1.12.4.js"></script> 59 <script> 60 function Show(self) { 61 $(self).next().removeClass("hide").parent().siblings().children(".con").addClass("hide"); 62 } 63 </script> 64 </body> 65 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 } 11 .tab_outer{ 12 margin: 0px auto; 13 60%; 14 } 15 .menu{ 16 background-color: #cccccc; 17 border: 1px solid #ccc; 18 line-height: 40px; 19 } 20 .menu li{ 21 display: inline-block; 22 color: white; 23 } 24 .menu li:hover { 25 cursor: pointer; 26 } 27 .menu a{ 28 padding: 11px; 29 } 30 .content{ 31 border: 1px solid #ccc; 32 height: 300px; 33 font-size: 30px; 34 } 35 .hide{ 36 display: none; 37 } 38 39 .current{ 40 background-color: #0099dd; 41 color: black; 42 } 43 </style> 44 </head> 45 <body> 46 <div class="tab_outer"> 47 <ul class="menu"> 48 <li xxx="c1" class="current" onclick="Tab(this);">菜单一</li> 49 <li xxx="c2" onclick="Tab(this);">菜单二</li> 50 <li xxx="c3" onclick="Tab(this);">菜单三</li> 51 </ul> 52 <div class="content"> 53 <div id="c1">内容一</div> 54 <div id="c2" class="hide">内容二</div> 55 <div id="c3" class="hide">内容三</div> 56 </div> 57 </div> 58 59 <script src="../../jquery-1.12.4.js"></script> 60 <script> 61 function Tab(self) { 62 $(self).addClass("current").siblings().removeClass("current"); 63 var x = "#" + $(self).attr("xxx"); 64 $(x).removeClass("hide").siblings().addClass("hide"); 65 } 66 </script> 67 </body> 68 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin: 0; 9 background-color: #dddddd; 10 } 11 .w{ 12 margin: 0 auto; 13 980px; 14 } 15 .pg-header{ 16 background-color: black; 17 color: white; 18 height: 48px; 19 } 20 .pg-body .menu{ 21 position: absolute; 22 left: 200px; 23 180px; 24 background-color: white; 25 float: left; 26 } 27 li { 28 list-style-type: none; 29 } 30 .pg-body .menu .active{ 31 background-color: #425a66; 32 color: white; 33 } 34 .pg-body .fixed{ 35 position: fixed; 36 top: 10px; 37 } 38 .pg-body .content{ 39 position: absolute; 40 left: 385px; 41 right: 200px; 42 background-color: white; 43 float: left; 44 } 45 .pg-body .content .item{ 46 height: 900px; 47 } 48 </style> 49 50 </head> 51 <body> 52 <div class="pg-header"> 53 <div class="w"></div> 54 </div> 55 <div class="pg-body"> 56 <div id="menu" class="menu"> 57 <ul> 58 <li menu="funcOne">第一章</li> 59 <li menu="funcTwo">第二章</li> 60 <li menu="funcStree">第三章</li> 61 </ul> 62 </div> 63 <div id="content" class="content"> 64 <div class="item" con="funcOne">床前明月管</div> 65 <div class="item" con="funcTwo">疑是地上霜</div> 66 <div class="item" con="funcStree" style="height: 100px">我是郭德纲</div> 67 </div> 68 </div> 69 70 <script src="../../jquery-1.12.4.js"></script> 71 <script> 72 window.onscroll = function () { 73 var onTop = $(window).scrollTop(); 74 if (onTop >= 48){ 75 $("#menu").addClass("fixed"); 76 }else { 77 $("#menu").removeClass("fixed"); 78 } 79 80 var flag = false; 81 $(".item").each(function () { 82 var topH = $(this).offset().top; 83 var HH = $(this).height() + topH; 84 var wH = $(window).height(); 85 86 if ((wH + onTop) == HH){ 87 $("ul .active").removeClass("active"); 88 $("li:last").addClass("active"); 89 flag = true; 90 return 91 } 92 if (flag){ 93 return 94 } 95 96 var menuCon = $(this).attr("con"); 97 if ((topH < onTop) && (onTop < HH)){ 98 $("ul [menu='" + menuCon +"']").addClass("active"); 99 }else { 100 $("ul [menu='" + menuCon +"']").removeClass("active"); 101 } 102 }) 103 } 104 </script> 105 </body> 106 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <button id="in">fadein</button> 9 <button id="out">fadeout</button> 10 <button id="toggle">fadetoggle</button> 11 <button id="fadeto">fadeto</button> 12 13 <div id="id1" style="display:none; 80px;height: 80px;background-color: blueviolet"></div> 14 <div id="id2" style="display:none; 80px;height: 80px;background-color: orangered "></div> 15 <div id="id3" style="display:none; 80px;height: 80px;background-color: darkgreen "></div> 16 17 <script src="../../jquery-1.12.4.js"></script> 18 <script> 19 $(document).ready(function(){ 20 $("#in").click(function(){ 21 $("#id1").fadeIn(1000); 22 $("#id2").fadeIn(1000); 23 $("#id3").fadeIn(1000); 24 25 }); 26 $("#out").click(function(){ 27 $("#id1").fadeOut(1000); 28 $("#id2").fadeOut(1000); 29 $("#id3").fadeOut(1000); 30 31 }); 32 $("#toggle").click(function(){ 33 $("#id1").fadeToggle(1000); 34 $("#id2").fadeToggle(1000); 35 $("#id3").fadeToggle(1000); 36 37 }); 38 $("#fadeto").click(function(){ 39 $("#id1").fadeTo(1000,0.4); 40 $("#id2").fadeTo(1000,0.5); 41 $("#id3").fadeTo(1000,0); 42 }); 43 }); 44 </script> 45 </body> 46 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #flipshow,#content,#fliphide,#toggle{ 8 padding: 5px; 9 text-align: center; 10 background-color: blueviolet; 11 border:solid 1px red; 12 13 } 14 #content{ 15 padding: 50px; 16 display: none; 17 } 18 </style> 19 </head> 20 <body> 21 22 <div id="flipshow">出现</div> 23 <div id="fliphide">隐藏</div> 24 <div id="toggle">toggle</div> 25 <div id="content">helloworld</div> 26 27 <script src="../../jquery-1.12.4.js"></script> 28 <script> 29 $(document).ready(function(){ 30 $("#flipshow").click(function(){ 31 $("#content").slideDown(1000); 32 }); 33 $("#fliphide").click(function(){ 34 $("#content").slideUp(1000); 35 }); 36 $("#toggle").click(function(){ 37 $("#content").slideToggle(1000); 38 }) 39 }); 40 </script> 41 42 </body> 43 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--1 隐藏与显示--> 9 <!--2 淡入淡出--> 10 <!--3 滑动--> 11 <!--4 效果-回调:每一个动画执行完毕之后所能执行的函数方法或者所能做的一件事--> 12 13 <p>hello</p> 14 <button id="hide">隐藏</button> 15 <button id="show">显示</button> 16 <button id="toggle">隐藏/显示</button> 17 18 <script src="../../jquery-1.12.4.js"></script> 19 <script> 20 21 $(document).ready(function(){ 22 $("#hide").click(function(){ 23 $("p").hide(1000); 24 }); 25 $("#show").click(function(){ 26 $("p").show(1000); 27 }); 28 29 //用于切换被选元素的 hide() 与 show() 方法。 30 $("#toggle").click(function(){ 31 $("p").toggle(2000); 32 }); 33 }); 34 35 </script> 36 </body> 37 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="outer"> 9 <div class="section"> 10 <div class="icons" style="display: inline-block"> 11 <a onclick="Add(this);"><button>+</button></a> 12 </div> 13 <div class="inputs" style="display: inline-block"> 14 <input type="checkbox"> 15 <input type="text" value="IP"> 16 </div> 17 </div> 18 </div> 19 20 <script src="../../jquery-1.12.4.js"></script> 21 <script> 22 function Add(self) { 23 $(self).parentsUntil("outer").clone().find("a").html("<button>-</button>").attr("onclick","Remove(this);").end().eq(1).appendTo(".outer"); 24 } 25 function Remove(self) { 26 $(self).parentsUntil("outer").eq(1).remove(); 27 } 28 </script> 29 </body> 30 </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 9 <style> 10 *{ 11 margin: 0; 12 padding: 0; 13 } 14 .outer{ 15 position:relative; 16 350px; 17 height:350px; 18 border:1px solid black; 19 } 20 .outer .small-box{ 21 position: relative; 22 z-index: 1; 23 } 24 .outer .small-box .mark{ 25 position: absolute; 26 display: block; 27 350px; 28 height: 350px; 29 background-color: #fff; 30 filter: alpha(opacity=0); 31 opacity: 0; 32 z-index: 10; 33 } 34 .outer .small-box .float-box{ 35 display: none; 36 175px; 37 height: 175px; 38 position: absolute; 39 background: #DAEEFC; 40 filter: alpha(opacity=40); 41 opacity: 0.4; 42 } 43 .outer .big-box{ 44 position: absolute; 45 top: 0; 46 left: 351px; 47 350px; 48 height: 350px; 49 overflow: hidden; 50 border: 1px solid transparent; 51 z-index: 1; 52 } 53 .outer .big-box img{ 54 position: absolute; 55 z-index: 5 56 } 57 </style> 58 </head> 59 <body> 60 61 <div class="outer"> 62 <div class="small-box"> 63 <div class="mark"></div> 64 <div class="float-box" ></div> 65 <img width="350" height="350" src="../../css/1.jpg"> 66 </div> 67 <div class="big-box"> 68 <img width="900px" height="900px" src="../../css/1.jpg" > 69 </div> 70 </div> 71 72 73 <script src="../../jquery-1.12.4.js"></script> 74 75 <script> 76 $(function(){ 77 $(".mark").mouseover(function () { 78 $(".float-box").css("display","block"); 79 $(".big-box").css("display","block"); 80 }); 81 82 $(".mark").mouseout(function () { 83 $(".float-box").css("display","none"); 84 $(".big-box").css("display","none"); 85 }); 86 87 88 89 $(".mark").mousemove(function (e) { 90 91 var _event = e || window.event; //兼容多个浏览器的event参数模式 92 93 var float_box_width = $(".float-box")[0].offsetWidth; 94 var float_box_height = $(".float-box")[0].offsetHeight;//175,175 95 96 97 var float_box_width_half = float_box_width / 2; 98 var float_box_height_half = float_box_height/ 2;//87.5,87.5 99 100 101 var small_box_width = $(".outer")[0].offsetWidth; 102 var small_box_height = $(".outer")[0].offsetHeight;//360,360 103 104 105 var mouse_left = _event.clientX - float_box_width_half; 106 var mouse_top = _event.clientY - float_box_height_half; 107 108 109 if (mouse_left < 0) { 110 mouse_left = 0; 111 } else if (mouse_left > small_box_width - float_box_width) { 112 mouse_left = small_box_width - float_box_width; 113 } 114 if (mouse_top < 0) { 115 mouse_top = 0; 116 } else if (mouse_top > small_box_height - float_box_height) { 117 mouse_top = small_box_height - float_box_height; 118 } 119 120 $(".float-box").css("left",mouse_left + "px"); 121 $(".float-box").css("top",mouse_top + "px"); 122 123 124 var percentX = ($(".big-box img")[0].offsetWidth - $(".big-box")[0].offsetWidth) / (small_box_width - float_box_width); 125 var percentY = ($(".big-box img")[0].offsetHeight - $(".big-box")[0].offsetHeight) / (small_box_height - float_box_height); 126 console.log($(".big-box img")[0].offsetWidth,$(".big-box")[0].offsetWidth,small_box_width,float_box_width) 127 console.log(percentX,percentY) 128 $(".big-box img").css("left",-percentX * mouse_left + "px"); 129 $(".big-box img").css("top",-percentY * mouse_top + "px") 130 131 }) 132 }) 133 134 </script> 135 </body> 136 </html>
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 <strong>标题</strong> 11 </div> 12 <div style="height: 300px;"> 13 内容 14 </div> 15 </div> 16 <script type="text/javascript" src="../../jquery-1.12.4.js"></script> 17 <script> 18 $(function () { 19 $('#title').mouseover(function () { 20 $(this).css('cursor','move'); 21 }).mousedown(function (e) { 22 var _event = e || widows.event; 23 var ord_x = _event.clientX; 24 var ord_y = _event.clientY; 25 26 var parent_left = $(this).parent().offset().left; 27 var parent_top = $(this).parent().offset().top; 28 29 $(this).bind('mousemove',function (e) { 30 var _new_event = e || window.event; 31 var new_x = _new_event.clientX; 32 var new_y = _new_event.clientY; 33 34 var x = parent_left + (new_x - ord_x); 35 var y = parent_top + (new_y - ord_y); 36 37 $(this).parent().css('left',x+'px'); 38 $(this).parent().css('top',y+'px'); 39 }) 40 }).mouseup(function () { 41 $(this).unbind('mousemove'); 42 }); 43 }) 44 </script> 45 </body> 46 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .shade{ 8 position: fixed; 9 left: 0; 10 top: 0; 11 right: 0; 12 bottom: 0; 13 background: rgba(0,0,0,.6) ; 14 z-index: 20; 15 } 16 .modal{ 17 position: fixed; 18 left: 50%; 19 top: 50%; 20 height: 300px; 21 400px; 22 margin-top: -150px; 23 margin-left: -200px; 24 z-index: 30; 25 border: 1px solid #ddd; 26 background-color: white; 27 } 28 .hide{ 29 display: none; 30 } 31 .modal form { 32 position: fixed; 33 left: 50%; 34 top: 50%; 35 height: 200px; 36 229px; 37 border: 1px; 38 margin-left: -115px; 39 margin-top: -100px; 40 } 41 .modal form p { 42 float: right; 43 margin-top: 12px; 44 } 45 .modal form span { 46 float: right; 47 display: inline-block; 48 height: 18px; 49 170px; 50 background-color: #FFEBEB; 51 text-align: center; 52 border: 1px solid #ffbdbe; 53 color: #e4393c; 54 font-size: 14px; 55 visibility: hidden; 56 } 57 .modal form [type="button"] { 58 position: absolute; 59 bottom: -30px; 60 left: 115px; 61 } 62 .modal form [value="提交"]{ 63 left: 50px; 64 } 65 </style> 66 </head> 67 <body> 68 <div style=" 300px; margin: 0 auto"> 69 <input type="button" value="添加主机" onclick="return Add();" /> 70 <table style="border: 2px solid #F5F5F5; 300px;"> 71 <thead> 72 <tr> 73 <th >主机名</th> 74 <th >IP</th> 75 <th >端口</th> 76 <th>操作</th> 77 </tr> 78 </thead> 79 <tbody> 80 <tr> 81 <td target="host">c1.com</td> 82 <td target="ip">1.1.1.1</td> 83 <td target="port">8888</td> 84 <td onclick="Edit(this);">Edit</td> 85 </tr> 86 <tr> 87 <td target="host">c2.com</td> 88 <td target="ip">1.1.1.1</td> 89 <td target="port">8888</td> 90 <td onclick="Edit(this);">Edit</td> 91 </tr> 92 <tr> 93 <td target="host">c3.com</td> 94 <td target="ip">1.1.1.1</td> 95 <td target="port">8888</td> 96 <td onclick="Edit(this);">Edit</td> 97 </tr> 98 <tr> 99 <td target="host">.com</td> 100 <td target="ip">1.1.1.1</td> 101 <td target="port">8888</td> 102 <td onclick="Edit(this);">Edit</td> 103 </tr> 104 </tbody> 105 </table> 106 </div> 107 <div class="shade hide"></div> 108 <div class="modal hide"> 109 <form action="" method="get"> 110 <p>主机名:<input type="text" id="host" name="host"><br><span></span></p> 111 <p>IP地址:<input type="text" id='ip' name="ip"><br><span></span></p> 112 <p>端口号:<input type="text" id='port' name="port"><br><span></span><br></p> 113 <input type="button" value="提交" onclick="return SubmitForm();"> 114 <input type="button" value="取消" onclick="HideModal();"> 115 </form> 116 </div> 117 118 <script src="../../jquery-1.12.4.js"></script> 119 <script> 120 $(function () { 121 $("tr:even").css("background-color","#f5f5f5"); 122 }); 123 function Edit(ths) { 124 $(".shade,.modal").removeClass("hide"); 125 prevList = $(ths).prevAll(); 126 prevList.each(function () { 127 var text = $(this).text(); 128 var target = $(this).attr("target"); 129 $("#"+target).val(text); 130 }); 131 } 132 function HideModal() { 133 $(".shade,.modal").addClass("hide"); 134 $(".modal").find("input[type='text']").val(""); 135 Addd = false; 136 } 137 function SubmitForm() { 138 var flag = Detection(); 139 140 try { 141 if (Addd && flag){ 142 $("tbody").append($("tr").last().clone()); 143 $(".modal").find("input[type='text']").each(function () { 144 var value = $(this).val(); 145 var name = $(this).attr("name"); 146 ($("tr").last().children()).each(function () { 147 if ($(this).attr("target") == name){ 148 $(this).text(value); 149 return 150 } 151 } 152 )}); 153 Addd = false; 154 HideModal(); 155 return false; 156 } 157 }catch (e){} 158 159 160 if (flag){ 161 $(".modal").find("input[type='text']").each(function () { 162 var value = $(this).val(); 163 var name = $(this).attr("name"); 164 $(prevList).each(function () { 165 if ($(this).attr("target") == name){ 166 $(this).text(value); 167 return 168 } 169 } 170 )}); 171 $(".modal,.shade").addClass("hide"); 172 HideModal(); 173 } 174 return flag; 175 } 176 177 178 function Detection() { 179 var flag = true; 180 $(".modal").find("input[type='text']").each(function () { 181 var value = $(this).val(); 182 if (value.length == 0){ 183 $(this).next().next().css("visibility","visible").text("亲，不能为空"); 184 flag = false; 185 return false; 186 }else { 187 $(this).next().next().css("visibility","hidden").text(""); 188 } 189 190 if ($(this).attr('name') == "host"){ 191 var r = /(.com)$/; 192 if (r.test(value) == false){ 193 $(this).next().next().css("visibility","visible").text("主机名必须以.com结尾"); 194 flag = false; 195 return false; 196 } 197 }else if ($(this).attr('name') == "ip"){ 198 var r2 = /^(([0-2]?[0-9][0-9]?).){3}([0-2]?[0-9][0-9]?)$/; 199 if (r2.test(value) == false){ 200 $(this).next().next().css("visibility","visible").text("ip 地址格式有误"); 201 flag = false; 202 return false; 203 } 204 }else if ($(this).attr('name') == "port"){ 205 var r3 = /^([0-9]{1,5})$/; 206 if ((r3.test(value) == false) || (value > 65535)){ 207 $(this).next().next().css("visibility","visible").text("端口必须为0-65535"); 208 flag = false; 209 return false; 210 } 211 }else { 212 $(this).next().next().css("visibility","hidden").text(""); 213 } 214 }); 215 return flag; 216 } 217 218 function Add() { 219 Addd = true; 220 $(".shade,.modal").removeClass("hide"); 221 } 222 </script> 223 </body> 224 </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 ul{ 12 list-style: none; 13 } 14 .out{ 15 730px; 16 height: 454px; 17 margin: 50px auto; 18 position: relative; 19 } 20 .out .img li{ 21 position: absolute; 22 left: 0; 23 top: 0; 24 } 25 .out .num{ 26 position: absolute; 27 left:0; 28 bottom: 20px; 29 text-align: center; 30 font-size: 0; 31 100%; 32 } 33 .out .btn{ 34 position: absolute; 35 top:50%; 36 margin-top: -30px; 37 30px; 38 height: 60px; 39 background-color: aliceblue; 40 color: black; 41 text-align: center; 42 line-height: 60px; 43 font-size: 40px; 44 display: none; 45 } 46 .out .num li{ 47 20px; 48 height: 20px; 49 background-color: black; 50 color: #fff; 51 text-align: center; 52 line-height: 20px; 53 border-radius: 60%; 54 display: inline; 55 font-size: 18px; 56 margin: 0 10px; 57 cursor: pointer; 58 } 59 .out .num li.active{ 60 background-color: red; 61 } 62 .out .left{ 63 left: 0; 64 } 65 .out .right{ 66 right: 0; 67 } 68 .out:hover .btn{ 69 display: block; 70 color: white; 71 font-weight: 900; 72 background-color: black; 73 opacity: 0.8; 74 cursor: pointer; 75 } 76 .out img { 77 height: 100%; 78 100%; 79 } 80 </style> 81 </head> 82 <body> 83 <div class="out"> 84 <ul class="img"> 85 <li><a href="#"><img src="images/1.jpg" alt=""></a></li> 86 <li><a href="#"><img src="images/2.jpg" alt=""></a></li> 87 <li><a href="#"><img src="images/3.jpg" alt=""></a></li> 88 <li><a href="#"><img src="images/4.jpg" alt=""></a></li> 89 <li><a href="#"><img src="images/5.jpg" alt=""></a></li> 90 </ul> 91 92 <ul class="num"> 93 <!--<li class="active">1</li>--> 94 <!--<li>2</li>--> 95 <!--<li>3</li>--> 96 <!--<li>4</li>--> 97 <!--<li>5</li>--> 98 </ul> 99 100 <div class="left btn"><</div> 101 <div class="right btn">></div> 102 103 </div> 104 105 <script src="../../jquery-1.12.4.js"></script> 106 <script> 107 108 $(function(){ 109 var size=$(".img li").size(); 110 for (var i= 1;i<=size;i++){ 111 var li="<li>"+i+"</li>"; 112 $(".num").append(li); 113 } 114 $(".num li").eq(0).addClass("active"); 115 116 117 $(".num li").mouseover(function(){ 118 $(this).addClass("active").siblings().removeClass("active"); 119 var index=$(this).index(); 120 i=index; 121 $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000); 122 }); 123 124 125 i=0; 126 var t=setInterval(move,1500); 127 128 function move(){ 129 i++; 130 if(i==size){ 131 i=0; 132 } 133 $(".num li").eq(i).addClass("active").siblings().removeClass("active"); 134 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); 135 } 136 137 function moveL(){ 138 i--; 139 if(i==-1){ 140 i=size-1; 141 } 142 $(".num li").eq(i).addClass("active").siblings().removeClass("active"); 143 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); 144 } 145 146 $(".out").hover(function(){ 147 clearInterval(t); 148 },function(){ 149 t=setInterval(move,1500); 150 }); 151 152 $(".out .right").click(function(){ 153 move() 154 }); 155 $(".out .left").click(function(){ 156 moveL() 157 }) 158 159 }); 160 </script> 161 162 </body> 163 </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="../../jquery-1.12.4.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>