最新的Web開發教程
 

jQuery例子


你想發展你的jQuery選擇的技能?

請嘗試我們的jQuery選擇器測試儀


jQuery的選擇器

$("p").hide()
演示了jQuery hide()方法隱藏所有<p>元素。

$("#test").hide()
演示了jQuery hide()方法,隱藏的元素id="test"

$(".test").hide()
演示了jQuery hide()方法,隱藏了所有的元素class="test"

$(this).hide()
演示了jQuery hide()方法,隱藏當前的HTML元素。

舉例說明


jQuery的活動

jQuery的click()
演示jQuery的click()事件。

jQuery的dblclick()
演示jQuery的dblclick()事件。

jQuery的mouseenter()
演示了jQuery mouseenter()事件。

jQuery的mouseleave()
演示jQuery的mouseleave()事件。

jQuery的mousedown()
演示jQuery的mousedown()事件。

jQuery的mouseup()
演示jQuery的mouseup()事件。

jQuery的hover()
演示jQuery的hover()事件。

jQuery的focus()blur()
演示jQuery的focus()blur()事件。

舉例說明


jQuery的隱藏/顯示

jQuery的hide()
演示了jQuery hide()方法。

jQuery的hide()show()
演示jQuery的hide()show()方法。

jQuery的toggle()
jQuery的toggle()之間切換hide()show()

jQuery的hide()
另一個隱藏演示。 如何隱藏部分文本。

舉例說明


jQuery的淡入淡出

jQuery的fadeIn()
演示jQuery的fadeIn()方法。

jQuery的fadeOut()
演示了jQuery fadeOut()方法。

jQuery的fadeToggle()
演示jQuery的fadeToggle()方法。

jQuery的fadeTo()
演示jQuery的fadeTo()方法。

舉例說明


jQuery的幻燈片

jQuery的slideDown()
演示了jQuery slideDown()方法。

jQuery的slideUp()
演示jQuery的slideUp()方法。

jQuery的slideToggle()
演示了jQuery slideToggle()方法。

舉例說明


jQuery的動畫

jQuery的animate()
演示了一個簡單使用的jQuery的animate()方法。

jQuery的animate() -操作多個CSS屬性
證明你可以操縱與jQuery的多個CSS屬性animate()方法。

jQuery的animate() -用相對值
表明你可以在jQuery的使用相對值animate()方法。

jQuery的animate() -使用預定義值
表明您可以使用預定義值"hide", "show", "toggle"在jQuery的animate()方法。

jQuery的animate()
演示使用jQuery更多的animate()方法(幾個animate()後互相調用)。

jQuery的animate()
演示使用jQuery更多的animate()方法(幾個animate()後互相調用)。

舉例說明


jQuery的停止動畫

jQuery的stop()滑動
演示了jQuery stop()方法。

jQuery的stop()的動畫(與參數)
演示了jQuery stop()方法。

舉例說明


jQuery的HTML獲取內容和屬性

jQuery的text()html() -獲取內容
獲取內容與jQuery的text()html()方法。

jQuery的val() -獲取內容
獲取與jQuery的表單字段的值val()方法。

jQuery的attr() -獲取屬性值
獲取與jQuery的一個屬性的值attr()方法。

舉例說明


jQuery文檔集內容和屬性

jQuery的text() HTML()html() VAL() -集內容val()
集內容與jQuery的text() html()val()方法。

jQuery的text()html() -集內容有一個回調函數
集內容使用一個回調函數裡面+ text()html()

jQuery的attr() -設置屬性值
設置屬性值與jQuery的attr()方法。

jQuery的attr() -設置多個屬性值
與jQuery的多屬性值attr()方法。

jQuery的attr() -一個回調函數設置屬性值
設置屬性值使用一個回調函數裡面+ attr()

舉例說明


jQuery的HTML元素添加/內容

jQuery的append()
在所選擇的HTML元素的末尾插入內容。

jQuery的prepend()
在所選擇的HTML元素的開頭插入內容。

jQuery的append() -插入幾個新元素
創建文本/ HTML,jQuery和JavaScript的/ DOM新的元素。 然後追加新要素的文本。

jQuery的after()before()
插入後選定的HTML元素之前的內容。

jQuery的after() -插入幾個新元素
創建文本/ HTML,jQuery和JavaScript的/ DOM新的元素。 然後將所選元素後的新元素。

舉例說明


jQuery的HTML刪除元素/內容

jQuery的remove()
刪除選定的element(s)

jQuery的empty()
刪除選定的所有子元素element(s)

jQuery的remove() -一個參數
過濾被除去的元素

舉例說明


jQuery的獲取和設置CSS類

jQuery的addClass()
類屬性添加到不同的元素。

jQuery的addClass() -多類
在中指定多個類addClass()方法。

jQuery的removeClass()
卸下不同的元素特定的類屬性。

jQuery的toggleClass()
從選定的元素添加/移除類之間切換。

舉例說明


jQuery的css()方法

jQuery的css() -返回CSS屬性
從第一個匹配元素返回指定的CSS屬性的值。

jQuery的css() -設置CSS屬性
為所有匹配的元素指定CSS屬性。

jQuery的css() -設置CSS屬性
為所有匹配的元素多個CSS屬性。

舉例說明


jQuery的尺寸

的jQuery -返回width()height()
返回指定元素的寬度和高度。

jQuery的-返回innerWidth()innerHeight()
返回指定元素的內部寬度/高度。

jQuery的-返回outerWidth()outerHeight()
返回指定的元素外寬度/高度。

jQuery的-返回outerWidth(真)和outerHeight(真)
返回外寬/高(包含邊距)指定的元素。

的jQuery -返回width()height()的文件和窗口
返回文檔(HTML文檔)和窗口(瀏覽器窗口)的寬度和高度。

jQuery的-組width()height()
將指定元素的寬度和高度。

舉例說明


jQuery的祖先遍歷

jQuery的parent()
演示jQuery的parent()方法。

jQuery的parents()
演示jQuery的parents()方法。

jQuery的parentsUntil()
演示jQuery的parentsUntil()方法。

舉例說明


jQuery的後人遍歷

jQuery的children()
演示jQuery的children()方法。

jQuery的find()
演示jQuery的find()方法。

舉例說明


jQuery的兄弟姐妹遍歷

jQuery的siblings()
演示jQuery的siblings()方法。

jQuery的next()
演示jQuery的next()方法。

jQuery的nextAll()
演示jQuery的nextAll()方法。

jQuery的nextUntil()
演示jQuery的nextUntil()方法。

舉例說明


jQuery的過濾遍歷

jQuery的first()
演示jQuery的first()方法。

jQuery的last()
演示jQuery的last()方法。

jQuery的eq()
演示jQuery的eq()方法。

jQuery的filter()
演示jQuery的filter()方法。

jQuery的not()
演示jQuery的not()方法。

舉例說明


jQuery的AJAX load()方法

jQuery的load()
加載文件的內容到<div>元素。

jQuery的load()
加載特定元素的內容的文件中,成<div>元素。

jQuery的load() -用回調
使用了jQuery的load()一個回調函數的方法。

舉例說明


jQuery的AJAX get()post()方法

jQuery的get()
使用$.get()方法從服務器上的文件中檢索數據。

jQuery的post()
使用$.post()方法來與請求一起發送一些數據。

舉例說明