首頁 > 文章 > web前端 > jQuery實作div顯示、隱藏和文字填充

jQuery實作div顯示、隱藏和文字填充

善始善终原創: 2020-08-26 22:25:362134瀏覽

使用原生JavaScript程式設計時候，我們發現其存在了不少的缺點：例如取得元素不方便，有時候還需要進行遍歷，遍歷裡面還可能存在嵌套，導致程式碼較為繁瑣，並且容差性差。今天就帶領大家用jQuery來實現第一個網頁。

（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中的36cc49f0c466276486e50c850b7e4956標籤前引入文件。

<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檔案;

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

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

（4）效果實作

(2）在3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0標籤中編寫入口函數

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

jQuery 入口函數與JavaScript 入口函數的差異：

jQuery 的入口函數是在html 所有標籤(DOM)都載入之後，就會去執行。

####顯示#########

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

###### ### 隱藏#########

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

#########文字填色#########

$(&#39;#text&#39;).click(function(){
    $("div").text("内容填充");
});(4) 按F12浏览页面效果。

###注意：如果你不希望下載並存放jQuery，那麼也可以透過CDN（內容分發網路）引用它。 Staticfile CDN、百度、又拍雲端、新浪、Google和微軟的伺服器都存有 jQuery 。如果你的網站使用者是國內的，建議使用百度、又拍雲、新浪等國內CDN地址，如果你網站使用者是國外的可以使用Google和微軟。例如你想使用百度的CDN，你可以用以下方式：###

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

以上是jQuery實作div顯示、隱藏和文字填充的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript jquery css html JS 事件 dom https

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jQuery框架概述下一篇：jQuery框架概述

看更多