一 jQuery
1 简介
jQuery是一个“写得更少，但做得更多”的轻量级JavaScript库。jQuery极大地简化了JavaScript编程。
- 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
- jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
- jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
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 对象
3 jQuery基本语法
$(selector).action()
二 jQuery选择器
http://jquery.cuishifeng.cn/index.html
1 基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
$("*").css("color","red").css("background-color","#8eb031");
$("#div2").css("color","red");
$(".div1").css("width","200px").css("background-color","#8eb031");
$("p").css("font-weight","700");
$(".div1,#div2").hide();
//防止文档在完全加载（就绪）之前运行jQuery代码
$(document).ready(function(){
--- jQuery functions go here ----
});
2 层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
空格：后代选择器
> :子代选择器
+ :毗邻，即下一个紧邻的元素
~ :
3 属性选择器
$('[id="div1"]') $('["alex="sb"][id]')
$("[class='div1']").hide();
$("[id='div2']").hide();
$("[alex='ss']").hide(); // 支持自定义属性选择
4 表单选择器
$("[type='text']")----->$(":text") 注意只适用于input标签
两种方式均表示：所有 type="text" 的 <input> 元素。
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的单行文本框
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域
$("input:checked") //所有选中的元素
$("select option:selected") //select中所有选中的option元素
三 jQuery筛选器
1 过滤筛选器
$("li").eq(2) // 列表中的第3个元素（index从0开始）。
$("li").first() // 列表中的第一个元素。
$("ul li").hasclass("test") // 查看指定的元素是否拥有test类。
2 查询筛选器
$("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
$("#td1").parentsUntil("#td2") //id为"#td1"元素到id为'#td2'之间所有的父级元素,掐头去尾
$("div").siblings() //所有的同级元素,不包括自己
3 实例
菜单隐藏与显示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript" src="jquery-3.1.1.js"></script> 7 <script> 8 function show(self) { 9 $(self).next().removeClass('hide'); 10 $(self).parent().siblings().children(".con").addClass('hide'); 11 } 12 </script> 13 <style> 14 *{ 15 margin: 0 auto; 16 } 17 18 .menu{ 19 float: left; 20 height: 600px; 21 background-color: #0081c2; 22 width: 20%; 23 } 24 25 .content{ 26 float: left; 27 height: 600px; 28 background-color: #9aaece; 29 width: 80%; 30 } 31 32 .title{ 33 line-height: 30px; 34 color: #fff; 35 background-color: #015e98; 36 padding-left: 10px; 37 border-bottom: solid 1px #3A557A; 38 } 39 40 .con div{ 41 padding-left: 13px; 42 } 43 44 .hide{ 45 display: none; 46 } 47 </style> 48 </head> 49 <body> 50 <div class="left"> 51 <div class="menu"> 52 <div class="item"> 53 <div class="title" onclick="show(this)">集群管理</div> 54 <div class="con"> 55 <div>集群管理</div> 56 <div>主机管理</div> 57 <div>虚拟机管理</div> 58 </div> 59 </div> 60 <div class="item"> 61 <div class="title" onclick="show(this)">视图管理</div> 62 <div class="con hide"> 63 <div>集群视图</div> 64 <div>主机视图</div> 65 <div>虚拟机视图</div> 66 </div> 67 </div> 68 <div class="item"> 69 <div class="title" onclick="show(this)">系统管理</div> 70 <div class="con hide"> 71 <div>用户管理</div> 72 <div>规则管理</div> 73 <div>系统设置</div> 74 </div> 75 </div> 76 </div> 77 </div> 78 <div class="content"></div> 79 </body> 80 </html>
四 jQuery属性
- attr（） // 返回或设置被选元素的属性值
- removeAttr（） // 从每一个匹配的元素中删除一个属性
- prop（） // 设置或返回匹配元素的属性值 select,check,radio标签用prop，其它用attr。
- removeProp（） // 用来删除由.prop()方法设置的属性集
$("img").attr("src");
$("img").attr({ src: "test.jpg", alt: "Test Image" });
$("img").removeAttr("src");
$("input[type='checkbox']").prop("checked");
五 jQuery中CSS类操作
- addClass() // 为每个匹配的元素添加指定的类名。
- removeClass() // 从所有匹配的元素中删除全部或者指定的类。
$("p").addClass("selected");
$("p").removeClass("selected");
六 jQuery中HTML代码/文本/值 操作
- html() // 获取第一个匹配元素的HTML内容。不加参数获取值，加参数设置值
- text() // 获取匹配元素中所有内容，不渲染。不加参数获取值，加参数设置值
- val() // 获得匹配元素的当前值。不加参数获取值，加参数设置值
七 jQuery位置操作
- offset() // 获取匹配元素距离文档top和left的距离。offset（）.top,offset().left
- position // 获取匹配元素相对父元素的距离（偏移）。
- scrollTop() // 获取匹配元素相对滚动条顶部的偏移。
- scrollLeft() // 获取匹配元素相对滚动条左侧的偏移。
八 jQuery尺寸操作
- height（） // 当前元素自身的高度
- width（） // 当前元素自身的宽度
- innerHeight（） // 自身高度 + padding
- innerWidth（） // 自身宽度 + margin
- outerHeight（） // 默认参数为false
- 参数为false时，自身高度 + padding + border
- 参数为true时，自身高度 + padding + border + margin
- outerWidth（） // 默认参数为false
- 参数为false时，自身宽度 + padding + border
- 参数为true时，自身宽度 + padding + border + margin
获取文档高度： $(document).height()
获取窗口高度: $(window).height()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript" src="jquery-3.1.1.js"></script> 7 </head> 8 <body> 9 <input type="button" value="全选" onclick="selectall()"> 10 <input type="button" value="取消" onclick="cancel()"> 11 <input type="button" value="反选" onclick="reverse()"> 12 <table border="1"> 13 <tr> 14 <td><input type="checkbox"></td> 15 <td>111111</td> 16 </tr> 17 <tr> 18 <td><input type="checkbox"></td> 19 <td>222222</td> 20 </tr> 21 <tr> 22 <td><input type="checkbox"></td> 23 <td>333333</td> 24 </tr> 25 <tr> 26 <td><input type="checkbox"></td> 27 <td>444444</td> 28 </tr> 29 </table> 30 <script> 31 function selectall() { 32 // obj = document.body; 33 // obj.a = 1 34 // obj.b = 2 35 // obj.attributes = { 'id':xx, '':''} 36 // obj.attributes.type = 123 37 // obj.a = 123; 38 // select,check,radio prop obj.checked = True 39 // <div alex='name'></div> 40 // $("table :checkbox").attr("checked",true) 41 $("table :checkbox").prop("checked",true) 42 } 43 44 function cancel() { 45 // $("table :checkbox").attr("checked",false); // 不成功 46 $("table :checkbox").prop("checked",false); 47 // $("table :checkbox").removeAttr("checked") 48 // $("table :checkbox").removeProp("checked") // 不成功 49 } 50 51 function reverse() { 52 $("table :checkbox").each(function () { 53 if ($(this).prop("checked")){ 54 $(this).prop("checked",false) 55 }else { 56 $(this).prop("checked",true) 57 } 58 }) 59 } 60 </script> 61 </body> 62 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript" src="jquery-3.1.1.js"></script> 7 <style> 8 *{ 9 margin: 0; 10 } 11 12 #div1{ 13 position: fixed; /*position固定住div1*/ 14 background-color: #cc3300; 15 height: 1000px; 16 width: 100%; 17 } 18 19 #div2{ 20 position: fixed; 21 background-color: #a2a2a2; 22 top: 0; 23 right: 0; 24 bottom: 0; 25 left: 0; 26 opacity: 0.7; 27 } 28 29 #div3{ 30 position: absolute; /*绝对定位*/ 31 height: 300px; 32 width: 200px; 33 background-color: brown; 34 top: 50%; 35 left: 50%; 36 margin-left: -100px; 37 margin-top: -150px; 38 } 39 40 .hide{ 41 display: none; 42 } 43 </style> 44 </head> 45 <body> 46 <div id="div1"> 47 <input type="button" value="点击" onclick="show()"> 48 </div> 49 <div id="div2" class="div hide"></div> 50 <div id="div3" class="div hide"> 51 <input type="button" value="确定" onclick="ok()"> 52 </div> 53 <script> 54 function show() { 55 $("#div2,#div3").removeClass("hide"); 56 } 57 function ok() { 58 $("#div2,#div3").addClass("hide"); 59 } 60 </script> 61 </body> 62 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript" src="jquery-3.1.1.js"></script> 7 <script> 8 function tab(self) { 9 var str=$(self).attr("xxx"); // 获取元素属性 10 $("#"+str).removeClass("hide").siblings().addClass("hide"); // 通过"#"+str字符串拼接得到关联的标签 11 $(self).addClass("current").siblings().removeClass("current"); 12 } 13 </script> 14 <style> 15 *{ 16 margin: 0; 17 padding: 0; 18 } 19 20 .tab{ 21 width: 60%; 22 margin: 0 auto; 23 } 24 .menu{ 25 line-height: 30px; 26 background-color: #9aaece; 27 } 28 29 .menu li{ 30 display: inline-block; 31 padding-left: 6px; 32 padding-right: 7px; 33 } 34 35 .content{ 36 height: 350px; 37 border: 1px solid #95b0dc; 38 background-color: #dfe7f2; 39 border-top: 1px solid #4ba575; 40 } 41 42 .current{ 43 color: #fff; 44 background-color: #3A557A; 45 border-bottom: 2px solid #4ba575; 46 } 47 48 .hide{ 49 display: none; 50 } 51 </style> 52 </head> 53 <body> 54 <div class="tab"> 55 <ul class="menu"> 56 <li xxx="con1" class="current" onclick="tab(this)">概要</li> 57 <li xxx="con2" onclick="tab(this)">存储池</li> 58 <li xxx="con3" onclick="tab(this)">操作日志</li> 59 </ul> 60 <div class="content"> 61 <div id="con1">内容一</div> 62 <div id="con2" class="hide">内容二</div> 63 <div id="con3" class="hide">内容三</div> 64 </div> 65 </div> 66 67 </body> 68 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript" src="jquery-3.1.1.js"></script> 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 <script> 23 24 function add(self){ 25 var $duplicate = $(self).parent().parent().clone(); 26 // find()方法:搜索所有与指定表达式匹配的元素 27 $duplicate.find('a[onclick="add(this);"]').attr('onclick',"removed(this)").children("").text("-"); 28 $duplicate.appendTo($(self).parent().parent().parent()); 29 30 } 31 function removed(self){ 32 33 $(self).parent().parent().remove() 34 35 } 36 37 </script> 38 </body> 39 </html>
面板拖动思路：
大盒子包含两个小盒子，标题栏和内容框。
（1）当鼠标滑动到标题栏时，鼠标光标变成可拖动样式；
（2）当鼠标按下时，获取鼠标当前横纵坐标位置，以及面板当前与文档左边和上边的距离；
（3）鼠标按下并移动时，获取鼠标新的横纵坐标位置；此时面板与文档左边和上边的距离为，面板与文档原来的距离加上鼠标横纵坐标的相对距离。通过修改CSS样式实时改变面板的位置。
（4）鼠标松开时取消“鼠标移动”事件监听，Bingo～
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script type="text/javascript" src="jquery-3.1.1.js"></script> 7 <style> 8 .outer{ 9 width: 400px; 10 position: absolute; 11 border: 1px solid #9e4959; 12 } 13 14 .title{ 15 height: 25px; 16 color: white; 17 background-color: #1c3e6d; 18 } 19 .content{ 20 height: 300px; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="outer"> 26 <div class="title">标题</div> 27 <div class="content"></div> 28 </div> 29 <script> 30 $(".title").mouseover(function () { 31 $(this).css("cursor","move") 32 }).mousedown(function (event) { 33 var start_x = event.screenX; 34 var start_y = event.screenY; 35 36 var parent_left = $(this).offset().left; 37 var parent_top = $(this).offset().top; 38 39 $(this).on("mousemove",function (new_event) { 40 var new_x = new_event.screenX; 41 var new_y = new_event.screenY; 42 43 var new_parent_left = parent_left + (new_x - start_x); 44 var new_parent_top = parent_top + (new_y - start_y); 45 46 $(this).parent().css("left",new_parent_left + "px"); 47 $(this).parent().css("top",new_parent_top + "px"); 48 }).mouseup(function () { 49 $(this).off("mousemove") 50 }) 51 52 }) 53 </script> 54 </body> 55 </html>