前端開發：JQuery（2）& Bootstrap

時間 2019-11-21

標籤前端開發 jquery bootstrap 欄目 JQuery 简体版

原文原文鏈接

JS事件流javascript

事件的概念：HTML中與javascript交互是經過事件驅動來實現的，例如鼠標點擊事件、頁面的滾動事件onscroll等等，能夠向文檔或者文檔中的元素添加事件偵聽器來預訂事件。css

事件流：事件流描述的是從頁面中接收事件的順序；包括3個階段：html

　　1. 事件捕獲階段；html5

　　2. 處於目標階段；java

　　3. 事件冒泡階段。python

一、addEventListenerjquery

　　addEventListener 是DOM2 級事件新增的指定事件處理程序的操做，這個方法接收3個參數：要處理的事件名、做爲事件處理程序的函數和一個布爾值。最後這個布爾值參數若是是true，表示在捕獲階段調用事件處理程序；若是是false，表示在冒泡階段調用事件處理程序。ajax

二、document、documentElement和document.body三者之間的關係：bootstrap

　　(1). document表明的是整個html頁面；api

　　(2). document.documentElement表明的是<html>標籤；

　　(3). document.body表明的是<body>標籤；

首先在事件捕獲過程當中，document對象首先接收到click事件，而後事件沿着DOM樹依次向下，一直傳播到事件的實際目標，就是id爲btn的a標籤。

接着在事件冒泡過程當中，事件開始時由最具體的元素（a標籤）接收，而後逐級向上傳播到較爲不具體的節點（document）。

注意：JQuery不支持事件捕獲階段，只有事件冒泡階段

JQuery的事件對象和事件冒泡

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jquery的事件對象和事件冒泡</title>
    <style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background: grey;
        }
        p{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="box">
        <p class="p1"></p>

        <a href="https://wwww.baidu.com">去百度</a>
    </div>

</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    // ev爲事件對象；會傳遞到函數中
    $('.p1').click(function(ev){
        // 事件屬性
        console.log(ev.type); // 獲取事件的類型
        console.log(ev.target);  // 獲取事件發生的DOM對象
        console.log(ev.pageX);  // 獲取光標相對於頁面的x軸的座標
        console.log(ev.pageY);  // 光標相對於頁面y軸的座標

        alert('當前事件觸發了')
        // 事件方法
        // 經常使用方法：1. 阻止事件冒泡； 2. 阻止默認事件
        // 1. 阻止事件冒泡
        ev.stopPropagation(); // 當點擊這個p標籤時，只有這個p標籤中的alert會觸發，#box中的alert將再也不被觸發；由於阻止了向父盒子中冒泡

    })

    $('#box').click(function(){
        alert('#box盒子事件觸發了')
    })

    // 2. 阻止默認事件
    // 默認事件如 a標籤的點擊事件，form表單的submit事件
    // 注意：全部DOM元素都能加點擊事件
    $('a').click(function(ev){
        // ev.preventDefault(); // 阻止默認事件
        // ev.stopPropagation();  // 這兩句代碼可合併成一句，以下 

        alert('哈哈哈')

        return false;  // return false 表示阻止事件的默認行爲和冒泡行爲（jquery沒有捕獲）
    })


</script>
</html>

JQuery事件的邦定和移除、自定義事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery事件的邦定和移除&自定義事件</title>
    <style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="box">
        
    </div>
    <button>按鈕</button>

</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function(){
        // 1. 事件的邦定

        // 給當前的元素邦定事件： JQuery對象.bind(事件類型,fn) ； 事件類型可添加多個，中間用空格隔開
        // 多個事件作同一件事情
        // $('#box').bind('click mouseenter',function(){
        //     alert('事件被邦定了')
        // })

        // 不一樣事件對應不一樣的函數 （對象的形式）
        function add1(){
                console.log('邦定click事件')
        }
        function add2(){
                console.log('邦定mouseenter事件')
        }
        $('#box').bind({
            'click':add1,
            'mouseenter':add2
        })

        // 2. 事件的移除： .unbind() ； 若是unbind()中沒有參數，意味着移除元素的全部事件
        setTimeout(function(){
        //     // $('#box').unbind() 
        //     $('#box').unbind('mouseenter') // 僅移除 mouseenter 事件；若是移除多個事件，用空格隔開
        },3000)

        // 添加的事件不能發生在將來 ---> 動態生成的元素不能直接添加到對象，因此裏面的事件也就不能發生 ---> 解決方法：事件代理
        $('body').append('<div class="box" style="width:100px;height:100px;background:yellow">哈哈哈哈</div>')

        // 3. 邦定自定義的事件
        $('button').bind('myClick',function(ev,a,b,c){  // ev是事件對象；a,b,c是 trigger()中數組裏面的元素（按順序解析分配）
            alert(111);

            alert(a);
            alert(b);
            alert(c);
        })
        // 觸發自定義的事件： myClick事件須要經過 下面的代碼去觸發
        $('button').trigger('myClick',[1,2,3]);
    })
