一 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();
比如：
意思是指：获取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>View Code
四 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>Tab标签切换
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>clone方法
面板拖动思路：
大盒子包含两个小盒子，标题栏和内容框。
（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>面板拖动
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
