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

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

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

（1）使用HTML布局頁面

1）創(chuàng)建項目Pro_01，在項目下創(chuàng)建網頁，將其命名為index.html；

2）在HTML頁面添加三個按鈕；

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

3）在HTML頁面添加三個DIV標簽；

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

（2）使用CSS美化頁面

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

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

<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）在官方網站（https://jquery.com/download/）下載jquery-3.5.1.js文件；

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

注意：本案例使用的jQuery版本是3.5.1，本案例中將jQuery庫文件放在文件夾js下面，為了方便調試，使用相對路徑。

3）在index.html中的</body>標簽前引入文件。

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

（4）效果實現(xiàn)

1）在index.html頁面的</body>標簽前創(chuàng)建<script></script>標簽；

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

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

注意：

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

jQuery 的入口函數(shù)是在 html 所有標簽(DOM)都加載之后，就會去執(zhí)行。
JavaScript 的 window.onload 事件是等到所有內容，包括外部圖片之類的文件加載完后，才會執(zhí)行。

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

顯示

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

隱藏

$('#hide').click(function(){
   $("div").hide();
}

文本填充

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

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

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

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

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

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網站制作、網站收錄、網站排名、ChatGPT、App開發(fā)、虛擬主機

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

猜你還喜歡下面的內容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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