jQuery實(shí)現(xiàn)div顯示、隱藏和文字填充的方法是什么

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

目前創(chuàng)新互聯(lián)已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、石樓網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

（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)試，使用相對(duì)路徑。

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ù)下注冊(cè)事件

顯示

$('#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)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：jQuery實(shí)現(xiàn)div顯示、隱藏和文字填充的方法是什么
URL地址：http://www.rwnh.cn/article10/ghcgdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、電子商務(wù)、App設(shè)計(jì)、面包屑導(dǎo)航、定制網(wǎng)站

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

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

jQuery實(shí)現(xiàn)div顯示、隱藏和文字填充的方法是什么

jQuery實(shí)現(xiàn)div顯示、隱藏和文字填充的方法是什么