Jquery學習總結

入門文章:

http://www.k99k.com/jQuery_getting_started.html

$(document).ready(function() {

$("a").click(function() {

alert("Hello world!");

});

});

這樣在你點擊頁面的一個連結時都會觸發這個"Hello world"的提示。

$("a") 是一個jQuery選取器(selector),在這裡，它選擇所有的a標籤（即<a></a>）

$("#orderedlist")等價於document.getElementById("orderedlist") 

$("#orderedlist").addClass("red");

為id為orderedlist的節點添加red樣式類 。

$('.poem-stanza').addClass("red");

為class為poem-stanza的所有元素添加red樣式類 。

$(document).ready(function() {

$("#orderedlist").find("li").each(function(i) {

$(this).html( $(this).html() + " BAM! " + i );

});

});




在頁面載入完畢後，遍曆id為orderedlist的節點的所有li子節點，




並對每個子節點的Html文本重新賦值。




.html()方法是擷取對象的html代碼，而.html('xxx')是設定'xxx'為對象的html代碼




jQuery的一些特性和用法：




1.精準簡單的選擇對象(dom)：

$('#element');// 相當於document.getElementById("element")

$('.element');//Class
$('p');//html標籤
$("form > input");//子物件
$("div,span,p.myClass");//同時選擇多種對象
$("tr:odd").css("background-color", "#bbbbff");//表格的隔行背景
$(":input");//表單對象
$("input[name='newsletter']");//特定的表單對象
2.對象函數的應用簡單和不限制：
element.function(par)；
$(”p.surprise”).addClass(”ohmy”).show(”slow”)...
3.對已選擇對象的操作（包括樣式）：
$("#element").addClass("selected");//給對象添加樣式
$('#element').css({ "background-color":"yellow", "font-weight":"bolder" });//改變對象樣式
$("p").text("Some new text.");//改變對象文本
$("img").attr({ src: "test.jpg", alt: "Test Image" });//改變對象文本
$("p").add("span");//給對象增加標籤
$("p").find("span");//尋找對象內部的對應元素
$("p").parent();//對象的父級元素
$("p").append("<b>Hello</b>");//給對象新增內容
4.支援aJax，支援檔案格式：xml/html/script/json/jsonp
$("#feeds").load("feeds.html");//相應地區匯入靜態頁內容
$("#feeds").load("feeds.php", {limit: 25}, function() {alert("The last 25 entries in the feed have been loaded");});//匯入動態內容
4.對事件的支援：
$("p").hover(function () {
      $(this).addClass("hilite");//滑鼠放上去時
    }, function () {
      $(this).removeClass("hilite");//移開滑鼠
    });//滑鼠放上去和移開的不同效果（自動迴圈所有p對象）
5.動畫：
$("p").show("slow");//隱藏對象(慢速漸層)
$("#go").click(function(){
$("#block").animate({
    width: "90%",
    height: "100%",
    fontSize: "10em"
}, 1000 );
});//滑鼠點擊後寬、高、字型的動態變化
6.擴充：
$.fn.background = function(bg){
    return this.css('background', bg);
};
$(#element).background("red");
如果要為每一個jQuery 對象添加一個函數，必須把該函數指派給 $.fn，同時這個函數必須要返回一個 this（jQuery 對象）