溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹jQuery實現div顯示、隱藏和文字填充的方法是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
（1）使用HTML布局頁面
1）創建項目Pro_01，在項目下創建網頁，將其命名為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）在該項目下創建css文件夾；
2）創建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） 下載完成后，在該項目下創建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）效果實現
1） 在index.html頁面的</body>標簽前創建<script></script>標簽；
(2） 在<script></script>標簽中編寫入口函數
$(document).ready(function(){
});注意：
jQuery 入口函數與 JavaScript 入口函數的區別：
jQuery 的入口函數是在 html 所有標簽(DOM)都加載之后，就會去執行。
JavaScript 的 window.onload 事件是等到所有內容，包括外部圖片之類的文件加載完后，才會執行。
(3) 在入口函數下注冊事件
顯示
$('#show').click(function(){
$("div").show();
});隱藏
$('#hide').click(function(){
$("div").hide();
}文本填充
$('#text').click(function(){
$("div").text("內容填充");
});(4) 按F12瀏覽頁面效果。注意：如果你不希望下載并存放 jQuery，那么也可以通過 CDN（內容分發網絡） 引用它。Staticfile CDN、百度、又拍云、新浪、谷歌和微軟的服務器都存有 jQuery 。如果你的站點用戶是國內的，建議使用百度、又拍云、新浪等國內CDN地址，如果你站點用戶是國外的可以使用谷歌和微軟。比如你想使用百度的CDN，你可以通過如下方式：
<head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head>
以上是jQuery實現div顯示、隱藏和文字填充的方法是什么的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
