<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
</body
jQuery HTML
jQuery DOM 操作
获得内容 - text()、html() 以及 val()
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
通过 jQuery text() 和 html() 方法来获得内容：
实例
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
通过 text()、html() 以及 val() 方法来设置内容：
实例
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
text()、html() 以及 val() 的回调函数
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
带有回调函数的 text() 和 html()：
实例
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
获取属性 - attr()
如何获得链接中 href 属性的值：
实例
$("button").click(function(){
alert($("#w3s").attr("href"));
});
改变（设置）链接中 href 属性的值：
实例
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
jQuery 遍历
图示解释：
向上遍历 DOM 树
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素,该方法只会向上一级对 DOM 树进行遍历
实例
$(document).ready(function(){
$("span").parent();
});
jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
$(document).ready(function(){
$("span").parents();
});
实例
$(document).ready(function(){
$("span").parents("ul");
});
jQuery parentsUntil() 方法
返回介于 <span> 与 <div> 元素之间的所有祖先元素：
实例
$(document).ready(function(){
$("span").parentsUntil("div");
});
向下遍历 DOM 树
jQuery children() 方法
children() 方法返回被选元素的所有直接子元素
返回每个 <div> 元素的所有直接子元素：
实例
$(document).ready(function(){
$("div").children();
});
返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：
实例
$(document).ready(function(){
$("div").children("p.1");
});
jQuery find() 方法
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代
返回属于 <div> 后代的所有 <span> 元素：
实例
$(document).ready(function(){
$("div").find("span");
});
实例
$(document).ready(function(){
$("div").find("*");
});
在 DOM 树中水平遍历
jQuery siblings() 方法
siblings() 方法返回被选元素的所有同胞元素
返回 <h2> 的所有同胞元素：
实例
$(document).ready(function(){
$("h2").siblings();
});
实例
$(document).ready(function(){
$("h2").siblings("p");
});
jQuery next() 方法
next() 方法返回被选元素的下一个同胞元素
返回 <h2> 的下一个同胞元素：
实例
$(document).ready(function(){
$("h2").next();
});
jQuery nextAll() 方法
nextAll() 方法返回被选元素的所有跟随的同胞元素
返回 <h2> 的所有跟随的同胞元素：
实例
$(document).ready(function(){
$("h2").nextAll();
});
jQuery nextUntil() 方法
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：
实例
$(document).ready(function(){
$("h2").nextUntil("h6");
});
jQuery prev(), prevAll() & prevUntil() 方法
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）
jQuery Ajax
jQuery load() 方法
语法：
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称
会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中：
示例
$("#div1").load("demo_test.txt");
把 jQuery 选择器添加到 URL 参数。
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：
实例
$("#div1").load("demo_test.txt #p1");
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
下面的例子会在 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);
});
});
HTTP 请求：GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：
$.get( URL, callbackFunction );
实例
$("button").click(function(){
url="/demo_test.php" $.get( url, function(data,status){
alert("Data: " + data + "\nStatus: " + status);
} );
});
$.get() 的第一个参数是我们希望请求的 URL（"demo_test.php"）
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态
jQuery $.post() 方法
语法：
$.post( URL, data, callbackFunction );
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
使用 $.post() 连同请求一起发送数据：
实例
$("button").click(function(){ $.post( "demo_test_post.asp", {name:"Donald Duck",city:"Duckburg"}, function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); }); Jquery数组$.each(array, [callback])遍历,很常用
vararr = ['javascript','php','java','c++','c#','perl','vb','html','css','objective-c'];$.each(arr,function(key, val) {// firebug consoleconsole.log('index in arr:'+ key +", corresponding value:"+ val);// 如果想退出循环// return false;});$.grep(array, callback, [invert])过滤,常用
vartemp = [];temp = $.grep(arr,function(val, key) {if(val.indexOf('c') != -1)returntrue;// 如果[invert]参数不给或为false, $.grep只收集回调函数返回true的数组元素// 反之[invert]参数为true, $.grep收集回调函数返回false的数组元素},false);console.dir(temp);$.map(array, [callback])用的不是太多
//1.6之前的版本只支持数组temp = $.map(arr,function(val, key) {//返回null,返回的数组长度减1if(val ==='vb')returnnull;returnval;});console.dir(temp);//1.6开始支持json格式的objectvarobj = {key1:'val1', key2:'val2', key3:'val3'};temp = $.map(obj,function(val, key) {returnval;});console.dir(temp);$.inArray(val, array)判断是否在指定数组中,常用
//返回元素在数组中的位置,0为起始位置,返回-1则未找到该元素console.log($.inArray('javascript', arr));$.merge(first, second)合并两个数组,使用频率一般
varfrontEnd = ['javascript','css','html'],backEnd = ['java','php','c++'];// 这种方式会修改第一个参数, 即frontEnd数组temp = $.merge(frontEnd, backEnd);console.dir(temp);console.dir(frontEnd);// 可以用下面的方式来避免对原数组的影响// $.merge($.merge([], frontEnd), backEnd);$.unique(array)过滤数组中的重复元素,不常用
blahblahblah....
// $.unique只支持DOM元素数组,去除重复DOM元素,不支持其他类型数组(String或者Number)// 获得原始的DOM数组,而不是jQuery封装的vardivs = $('div').get();// 增加几个class为dup的divdivs = divs.concat($('div.dup').get());console.log("before unique:"+ divs.length);divs = $.unique(divs);console.log("after unique:"+ divs.length);$.makeArray(obj)将类数组对象转成数组,不常用
//首先什么是类数组对象?jQuery官网上用divs = getElementsByTag('div')来做例子//这个divs有类似数组的一些方法比如length,通过[index]方式获取元素等//然后通过$.makeArray(divs)使它转为数组,就可以用数组的其他功能//比如reverse(), pop()等$(dom).toArray()将jQuery集合恢复成DOM数组,不常用
//跟makeArray一样,相当的不常用,一般情况可以忽略
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
