一.使用JQuery使用
公司主營業(yè)務:成都做網(wǎng)站、網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化,感謝他們對我們的高要求,感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn),讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出高坪免費做網(wǎng)站回饋大家。
二.jquery判斷元素是否隱藏
三.使用JS隱藏和顯示
a.隱藏后釋放占用的頁面空間
通過設置display屬性可以使div隱藏后釋放占用的頁面空間.
style="display: none;"
b.隱藏后仍占有頁面空間,顯示空白
div的visibility可以控制div的顯示和隱藏,但是隱藏后頁面顯示空白.
style="visibility: none;"
1.JQ中顯隱有以下幾種方式
show(),hide(),toggle(),slideDown()然后還有css設置div的style屬性都可操作
2.show()方法
顯示出隱藏的?p?元素。
$(".btn2").click(function(){
$("p").show();
});
3.toggle()方法
toggle()?方法切換元素的可見狀態(tài)。
如果被選元素可見,則隱藏這些元素,如果被選元素隱藏,則顯示這些元素。
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()方法
以滑動方式顯示隱藏的?p?元素:
$(".btn2").click(function(){
$("p").slideDown();
});
4.hide()?方法
隱藏可見的?p?元素:
$(".btn1").click(function(){
$("p").hide();
});
這個函數(shù)經(jīng)常與show一起使用
5.css()方法
css()?方法設置或返回被選元素的一個或多個樣式屬性。
返回?CSS?屬性
如需返回指定的?CSS?屬性的值,請使用如下語法:
css("propertyname");
$("p").css("display","none");
實例:
!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ù),實現(xiàn)隱藏,括號里還可以帶一個時間參數(shù)(毫秒)例如hide(2000)以2000毫秒的速度隱藏,還可以帶slow,fast?
}?
function?slideToggle(){?
$("#divObj").slideToggle(2000);//窗簾效果的切換,點一下收,點一下開,參數(shù)可以無,參數(shù)說明同上?
}?
function?show(){?
$("#divObj").show();//顯示,參數(shù)說明同上?
}?
function?toggle(){?
$("#divObj").toggle(2000);//顯示隱藏切換,參數(shù)可以無,參數(shù)說明同上?
}?
function?slide(){?
$("#divObj").slideDown();//窗簾效果展開?
}?
/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.測試例子br/?
2.測試例子br/?
3.測試例子br/?
4.測試例子br/?
5.測試例子br/?
6.測試例子br/?
7.測試例子br/?
8.測試例子br/?
9.測試例子br/?
0.測試例子br/?
/div?
/body?
/html
1、使用jquery的hide()方法
例子:
$("#content").hide();//隱藏input;content為input的id
$("#content").show();//顯示被隱藏的元素;??content為input的id
2、使用jquery的css方法
$("#id").css('display','none');?
$("#id").css('display','block');
3、操作input的style
$("#id")[0].style.display?=?'none';//隱藏input
//$("#id")返回的是JQuery?
$("#id")[0].style.display?=?'block';//顯示input
1、jquery.show()和jquery.hide()方法
語法:
$(selector).show(speed,callback);
$(selector).hide(speed,callback);
2、jquery.toggle()方法
語法:
$(selector).toggle(speed,callback);
3、帶有淡入淡出效果的顯示和隱藏
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeToggle(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
4、帶有滑動效果的顯示和隱藏
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
注意:
可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是滑動完成后所執(zhí)行的函數(shù)名稱。
頁面放一張圖:
img id="myImg" src="./myPic.png"
按鈕,按鈕的點擊事件調(diào)用myFun函數(shù):
button value="按鈕" onclick="myFun();"
js中加入這個函數(shù),利用jQuery的hide方法進行隱藏:
function myFun(){
$("#myImg").hide(); //獲取id為myImg的元素并隱藏
}
.hide()
這個方法不接受任何參數(shù)。
.hide(
[duration
]
[,
complete
]
)
duration
(默認:
400)
類型:
Number
or
String
一個字符串或者數(shù)字決定動畫將運行多久。
complete
類型:
Function()
在動畫完成時執(zhí)行的函數(shù)。
如果沒有參數(shù),.hide()方法是最簡單的方法來隱藏一個元素:
$('.target').hide();
匹配的元素將被立即隱藏,沒有動畫。這大致相當于調(diào)用.css('display',
'none'),但display屬性值保存在jQuery的數(shù)據(jù)緩存中,所以display可以方便以后可以恢復到其初始值。如果一個元素的display屬性值為inline,那么隱藏再顯示時,這個元素將再次顯示inline。