查詢
- 高洛峰原創
- 2016-10-31 11:25:061458瀏覽
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 another paragraph.
Click me
jQuery AJAX 實例<script></script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text()); >>>>>>>text()方法
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html()); 》》》》》》》》html（）方法
});
});
change this textjQuery - 获得内容和属性
jQuery DOM 操作
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
<script></script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Text: " + $("#test").text()); >>>>>>>text()方法
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html()); 》》》》》》》》html（）方法
});
});
这是段落中的粗体文本。
<script></script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val()); >>>>>>>>>val（）方法
});
});
姓名：
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值：
<script></script>
$(document).ready(function(){
$("button").click(function(){
alert($("#w3s").attr("href")); 》》》》》》》attr（）方法
});
});
jQuery - 设置内容和属性
设置内容 - text()、html() 以及 val()
<script></script>
$(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()：
<script></script>
$(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 属性的值：
<script></script>
$(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() - 在被選元素的結尾插入內容
prepend() - 在被選元素選元素的開頭插入內容
after() - 在被選元素之後插入內容
before() - 在被選元素之前插入內容
) 方法在被選元素的結尾插入內容。
$(document).ready(function(){
$("#b2").click(function(){
$("p").append("ended text); 》append（）方法
}); $("#b3").click(function(){
$("ol").pend("
;});asdfsa
aaa
ccccccc
-
透過append() 和prepend() 方法加入若干新元素
- 在上面的例子中，我們只在被選元素的開頭/結尾插入文字/HTML。
不過，append() 和 prepend() 方法能夠透過參數接收無限數量的新元素。可以透過 jQuery 來產生文字/HTML（就像上面的範例），或透過 JavaScript 程式碼和 DOM 元素。
- function appendText()
{
追加文字
Text.
var txt3=document.createElement("p");}This is a paragraph.
追加文本
Query after() 和before() 方法
jQuery after() 方法在被選元素之後插入內容。
jQuery before() 方法在被選元素之前插入內容。$(document).ready(function(){ $("#btn1").click(function(){
$("img").before("
$("img").before("
$("img").before(" $("img").before(" $("img").before(" $("img")。 >>>>>方法 }); $("#btn2").click(function(){ $("img").after("After
"); });
透過after() 和before() 方法新增若干新元素
after() 和before() 方法能夠透過參數接收無限數量的新元素。可以透過 text/HTML、jQuery 或 JavaScript/DOM 來建立新元素。
function afterText()
{var txt1="
I"; ).text("love "); // 透過jQuery建立元素
var txt3=document.createElement("big"); // 透過DOM 建立元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,,22,txt3) ; // img 之後插入新元素
}
如需刪除元素和內容，一般可使用以下兩個jQuery 方法：
remove() - 刪除被選元素（及其子元素）
empty() - 從被選元素中刪除子元素
jQuery remove() 方法jQuery
jQuery remove() 方法jQuery remove() 方法刪除被選元素及其子元素。
$(document).ready(function(){ $("button").click(function(){ $("#div1").remove()) （）方法 });});
. div
This is another paragraph in the div.
過濾被刪除的元素
jQuery remove() 方法也可接受一個參數，讓您對被刪除元素進行過濾。
此參數可以是任何 jQuery 選擇器的語法。
下面的範例刪除class="italic" 的所有
元素：
(document).ready(function(){
$("button").click(function(){
$("button").click(function(){
("p ).remove(".italic"); 》》》》》接受一個參數
});
});
paragraph in the div . This is another paragraph in the div. 》》》》設定class來定義參數 This is andiv paragraph inlicanp 元素
元素選擇器jQuery 元素選擇器是基於元素名稱選取元素。
在頁中選取所有元素:$("p")
$(document).ready(function(){
$("button").click(function(){🎠 ").hide(); ******});
});#id 選擇器
jQuery #id 選擇器透過HTML 元素的id 屬性選取指定的元素。
頁面中元素的 id 應該是唯一的，所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。
透過id 選取元素語法如下：
$(document).ready(function(){
$("#test").click(function(){
$("#test").hide(); ******});
});.class 選擇器jQuery 類別選擇器可以透過指定的class 來尋找元素。 語法如下：
$(document).ready(function(){
$("button").click(function(){
$(".test"). });