jQuery 效果

jQuery hide() 和 show()

語法：

$(selector).hide(speed,callback);$(selector).show(speed,callback);

可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是隱藏或顯示完成后所執行的函數名稱。

下面的例子演示了帶有 speed 參數的 hide() 方法：

jQuery toggle()

通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。

顯示被隱藏的元素，并隱藏已顯示的元素：

實例

$("button").click(function(){$("p").toggle(); });

jQuery 效果函數

方法描述

animate()	對被選元素應用“自定義”的動畫
clearQueue()	對被選元素移除所有排隊的函數（仍未運行的）
delay()	對被選元素的所有排隊函數（仍未運行）設置延遲
dequeue()	運行被選元素的下一個排隊函數
fadeIn()	逐漸改變被選元素的不透明度，從隱藏到可見
fadeOut()	逐漸改變被選元素的不透明度，從可見到隱藏
fadeTo()	把被選元素逐漸改變至給定的不透明度
hide()	隱藏被選的元素
queue()	顯示被選元素的排隊函數
show()	顯示被選的元素
slideDown()	通過調整高度來滑動顯示被選元素
slideToggle()	對被選元素進行滑動隱藏和滑動顯示的切換
slideUp()	通過調整高度來滑動隱藏被選元素
stop()	停止在被選元素上運行動畫
toggle()	對被選元素進行隱藏和顯示的切換

jQuery - 獲得內容和屬性

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列與 DOM 相關的方法，這使訪問和操作元素和屬性變得很容易。

提示：DOM = Document Object Model（文檔對象模型）

獲得內容 - text()、html() 以及 val()

三個簡單實用的用于 DOM 操作的 jQuery 方法：

• text() - 設置或返回所選元素的文本內容
• html() - 設置或返回所選元素的內容（包括 HTML 標記）
• val() - 設置或返回表單字段的值

下面的例子演示如何通過 jQuery text() 和 html() 方法來獲得內容：

實例

$("#btn1").click(function(){alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){alert("HTML: " + $("#test").html()); });

下面的例子演示如何通過 jQuery val() 方法獲得輸入字段的值：

實例

$("#btn1").click(function(){alert("Value: " + $("#test").val()); });

jQuery 文檔操作方法

這些方法對于 XML 文檔和 HTML 文檔均是適用的，除了：html()。

方法描述

addClass()	向匹配的元素添加指定的類名。
after()	在匹配的元素之后插入內容。
append()	向匹配元素集合中的每個元素結尾插入由參數指定的內容。
appendTo()	向目標結尾插入匹配元素集合中的每個元素。
attr()	設置或返回匹配元素的屬性和值。
before()	在每個匹配的元素之前插入內容。
clone()	創建匹配元素集合的副本。
detach()	從 DOM 中移除匹配元素集合。
empty()	刪除匹配的元素集合中所有的子節點。
hasClass()	檢查匹配的元素是否擁有指定的類。
html()	設置或返回匹配的元素集合中的 HTML 內容。
insertAfter()	把匹配的元素插入到另一個指定的元素集合的后面。
insertBefore()	把匹配的元素插入到另一個指定的元素集合的前面。
prepend()	向匹配元素集合中的每個元素開頭插入由參數指定的內容。
prependTo()	向目標開頭插入匹配元素集合中的每個元素。
remove()	移除所有匹配的元素。
removeAttr()	從所有匹配的元素中移除指定的屬性。
removeClass()	從所有匹配的元素中刪除全部或者指定的類。
replaceAll()	用匹配的元素替換所有匹配到的元素。
replaceWith()	用新內容替換匹配的元素。
text()	設置或返回匹配元素的內容。
toggleClass()	從匹配的元素中添加或刪除一個類。
unwrap()	移除并替換指定元素的父元素。
val()	設置或返回匹配元素的值。
wrap()	把匹配的元素用指定的內容或元素包裹起來。
wrapAll()	把所有匹配的元素用指定的內容或元素包裹起來。
wrapinner()	將每一個匹配的元素的子內容用指定的內容或元素包裹起來。

jQuery 屬性操作方法

