jQuery 遍历 1. 祖先
$(document).ready(function(){ $("span").parent(); //返回被选元素的直接父元素 }); $(document).ready(function(){ $("span").parents(); //返回所有 <span> 元素的所有祖先 }); $(document).ready(function(){ $("span").parents("ul"); //返回所有 <span> 元素的所有<ul> 元素祖先, }); $(document).ready(function(){ $("span").parentsUntil("div");//介于两个给定元素之间的所有祖先元素 });2.后代
$(document).ready(function(){ $("div").children();//返回每个 <div> 元素的所有直接子元素 }); $(document).ready(function(){ $("div").children("p.1");//返回<div>的直接子元素并且类名为 "1" 的所有<p>元素 }); $(document).ready(function(){ $("div").find("*");//返回 <div> 的所有后代 });3.同胞
siblings() //所有同胞 next() //下一个同胞 nextAll() nextUntil() prev() prevAll() prevUntil()4.过滤
$(document).ready(function(){ $("div p").first();//选取首个 <div> 元素内部的第一个 <p> 元素 }); $(document).ready(function(){ $("div p").last();//选择最后一个 <div> 元素中的最后一个 <p> 元素 }); $(document).ready(function(){ $("p").eq(1);//返回被选元素中带有指定索引号的元素,索引号从 0 开始 }); $(document).ready(function(){ $("p").filter(".intro");//返回带有类名 "intro" 的所有 <p> 元素 }); $(document).ready(function(){ $("p").not(".intro");//返回不带有类名 "intro" 的所有 <p> 元素 });AJAX AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)
//load() 方法从服务器加载数据,并把返回的数据放入被选元素中 $(selector).load(URL,data,callback); $("#div1").load("demo_test.txt #p1");//把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中 //$.get() 方法通过 HTTP GET 请求从服务器上请求数据 $.get(URL,callback); $("button").click(function(){ $.get("demo_test.asp",function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); }); //$.post() 方法通过 HTTP POST 请求从服务器上请求数据 $.post(URL,data,callback); $("button").click(function(){ $.post("demo_test_post.asp", { name:"Donald Duck", city:"Duckburg" }, function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); }); //demo_test_post.asp <% dim fname,city fname=Request.Form("name") city=Request.Form("city") Response.Write("Dear " & fname & ". ") Response.Write("Hope you live well in " & city & ".") %>noConflict() 方法 某些框架也使用 $ 符号作为简写,为了防止冲突
//noConflict() 方法会释放会 $ 标识符的控制 $.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery 仍在运行!"); }); }); //另一种 $.noConflict(); jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery 仍在运行!"); }); });