</script>
</html>

事件代理（也叫「事件委託」）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>事件代理</title>
</head>
<body>
    <ul>
        <li class="luffy">路飛</li>
        <li class="luffy">路飛</li>
        <li class="luffy">路飛</li>
    </ul>

</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    // 經過 bind方法、系統自帶的方法(如click)都不能處理 將來添加的元素

    // 事件代理：本身處理不了當前的事件，就交給它的父級元素來作這個事件
    // 語法： 父級.on('事件名字','所要處理的當前標籤元素',fn)  
    // on和bind都是用於事件邦定，一般事件邦定都用bind，on主要是用於事件代理
    $('ul').on('click','#namei,.luffy',function(){ // 第二個參數是選擇器；多個選擇器用 逗號(,) 分隔
        console.log(this)
    })

    // 後來添加的事件
    $('ul').append('<li id="namei">娜美</li>');  
    // 經過事件代理，後來添加的元素也可以處理相應的事件

</script>
</html>

JQuery的鼠標事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jquery的鼠標事件一</title>
    <style type="text/css">
        *{padding: 0;margin: 0;}
        #box{
            width: 200px;
            height: 200px;
            background: grey;
        }
        #child{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="child">
            
        </div>

        <input type="text" name="" id="" value="123">
        <br>
        <input type="password" name="">
        
    </div>

</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function(){
        // 1. 單擊事件： click()

        // 2. 雙擊事件： dblclick()
        /*
        $('#box').dblclick(function(){
            console.log('dblclick');
        })
        */

        // 3. 鼠標按下/彈起：mousedown()/mouseup()
        /*
        $('#box').mousedown(function(){
            console.log('mousedown');
        })
        $('#box').mouseup(function(){
            console.log('mouseup');
        })
        */


        // 4. 鼠標移入/移出： mouseover()/mouseout() ； 移入/移出被選元素或者其子元素的時候觸發
        /*
        $('#box').mouseover(function(){
            console.log('mouseover');
        })
        $('#box').mouseout(function(){
            console.log('mouseout');
        })
        */

        // 5. mouseenter()/mouseleave()：鼠標進入/離開；鼠標指針只在穿過/離開被選元素時觸發事件(被選元素及其子元素之間的移入移出不會觸發)
        /*
        $('#box').mouseenter(function(){
            console.log('mouseover');
        })
        $('#box').mouseleave(function(){
            console.log('mouseout');
        })
        */

        // 6. mousemove()：實時監測鼠標的移動;應用場景：拖拽
        /*
        $('#box').mousemove(function(){
            console.log('mousemove');
        })
        */

        // 7. 獲取焦點/失去焦點（不支持冒泡）： focus()/blur()
        /*
        $('input[type=text]').focus(function(){
            console.log($(this).val())  // input,textarea獲取值用val();其它的元素用text()或者html()
        })
        $('input[type=text]').blur(function(){
            console.log($(this).val());
        })
        */

        // 8. keydown()/keyup()：鍵盤按鍵按下/彈起
        $('input[type=password]').keydown(function(){
            console.log($(this).val());
        })
        $('input[type=password]').keyup(function(){
            console.log($(this).val());
        })

    })
</script>
</html>

表單事件

change事件通常僅限於input元素；

select是文本元素髮生改變時觸發的事件，例如input中拿鼠標複製的時候選中；select僅限於type=text的input和textarea

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jquery的表單事件</title>
    <style type="text/css">
        .show{
            color: red;
        }
    </style>
</head>
<body>
    <form action="https:www.baidu.com">
        <select name="sweets" id="" multiple="">
            <option value="">巧克力</option>
            <option value="" selected="">糖果</option>
            <option value="">焦糖</option>
            <option value="" selected="">曲奇餅</option>
            <option value="">燒餅</option>
            <option value="">麥香餅</option>
            <option value="">曲奇餅</option>
        </select>
        <input type="text" name="hello" id="target">
        <input type="submit" name="submit">
    </form>

    <textarea id="other">Trigger the handler</textarea>

    <div class="show"></div>