下面列出的這些方法獲得或設置元素的 DOM 屬性。

這些方法對于 XML 文檔和 HTML 文檔均是適用的，除了：html()。

方法描述

addClass()	向匹配的元素添加指定的類名。
attr()	設置或返回匹配元素的屬性和值。
hasClass()	檢查匹配的元素是否擁有指定的類。
html()	設置或返回匹配的元素集合中的 HTML 內容。
removeAttr()	從所有匹配的元素中移除指定的屬性。
removeClass()	從所有匹配的元素中刪除全部或者指定的類。
toggleClass()	從匹配的元素中添加或刪除一個類。
val()	設置或返回匹配元素的值。

注釋：jQuery 文檔操作參考手冊中也列出了以上方法。本參考頁的作用是方便用戶單獨查閱有關屬性操作方面的方法。

jQuery CSS 操作函數

下面列出的這些方法設置或返回元素的 CSS 相關屬性。

CSS 屬性描述

css()	設置或返回匹配元素的樣式屬性。
height()	設置或返回匹配元素的高度。
offset()	返回第一個匹配元素相對于文檔的位置。
offsetParent()	返回最近的定位祖先元素。
position()	返回第一個匹配元素相對于父元素的位置。
scrollLeft()	設置或返回匹配元素相對滾動條左側的偏移。
scrollTop()	設置或返回匹配元素相對滾動條頂部的偏移。
width()	設置或返回匹配元素的寬度。

jQuery 遍歷函數

jQuery 遍歷函數包括了用于篩選、查找和串聯元素的方法。

函數描述

.add()	將元素添加到匹配元素的集合中。
.andSelf()	把堆棧中之前的元素集添加到當前集合中。
.children()	獲得匹配元素集合中每個元素的所有子元素。
.closest()	從元素本身開始，逐級向上級元素匹配，并返回最先匹配的祖先元素。
.contents()	獲得匹配元素集合中每個元素的子元素，包括文本和注釋節點。
.each()	對 jQuery 對象進行迭代，為每個匹配元素執行函數。
.end()	結束當前鏈中最近的一次篩選操作，并將匹配元素集合返回到前一次的狀態。
.eq()	將匹配元素集合縮減為位于指定索引的新元素。
.filter()	將匹配元素集合縮減為匹配選擇器或匹配函數返回值的新元素。
.find()	獲得當前匹配元素集合中每個元素的后代，由選擇器進行篩選。
.first()	將匹配元素集合縮減為集合中的第一個元素。
.has()	將匹配元素集合縮減為包含特定元素的后代的集合。
.is()	根據選擇器檢查當前匹配元素集合，如果存在至少一個匹配元素，則返回 true。
.last()	將匹配元素集合縮減為集合中的最后一個元素。
.map()	把當前匹配集合中的每個元素傳遞給函數，產生包含返回值的新 jQuery 對象。
.next()	獲得匹配元素集合中每個元素緊鄰的同輩元素。
.nextAll()	獲得匹配元素集合中每個元素之后的所有同輩元素，由選擇器進行篩選（可選）。
.nextUntil()	獲得每個元素之后所有的同輩元素，直到遇到匹配選擇器的元素為止。
.not()	從匹配元素集合中刪除元素。
.offsetParent()	獲得用于定位的第一個父元素。
.parent()	獲得當前匹配元素集合中每個元素的父元素，由選擇器篩選（可選）。
.parents()	獲得當前匹配元素集合中每個元素的祖先元素，由選擇器篩選（可選）。
.parentsUntil()	獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素為止。
.prev()	獲得匹配元素集合中每個元素緊鄰的前一個同輩元素，由選擇器篩選（可選）。
.prevAll()	獲得匹配元素集合中每個元素之前的所有同輩元素，由選擇器進行篩選（可選）。
.prevUntil()	獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。
.siblings()	獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。
.slice()	將匹配元素集合縮減為指定范圍的子集。

?

轉載于:https://www.cnblogs.com/lsgsanxiao/p/5121904.html

總結

以上是生活随笔為你收集整理的JQ学习（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

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