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

發(fā)布時(shí)間：2020-08-28 14:18:21 來源：億速云閱讀：262 作者：小新欄目：web開發(fā)

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

（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)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

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