jQuery
Posted oliver.lee
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery相关的知识，希望对你有一定的参考价值。
一 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:markdown 在WordPress中使用jQuery代码片段