简要解析jQuery用法二

1、jQuery 遍历

jQuery 遍历 - 祖先：向上遍历Dom树

• parent()：返回被选元素的直接父元素
• parents()：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()
• parentsUntil()：返回介于两个给定元素之间的所有祖先元素

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

2、jQuery 遍历 - 后代

用于向下遍历 DOM 树的 jQuery 方法

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

// 返回属于 <div> 后代的所有 <span> 元素
$(document).ready(function(){
 $("div").find("span");
});

3、jQuery 遍历 - 同胞

DOM 树进行水平遍历

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

4、jQuery 遍历 - 过滤

• first()：返回被选元素的首个元素
• last()：返回被选元素的最后一个元素
• eq()：返回被选元素中带有指定索引号的元素
• filter() ：不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
• not()：返回不匹配标准的所有元素

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

//返回带有类名 "intro" 的所有 <p> 元素
$(document).ready(function(){
 $("p").filter(".intro");
});

//返回不带有类名 "intro" 的所有 <p> 元素
$(document).ready(function(){
 $("p").not(".intro");
});

5、jQuery - AJAX load() 方法

• load() ：方法从服务器加载数据，并把返回的数据放入被选元素中。
• $(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称
回调函数可以设置不同的参数:
1.responseTxt - 包含调用成功时的结果内容
2.statusTXT - 包含调用的状态
3. xhr - 包含 XMLHttpRequest 对象

//把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中
$("#div1").load("demo_test.txt");

//把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中
$("#div1").load("demo_test.txt #p1");

//在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息
$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

6、jQuery - AJAX get() 和 post() 方法

用于通过 HTTP GET 或 POST 请求从服务器请求数据

• GET - 从指定的资源请求数据
• POST - 向指定的资源提交要处理的数据
• $.get(URL,callback);
  必需的 URL 参数规定您希望请求的 URL。
  可选的 callback 参数是请求成功后所执行的函数名。

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

• $.post(URL,data,callback);
  必需的 URL 参数规定您希望请求的 URL。
  可选的 data 参数规定连同请求发送的数据。
  可选的 callback 参数是请求成功后所执行的函数名。

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

noConflict() 方法:

//通过全名替代简写的方式来使用 jQuery：
var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍在运行！");
  });
});
//创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在运行！");
  });
});
var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍在运行！");
  });
});