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

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

善始善终
發布: 2020-08-27 14:03:00
原創
2172 人瀏覽過

使用原生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中的標籤前引入文件。

<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中的標籤前引入文件。
  • <script type="text/javascript" src="js/jquery-3.5.1.js"></script>
    登入後複製

    (4)效果實作

  • 1) 在index.html頁面的標籤前建立<script></script>標籤;

(2) 在<script></script>標籤中編寫入口函數

$(document).ready(function(){
});
登入後複製
    注意:
  • jQuery 入口函數與JavaScript 入口函數的差異:
  • jQuery 的入口函數是在html 所有標籤(DOM)都載入之後,就會去執行。

    JavaScript 的 window.onload 事件是等到所有內容,包括外部圖片之類的檔案載入完後,才會執行。
  • (3) 在入口函數下註冊事件

####顯示#########
$(&#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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板