10、JQuery笔记
JQuery
文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){--- jQuery functions go here ---- });
jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
· 美元符号定义 jQuery
· 选择符（selector）“查询”和“查找” HTML 元素
· jQuery 的 action() 执行对元素的操作
如：
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
jQuery 选择器
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
实例
$("p").css("background-color","red");
更多的选择器实例
语法 |
描述 |
$(this) |
当前 HTML 元素 |
$("p") |
所有 <p> 元素 |
$("p.intro") |
所有 class="intro" 的 <p> 元素 |
$(".intro") |
所有 class="intro" 的元素 |
$("#intro") |
id="intro" 的元素 |
$("ul li:first") |
每个 <ul> 的第一个 <li> 元素 |
$("[href$='.jpg']") |
所有带有以 ".jpg" 结尾的属性值的 href 属性 |
$("div#intro .head") |
id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
jQuery 事件
下面是 jQuery 中事件方法的一些例子：
Event 函数 |
绑定函数至 |
$(document).ready(function) |
将函数绑定到文档的就绪事件（当文档完成加载时） |
$(selector).click(function) |
触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) |
触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) |
触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) |
触发或将函数绑定到被选元素的鼠标悬停事件 |
JQuery获取
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
· text() - 设置或返回所选元素的文本内容
· html() - 设置或返回所选元素的内容（包括 HTML 标记）
· val() - 设置或返回表单字段的值
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值：
实例
$("button").click(function(){ alert($("#w3s").attr("href"));});
jQuery - 设置内容和属性
设置内容 - text()、html() 以及 val()
我们将使用前一章中的三个相同的方法来设置内容：
· text() - 设置或返回所选元素的文本内容
· html() - 设置或返回所选元素的内容（包括 HTML 标记）
· val() - 设置或返回表单字段的值
下面的例子演示如何通过 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");});
设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变（设置）链接中 href 属性的值：
实例
$("button").click(function(){ $("#w3s").attr("href","http://www.w3school.com.cn/jquery");});
$("button").click(function(){ $("#w3s").attr({ "href" : "http://www.w3school.com.cn/jquery", "title" : "W3School jQuery Tutorial" });});
jQuery - 添加元素
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：
· append() - 在被选元素的结尾插入内容
· prepend() - 在被选元素的开头插入内容
· after() - 在被选元素之后插入内容
· before() - 在被选元素之前插入内容
通过 append() 和 prepend() 方法添加若干新元素
function appendText(){var txt1="<p>Text.</p>"; // 以 HTML 创建新元素var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素var txt3=document.createElement("p"); // 以 DOM 创建新元素txt3.innerHTML="Text.";$("p").append(txt1,txt2,txt3); // 追加新元素}
通过 after() 和 before() 方法添加若干新元素
function afterText(){var txt1="<b>I </b>"; // 以 HTML 创建新元素var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建新元素var txt3=document.createElement("big"); // 通过 DOM 创建新元素txt3.innerHTML="jQuery!";$("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素}
jQuery - 删除元素
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
· remove() - 删除被选元素（及其子元素）
· empty() - 从被选元素中删除子元素
实例
$("#div1").remove();
$("#div1").empty();
过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有 <p> 元素：
实例
$("p").remove(".italic");
jQuery - 获取并设置 CSS 类
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
· addClass() - 向被选元素添加一个或多个类
· removeClass() - 从被选元素删除一个或多个类
· toggleClass() - 对被选元素进行添加/删除类的切换操作
· css() - 设置或返回样式属性
实例：
$("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important");});
$("button").click(function(){ $("#div1").addClass("important blue");});
$("button").click(function(){ $("h1,h2,p").removeClass("blue");});
$("button").click(function(){ $("h1,h2,p").toggleClass("blue");});
jQuery - css() 方法
返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：
css("propertyname");
例子：
$("p").css("background-color");
设置 CSS 属性
如需设置指定的 CSS 属性，请使用如下语法：
css("propertyname","value");
下面的例子将为所有匹配元素设置 background-color 值：
实例：
$("p").css("background-color","yellow");
设置多个 CSS 属性
如需设置多个CSS 属性，请使用如下语法：
css({"propertyname":"value","propertyname":"value",...});
下面的例子将为所有匹配元素设置 background-color 和 font-size：
实例：
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery 遍历 - 祖先
向上遍历 DOM 树
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
· parent()
· parents()
· parentsUntil()
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个 <span> 元素的的直接父元素：
jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
下面的例子返回所有 <span> 元素的所有祖先：
实例：
$(document).ready(function(){ $("span").parents();});
$(document).ready(function(){ $("span").parents();});
jQuery parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：
实例：
$(document).ready(function(){ $("span").parentsUntil("div");});
jQuery 遍历 - 后代
向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法：
· children()
· find()
jQuery children() 方法
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
下面的例子返回每个 <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");});
jQuery 遍历 - 同胞
在DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历：
· siblings() siblings() 方法返回被选元素的所有同胞元素
· next() next() 方法返回被选元素的下一个同胞元素。
· nextAll() nextAll() 方法返回被选元素的所有跟随的同胞元素。
· nextUntil() nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
· prev()
· prevAll()
· prevUntil()
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
jQuery 遍历 - 过滤
jQuery first() 方法
first() 方法返回被选元素的首个元素。下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：
实例：
$(document).ready(function(){ $("div p").first();});
jQuery last() 方法
last() 方法返回被选元素的最后一个元素。
实例：
$(document).ready(function(){ $("div p").last();});
jQuery eq() 方法
eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：
实例：
$(document).ready(function(){ $("p").eq(1);});
jQuery filter() 方法
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
下面的例子返回带有类名 "intro" 的所有 <p> 元素：
实例：
$(document).ready(function(){ $("p").filter(".intro");});
jQuery not() 方法
not() 方法返回不匹配标准的所有元素。
提示：not() 方法与 filter() 相反。
下面的例子返回不带有类名 "intro" 的所有 <p> 元素：
实例：
$(document).ready(function(){ $("p").not(".intro");});
jQuery - AJAX load() 方法
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法：
$(selector).load(URL,data,callback);
jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：
$.get(URL,callback);
实例：
$("button").click(function(){ $.get("demo_test.asp",function(data,status){ alert("Data: " + data + "\nStatus: " + status); });})
jQuery $.post() 方法
$.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); });});