本文共 3026 字，大约阅读时间需要 10 分钟。

转载：

jQuery加载

1. $(document).ready()

2. 添加css样式:

   单个：$("p").css("color","red");
   多个样式：$("p").css({"color":"red","border":"1px"})

3. 选择器：

   $("p") 选取 <p> 元素。
   $("p.intro") 选取所有 class="intro" 的 <p> 元素。
   $("p#demo") 选取所有 id="demo" 的 <p> 元素。
   属性选择器：
   $("[href]") 选取所有带有 href 属性的元素。
   $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
   $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
   $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素

jQuery中的animate（）

1. animate()方法不能改变div的背景颜色，只支持数字值。比如height、paddingLeft 、marginRight 等等。
2. jQuery 方法链接
   如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

$("#p1").css("color","red").slideUp(2000) 		.slideDown(2000);

3. 三个简单实用的用于 DOM 操作的 jQuery 方法：

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

4. 用于添加新内容的四个 jQuery 方法：

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

5. 如需删除元素和内容，一般可使用以下两个 jQuery 方法：

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

6. 过滤被删除的元素

   jQuery remove() 方法也可接受一个参数，允许对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。
   例如：删除 class="italic" 的所有 <p> 元素：$("p").remove(".italic");

7. addClass() 方法：

   添加单个class：$("div").addClass("class1")
   添加多个class：$("#div").addClass("class1 class2");

8. removeClass() 方法:

   删除指定的 class 属性：$("h1").removeClass("blue");
   对被选元素进行添加/删除类的切换操作：

9. toggleClass() 方法:

   $("h1").toggleClass("blue");

10. 设置指定的 元素的宽度和高度：

$("button").click(function(){
   		$("#div1").width(500).height(500);	});

3. jQuery 向上遍历：

1. parent() 方法返回被选元素的直接父元素。
   $("span").parent().css("color":"red");
2. parents() 方法
   parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
3. parentsUntil() 方法
   parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

$(document).ready(function(){
   	  	$("span").parentsUntil("div");	});

4. jQuery 向下遍历

1. children() 方法返回被选元素的所有直接子元素（只会向下一级对 DOM 树进行遍历）
2. find() 方法：
   find() 方法返回被选元素的所有后代元素：

$(function(){
   		$("div").find("span");	});

3. 在 DOM 树中水平遍历 - siblings() 方法：
   siblings() 方法返回被选元素的所有同胞元素。

$(function(){
   		$("h2").siblings();	});

4. next() 方法
   next() 方法返回被选元素的下一个同胞元素，该方法只返回一个元素；
5. nextAll() 方法
   nextAll() 方法返回被选元素的所有跟随的同胞元素。
6. nextUntil() 方法
   nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

$(function(){
   		$("h2").nextUntil("h6");	});	/* h2-h6之间被选中*/

5. jQuery 遍历 - 过滤

1. first() 方法
   下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：

$(document).ready(function(){
   		$("div p").first();	});	/*div中第一个p.*/

2. last() 方法
   last() 方法返回被选元素的最后一个元素。

$(document).ready(function(){
   		$("div p").last();	});	/*div中最后一个p.*/

3. eq() 方法
   eq() 方法返回被选元素中带有指定索引号的元素，从0开始。

$(document).ready(function(){
   		$("p").eq(1).css;	});

4. filter() 方法
   允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回；

$(document).ready(function(){
   		$("p").filter(".lala").css;  /*（class为lala都会被选择）*/	});

5. not() 方法
   not() 方法返回不匹配标准的所有元素。
   not() 方法与 filter() 相反。

6. jQuery - AJAX load() 方法

1. load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);		/*必需的 URL 参数规定您希望加载的 URL。	可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。	可选的 callback 参数是 load() 方法完成后所执行的函数名称。*/

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：

7.

1. GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
2. POST 也可用于从服务器获取数据。不会缓存数据