jQuery基础

最近看了《jQuery实战第二版》有所得，写下这篇随笔，这篇随笔主要介绍jQuery中的常用功能。

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

1.CSS3 选择器

**jQuery支持的CSS选择器**
选择器	例子	例子描述
*	*	选择所有元素
element	p	选择所有 <p> 元素
element element	div p	选择 <div> 元素内部的所有 <p> 元素
element>element	div>p	选择父元素为 <div> 元素的直接子元素为 <p>的所有元素，隔一层的都不是
element+element	div+p	选择紧接在 <div> 元素之后的第一个兄弟 <p> 元素
element~element	div~p	选择紧接在 <div> 元素之后的所有兄弟 <p> 元素
.class	.hua	选择 class="hua" 的所有元素
#id	#hua	选择 id="hua" 的所有元素
[attribute]	a[src]	选择带有src 属性所有a元素
[attribute=value]	a[src="hua"]	选择带有src="hua" 属性所有a元素
[attribute!=value]	a[src!="hua"]	选择带有src 属性不等于 "hua" 所有a元素
[attribute^=value]	a[src^="hua"]	选择带有src 属性以 "hua" 开头所有a元素
[attribute$=value]	a[src$="hua"]	选择带有src 属性以 "hua" 结尾所有a元素
[attribute*=value]	a[src*="hua"]	选择带有src 属性包含单词 "hua" 所有a元素

2.jQuery支持的位置选择器

jQuery支持的位置选择器
选择器	例子	例子描述
:first	li a:first	返回列表后代子节点的第一个a元素
:last	li a:last	返回列表后代子节点的最后一个a元素
:first-child	li:first-child	返回列表的第一个li列表项
:last-child	li:last-child	返回列表的最后一个li列表项
:only-child	li:only-child	返回所有没有兄弟节点的li元素
:nth-child(n)	li:nth-child(2)	返回列表中的第二个列表项
:nth-child(even\|odd)	li:nth-child(even)	返回列表中偶数项
:nth-child(Xn+Y)	li:nth-child(2n+1)	返回列表中能被五整除的下一项
:even	li:even	返回列表的偶数项
:odd	li:odd	返回列表的基数项
:eq(n)	li:eq(n)	返回列表的第n个元素，（n 从 0 开始）
:gt(n)	li:gt(n)	返回列表的第n个之后的元素
:lt(n)	li:lt(n)	返回列表的第n个之前的元素

3.jQuery支持的自定义选择器

jQuery自定义选择器
选择器	描述
:animated	选择处于动画的元素
:button	选择按钮元素
:checkbox	选择复选框元素
:checked	选择处于选择状态的复选框或者单选按钮
:contains(text)	选择包文本text的元素
:disabled	选择禁用的元素
:enabled	选择启用的元素
:file	选择文件输入元素
:has(selector)	选择至少包含一个指定选择元素的元素
:header	选择标题元素
:hidden	选择隐藏的元素
:image	选择图片元素
:input	选择表单元素
:not(selector)	选择不匹配指定选择器的元素
:parent	选择有子节点的元素
:password	选择口令元素
:radio	选择单选框元素
:reset	选择重置按钮元素
:selected	选择处于选择状态的元素
:submit	选择提交按钮元素
:text	选择文本输入框元素
:visible	选择可见元素

4.jQuery中常用的功能

4.1隐藏、显示、切换

hide() 和 show() 方法来隐藏和显示 HTML 元素， toggle() 方法来切换 hide() 和 show() 方法

$("p").hide();
$("p").show();
$("p").toggle();

4.2获取内容html(),text(),val()

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

$("#test").html()
$("#test").text()
$("input").val()

4.3获取属性---attr()

$("#ahref").attr("href")

4.4给元素添加内容

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

$("div").append("important");
$("div").prepend("important");
$("div").before("important");
$("div").after("important");

4.5删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

$("div").remove()
$("div").empty()

4.6CSS 操作

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性$("div").addClass("important");

$("div").removeClass("important");
$("div").toggleClass("important");
$("div").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});

