JQuery文檔學習-1
$("div", xml.responseXML);
在一個由 AJAX 返回的 XML 文檔中,查找所有的 div 元素。
$("div > p"); //找到所有p元素,且這些p元素都是div的子元素
$("input.radio","document.forms[0]") // 在文檔的第一個表單中,查找所有的單選按鈕(即: type 值爲 radio 的 input 元素)。
語法 JQuery(expression,content); expression:想要獲取到的對象,context對象查找的範圍
****************************************
.創建元素
$("<div><p>好好工作,賺錢養家</p></div>").appendTo("body")
$("<div>", {
"class": "test",
text: "Click me!",
click: function(){
$(this).toggleClass("test");
}
}).appendTo("body");//創建元素,並賦予其某些屬性,及事件。
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
***************************************
jQuery(document) 將dom對象封裝成jQuery對象,也可以接收XML文檔和Window對象。
$(function(){}); 文檔就緒後完成的事情 等同於:$(document).ready();
***************************************
JQuery對象訪問:
以每一個匹配的元素作爲上下文來執行一個函數。意味着,每次執行傳遞進來的函數時,函數中的this關鍵字都指向一個不同的DOM元素(每次都是一個不同的匹配元素)。而且,在每次執行函數時,都會給函數傳遞一個表示作爲執行環境的元素在匹配的元素集合中所處位置的數字值作爲參數(從零開始的整形)。返回 'false' 將停止循環 (就像在普通的循環中使用 'break')。返回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')。
$("img").each(function(i){
this.src = "test" + i + ".jpg";
//this在這裏指代dom對象,而非jquery對象 如果你想得到 jQuery對象,可以使用 $(this) 函數。
用return 跳出each
--------html代碼
<button>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
<div></div>
<div></div>
--------js代碼
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) { //判斷id是否是stop
$("span").text("Stopped at div index #" + index);
return false;
}
});
});
jQuery 對象 size() 返回對象元素的個數。與length一致; size() 方法,length屬性。
get() 取得所有匹配的dom元素集合。 $("img").get()
get(index) 取得第index個dom元素 。 $("img").get(0) 與 $("img")[0] 等價
index(subject) 搜索匹配的元素,並返回它的index值。
-------html代碼
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
--------js代碼
$('li').index(document.getElementById('bar'));
//1,傳遞一個DOM對象,返回這個對象在原先集合中的索引位置
$('li').index($('#bar'));
//1,傳遞一個jQuery對象
$('li').index($('li:gt(0)'));
//1,傳遞一組jQuery對象,返回這個對象中第一個元素在原先集合中的索引位置
$('#bar').index('li');
//1,傳遞一個選擇器,返回#bar在所有li中的做引位置
$('#bar').index(); //1,不傳遞參數,返回這個元素在同輩中的索引位置。
在一個由 AJAX 返回的 XML 文檔中,查找所有的 div 元素。
$("div > p"); //找到所有p元素,且這些p元素都是div的子元素
$("input.radio","document.forms[0]") // 在文檔的第一個表單中,查找所有的單選按鈕(即: type 值爲 radio 的 input 元素)。
語法 JQuery(expression,content); expression:想要獲取到的對象,context對象查找的範圍
****************************************
.創建元素
$("<div><p>好好工作,賺錢養家</p></div>").appendTo("body")
$("<div>", {
"class": "test",
text: "Click me!",
click: function(){
$(this).toggleClass("test");
}
}).appendTo("body");//創建元素,並賦予其某些屬性,及事件。
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
***************************************
jQuery(document) 將dom對象封裝成jQuery對象,也可以接收XML文檔和Window對象。
$(function(){}); 文檔就緒後完成的事情 等同於:$(document).ready();
***************************************
JQuery對象訪問:
以每一個匹配的元素作爲上下文來執行一個函數。意味着,每次執行傳遞進來的函數時,函數中的this關鍵字都指向一個不同的DOM元素(每次都是一個不同的匹配元素)。而且,在每次執行函數時,都會給函數傳遞一個表示作爲執行環境的元素在匹配的元素集合中所處位置的數字值作爲參數(從零開始的整形)。返回 'false' 將停止循環 (就像在普通的循環中使用 'break')。返回 'true' 跳至下一個循環(就像在普通的循環中使用'continue')。
$("img").each(function(i){
this.src = "test" + i + ".jpg";
//this在這裏指代dom對象,而非jquery對象 如果你想得到 jQuery對象,可以使用 $(this) 函數。
用return 跳出each
--------html代碼
<button>Change colors</button>
<span></span>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="stop">Stop here</div>
<div></div>
<div></div>
<div></div>
--------js代碼
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) { //判斷id是否是stop
$("span").text("Stopped at div index #" + index);
return false;
}
});
});
jQuery 對象 size() 返回對象元素的個數。與length一致; size() 方法,length屬性。
get() 取得所有匹配的dom元素集合。 $("img").get()
get(index) 取得第index個dom元素 。 $("img").get(0) 與 $("img")[0] 等價
index(subject) 搜索匹配的元素,並返回它的index值。
-------html代碼
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
--------js代碼
$('li').index(document.getElementById('bar'));
//1,傳遞一個DOM對象,返回這個對象在原先集合中的索引位置
$('li').index($('#bar'));
//1,傳遞一個jQuery對象
$('li').index($('li:gt(0)'));
//1,傳遞一組jQuery對象,返回這個對象中第一個元素在原先集合中的索引位置
$('#bar').index('li');
//1,傳遞一個選擇器,返回#bar在所有li中的做引位置
$('#bar').index(); //1,不傳遞參數,返回這個元素在同輩中的索引位置。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.