</body>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function(){
        // 1. change()：表單元素髮生改變時觸發事件
        // change事件僅限於input元素、textarea、select
        $('select').change(function(){
            $('.show').text($('select option:selected').text()); // 選中的內容添加到show盒子中
        })

        // 2. select()： 文本元素髮生改變時觸發事件
        // select事件僅限於type類型爲text的input和textarea表單元素
        $('#other').select(function(){
            console.log($(this).val()); // 表單控件的取值用 .val()
        })

        // 3. submit()：表單元素髮生改變時觸發事件
        // form表單有默認的submit行爲，當對input type=submit按鈕點擊的時候會觸發form的默認action行爲，此時能夠調用 jquery的submit方法，經過 e.preventDefault()來阻止默認事件
        $('form').submit(function(e){
            // 阻止默認事件
            e.preventDefault();

            // 定義本身的邏輯
            alert(111);
        })

    })
</script>
</html>

JQuery的ajax技術

AJAX = 異步的javascript和XML（Asynchronous Javascript and XML）

簡言之，在不重載整個網頁的狀況下，AJAX經過後臺加載數據，並在網頁上進行顯示。

經過 jQuery AJAX 方法，您可以使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您可以把這些外部數據直接載入網頁的被選元素中。
AJAX最重要的做用是局部刷新和異步處理數據

參考連接： https://www.luffycity.com/python-book/jquery/9413-jqueryde-ajax.html

Bootstrap

Bootstrap 是基於 HTML、CSS、javascript 的，它用於開發響應式佈局（自適應的頁面）、移動設備優先的 WEB 項目

引入方式：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 視口的設置：移動設備優先；支持移動端，在多個設備上適應，如PC，Iphone，Android等 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->

    <title>示例/title>

    <!-- Bootstrap：必須引入Bootstrap -->
   <!--  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
   <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap.min.css">

    <!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：經過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起做用 -->

    <!-- 若是是在IE 9 如下瀏覽器中打開，須要把下面的註釋代碼打開 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- 若是須要引入Bootstrap中的插件，須要先引入JQuery，再引入Bootstrap內的JS -->

    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <!-- <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> -->
    
    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <!-- <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
  </body>
</html>

響應式頁面

CSS3的媒體查詢：使用 @media 查詢，你能夠針對不一樣的屏幕大小定義不一樣的樣式。 @media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要設置設計響應式的頁面，@media 是很是有用的。當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>媒體查詢</title>

    <!-- 使用@media（媒體查詢）， 必須作如下操做 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <!-- 
    width = device-width：寬度等於當前設備的寬度 initial-scale：初始的縮放比例（默認設置爲1.0，即表明不縮放）
    user-scalable：用戶是否能夠手動縮放（默認設置爲no，由於咱們不但願用戶放大縮小頁面）
     -->

     <style type="text/css">
         *{padding: 0;margin: 0;}

         /*屏幕寬度在300px ~ 600px 之間時顯示的樣式*/
         /*可經過多個 @media 來調整自適應樣式*/
         /*
        @media語法：
            @media mediaType and|not|only (media feature) {
             CSS-Code;}
         */
         @media screen and (min-width: 300px) and (max-width: 600px) {
             .box{
                 width: 200px;
                 height: 300px;
                 background: red;
             }
         }
     </style>
</head>
<body>
    <div class="box">
        
    </div>

</body>
</html>

Bootstrap的柵格系統

Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列

柵格系統的使用：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 視口的設置：移動設備優先；支持移動端，在多個設備上適應，如PC，Iphone，Android等 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->

    <title>柵格</title>

    <!-- Bootstrap：必須引入Bootstrap -->
   <!--  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
   <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap.min.css">
   
   <!-- 不要隨意修改Bootstrap提供出來的系統類 -->
   <style type="text/css">
     [class^='col']{
      border: 1px solid red;
     }
   </style>

  </head>
  <body>
    
    <!-- .container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。 -->
    <!-- 固定寬度容器 .container -->
    <!-- container和 container-fluid是佈局容器， 不能互相嵌套 -->
    <div class="container">
      <h1>柵格系統工程</h1>
      <div class="row">
        <!-- 'row'和'col-md-4'是Bootstrap提供的類名 -->
        <div class="col-md-4">
            柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中
        </div>
        <div class="col-md-4">
            「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。
            經過「行（row）」在水平方向建立一組「列（column）」
        </div>
        <div class="col-md-4">
          你的內容應當放置於「列（column）」內，而且，只有「列（column）」能夠做爲行（row）」的直接子元素。
          相似 .row 和 .col-xs-4 這種預約義的類，能夠用來快速建立柵格佈局。Bootstrap 源碼中定義的 mixin也能夠用來建立語義化的佈局。
        </div>

      </div>
    </div>

  </body>
