标签：主机 window 字符串 outer 隐藏 系统管理 type word 获取值
jQuery是一个“写得更少，但做得更多”的轻量级JavaScript库。jQuery极大地简化了JavaScript编程。
比如：
$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象 var variable = DOM 对象
$(selector).action()
http://jquery.cuishifeng.cn/index.html
$("*") $("#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 ----
});
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
空格：后代选择器
> :子代选择器
+ :毗邻，即下一个紧邻的元素
~ :
$(‘[id="div1"]‘) $(‘["alex="sb"][id]‘)
$("[class=‘div1‘]").hide();
$("[id=‘div2‘]").hide();
$("[alex=‘ss‘]").hide(); // 支持自定义属性选择
$("[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元素
$("li").eq(2) // 列表中的第3个元素（index从0开始）。
$("li").first() // 列表中的第一个元素。
$("ul li").hasclass("test") // 查看指定的元素是否拥有test类。
$("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() //所有的同级元素,不包括自己
菜单隐藏与显示
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>
$("img").attr("src");
$("img").attr({ src: "test.jpg", alt: "Test Image" });
$("img").removeAttr("src");
$("input[type=‘checkbox‘]").prop("checked");
$("p").addClass("selected");
$("p").removeClass("selected");
获取文档高度： $(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>
标签：主机 window 字符串 outer 隐藏 系统管理 type word 获取值
原文地址：http://www.cnblogs.com/pyramid1001/p/6063665.html
