JQUERY
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取
元素。
$("p.intro") 选取所有 class="intro" 的
元素。
$("p#demo") 选取 id="demo" 的第一个
元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
$(document).ready(function(){
$("button").click(function(){ 》》》》》》》元素选择器
$("p").css("background-color","yellow");
});
});
This is a heading
This is a paragraph.
This is another paragraph.
jQuery AJAX 实例
$(document).ready(function(){
$("#b01").click(function(){ 》》》》》》》》》属性选择器
$('#myDiv').load('../jquery/test1.txt.htm'/*tpa=http://www.w3school.com.cn/jquery/test1.txt*/);
});
});
Let AJAX change this text
jQuery - 获得内容和属性
jQuery DOM 操作
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text()); >>>>>>>text()方法
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html()); 》》》》》》》》html（）方法
});
});
这是段落中的粗体文本。
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val()); >>>>>>>>>val（）方法
});
});
姓名：
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值：
$(document).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("href")); 》》》》》》》attr（）方法
});
});
jQuery - 设置内容和属性
设置内容 - text()、html() 以及 val()
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!"); 》》》》》》设置text（）方法
});
$("#btn2").click(function(){
$("#test2").html("Hello world!"); 》》》》》设置html（）方法
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck"); 》》》》》设置val（）方法
});
});
这是段落。
这是另一个段落。
Input field:
text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 text() 和 html()：
$(document).ready(function(){
$("#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 world! (index: " + i + ")";
}); 》》》》》》回调函数
});
});
这是粗体文本。
这是另一段粗体文本。
设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变（设置）链接中 href 属性的值：
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
});
attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性：
$(document).ready(function(){
$("button").click(function(){
$("#a1").attr({
"href":"http://www.w3school.com.cn",
"title":"W3School jQuery 教程"
});
});
});
attr() 的回调函数
jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法：
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
});
jQuery - 添加元素
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
jQuery append() 方法
jQuery append() 方法在被选元素的结尾插入内容。
$(document).ready(function(){
$("#b2").click(function(){
$("p").append("Appended text.");》》append（）方法
});
$("#b3").click(function(){
$("ol").append("
});
});
asdfsdfads
asdfsa
- aaaaaaa
- bbbbbbb
- ccccccc
通过 append() 和 prepend() 方法添加若干新元素
在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。
不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。
function appendText()
{
var txt1="
Text.
"; // 以 HTML 创建新元素var txt2=$("
").text("Text."); // 以 jQuery 创建新元素var txt3=document.createElement("p");
txt3.innerHTML="Text."; // 通过 DOM 来创建文本
$("body").append(txt1,txt2,txt3); // 追加新元素
}
This is a paragraph.
Query after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("Before"); >>>>>>>>方法
});
$("#btn2").click(function(){
$("img").after("After");
});
});
通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
function afterText()
{
var txt1="I "; // 以 HTML 创建元素
var txt2=$("").text("love "); // 通过 jQuery 创建元素
var txt3=document.createElement("big"); // 通过 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素
}
jQuery - 删除元素
删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素。
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove(); 》》》》可以改为empty（）方法
});
});
This is some text in the div.
This is a paragraph in the div.
This is another paragraph in the div.
过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class="italic" 的所有
元素：
(document).ready(function(){
$("button").click(function(){
$("p").remove(".italic"); 》》》》接受一个参数
});
});
This is a paragraph in the div.
This is another paragraph in the div.
》》》》设置class来定义参数This is another paragraph in the div.
元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有
元素:
$("p")
$(document).ready(function(){
$("button").click(function(){
$("p").hide(); ******
});
});
#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：
$(document).ready(function(){
$("button").click(function(){
$("#test").hide(); *******
});
});
.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
getParameter得到的都是String类型的。或者是用于读取提交的表单中的值，或者是某个表单提交过去的数据；