<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])遍历,很常用
12345678var
arr = [
'javascript'
,
'php'
,
'java'
,
'c++'
,
'c#'
,
'perl'
,
'vb'
,
'html'
,
'css'
,
'objective-c'
];
$.each(arr,
function
(key, val) {
// firebug console
console.log(
'index in arr:'
+ key +
", corresponding value:"
+ val);
// 如果想退出循环
// return false;
});
$.grep(array, callback, [invert])过滤,常用
123456789var
temp = [];
temp = $.grep(arr,
function
(val, key) {
if
(val.indexOf(
'c'
) != -1)
return
true
;
// 如果[invert]参数不给或为false, $.grep只收集回调函数返回true的数组元素
// 反之[invert]参数为true, $.grep收集回调函数返回false的数组元素
},
false
);
console.dir(temp);
$.map(array, [callback])用的不是太多
1234567891011121314//1.6之前的版本只支持数组
temp = $.map(arr,
function
(val, key) {
//返回null,返回的数组长度减1
if
(val ===
'vb'
)
return
null
;
return
val;
});
console.dir(temp);
//1.6开始支持json格式的object
var
obj = {key1:
'val1'
, key2:
'val2'
, key3:
'val3'
};
temp = $.map(obj,
function
(val, key) {
return
val;
});
console.dir(temp);
$.inArray(val, array)判断是否在指定数组中,常用
123//返回元素在数组中的位置,0为起始位置,返回-1则未找到该元素
console.log($.inArray(
'javascript'
, arr));
$.merge(first, second)合并两个数组,使用频率一般
123456789var
frontEnd = [
'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....
123456789// $.unique只支持DOM元素数组,去除重复DOM元素,不支持其他类型数组(String或者Number)
// 获得原始的DOM数组,而不是jQuery封装的
var
divs = $(
'div'
).get();
// 增加几个class为dup的div
divs = divs.concat($(
'div.dup'
).get());
console.log(
"before unique:"
+ divs.length);
divs = $.unique(divs);
console.log(
"after unique:"
+ divs.length);
$.makeArray(obj)将类数组对象转成数组,不常用
12345//首先什么是类数组对象?jQuery官网上用divs = getElementsByTag('div')来做例子
//这个divs有类似数组的一些方法比如length,通过[index]方式获取元素等
//然后通过$.makeArray(divs)使它转为数组,就可以用数组的其他功能
//比如reverse(), pop()等
$(dom).toArray()将jQuery集合恢复成DOM数组,不常用
12//跟makeArray一样,相当的不常用,一般情况可以忽略