4.7尺寸元素

width()- 设置或返回元素的宽度（不包括内边距、边框或外边距）
height()- 设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth()- 返回元素的宽度（包括内边距）
innerHeight()- 返回元素的高度（包括内边距）
outerWidth()- 返回元素的宽度（包括内边距和边框）
outerHeight()- 返回元素的高度（包括内边距和边框）

4.8遍历

jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。
这种移动被称为对 DOM 进行遍历。

4.8.1祖先的遍历：祖先是父、祖父或曾祖父等等

parent() - 返回被选元素的直接父元素。
parents()- 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>
parentsUntil()- 返回介于两个给定元素之间的所有祖先元素。
```
$("span").parentsUntil("div");
```
closest([selector])- 返回指定元素最近的祖先元素，有可能是祖先的祖先元素

4.8.2后代的遍历：后代是子、孙、曾孙等等

children() - 返回被选元素的所有直接子元素
find() - 回被选元素的后代元素，一路向下直到最后一个后代

4.8.3同袍的遍历：同胞拥有相同的父元素。

siblings() - 返回被选元素的所有同胞元素
next() - 返回被选元素的下一个同胞元素。
nextAll() - 返回被选元素的所有跟随的同胞元素。
nextUntil() - 返回介于两个给定参数之间的所有跟随的同胞元素。
prev() - 返回的是前面的同胞元素
prevAll()
prevUntil()

4.8.4遍历方法

map() - 转换包装集中的元素，.map(callback(index,domElement))

var allIds=$("div").map(function(){
    return (this.id=underfined) ? null : this.id
}).get();//页面上所有的div元素的id值收集到一个数组中

each() - 遍历包装集中的元素。

$("div").each(function(){
     alert(this.id)
});

grep() - 按照某种条件来过滤数组

var nums = [1,2,3,4,"jasonhua",5]
nums = $.grep(nums, function (num, index) {
    // num = 数组元素的当前值  
    // index = 当前值的下标
    return isNaN(num);
});
console.log(nums); //结果为： ["jasonhua"]
nums = $.map(nums, function (num, index) {
    //和$.grep() 的区别
    //return isNaN,得到结果为：[true, true]
    return isNaN(num) ? num : null;
});

4.9基本的过滤器

first() - 返回被选元素的首个元素。
last() - 返回被选元素的最后一个元素。
eq() - 返回被选元素中带有指定索引号的元素。索引号从 0 开始
filter() - 匹配的元素会被返回
not() - 返回不匹配标准的所有元素。与 filter() 相反。

$("div p").first();
$("div p").last();
$("p").eq(1);
$("p").filter(".intro");
$("p").not(".intro");

4.10ajax

AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。

$.ajax({
    type: 'POST',
    contentType: "application/json", //必须有
    dataType: "json", //表示返回值类型，不必须
    url: $("#form1").data("post-url"),
    data: JSON.stringify(param),    //{ name: "JasonHua", location: "上海" }
    success: function (data) {
        alert(data.message);
    }
});

4.11绑定事件

$("#postButton").on("click", function () {
    alert("hello!");
});

4.12数组和对象

var aArray = [];
aArray.push(1);
aArray.push(2);
aArray.push(3);
console.log(aArray) //输出 [1, 2, 3]
aArray.pop(2);  //按索引弹出数据
console.log(aArray) //输出 [1, 2]

var aDic = new Object();
aDic["a"] = "a";
aDic["a"] = "a1";
console.log(aDic) //输出 Object {a: "a1"}

4.13JSON的转换

var aArray = [];
aArray.push(1);
aArray.push(2);
aArray.push(3);
JSON.stringify(aArray); //输出  "[1,2,3]"
JSON.parse("[1,2,3]")   //输出  [1, 2, 3]

var aDic = new Object();
aDic["a"] = "a";
aDic["a1"] = "a1";
JSON.stringify(aDic);               //输出  "{"a":"a","a1":"a1"}"
JSON.parse('{"a":"a","a1":"a1"}')   //输出  Object {a: "a", a1: "a1"}