jQuery實(shí)現(xiàn)div顯示、隱藏和文字填充的方法是什么-創(chuàng)新互聯(lián)

這篇文章主要介紹jQuery實(shí)現(xiàn)div顯示、隱藏和文字填充的方法是什么,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括南木林網(wǎng)站建設(shè)、南木林網(wǎng)站制作、南木林網(wǎng)頁制作以及南木林網(wǎng)絡(luò)營銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,南木林網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到南木林省份的部分城市,未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!

(1)使用HTML布局頁面

1)創(chuàng)建項(xiàng)目Pro_01,在項(xiàng)目下創(chuàng)建網(wǎng)頁,將其命名為index.html;

2) 在HTML頁面添加三個(gè)按鈕;

<input type="button" value="顯示" id="show" />
<input type="button" value="隱藏" id="hide" />
<input type="button" value="內(nèi)容填充" id="text"/>

3)在HTML頁面添加三個(gè)DIV標(biāo)簽;

<div></div>
<div></div>
<div></div>

(2)使用CSS美化頁面

1)在該項(xiàng)目下創(chuàng)建css文件夾;

2)創(chuàng)建css文件,命名為style.css,在index.html中的</body>標(biāo)簽前引入文件。

<head>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>

3) 在style.css文件下添加頁面樣式

  • 全局樣式

*{
       margin: 0;
       padding: 0;
}
  • div樣式

div{
        width:500px;
       height:100px;
       border:1px solid #a5b6c8;
       background:#eef3f7;
       display: none;
    }

4) 按F12瀏覽頁面效果。

(3)引入jQuery文件

1)在官方網(wǎng)站(https://jquery.com/download/)下載jquery-3.5.1.js文件;

2) 下載完成后,在該項(xiàng)目下創(chuàng)建js文件夾,將下載的jquery-3.5.1js文件放入js文件夾中;

注意:本案例使用的jQuery版本是3.5.1,本案例中將jQuery庫文件放在文件夾js下面,為了方便調(diào)試,使用相對路徑。

3) 在index.html中的</body>標(biāo)簽前引入文件。

<script type="text/javascript" src="js/jquery-3.5.1.js"></script>

(4)效果實(shí)現(xiàn)

1) 在index.html頁面的</body>標(biāo)簽前創(chuàng)建<script></script>標(biāo)簽;

(2) 在<script></script>標(biāo)簽中編寫入口函數(shù)

$(document).ready(function(){
});

注意:

jQuery 入口函數(shù)與 JavaScript 入口函數(shù)的區(qū)別:

  • jQuery 的入口函數(shù)是在 html 所有標(biāo)簽(DOM)都加載之后,就會(huì)去執(zhí)行。

  • JavaScript 的 window.onload 事件是等到所有內(nèi)容,包括外部圖片之類的文件加載完后,才會(huì)執(zhí)行。

(3) 在入口函數(shù)下注冊事件

  • 顯示

$('#show').click(function(){
   $("div").show();
});
  • 隱藏

$('#hide').click(function(){
   $("div").hide();
}
  • 文本填充

$('#text').click(function(){
    $("div").text("內(nèi)容填充");
});(4) 按F12瀏覽頁面效果。

注意:如果你不希望下載并存放 jQuery,那么也可以通過 CDN(內(nèi)容分發(fā)網(wǎng)絡(luò)) 引用它。Staticfile CDN、百度、又拍云、新浪、谷歌和微軟的服務(wù)器都存有 jQuery 。如果你的站點(diǎn)用戶是國內(nèi)的,建議使用百度、又拍云、新浪等國內(nèi)CDN地址,如果你站點(diǎn)用戶是國外的可以使用谷歌和微軟。比如你想使用百度的CDN,你可以通過如下方式:

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

以上是jQuery實(shí)現(xiàn)div顯示、隱藏和文字填充的方法是什么的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道!

分享標(biāo)題:jQuery實(shí)現(xiàn)div顯示、隱藏和文字填充的方法是什么-創(chuàng)新互聯(lián)
瀏覽地址:http://bm7419.com/article46/cesohg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、網(wǎng)站收錄網(wǎng)站排名、ChatGPTApp開發(fā)、虛擬主機(jī)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都做網(wǎng)站