快速了解jquery

jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他Javascript库的根本特点。

所以jquery的基础语法是：

$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

1.使用选择器选择元素

$("#lastname") 	选择id="lastname" 的元素
$(".intro") 	选择所有 class="intro" 的元素
$("p") 	选择所有 <p> 元素
$(".intro.demo") 	选择所有 class="intro" 且 class="demo" 的元素
$("p:first") 	选择第一个 <p> 元素
$("[href]") 	所有带有 href 属性的元素
$("ul li:eq(3)") 	列表中的第四个元素（index 从 0 开始）
$("ul li:gt(3)") 	列出 index 大于 3 的元素
$("ul li:lt(3)") 	列出 index 小于 3 的元素

2.遍历

通过遍历函数，可以来筛选、查找和串联元素。

$("div").add("p") 给div元素添加一个p元素
$("div").children(".selected") 找到类名为 "selected" 的所有 div 的子元素
$("p").find("span") 搜索所有段落中的后代 span 元素
$("div").filter(".middle") 找到类名为 "middle" 的类
$("p").next(".selected") 查找每个段落的下一个同胞元素，仅选中类名为 "selected" 的段落
$("p").prev(".selected") 检索每个段落，找到类名为 "selected" 的前一个同胞元素

3.事件

jQuery设计思想，就是把事件直接绑定在网页元素之上。

$('p').click(function(){//给p绑定一个单击事件

　　　　alert('Hello');

　　});

$('input').bind(

　　　　'click change', //同时绑定click和change事件

　　　　function() {

　　　　　　alert('Hello');

　　　　}

　　);

4.jquery自带的效果

$("p").fadeIn(1000);淡入一个段落效果，速度1秒
$("p").fadeOut(1000);淡出一个段落效果，速度1秒
$("p").hide();隐藏一个p元素效果
$("p").show();显示一个p元素效果

5.jquery对文档进行操作

元素的取值和赋值，移动，复制、删除和创建等等

$("p").html()查看所有 p 元素的内容
$("p").html("Hello <b>world</b>!");设置所有 p 元素的内容
$("p").text("Hello world!");设置所有 <p> 元素的文本内容
$("p").append(" <b>Hello world!</b>");在所有的p元素后面添加<b>Hello world!</b>

.insertAfter()和.after()：在现存元素的外部，从后面插入元素
.insertBefore()和.before()：在现存元素的外部，从前面插入元素
.appendTo()和.append()：在现存元素的内部，从后面插入元素
.prependTo()和.prepend()：在现存元素的内部，从前面插入元素
清空元素内容（但是不删除该元素）使用.empty()。
删除元素使用.remove()和.detach()。
复制元素使用.clone()。

6.属性操作

通过下面的方法获得或设置元素的 DOM 属性

hasClass() 	检查匹配的元素是否拥有指定的类。
addClass() 	向匹配的元素添加指定的类名。
removeClass() 	从所有匹配的元素中删除全部或者指定的类。
toggleClass() 	从匹配的元素中添加或删除一个类。

attr() 	设置或返回匹配元素的属性和值。
removeAttr() 	从所有匹配的元素中移除指定的属性。

val() 	设置或返回匹配元素的值。

7.css操作

$("p").css("color","red");设置 <p> 元素的颜色,css() 方法返回或设置匹配的元素的一个或多个样式属性。

height() 	设置或返回匹配元素的高度。
offset() 	返回第一个匹配元素相对于文档的位置。
offsetParent() 	返回最近的定位祖先元素。
position() 	返回第一个匹配元素相对于父元素的位置。
scrollLeft() 	设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop() 	设置或返回匹配元素相对滚动条顶部的偏移。
width() 	设置或返回匹配元素的宽度。

8.其它

（1）Ajax 操作

资料：

(1)jQuery设计思想

(2)jQuery 参考手册