</html>

瀏覽器效果：

柵格參數

Bootstrap的CSS全局樣式

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>CSS的全局樣式</title>

    <!-- Bootstrap：必須引入Bootstrap -->
   <!--  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
   <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap.min.css">
   
   <style type="text/css">
      [class^='col']{
        border: 1px solid red;
      }

   </style>

  </head>
  <body>
    
    <!-- .container-fluid 類用於 100% 寬度，佔據所有視口（viewport）的容器。 -->
    <!-- 固定寬度容器 .container -->
    <!-- container和 container-fluid是佈局容器， 不能互相嵌套 -->
    <div class="container">
      <h1>柵格系統工程</h1>
      <div class="row">
        <div class="col-md-4">
          <h1>h1. Bootstrap heading</h1>
          <!-- small標籤爲副標題 -->
          <h2>h2. Bootstrap heading<small>Secondary text</small></h2>
          <h3>h3. Bootstrap heading</h3>
          <h4>h4. Bootstrap heading</h4>
          <h5>h5. Bootstrap heading</h5>
          <h6>h6. Bootstrap heading</h6>
          <!-- 經過添加 .lead 類可讓內容突出顯示 -->
          <p>我是<span class="lead">頁面</span>主題</p>
        </div>

        <div class="col-md-4">
          <!-- 對齊 -->
          <p class="text-left">Left aligned text.</p>
          <p class="text-center">Center aligned text.</p>
          <p class="text-right">Right aligned text.</p>
          <p class="text-justify">Justified text.</p>
          <!-- text-nowrap：不對齊 -->
          <p class="text-nowrap">No wrap text.</p>

          <!-- 大小寫 -->
          <p class="text-lowercase">Lowercased text.</p>
          <p class="text-uppercase">Uppercased text.</p>
          <p class="text-capitalize">capitalized text.</p>
        </div>
        <!-- Bootstrap給每一個塊級元素左右各15px的padding -->

        <div class="col-md-4">

          <!-- 響應式表格 -->
          <!-- 將任何 .table 元素包裹在 .table-responsive 元素內，便可建立響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏幕大於 768px 寬度時，水平滾動條消失。 -->
          <div class="table-responsive">
            <!-- 爲任意 <table> 標籤添加 .table 類能夠爲其賦予基本的樣式 — 少許的內補（padding）和水平方向的分隔線 -->
            <table class="table table-striped table-bordered table-hover">
              <thead>
                <tr>
                  <th>#</th>
                  <th>姓名</th>
                  <th>性別</th>
                  <th>年齡</th>
                </tr>
              </thead>
              <tbody>
                <tr class="success">
                  <td>1</td>
                  <td>馬哥</td>
                  <td>女</td>
                  <td>18</td>
                </tr>
                <tr class="danger">
                  <td>2</td>
                  <td>馬哥</td>
                  <td>女</td>
                  <td>18</td>
                </tr>
                <tr class="warning">
                  <td>3</td>
                  <td>馬哥</td>
                  <td>女</td>
                  <td>18</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

      </div>

      <div class="row">
        <div class="col-md-6">
          <!-- 表單 -->
          <!-- 
              單獨的表單控件會被自動賦予一些全局樣式。全部設置了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被默認設置寬度屬性爲 width: 100%;。 將 label 元素和前面提到的控件包裹在 .form-group 中能夠得到最好的排列。
           -->
          <form>
            <div class="form-group">
              <!-- 'sr-only'是隱藏當前元素 -->
              <label for="exampleInputEmail1" class="sr-only">Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-group">
              <label for="exampleInputFile">File input</label>
              <input type="file" id="exampleInputFile">
              <p class="help-block">Example block-level help text here.</p>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox"> Check me out
              </label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
        </div>  
      </div>

    </div>

  </body>
</html>