摘要:刪除指定的屬性,這個方法就不可以使用匿名函數,傳遞和均無效。遍歷對象數組索引,鍵,屬性名屬性值,值相當于遍歷原生對象數組時,為元素。在使用使用時,可以使用傳入匿名函數的方法,實現由默認到幾個之間的切換。
基礎 DOM 和 和 CSS 一. 設置元素及內容轉自個人博客
我們通過前面所學習的各種選擇器、過濾器來得到我們想要操作的元素。這個時候,我們就可以對這些元素進行 DOM 的操作。
那么,最常用的操作就是對元素內容的獲取和修改。html()和 text()方法:
方法名 | 描述 | 區分 |
---|---|---|
html() | 獲取元素中 HTML 內容 | 連同標簽一起提取 |
html(value) | 設置元素中 HTML 內容 | 清空原數據,設置html內容 |
text() | 獲取元素中文本內容 | 自動清理html標簽 |
text(value) | 設置元素中文本內容 | 自動轉義html標簽以文本形式呈現 |
val() | 獲取表單中的文本內容 | value屬性的值 |
val(value) | 設置表單中的文本內容 | 設置value的值(有特殊用法) |
注意:當我們使用 html()或 text()設置元素里的內容時,會清空原來的數據。而我們期望能夠追加數據的話,需要先獲取原本的數據。
$("#box").html($("#box").html() + "guowenfh.github.io"); //追加數據 //當然它還支持使用函數來進行更復雜的追加
val()的特殊用法:
如果想設置多個選項的選定狀態,比如下拉列表、單選復選框等等,可以通過數組傳遞操作。
$("input").val(["check1","check2", "radio1"]); //value 值是這些的將被選定二. 元素屬性操作
除了對元素內容進行設置和獲取,通過jQuery也可以對元素本身的屬性進行操作,包括獲取屬性的屬性值、設置屬性的屬性值,并且可以刪除掉屬性。
attr()和removeAttr():
方法名 | 描述 |
---|---|
attr(key) | 獲取某個元素 key 屬性的屬性值 |
attr(key, value) | 設置某個元素 key 屬性的屬性值 |
attr({key1:value2, key2:value2...}) | 設置某個元素多個 key 屬性的屬性值 |
attr(key, function (index, value){}) | 通過 fn 來設置設置某個元素 key屬性 |
注意:
jQuery中很多方法都可以使用 function() {}來返回出字符串,比如 html()、text()、val()和上一章剛學過的 is()、filter()方法。
這些方法里的function() {},可以不傳參數??梢灾粋饕粋€參數 index,表示當前元素的索引(從0開始)。也可以傳遞兩個參數 index、value,第二個參數表示屬性原本的值。
(當然并不是所有方法都適合,有興趣可以自己逐個嘗試)。
刪除指定的屬性,這個方法就不可以使用匿名函數,傳遞index和value均無效。$("div").removeAttr("title"); //刪除指定的屬性
當然因為id和class也是元素的屬性,自然也可以使用attr進行設置,但是建議不這樣使用,因為會導致整個頁面結構的混亂,有專門的屬性對它們進行設置。
三. 元素樣式操作元素樣式操作包括了直接設置 CSS 樣式、增加 CSS 類別、類別切換、刪除類別這幾種操作方法。使用頻率極高!
方法名 | 描述 |
---|---|
css(name) | 獲取某個元素行內的 CSS 樣式 |
css([name1, name2, name3]) | 獲取某個元素行內多個 CSS 樣式 |
css(name, value) | 設置某個元素行內的 CSS 樣式 |
css(name, function (index, value) ) | 設置某個元素行內的 CSS 樣式 |
css({name1 : value1, name2 : value2}) | 設置某個元素行內多個 CSS 樣式,鍵值對 |
addClass(class) | 給某個元素添加一個 CSS 類 |
addClass(class1 class2 class3...) | 給某個元素添加多個 CSS 類 |
removeClass(class) | 刪除某個元素的一個 CSS 類 |
removeClass(class1 class2 class3...) | 刪除某個元素的多個 CSS 類 |
toggleClass(class) | 來回切換默認樣式和指定樣式 |
toggleClass(class1 class2 class3...) | 同上 |
toggleClass(class, switch) | 來回切換樣式的時候設置切換頻率 |
toggleClass(function () {}) | 通過匿名函數設置切換的規則 |
toggleClass(function () {}, switch) | 在匿名函數設置時也可以設置頻率 |
toggleClass(function (i, c, s) {}, switch) | 在匿名函數設置時傳遞三個參數 |
理解:
在獲取多個 CSS 樣式時,獲取到的是一個對象數組,如果用原生JS進行解析需要使用for in遍歷。
var box = $("div").css(["color", "height", "width"]); //得到多個 CSS 樣式的數組對象 for (var i in box) { //逐個遍歷出來 alert(i + ":" + box[i]); }
在jQuery顯然不需要那么麻煩,因為它提供了一個遍歷工具專門來處理這種對象數組,$.each()方法,這個方法可以輕松的遍歷對象數組。
/** * 遍歷對象數組 * @param {String} index 索引,鍵,屬性名 * @param {String} value 屬性值,值(相當于arr[i]) */ //遍歷原生JS對象數組時,value為元素DOM。 $.each(box, function(index, value) { alert(index+":"+value);//效果和上面的一樣 });
如果想設置某個元素的 CSS 樣式的值,但這個值需要計算我們可以傳遞一個匿名函數。
$("div").css("width", function (index, value) { return (parseInt(value) - 50) + "px";//局部操作,不影響全局,避免沖突。 });
在使用.toggleClass()使用時,可以使用傳入匿名函數的方法,實現由默認到幾個class之間的切換。例如:
//注意這里必須要先刪除原有的樣式,不然只是被覆蓋了,而不是替換。 $("div").click(function() { $(this).toggleClass(function() { if ($(this).hasClass("red")) { $(this).removeClass("red"); return "blue"; } else { $(this).removeClass("blue"); return "red"; } }); });
對于.toggleClass()傳入匿名函數的方法,還可以可以傳遞 index索引、class類兩個參數以及頻率布爾值,可以得到當前的索引、class類名和頻率布爾值。
四. CSS方法 (一)width()方法方法名 | 描述 |
---|---|
width() | 獲取某個元素的寬度(number) |
width(value) | 設置某個元素的寬度(無單位時,默認px) |
width(function (index, width) {}) | 通過匿名函數設置某個元素的寬度 |
雖然可以不加單位,但是建議加上,使代碼更加清晰。
index 是索引,value 是原本值。
方法名 | 描述 |
---|---|
height() | 獲取某個元素的高度 |
height(value) | 設置某個元素的高度 |
height(function (index, height) {}) | 通過匿名函數設置某個元素的高度 |
上述兩個方法不包括內外邊距和邊框
(三)內外邊距和邊框尺寸方法方法名 | 描述 |
---|---|
innerWidth() | 獲取元素寬度,包含內邊距 padding |
innerHeight() | 獲取元素高度,包含內邊距 padding |
outerWidth() | 獲取元素寬度,包含邊框 border 和內邊距 padding |
outerHeight() | 獲取元素高度,包含邊框 border 和內邊距 padding |
outerWidth(ture) | 同上,且包含外邊距(注意里面的true) |
outerHeight(true) | 同上,且包含外邊距 |
方法名 | 描述 |
---|---|
offset() | 獲取某個元素相對于視口的偏移位置(無論定位與否) |
position() | 獲取某個元素相對于父元素的偏移位置 |
scrollTop() | 獲取垂直滾動條的位置 |
scrollTop(value) | 設置垂直滾動條的位置 |
scrollLeft() | 獲取水平滾動條的值 |
scrollLeft(value) | 設置水平滾動條的值 |
注意:
前兩個方法,獲取得到的是一個對象,如:{left:12,top:32},所以需要獲取其中的一個值的時候,還需要進行選取,例如:$(div).offset.left。獲取相對與視口的偏移。
在獲取滾動條的值時需要注意的是,對象為window且需要用$包裝轉化成jQ對象
$(window).scrollTop(); //獲取當前滾動條的位置 $(window).scrollTop(300); //設置當前滾動條的位置DOM 節點操作
DOM中有一個非常重要的功能,就是節點模型,也就是DOM中的“M”。頁面中的元素結構就是通過這種節點模型來互相對應著的,我們只需要通過這些節點關系,可以創建、插入、替換、克隆、刪除等等一些列的元素操作。
一. 創建節點為了使頁面更加智能化,有時我們想動態的在 html 結構頁面添加一個元素標簽,那么在插入之前首先要做的動作就是:創建節點。
在jQuery中創建節點異常簡單。
var box = $("二. 插入節點節點"); //創建一個節點 $("body").append(box); //將節點插入到元素內部
在創建節點的過程中,其實我們已經演示怎么通過.append()方法來插入一個節點。但僅僅這個功能遠遠不能滿足我們的需求,除了這個方法,jQuery提供了其他幾個方法來插入節點。
內部插入節點方法方法名 | 描述 |
---|---|
append(content) | 向指定元素內部后面插入節點content |
append(function (index, html) {}) | 使用匿名函數向指定元素內部后面插入節點 |
appendTo(content) | 將指定元素移入到指定元素content 內部后面 |
prepend(content) | 向指定元素content 內部的前面插入節點 |
prepend(function (index, html) {}) | 使用匿名函數向指定元素內部的前面插入節點 |
prependTo(content) | 將指定元素移入到指定元素 content 內部前面 |
需要注意的是appendTo(content)與prependTo(content)在使用方法上與其他兩個略微有些不同,$("new").appendTo("div");,它代表的是創建的節點傳入div內部。
匿名函數方式:
$("div").append(function (index, html) { //使用匿名函數插入節點index是獲取到的div的索引,html 是原節點 if(index==1){ return "節點";//在獲取到的第二個div內部添加節點 } });外部插入節點方法
方法名 | 描述 |
---|---|
after(content) | 向指定元素的外部后面插入節點 content |
after(function (index, html) {}) | 使用匿名函數向指定元素的外部后面插入節點 |
before(content) | 向指定元素的外部前面插入節點 content |
before(function (index, html) {}) | 使用匿名函數向指定元素的外部前面插入節點 |
insertAfter(content) | 將指定節點移到指定元素 content 外部的后面 |
insertBefore(content) | 將指定節點移到指定元素 content 外部的前面 |
與上面相同insertAfter(content) 與insertBefore(content)也與其它兩個是相反的。
三.包裹節點jQuery 提供了一系列方法用于包裹節點,那包裹節點是什么意思呢?其實就是使用字符串代碼將指定元素的代碼包含著的意思。
方法名 | 描述 |
---|---|
wrap(html) | 向指定元素包裹一層 html 代碼 |
wrap(element) | 向指定元素包裹一層 DOM 對象節點 |
wrap(function (index) {}) | 使用匿名函數向指定元素包裹一層自定義內容 |
unwrap() | 移除一層指定元素包裹的內容(多層需移除多次) |
wrapAll(html) | 用 html 將所有元素包裹到一起 |
wrapAll(element) | 用 DOM 對象將所有元素包裹在一起 |
wrapInner(html) | 向指定元素的子內容包裹一層 html |
wrapInner(element) | 向指定元素的子內容包裹一層 DOM 對象節點 |
wrapInner(function (index) {}) | 用匿名函數向指定元素的子內容包裹一層 |
wrap的多種用法:
$("div").wrap(""); //在 div 外層包裹一層 strong $("div").wrap("123"); //包裹的元素可以帶內容 $("div").wrap(""); //包裹多個元素 $("div").wrap($("strong").get(0)); //也可以包裹一個原生 DOM $("div").wrap(document.createElement("strong")); //臨時的原生 DOM $("div").wrap(function (index) { //匿名函數 return ""; });
注意: .wrap()和.wrapAll()的區別在前者把每個元素當成一個獨立體,分別包含一層外層;后者將所有元素作為一個整體作為一個獨立體,只包含一層外層。這兩種都是在外層包含,而.wrapInner()在內層包含。
四. 節點操作方法名 | 描述 | 參數解析 |
---|---|---|
$("div").clone(true); | 復制一個節點 | true時表示同時復制事件行為,空或false都表示只復制元素及內容 |
$("div").remove("#box"); | 刪除一個id=box的div元素 | 無參數時,表示直接刪除元素 |
$("div").detach(); | 保留事件行為的刪除 | 同上 |
$("div").empty(); | 情況節點里的內容 | 無參數 |
$("div").replaceWith("節點") | 將 div 替換成 span 元素 | HTML字符串,DOM元素,或者jQuery對象 |
$("節點").replaceAll("div"); | 同上 | 同上 |
注意:
.remove()和.detach()都是刪除節點,而刪除后本身方法可以返回當前被刪除的節點對象,但區別在于前者在恢復時不保留事件行為,后者則保留。
節點被替換后,所包含的事件行為就全部消失了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78381.html
摘要:目前插件已超過幾千種,由來自世界各地的開發者共同編寫驗證和完善。而對于開發者而言,直接使用這些插件將快速穩定架構系統,節約項目成本。也就是說,插件也是代碼,通過文件引入的方式植入即可?,F在我們就完成了一個下拉菜單的插件。 插件(Plugin)也成為 jQuery 擴展(Extension),是一種遵循一定規范的應用程序接口編寫出來的程序。目前 jQuery 插件已超過幾千種,由來自世界...
摘要:可以傳遞三個參數表示一個或多個事件類型,比如。表示綁定到指定元素的處理函數。我們稱它為簡寫事件。必須在中,并且使用作為事件觸發元素,不然無效。和表示鼠標移入和移出的時候觸發。按下返回按下返回和分別表示光標激活和丟失,事件觸發時機是當前元素。 轉自個人博客 在JavaScript 有一個非常重要的功能,就是事件驅動。如果你的網頁需要與用戶進行交互的話,就不可能不用到事件。它在頁面完全加...
閱讀 1056·2021-11-24 09:39
閱讀 3591·2021-11-22 13:54
閱讀 2547·2021-10-11 10:59
閱讀 784·2021-09-02 15:40
閱讀 1029·2019-08-30 15:55
閱讀 1051·2019-08-30 13:57
閱讀 2309·2019-08-30 13:17
閱讀 3028·2019-08-29 18:32