1.JQ中顯隱有以下幾種方式
創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、復(fù)興網(wǎng)絡(luò)推廣、微信小程序開(kāi)發(fā)、復(fù)興網(wǎng)絡(luò)營(yíng)銷、復(fù)興企業(yè)策劃、復(fù)興品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等,從售前售中售后,我們都將竭誠(chéng)為您服務(wù),您的肯定,是我們最大的嘉獎(jiǎng);創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供復(fù)興建站搭建服務(wù),24小時(shí)服務(wù)熱線:13518219792,官方網(wǎng)址:www.cdcxhl.com
show(),hide(),toggle(),slideDown()然后還有css設(shè)置div的style屬性都可操作
2.show()方法
顯示出隱藏的?p?元素。
$(".btn2").click(function(){
$("p").show();
});
3.toggle()方法
toggle()?方法切換元素的可見(jiàn)狀態(tài)。
如果被選元素可見(jiàn),則隱藏這些元素,如果被選元素隱藏,則顯示這些元素。
html
head
script?type="text/javascript"?src="/jquery/jquery.js"/script
script?type="text/javascript"
$(document).ready(function(){
$(".btn1").click(function(){
$("p").toggle(1000);
});
});
/script
/head
body
pThis?is?a?paragraph./p
button?class="btn1"Toggle/button
/body
/html
3.slideDown()方法
以滑動(dòng)方式顯示隱藏的?p?元素:
$(".btn2").click(function(){
$("p").slideDown();
});
4.hide()?方法
隱藏可見(jiàn)的?p?元素:
$(".btn1").click(function(){
$("p").hide();
});
這個(gè)函數(shù)經(jīng)常與show一起使用
5.css()方法
css()?方法設(shè)置或返回被選元素的一個(gè)或多個(gè)樣式屬性。
返回?CSS?屬性
如需返回指定的?CSS?屬性的值,請(qǐng)使用如下語(yǔ)法:
css("propertyname");
$("p").css("display","none");
實(shí)例:
!DOCTYPE?
html?
head?
meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/?
script?type="text/javascript"?
$(document).ready(??function(){});?
function?hiden(){?
$("#divObj").hide();//hide()函數(shù),實(shí)現(xiàn)隱藏,括號(hào)里還可以帶一個(gè)時(shí)間參數(shù)(毫秒)例如hide(2000)以2000毫秒的速度隱藏,還可以帶slow,fast?
}?
function?slideToggle(){?
$("#divObj").slideToggle(2000);//窗簾效果的切換,點(diǎn)一下收,點(diǎn)一下開(kāi),參數(shù)可以無(wú),參數(shù)說(shuō)明同上?
}?
function?show(){?
$("#divObj").show();//顯示,參數(shù)說(shuō)明同上?
}?
function?toggle(){?
$("#divObj").toggle(2000);//顯示隱藏切換,參數(shù)可以無(wú),參數(shù)說(shuō)明同上?
}?
function?slide(){?
$("#divObj").slideDown();//窗簾效果展開(kāi)?
}?
/script?
/head?
body?
h3div里內(nèi)容的顯示隱藏特效/h3?
input?type="button"?value="隱藏"?onclick="hiden()"/?
input?type="button"?value="顯示"?onclick="show()"/?
input?type="button"?value="窗簾效果顯示2"?onclick="slide()"/?
input?type="button"?value="窗簾效果的切換"?onclick="slideToggle()"/?
input?type="button"?value="隱藏顯示效果切換"?onclick="toggle()"/?
div?id="divObj"?style="display:none"?
1.測(cè)試?yán)觔r/?
2.測(cè)試?yán)觔r/?
3.測(cè)試?yán)觔r/?
4.測(cè)試?yán)觔r/?
5.測(cè)試?yán)觔r/?
6.測(cè)試?yán)觔r/?
7.測(cè)試?yán)觔r/?
8.測(cè)試?yán)觔r/?
9.測(cè)試?yán)觔r/?
0.測(cè)試?yán)觔r/?
/div?
/body?
/html
用jquery實(shí)現(xiàn)點(diǎn)擊顯示,再一次點(diǎn)擊隱藏的方法是使用toggle方法。
說(shuō)明:toggle() 方法切換元素的可見(jiàn)狀態(tài)。
如果被選元素可見(jiàn),則隱藏這些元素,如果被選元素隱藏,則顯示這些元素。
舉例說(shuō)明:
html
head
script type="text/javascript" src="/jquery/jquery.js"/script
script type="text/javascript"
$(document).ready(function(){
$(".btn1").click(function(){
$("p").toggle(1000);
});
});
/script
/head
body
pThis is a paragraph./p
button class="btn1"Toggle/button
/body
/html
代碼解讀:
$(".btn1").click(function(){
$("p").toggle(1000); //控制文件This is a paragraph的顯示和隱藏,如果當(dāng)前是顯示的,點(diǎn)擊就隱藏了。
});
jequery在點(diǎn)擊一個(gè)按鈕時(shí)使用jquery隱藏一個(gè)元素是jQuery提供了toggle()函數(shù)用于切換顯示和隱藏:顯示被隱藏的元素,隱藏已顯示的元素,示例代碼。
拓展資料:
html代碼如下:其中有一個(gè)button和一個(gè)div
input type="button" value="button"/
div id="mydiv"/div2.
js代碼如下:
$(function(){
$('input:button').click(function(){ $('div').fadeToggle() }
示例html
div?class="abc"?style="display:none"/div
input?type="button"?class="but"?/
最簡(jiǎn)單的方法:
script
$(document).ready(function(e)?{
$(".but").click(function(e)?{
$(".abc").toggle();
});
});
/script
toggle() 的作用就是當(dāng)對(duì)象是顯示的就隱藏,當(dāng)是隱藏的則顯示。
------
如果你除了顯示和隱藏之外還需要同時(shí)實(shí)現(xiàn)其他功能的話,可以這樣:
script
$(document).ready(function(e)?{
$(".but").click(function(e)?{
if(?$(".abc").hasClass("show")?){
//?執(zhí)行隱藏
$(".abc").hide().removeClass("show");
//?其他
}else{
//?顯示
$(".abc").show().addClass("show");
}
});
});
/script
這里通過(guò)自定義一個(gè) class : show 來(lái)判斷 div 是顯示或隱藏
hasClass() 是否存在某個(gè)class
hide() 隱藏對(duì)象
show() 顯示對(duì)象
removeClass() 移除一個(gè)class
addClass() 添加一個(gè)class
除此,還可以通過(guò)jquery設(shè)置這個(gè) div 的 css : display:none/block 來(lái)實(shí)現(xiàn)隱藏/顯示
PS:jquery如何刪除div里面的某個(gè)div
思路:首先獲取到需要?jiǎng)h除的對(duì)象,然后使用jQuery提供的 remove() 方法刪除被選元素及其子元素。
例如,對(duì)于如下的HTML結(jié)構(gòu):
div id="test"
div id="test1"/div
div class="test2"/div
div class="test2"/div
div/div
/div
1、刪除id為test1的div
首先使用id選擇器獲取元素,然后使用remove()函數(shù)刪除,相應(yīng)代碼為:
$("div#test1").remove();
2、刪除所有class為test2的元素
$("#test div.test2").remove(); ? // 或者 ?$("div").remove("#test .test2");
3、刪除最后一個(gè)div
雖然該div沒(méi)有id及class屬性,但是可以從其位置關(guān)系上獲取然后刪除之:
$("#test div:last").remove();
1、jquery.show()和jquery.hide()方法
語(yǔ)法:
$(selector).show(speed,callback);
$(selector).hide(speed,callback);
2、jquery.toggle()方法
語(yǔ)法:
$(selector).toggle(speed,callback);
3、帶有淡入淡出效果的顯示和隱藏
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeToggle(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
4、帶有滑動(dòng)效果的顯示和隱藏
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
注意:
可選的 speed 參數(shù)規(guī)定效果的時(shí)長(zhǎng)。它可以取以下值:"slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是滑動(dòng)完成后所執(zhí)行的函數(shù)名稱。