細說 jQuery 樣式篇（一） - 樣式的獲取與設置

chengtao1633 發布于2019-08-19 14:53 / 3168人閱讀

摘要：在元素一篇學習了通過方法可以為元素添加樣式，但是對樣式的操作不僅僅限于添加，例如取得元素特定樣式，設置元素樣式等等。設置樣式提供了一個方法來操作樣式，這個方法將獲取樣式設置樣式的作用集中了在一起，非常方便我們對元素樣式進行操作。

在元素一篇學習了通過 addClass 方法可以為元素添加樣式，但是對樣式的操作不僅僅限于添加，例如取得元素特定樣式，設置元素樣式等等。

設置樣式

jQuery 提供了一個 .css() 方法來操作樣式，這個方法將獲取樣式設置樣式的作用集中了在一起，非常方便我們對元素樣式進行操作。

test

我們來獲取這個 div 的樣式，單個樣式可以這樣來獲得：

$("div").css("color") //rgb(173, 216, 230)

多個樣式可以這樣來獲得：

    $("div").css(["color", "font-size"])//Object {color: "rgb(173, 216, 230)", font-size: "24px"}

設置單個樣式可以：

$("div").css("color", "red")

設置多個樣式可以：

$("div").css({"color": "red", "font-size": "26px"})

顯示和隱藏元素

貌似通過 css("display", "none") 就可以達到隱藏元素的效果，但是 jQuery 提供了一種更聰明的方法 hide 來給我們使用，之所以說它更聰明，是因為 hide 方法會記住元素在隱藏前 display 的值，這樣再使用 show 方法時就可以恢復原本的 display 值。

click me

jQuery 代碼如下：

  $("span").click(function() {
    $(this).hide();
  });

  $("button").click(function() {
    $("span").show();
  });

將 span 的 display 值設為 block，所以表現為：

點擊 span 后，span 消失：

點擊 button 后，span 再次顯示：

且此時的 display 值仍為 block。

參考

http://book.douban.com/subject/24669823/

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78162.html

細說 jQuery 事件篇（二） - 處理簡單事件

摘要：我們可以利用可以對用戶發起的事件進行處理，這里以樣式轉換為例來說明。其他類似的操作事件都可以通過這個方法，將處理事件的程序綁定到同名事件上面。我們可以利用 jQuery 可以對用戶發起的事件進行處理，這里以樣式轉換為例來說明。增添樣式基于用戶的事件，對特定的 DOM 元素樣式進行轉換是 jQuery 處理事件中比較常見的情形，舉例說明，當用戶點擊輸入框后，會增添 highli...

ckllj 2019-08-19 14:51 評論0 收藏0
細說 jQuery 樣式篇（二） - 動畫效果

摘要：創建一個有背景色的添加方法如下當頁面載入后，會逐漸消失，動畫效果如同直接使用方法。動畫并發效果當對多個元素應用動畫效果時，這些效果是同時發生的，即并發的。除了使用 jQuery 內置的 hide,show,toggle 等方法來展現效果，還可以使用更為強大的 animate 方法來展現動畫效果。創建一個有背景色的 div： div { width: 100px; hei...

PiscesYE 2019-08-19 14:53 評論0 收藏0
細說 jQuery DOM操作篇（二） - DOM 樹操作

摘要：此時，點擊新建的將會觸發。設置元素內容的方法則使用上述兩種方法，將新內容作為參數傳遞即可，例如修改上例中的文本內容方法同理。我們知道通過 $() 函數可以訪問文檔中的元素，并返回一個 jQuery 對象，并且通過一系列方法，我們可以修改元素的樣式和內容，實際上，我們還可以通過該函數做更多的事情，例如添加、刪除、復制等操作來改變 DOM 樹的結構。創建元素我們可以通過 $() ...

Anchorer 2019-08-21 12:20 評論0 收藏0
細說 jQuery 事件篇（四） - 改變事件過程

摘要：事件對象是一種結構，它會在元素獲得處理事件的機會時傳遞給調用的事件處理程序。事件對象的屬性指的是事件目標，它將保存發生事件的目標元素。所以，接下來我們就要想辦法改變事件過程來阻止這個行為。在《細說 jQuery 事件篇（三） - 事件傳播》中提到了事件冒泡可能造成的弊端，當時舉了 mouseout 的例子，對于 mouseout 這個特殊情況，我們可以用 hover 方法來解決，...

nifhlheimr 2019-08-19 14:53 評論0 收藏0
細說 jQuery 事件篇（五） - 事件的移除和重綁定

摘要：一種做法是在事件處理程序中使用條件語句進行判斷，另一種更徹底的做法就是直接移除該處理程序。事件重綁定我們添加一個按鈕，當點擊按鈕后，所有的事件的處理程序又被重新綁定回來。如果我們需要移除已經注冊的事件處理程序，使某些處理程序失效。一種做法是在事件處理程序中使用條件語句進行判斷，另一種更徹底的做法就是直接移除該處理程序。移除處理程序假設有個 div 和 button，當我們點擊...

boredream 2019-08-19 14:53 評論0 收藏0