script src="jQuery/jquery.js"/script!--請(qǐng)留意JQ引用位置--
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、重慶小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了通道免費(fèi)建站歡迎大家使用！
!--腳本部分開(kāi)始--
script language="javascript"
$(document).ready(function(){
//第一行，鼠標(biāo)移到P標(biāo)簽，span中的元素顯示
$("img#p1").mouseover(function(){$("img#span1").show()})
//第二行，鼠標(biāo)離P標(biāo)簽，span中的元素隱藏
$("img#p1").mouseout(function()｛$('img#span1').hide()})
})
/script
!--腳本部分結(jié)束--
!--HTML部分開(kāi)始--
p id="p1"把鼠標(biāo)移動(dòng)到這里來(lái)/p
spanimg id="span1" src="span圖片.JPG" style="display:none"/我是顯示內(nèi)容1/span
!--HTML部分結(jié)束--
!--解釋：通過(guò)jQuery的show()、hide()函數(shù)可以實(shí)現(xiàn)顯示和隱藏功能，通過(guò)jQuery的CSS選擇器可以選擇HTML標(biāo)簽--
判斷方法：
1、使用CSS屬性
var display =$('#id').css('display');
if(display == 'none'){
alert("被你發(fā)現(xiàn)了，我是隱藏的啦！"
);}
2、使用jquery內(nèi)置選擇器
假設(shè)我們頁(yè)面有這么個(gè)標(biāo)簽,
div id="test"p僅僅是測(cè)試所用/p/div
那么,我們可以用以下語(yǔ)句來(lái)判斷id為"test"的標(biāo)簽是否隱藏:
if($("#test").is(":hidden")){...} //前提是已經(jīng)將jQuery的庫(kù)導(dǎo)進(jìn)來(lái)了
這樣,我們就能夠很簡(jiǎn)單地判斷一個(gè)元素是否隱藏,并根據(jù)其狀態(tài)來(lái)設(shè)置動(dòng),比如:
if($("#test").is(":hidden")){
$("#test").show();? //如果元素為隱藏,則將它顯現(xiàn)
}else{
$("#test").hide();???? //如果元素為顯現(xiàn),則將其隱藏
}
3、jQuery判斷對(duì)象是否顯示或隱藏
Js代碼
// jQuery("#tanchuBg").css("display")
// jQuery("#tanchuBg").is(":visible")
// jQuery("#tanchuBg").is(":hidden")
擴(kuò)展資料：
jQuery語(yǔ)言特點(diǎn)：
1、快速獲取文檔元素
jQuery的選擇機(jī)制構(gòu)建于Css的選擇器，它提供了快速查詢DOM文檔中元素的能力，而且大大強(qiáng)化了JavaScript中獲取頁(yè)面元素的方式。
2、提供漂亮的頁(yè)面動(dòng)態(tài)效果
jQuery中內(nèi)置了一系列的動(dòng)畫效果，可以開(kāi)發(fā)出非常漂亮的網(wǎng)頁(yè)，許多網(wǎng)站都使用jQuery的內(nèi)置的效果，比如淡入淡出、元素移除等動(dòng)態(tài)特效。
3、創(chuàng)建AJAX無(wú)刷新網(wǎng)頁(yè)
AJAX是異步的JavaScript和ML的簡(jiǎn)稱，可以開(kāi)發(fā)出非常靈敏無(wú)刷新的網(wǎng)頁(yè)，特別是開(kāi)發(fā)服務(wù)器端網(wǎng)頁(yè)時(shí)，比如PHP網(wǎng)站，需要往返地與服務(wù)器通信，如果不使用AJAX，每次數(shù)據(jù)更新不得不重新刷新網(wǎng)頁(yè)，而使用AJAX特效后，可以對(duì)頁(yè)面進(jìn)行局部刷新，提供動(dòng)態(tài)的效果。
4、提供對(duì)JavaScript語(yǔ)言的增強(qiáng)
jQuery提供了對(duì)基本JavaScript結(jié)構(gòu)的增強(qiáng)，比如元素迭代和數(shù)組處理等操作。
5、增強(qiáng)的事件處理
jQuery提供了各種頁(yè)面事件，它可以避免程序員在HTML中添加太事件處理代碼，最重要的是，它的事件處理器消除了各種瀏覽器兼容性問(wèn)題。
6、更改網(wǎng)頁(yè)內(nèi)容
jQuery可以修改網(wǎng)頁(yè)中的內(nèi)容，比如更改網(wǎng)頁(yè)的文本、插入或者翻轉(zhuǎn)網(wǎng)頁(yè)圖像，jQuery簡(jiǎn)化了原本使用JavaScript代碼需要處理的方式。
參考資料：百度百科——jQuery
思路：使用hide()隱藏所有元素→使用選擇器first,first-child,nth-child(1)等獲取第一個(gè)元素→使用show()顯示第一個(gè)元素。
實(shí)例演示如下:
1、HTML結(jié)構(gòu)
div?id="test"
liGlen/li
liTane/li
liJohn/li
liRalph/li
/div
2、jquery代碼
$(function(){
$("#test?li").hide();
$("#test?li").eq(0).show();
});
3、顯示效果
………………竟然有人問(wèn)這種問(wèn)題………………
舉例
html
head
script?type="text/javascript"?src="/jquery/jquery.js"/script
script?type="text/javascript"
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
$(".btn3").click(function(){
$("p").toggle();
});
});
/script
/head
body
pThis?is?a?paragraph./p
button?class="btn3"切換/button
button?class="btn1"Hide/button
button?class="btn2"Show/button
/body
/html
授之以漁
首先選擇需要循環(huán)顯示的元素，然后用jquery的遍歷函數(shù)（如each()和map()）將其顯示出來(lái)即可：
$(selector).each(function(index,element));???//?為每個(gè)匹配元素規(guī)定運(yùn)行的函數(shù)
$(selector).map(function(index,domElement));?//?對(duì)當(dāng)前集合中的每個(gè)元素調(diào)用的函數(shù)對(duì)象
實(shí)例演示：點(diǎn)擊按鈕獲取第二個(gè)div下所有p標(biāo)簽的值
創(chuàng)建Html元素
div?class="box"
span點(diǎn)擊按鈕獲取第二個(gè)div下所有p標(biāo)簽的值：/spanbr
div?class="content"
??paaaa/p
??pbbbb/p
??pcccc/p
/div ?
div?class="content"
??p1111/p
??p2222/p
??p3333/p
/div ?
div?class="content"
??p555/p
??p666/p
??p77777/p
/div
input?type="button"?value="獲取第二個(gè)div下所有p標(biāo)簽的值"
/div
設(shè)置css樣式
div.box{width:300px;padding:20px;margin:20px;border:4px?dashed?#ccc;}
div.boxspan{color:#999;font-style:italic;}
div.content{width:250px;margin:10px?0;padding:20px;border:2px?solid?#ff6666;}
編寫jquery代碼
$(function(){?
$("input:button").click(function()?{
text?=?$("div.content").eq(1).find("p").map(function(index,elem)?{
return?$(elem).text();
}).get().join(',');
alert("第二個(gè)div下p標(biāo)簽依次為："+text);
});
});
觀察效果
重慶分公司
重慶分公司
