jqery基本應用

發表於 2010年03月29日 16:14 分類: Java(eclipse/as) 統計: 0評/70閱 (收藏) jQuery基本操作篇 2008年02月20日 星期三 14:42 jQuery是一個輕量級的javascript類庫, 只有14k(未壓縮的版本有77k) jQuery有什麼好處呢? 我想好處有以下幾點: 1. 簡化了html物件的操作, 起碼寫的字少了, 而且原來需要自己寫迴圈做的, 現在一句話就搞定 2. 提高了程式碼的瀏覽器相容性. 現在的4種主流瀏覽器之間的js指令碼或多或少都會存在相容性問題, 用jQuery, 會讓你不用關心相容性. 比如Ajax請求, ie和firefox的物件完全不一樣還有box模型的問題, 比如一個div外面加了一個邊框, 然後為這個div設定一個寬度, ie和firefox對這個div的實際寬度理解的就不一樣. ie會認為div的實際寬度是div的寬度+邊框寬度, 而firefox認為div的實際寬度就是你設定的寬度, 不過div的有效寬度就是div的寬度-邊框寬度了, 這個問題會影響一個元素的實際位置. 所以一定要用jquery的offset方法來取元素的位置, 用width來取寬度 所有的jQuery選擇器返回值都是jQuery物件, 而不是html元素. 所以一些普通的用法, 比如InnerHTML都是無效的. 更多更詳細的參考請訪問http://docs.jquery.com/Main_Page 別人寫的基礎教程 http://bbs.jquery.org.cn/frame.....ghlight%3D 1. 選取元素 $(”#myid”)效果等於document.getElementById(”myid”), 但是寫的字元要少好多啊. 如果需要將jQuery物件轉換成html元素, 則只需要取其第0個元素即可. 例如$(”#myid”)返回的是jQuery物件, 而$(”#myid”)[0]返回的就是html元素 如果選擇所有的img元素, 那麼這麼寫: $(”img”) 如果選擇帶有class=”TextBox”的div元素( ), 那麼這麼寫: $(”div.TextBox”) 選擇帶有myattr屬性的元素$(”div[myattr]”) 選擇帶有myattr屬性, 並且屬性值等於myclass的元素$(”div[myattr=’myclass’]”) 屬性不等於[myattr!=’myclass’] 屬性以my開頭[myattr^=’my’] 屬性以class結尾[myattr$=’class’] 屬性包含cla這三個字元[myattr*=’cla’] 如果一個選擇會返回多個元素, 並且希望每返回一個元素, 就把某些屬性應用到該元素上, 可以這麼寫 $(”div”).each(function() { $(this).css(”background-color”, “#F00″); alert($(this).html()); $(this).width(”200px”); }); 2.事件給頁面加onload事件處理方法 $(function() { alert(”頁面結構載入完畢, 但是可能某些圖片尚未載入(一般情況下, 此事件就夠用了)”); }); 可以給頁面繫結多個onload事件處理方法 $(function() { alert(”我首先被執行”); }); $(function() { alert(”我第二被執行”); }); 繫結特殊事件 $(”#myid”).keydown(function() { alert(”觸發了keydown事件”); }); 除了這些常用的, 不常用的事件需要通過bind方法繫結 3. 元素屬性/方法得到一個元素的高度, $(”#myid”).height() 得到一個元素的位置, $(”#myid”).offset() 返回的是一個offset物件, 如果取元素位置的top, 則$(”#myid”).offset().top,?取left則$(”#myid”).offset().left 得到一個元素的innerHTML, $(”#myid”).html() 得到一個元素的innerText, $(”#myid”).text() 得到一個文字框的值, $(”#myid”).val() 得到一個元素的屬性, $(”#myid”).attr(”myattribute”) 以上這些方法有個基本特徵, 就是不帶參數列示取值, 帶有參數列示設定值(除了offset), 例如 $(”#myid”).height(”20″); $(”#myid”).html(”asdasda>”) $(”#myid”).val(”asdasd”) 需要注意, offset是隻讀的. 給一個元素設定屬性 $(”#myid”).attr(”width”, “20%”) 讀取一個屬性 $(”#myid”).attr(”width”) 一次指定多個屬性 $(”#myid”).attr({disabled: “disabled”, width:”20%”, height: “30″}) 刪除屬性$(”#myid”).removeAttr(”disabled”) 應用樣式$(”#myid”).addClass(”myclass”) 刪除樣式$(”#myid”).removeClass(”myclass”) 加一個樣式$(”#myid”).css(”height”, “20px”) 加一組樣式$(”#myid”).css({height:”20px”, width:”100px”}) 需要注意的是: 如果是加一個樣式, 這個樣式的名字是css中的名字, 比如說style=”background-color:#FF0000″, 對應的jQuery寫法是$(”#myid”).css(”background-color”, “#FF0000″) 但是加一組樣式的時候, 樣式的名字就是javascript中的css名字了, 比如: myid.style.backgroundColor = “#FF0000″, 對應的jQuery寫法是$(”#myid”).css({backgroundColor:”#FF0000″}) 4. 根據關係查詢元素找和自己同級的下一個元素$(”#myid”).next() 找和自己同級的所有位於自己之下的元素$(”#myid”).nextAll() 找和自己同級的上一個元素$(”#myid”).prev() 找和自己同級的所有位於自己之上的所有元素$(”#myid”).prl() 找自己的第一代子元素$(”#myid”).children() 找自己的第一個父元素$(”#myid”).parent() 找自己的所有父元素$(”#myid”).parents() 例子: $(”div.l4″).parents().each( function() { alert($(this).html()); }); 會把class=l4的div的所有父元素都得到, 並且alert出他們的html 例子: $(”div.l4″).parents(”div.l2″).each(function() { alert($(this).html()); }); 會得到class=l4的父元素, 該父元素必須是div, 而且其class=l2 這裡說的所有方法, 都可以帶表示式, 表示式的寫法參考第一部分 5. 維護元素在body中增加一個元素 $(”body”).append(””) 該語句會把這段html插入到body結束標籤之前, 結果是 $(”body”).prepend(””) 該語句會把這段html插入到body開始標籤之後, 結果是 6.AJAX 用get方法請求一個頁面 $.get(”http://www.google.com”, “q=jquery”, function(data, status){alert(data)}) 表示請求http://www.google.com, 引數是q, 引數的值是jquery, 請求結束後(不管成功還是失敗)執行後面的function, 該function有兩個固定引數, data和status, data是返回的資料, status是本次請求的狀態 用post方法請求一個頁面 $.post(……..) 引數同get方法 7.其他方法 $.trim(str) 將str前後空格去掉 $.browser 返回當前使用者瀏覽器的型別 $.browser.version返回當前瀏覽器的版本 8. 外掛 jQuery支援外掛, http://jquery.com/plugins/上面有很多現成的外掛, 也可以自己寫自己寫外掛, 請參考http://docs.jquery.com/Core/jQ.....end#object 和http://docs.jquery.com/Core/jQuery.extend#object