您好,登錄后才能下訂單哦!
今天小編給大家分享一下jQuery怎么實現點擊一下按鈕添加一個段落的相關知識點,內容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
一、jquery中的toggle()方法
toggle() 方法可以在其中添加兩個或多個函數,然后通過 click 事件進行切換,點擊時先調用第一個指定函數,再次點擊時調用第二個函數,以此類推,循環調用。
語法:$(selector)。toggle(function)
function指點擊時需要運行的函數
實例描述:當首次點擊“顯示與隱藏切換”按鈕時,隱藏P標簽的內容,當再次點擊時,顯示P標簽的內容,完整代碼如下:
顯示與隱藏切換
我可以顯示也可以隱藏
啦啦啦
$(document)。ready(function() {
$("button")。click(function() {
$("p")。toggle();
});
});
由下圖所示,第一張圖是沒有點擊時的效果,第二張圖是第一次點擊時的效果,將內容隱藏起來了。
二、jquery中的 hide() 和 show()方法
hide() 方法可以將被選元素隱藏起來,類似于 CSS 中的 display:none 屬性。show() 方法可以顯示隱藏的被選元素。 hide() 和 show()用法都一樣,只是一個顯示一個隱藏。
語法:$(selector)。hide(speed,easing,callback)
speed表示顯示效果的速度,是一個可選值(slow,fast,毫秒)
easing用于設置動畫的不同點上元素的速度,是一個可選值(swing,linear)
callback表示show()方法執行完之后,需要執行的函數,也是一個可選值
實例描述:當點擊“隱藏”按鈕時,隱藏P標簽的內容,當點擊“顯示”按鈕時,顯示P標簽的內容,具體代碼如下:
點擊隱藏按鈕,文字消失
點擊顯示按鈕,文字重現
隱藏
顯示
$(document)。ready(function() {
$("#hide")。click(function() {
$("#p1")。hide();
});
$("#show")。click(function() {
$("#p1")。show();
});
});
以上就是“jQuery怎么實現點擊一下按鈕添加一個段落”這篇文章的所有內容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。