2019獨角獸企業重金招聘Python工程師標準>>>

jQuery 基本操作

?

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都是無效的.

?

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(”< a href=”>asdasd a>”)

$(”#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(” ’asd’? ”)

該語句會把這段html插入到body結束 標簽 之前, 結果是’asd’

$(”body”).prepend(” ’asd’? ”)

該語句會把這段html插入到body開始 標簽 之后, 結果是’asd’

?

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/ 上面有很多現成的插件, 也可以自己寫

自己寫插件,

?

轉載于:https://my.oschina.net/u/1163677/blog/156778

總結

以上是生活随笔為你收集整理的jQuery 基本操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。