jquery筆記

 查詢指定XML文檔中的所有div元素。
jQuery 代碼:
$("div", xml.responseXML)

hide()
隱藏顯示的元素。
 

answer.is(':visible')是指可見的answer元素.
如果可見就調用answer.slideUp();使之隱藏.
else則是不可見的元素 調用answer.slideDown();使之顯示.
類似的寫法還有answer.is(':first')answer.is(':last')之類的,類似於CSS的僞類a:hover

$("img").attr("src","test.jpg");          attr(key, value)爲所有匹配的元素設置一個屬性值。
$("input").removeAttr("disabled")     removeAttr(name) 從每一個匹配的元素中刪除一個屬性。
 $(this).val().length                value  值的長度
onkeypress是在用戶按下並放開任何字母數字鍵時發生。系統按鈕(例如,箭頭鍵和功能鍵)無法得到識別。
onkeyup 是在用戶放開任何先前按下的鍵盤鍵時發生。
onkeydown 是在用戶按下任何鍵盤鍵(包括系統按鈕,如箭頭鍵和功能鍵)時發生。

如果輸入框中沒有輸入文本,阻止表單提交。
$("#myform").submit( function() {
 return $("input",   this).val().length > 0;
} );

$("form").submit(); 這個函數不會調用form元素的submit方法!如果需要通過代碼來提交表單,必須使用DOM方法,例如:$("form")[0].submit();

slideUp(speed, callback)
通過高度變化(向上減小)來動態地隱藏所有匹配的元素,在隱藏完成後可選地觸發一個回調函數。

這個動畫效果只調整元素的高度,可以使匹配的元素以“滑動”的方式隱藏起來。

parent(expr)
取得一個包含着所有匹配元素的唯一父元素的元素集合。 可以通過一個可選的表達式進行篩選。
next(expr)
取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。

這個函數只返回後面那個緊鄰的同輩元素,而不是後面所有的同輩元素。 可以用一個可選的表達式進行篩選。
 hide(speed,callback)
以優雅的動畫隱藏所有匹配的元素,並在顯示完成後可選地觸發一個回調函數。 可以根據指定的速度動態地改變每個匹配元素的高度、寬度和不透明度。
end()
結束最近的“破壞性”操作,把匹配的元素列表回覆到前一個狀態。在調用end函數後,匹配的元素列表會回覆到上一個操作之前的匹配元素列表狀態。

如果前面的操作(對元素列表的狀態)沒有破壞性,則什麼也不改變。

 toggle(even,odd)
每次點擊時切換要調用的函數。
如果點擊了一個匹配的元素,則觸發指定的第一個函數,當再次點擊同一元素時,則觸發指定的第二個函數。隨後的每次點擊都重複對這兩個函數的輪番調用。 可以使用unbind("click")來刪除。
$("p").toggle(function(){
  $(this).addClass("selected");   
},function(){
 $(this).removeClass("selected");
});


 css   opacity 透明度。默認的範圍是從0 到 100,他們其實是百分比的形式。也就是說,0代表完全透明


$("#orderedlist").addClass("red");改變顏色

$("#orderedlist >li").addClass("blue");  子節點。

當把鼠標放在li對象上面和移開時進行樣式切換,但只在li的最後一個li上生效。

$(document).ready(function() {
$("#orderedlist
li:last").hover(
function() {
$(this).addClass("green");
},
function() {
$(this).removeClass("green");
}

);
});

find() 讓你在已經選擇的element中作條件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li"). each()一樣迭代了所有的li,並可以在此基礎上作更多的處理。 大部分的方法,如addClass(), 都可以用它們自己的 each() 。在這個例子中, html()用來獲取每個li的html文本, 追加一些文字,並將之設置爲li的html文本。(譯者Keel注:從這個例子可以看到.html()方法是獲取對象的html代碼,而.html('xxx')是設置'xxx'爲對象的html代碼)

$(document).ready(function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html(
$(this).html() + " BAM! " + i );
});
});

$(document).ready(function() {
// use this to resetseveral forms at once
$("#testreset").click(function() {                        //全部id爲testfrom的重置
$("#testform").each(function(){this.reset();
                        })
});
});

 你想要選擇所有的沒有ul子元素的li元素。
$(document).ready(function() {
$("li").not("[ul]").css("border", "1px solid black");
});


這個代碼給所有帶有name屬性的鏈接加了一個背景色。
$(document).ready(function() {
$("a[@name]").background("#eee");
});

[@href*=/content/gallery]
不同的瀏覽器下對href的理解可能會不一致,所以我們的部分匹配("*=")的方式來代替完全匹配("="):



$(document).ready(function() {
$('#faq').find('dd').hide().end().find('dt').click(function() {
var
answer = $(this).next();
if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
}
});
});
這裏我們用了一些鏈式表達法來減少代碼量,而且看上去更直觀更容易理解。像'#faq' 只選擇了一次,利用end()方法,第一次find()方法會結束(undone),所以我們可以接着在後面繼續find('dt'),而不需要再寫$('#faq').find('dt')。

在點擊事件中的,我們用 $(this).next() 來找到dt下面緊接的一個dd元素,這讓我們可以快速地選擇在被點擊問題下面的答案。
(譯者Keel注:這個例子真是太酷了,FAQ中的答案可以收縮!從利用next()的思路到實現這些效果都有很多地方需要我們消化,注意 if (answer.is(':visible'))用法,注意answer.slideUp();不懂的地方趕緊查我在最開始提到的兩個必看API文檔)

 

你可以與 animate()聯合起來創建一些效果,如一個帶漸顯的滑動效果:

$(document).ready(function() { $("a").toggle(function() {  $(".stuff").animate({   height: 'hide',   opacity: 'hide'  }, 'slow'); }, function() {  $(".stuff").animate({   height: 'show',   opacity: 'show'  }, 'slow'); });});

發佈了20 篇原創文章 · 獲贊 0 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章