第五模塊：WEB開發基礎第3章·BootStrap&JQuery開發

時間 2019-11-13

標籤第五模塊 web 開發基礎 bootstrap&jquery bootstrap jquery 欄目 HTML 简体版

原文原文鏈接

01-JQuery介紹
02-jQuery文件引入和加載的區別
03-jQuery的基礎選擇器
04-jQuery的層級選擇器
05-jQuery的基本過濾選擇器
06-jQuery的屬性選擇器
07-jQuery的篩選選擇器
08-jQuery的對象和DOM對象的轉換
09-jQuery效果-顯示和隱藏
10-jQuery的效果-slide
11-jQuery的效果-fade
12-jQuery的效果-animate
13-右下角彈出小廣告
14-jQuery的屬性操做-attr和prop
15-jQuery的屬性操做-class和值操做
16-操做input中的value值
17-jQuery文檔操做-插入節點
18-jQuery文檔操做-複製、替換和刪除
19-jQuery的位置屬性
20-仿淘寶導航欄案例
21-jQuery的篩選方法
22-選項卡嵌套
23-小米官方部分案例
24-焦點式輪播圖
25-動態實現輪播圖
26-事件流
27-jQuery事件對象和事件冒泡
28-jQuery事件的綁定和移除
29-自定義事件和事件代理
30-jQuery的鼠標事件一
31-jQuery的鼠標事件二
32-JQuery的表單事件
33-jQuery的ajax技術
34-Bootstrap介紹和引入
35-相應式原理
36-BootStrap的柵格系統介紹
37-BootStrap的柵格系統使用
38-BootStrap的css全局樣式一
39-BootStrap的css全局樣式二
40-BootStrap的組件使用一
41-BootStrap的組件使用二
42-BootStrap插件介紹

01-jQuery介紹

一、jQuery官網；

write less,do more;css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-jquery的介紹</title>
    <style type="text/css">
        div{
            width: 100%;
            height: 100px;
            margin: 10px 0px 0px 0px;
            display: none;
            background-color: red;
        }
    </style>
</head>
<body>
    <button id="btn">展現</button>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">    </script>
    <script type="text/javascript">
            /*單獨書寫JavaScript的痛楚：
            一、書寫繁瑣，代碼量大；
            二、代碼複雜；
            三、動畫，開啓定時器，當心定時器的清除，各類操做和處理事件，很差實現；
            四、瀏覽器的兼容性；
            
            //jQuery解決了以上痛點；
            */
//            window.onload = function(){
//                var oBtn = document.getElementsByTagName('button')[0];
//                var ODivs = document.getElementsByTagName('div');
//                
//                oBtn.onclick = function(){
//                    for(var i = 0;i < ODivs.length;i++){
//                        ODivs[i].style.display = 'block';
//                        ODivs[i].innerHTML = 'div展現了';
//                    }
//                }
//                
//            }
            
            //jQuery實現；
            $(function(){
                $('#btn').click(function(){
                    $('div').css('display','block');
                    $('div').html('div展現了')
                })
            })
        </script>
</html>

02-jQuery文件引入和加載的區別

一、JavaScript和jQuery的區別；

Javascript是一門編程語言，咱們用它來編寫客戶端瀏覽器腳本；
jQuery是javascript的一個庫，包含多個可重用的函數，用來輔助咱們簡化javascript開發；
jQuery能作的javascipt都能作到，而javascript能作的事情，jQuery不必定能作到；

注意：通常狀況下，是庫的文件，該庫中都會拋出來構造函數或者對象，若是是構造函數，那麼使用new關鍵字建立對象，若是是對象直接調用屬性和方法；html

二、DOM文檔的加載步驟；

一、解析HTML結構；前端

二、加載外部腳本和樣式表；html5

三、解析並執行腳本代碼；java

四、DOM樹構建完成；jquery

五、加載圖片等外部文件；程序員

六、頁面加載完畢；web

三、執行時間不一樣；

一、window.onload()必須等到頁面內包括圖片的全部元素加載完畢後才能執行；ajax

二、$(document).ready()是DOM結構繪製完成後就執行，沒必要等到加載完畢；

四、編寫個數不一樣；

一、window.onload不能同時編寫多個，若是有多個window.onload方法，只會執行一個；

二、$(document).ready()能夠同時編寫多個，而且均可以獲得執行；

五、簡化寫法不一樣；

一、window.onload沒有簡化寫法；

二、$(document).ready(function(){})能夠簡化寫成$(function(){});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-jquery文件引入和加載的區別</title>
    <script type="text/javascript">
        //若是不書寫window.onload()代碼的執行順序，是從上到下；
        window.onload = function(){
        var oDiv = document.getElementById('box');
        console.log(oDiv)
        }

        
    </script>
    <style type="text/css">

    </style>
</head>
<body>
    <div id="box">
        
    </div>
</body>
<!--引入jQuery庫文件的方式-->
    //若是沒有引入jQuery，就會報錯：$ is not defined;
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        /*jQuery是js的一個庫文件，既然是個庫文件，那麼就會
        拋出來一個構造函數或者對象;
        */
        
        //書寫jQuery的方式：入口函數
        $(document).ready(function(){
            alert(111)
        })
        
        
        //jQuer的簡便寫法；
        $(function(){
            alert('cuixiaozhao')
        })
    </script>
</html>

03-jQuery的基礎選擇器

一、jQuery下常見選擇器；

ID選擇器；
標籤選擇器；
類選擇器；
通配符選擇器；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-jquery的基礎選擇器</title>
    <style type="text/css">
        /*
        #brother{
            color:red;
            font-size:24px;
        }
         */
    </style>
</head>
<body>
    <ul>
        <li id="brother">路飛學城1</li>
        <li><a href="https://www.luffycity.com">路飛學城2</a></li>
        <li class="li3">路飛學城3</li>
        <li>路飛學城4</li>
        <li>路飛學城5</li>
        <li>路飛學城6</li>
    </ul>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //注意：使用jQuery的時候，要有入口函數-回調函數
        
        $(document).ready(function(){
            //基礎選擇器；
            //一、id選擇器；
            console.log($('#brother'))
        })
        $('#brother').css('color','yellow');
        
        //二、標籤選擇器；
        
        //設置一個值；
        $('a').css('color','green');
        //設置多個值的時候，使用key-value形式賦值；
        $('a').css({'color':'green','font-size':'24px'});
        
        //三、類選擇器；
        $('.li3').css('background','pink');
        
        //四、通配符選擇器；
        console.log($('*'));
        //清空整個界面的DOM元素；
//        $('*').html('')
    </script>
</html>

04-jQuery的層級選擇器

一、jQuery中的層級選擇器初識；

後代選擇器；
子代選擇器；
毗鄰選擇器；
兄弟選擇器；
:first 獲取第一個元素；
:last 獲取最後一個元素；
:eq(索引值) 經過索引值獲取元素；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-jquery的層級選擇器</title>
    <style type="text/css">
        /*
        #brother{
            color:red;
            font-size:24px;
        }
         */
    </style>
</head>
<body>
    <ul>
        <li id="brother">路飛學城1</li>
        <li><a href="https://www.luffycity.com">路飛學城2</a></li>
        <li class="li3">路飛學城3</li>
        <li>路飛學城4</li>
        <li>路飛學城5</li>
        <li>路飛學城6</li>
    </ul>
    <div id="box">
        <p id="father">天王蓋地虎</p>
        <p>我是你老母</p>
        <p>寶塔鎮河妖</p>
        <p>蘑菇放辣椒</p>
        <div id="box2">
            <p>小雞燉蘑菇</p>
        </div>
    </div>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //注意：使用jQuery的時候，要有入口函數-回調函數
        $(document).ready(function(){
            //一、後代選擇器 div p；
            $('#box p').css('color','red');
            
            //二、子代選擇器 div  P；
//            $('#box2>p ').css('color','purple');
            $('#box>p ').css('color','purple');
            
            //三、毗鄰選擇器 ：匹配全部緊挨着選中元素的元素
//            $('#father+p').css('font-size','30px');
            $('#father+p').css({'font-size':'30px','color':'blue'});
            
            //四、兄弟選擇器；
            $('#father~p').css('background','greenyellow');
            //五、獲取第一個元素；
            $('li:first').css('font-size','20px');
            //六、獲取最後一個元素；
            $('li:last').css('font-size','30px');
            //根據索引值選取；
            $('li:eq(3)').css('color','deeppink');
        })
    </script>
</html>

05-jQuery的基本過濾選擇器

一、jQuery中的過濾選擇器；

:first;
:last:
odd;
even;
eq(1);
lt(2);
gt(3);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-jquery的基本過濾選擇器</title>
    <style type="text/css">
        /*
        #brother{
            color:red;
            font-size:24px;
        }
         */
    </style>
</head>
<body>
    <ul>
        <li id="brother">路飛學城1</li>
        <li><a href="https://www.luffycity.com">路飛學城2</a></li>
        <li class="li3">路飛學城3</li>
        <li>路飛學城4</li>
        <li>路飛學城5</li>
        <li>路飛學城6</li>
    </ul>
    <div id="box">
        <p id="father">天王蓋地虎</p>
        <p>我是你老母</p>
        <p>寶塔鎮河妖</p>
        <p>蘑菇放辣椒</p>
        <div id="box2">
            <p>小雞燉蘑菇</p>
        </div>
    </div>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //注意：使用jQuery的時候，要有入口函數-回調函數
        $(document).ready(function(){
        //一、獲取第一個:first;獲取最後一個:last;
        
        //二、奇數
        $('li:odd').css('color','red');
        //三、偶數
        $('li:even').css('color','green');
        })
        
        //選中索引值爲1的元******
        $('li:eq(1)').css('font-size','20px');
        //小於索引值2
        $('li:lt(2)').css('font-size','30px');
        //大於索引值3
        $('li:gt(3)').css('font-size','20px');
    </script>
</html>

06-jQuery的屬性選擇器

一、jQuery中的屬性選擇器；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-jquery的屬性選擇器</title>
    <style type="text/css">

    </style>
</head>
    <div id="box">
        <h2 class="title">屬性選擇器</h2>
        <!--<p class="p1">我是一個段落</p>-->
        <ul>
            <li id="li1">分手應該體面</li>
            <li id="li2" class="what">分手應該體面</li>
            <li class="what">分手應該體面</li>
            <li class="what">分手應該體面</li>
        </ul>
        <form action="" method="post">
            <input name="username" type="text" value="1" checked="checked" />
            <input name="username111" type="text" value="1"/>
            <input name="username222" type="text" value="1"/>
            <input name="username333" type="text" value="1"/>
            
            <button class="btn-default">按鈕1</button>
            <button class="btn-info">按鈕2</button>
            <button class="btn-success">按鈕3</button>
            <button class="btn-danger">按鈕4</button>
        </form>
    </div>
<body>

</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            //一、標籤名[屬性名]查找全部含有id屬性的該標籤名的元素；
            $('li[id]').css('color','red');
            //二、匹配給定屬性是what值的元素；
            $('li[class=what]').css('font-size','20px');
            //三、匹配給定屬性不是what值的元素；
            $('li[class!=what]').css('font-size','10px');
            //四、匹配給定的屬性值以某些值開始的元素；
            $('input[name^=username]').css('background','green');
            //五、匹配給定的屬性值以某些值結尾的元素；
            $('input[name$=22]').css('background','blue');
            //六、匹配給定的屬性包含某些值的屬性；
            $('button[class*=btn]').css('background','gold');
            
        })
    </script>
</html>

07-jQuery的篩選選擇器

一、jQuery的篩選選擇器；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-jquery的篩選選擇器</title>
    <style type="text/css">

    </style>
</head>
<body>
    <div id="box">
        <p class="p1">
            <span>我是第1個span標籤</span><br>
            <span>我是第2個span標籤</span><br>
            <span>我是第3個span標籤</span><br>
            <span>我是第4個span標籤</span><br>
        </p>
        <button>按鈕</button>
    </div>
    <ul>
        <li class="list">2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //獲取第n個元素，數值從0開始；
        $('span').eq(1).css('color','red');
        
        //獲取第1個元素，:first   :last;  點語法：包含get方法和set 方法；
        $('span').first().css('color','greenyellow');
        $('span').last().css('color','pink');
        //選取父級元素；
        $('span').parent('.p1').css({width:'300px',height:'300px',background:'black'});
        
        //.siblings()選取全部的兄弟元素；
        $('.list').siblings('li').css('color','red');
        //查找全部後代元素；
        $('div').find('button').css('background','yellow');
    </script>
</html>

08-jQuery的對象和DOM對象的轉換

一、jQuery和DOM的相互轉換；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-jquery對象和DOM對象的轉換</title>
    <style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">
        天王蓋地虎
    </div>
    <button>隱藏</button>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //DOM對象->jQuery對象；
        var oDiv = document.getElementById('box');
        console.log($(oDiv));
        
        $(oDiv).click(function(){
            alert(111);
            
        })
　　　　　//jQuery對象轉化成DOM對象的方式；
        //第一種方式；
//        $('button')[0]
        console.log($('button')[0]);
        //第二種方式；
        console.log($('button').get(0));
        
        var isShow = true;
        
        $('button').get(0).onclick = function(){
            if(isShow){
                $('#box').hide();
                console.log($(this));
                $(this).text('顯示');
                isShow = false;
            }else{
                $('#box').show();
                console.log($(this));
                $(this).text('隱藏');
                isShow = true;
            }
        }    
    </script>
</html>

09-jQuery效果-顯示和隱藏

一、jQuery之hide及show方法；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-jquery效果-顯示和隱藏</title>
    <style type="text/css">
        #box{
            width: 100px;
            height: 100px;
            border:1px solid red;
            display: none;
        }
    </style>
</head>
<body>
    <div id="box">
        
    </div>
    <button id="btn">隱藏</button>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
//        //.css
//        $('#btn').click(function(){
//            $('#box').css('display','block')
//        })

        //jQuery提供了一些方法：show()\hide()控制元素顯示隱藏；
        var isShow = true;
        $('#btn').click(function(){
            if(isShow){
                $('#box').show('slow',function(){
                    $(this).text('盒子出來了');
                    isShow = false;
                    $('#btn').text('顯示');
                })
            }else{
                $('#box').hide(2000,function(){
                    $(this).text(' ')
                    isShow = true;
                    $('#btn').text('隱藏');
                })
            }
        })
        
        
        //toggle 開關，若是元素顯示則隱藏，反之亦然；
        
        $('#btn').click(function(){
            $('#box').toggle(3000,function(){
                alert(123)
            })
        })
    </script>
</html>

10-jQuery的效果-slide

一、jQuery的常見動畫效果；

1）show

　　概念:顯示隱藏的匹配元素語法：show(speed,callback) 參數：

speed：三種預約速度之一的字符串('slow','normal','fast')或表示動畫時長的毫秒值（如：1000毫秒==1秒）；
callback:在動畫完成時執行的函數，每一個元素執行一次；

2）hide

　　hide(speed,callback)跟show使用方法相似，表示隱藏顯示的元素。

3）toggle

　　若是元素是可見的，切換爲隱藏的；若是元素是隱藏的，切換爲可見的。

4）slideDown

　　概念：經過高度變化（向下增大）來到動態地顯示全部匹配的元素，在顯示完成後觸發一個回調函數；

5）slideUp

　　經過高度變化（向上減少）來動態地隱藏全部匹配的元素，在隱藏完成後可選地觸發一個回調函數。

6）slideToggle

　　概念:經過高度變化來切換全部匹配元素的可見性，並在切換完成後可選地觸發一個回調函數；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-jquery的效果-slide</title>
    <style type="text/css">
        #box{
            width: 100px;
            height: 100px;
            border:1px solid red;
            display: none;
        }
    </style>
</head>
<body>
    <div id="box">
        
    </div>
    <button id="btn">隱藏</button>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
//        $(function(){
//            
//            
//            //自動上下移動；
//            $('#btn').hover(function(){
//                $('#box').slideDown(2000)
//            },function(){
//                $('#box').slideUp(2000);
//            })
//        })
        
        //鼠標點擊，實現下拉變大，以及向上收攏；
        $('#btn').click(function(){
            $('#box').slideToggle('fast')
        })
    </script>
</html>

11-jQuery的效果-fade

一、jQuery的淡入淡出效果；

1）fadeIn

　　概念：經過不透明度的變化來實現全部匹配元素的淡入效果，並在動畫完成後可選地觸發一個回調函數。這個動畫只調整元素的不透明度，也就是說全部匹配的元素的高度和寬度不會發生變化；

2）fadeOut

　　實現淡出效果；

3）fadeTo

　　實現調整到指定的透明度，透明度的範圍0~1；

4）fadeToggle

　　實現淡入和淡出的效果；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-jquery的效果-fade</title>
    <style type="text/css">
        #box{
            width: 100px;
            height: 100px;
            border:1px solid red;
            background-color: yellow;
            /*display: none;*/
        }
    </style>
</head>
<body>
    <div id="box">
        
    </div>
    <button id="btn">隱藏</button>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
//            $('#btn').click(function(){
//                $('#box').fadeOut(2000);
//            })
//            $('#btn').click(function(){
//                $('#box').fadeIn(3000);
//            })
            $('#box').mouseover(function(){
                $('#box').fadeOut(2000);
            })
            $('#box').mouseout(function(){
                $('#box').fadeIn(2000);
            })
            $('#btn').mouseout(function(){
                $('box').fadeIn(2000);
                $('box').fadeTo(2000,0.3);
            })
            $('#btn').click(function(){
                $('#box').fadeToggle(3000);
            })
        })
    </script>
</html>

12-jQuery的效果-animate

1）animate

　　概念：用於建立自定義動畫的函數;

2）stop

　　概念：中止全部在指定元素上正在運行的動畫

3）delay

　　概念：用來作延遲的操做

一、jQuery的animate動畫效果；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-jQuery的效果-animate</title>
    <style type="text/css">
        #box{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            background: yellow;
            position: absolute;
        }
    </style>
</head>
<body>
    <button id="btn">動畫吧</button>
    <button id="stop">中止吧</button>
    <div id="box">
        Hello LuffyCity
    </div>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn').click(function(){
                //控制寬度和高度；
//                $('#box').animate({
//                    width:'200px',
//                    height:'300px'
//                })
                //動畫的效果；
//                $('#box').animate({left:'100px',top:'200px'})
                $('#box').animate({left:'100px'}).delay(3000).animate({top:'200px'})
//                $('#box').animate({left:'100px',top:'200px'},2000)
                
            })
            $('#stop').click(function(){
                //控制動畫的中止；
                $('#box').stop();
            })
        })
    </script>
</html>

13-右下角彈出小廣告

一、經過jQuery的鏈式調用，實現小廣告的淡入淡出效果；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-右下角彈出小廣告</title>
    <style type="text/css">

    </style>
</head>
<body>
    <div id="box" style="width:330px;height: 480px;position: absolute;right: 10px;bottom: 0;display: none;" >
        <img src="廣告.png" alt="" style="width:100%;height: 100%;" />
    </div>
    
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            //圖片先彈出，經過點擊，實現淡出效果，代碼邏輯：經過jQuery的鏈式調用；
            $('#box').slideDown('normal').fadeIn(1000).click(function(){
                $(this).fadeOut(1000);
            });
            
        })
    </script>
</html>

14-jQuery的屬性操做-attr和prop

一、jQuery的屬性操做；

　　jquery對象有它本身的屬性和方法，咱們先研究一下jquery的屬性操做。
　　jquery的屬性操做模塊分爲四個部分：html屬性操做，dom屬性操做，類樣式操做和值操做

一、html屬性操做：是對html文檔中的屬性進行讀取，設置和移除操做。好比attr()、removeAttr()

二、DOM屬性操做：對DOM元素的屬性進行讀取，設置和移除操做。好比prop()、removeProp()

三、類樣式操做：是指對DOM屬性className進行添加，移除操做。好比addClass()、removeClass()、toggleClass()

四、值操做：是對DOM屬性value進行讀取和設置操做。好比html()、text()、val()

二、jquery屬性操做之attr和prop；

attr概念：設置屬性值或者返回被選元素的屬性值；removeAttr即刪除；
prop()獲取在匹配的元素集中的第一個元素的屬性值.它是對當前匹配到的dom對象設置屬性；removeProp也是刪除；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-jquery的屬性操做-attr和prop</title>
    <style type="text/css">

    </style>
</head>
<body>
    <div id="box">
        <p>路飛學城</p>

    </div>
    <button>獲取</button>
    <ul>
        <li class="luffy">路飛</li>
        <li class="luffy">路飛2</li>
        <li class="luffy">路飛3</li>
        <li class="luffy">路飛4</li>
        <li class="luffy">路飛5</li>
    </ul>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            $('button').click(function(){
            //jQuery的屬性操做，html屬性操做attr()
            
            //attr若是有一個參數，表示獲取值；
            $('#box p').text($('#box').attr('id'));
            })
            //attr若是設置兩個值，表示設置屬性；
            $('#box').attr('class','foo');
            //設置多個值，使用對象存儲，若是設置多個類名，不能使用attr();
            $('#box').attr({'class':'foo2',name:'luffy'});
            
            
            //DOM屬性操做；
            //獲取的是第一個元素的class值；
            console.log($('li').prop('class'));
            //設置值；
            $('li').first().prop({'name':'app','name2':'app2'});
            console.log($('li').first());
            //removeAttr(),一次只刪除一個屬性；
            $('#box').removeAttr('name');
            $('#box').removeAttr('class');

　　　　　　　　//刪除多個；
　　　　　　　　$('#box').removeAttr('class name');//class和name之間是空格

//刪除DOM對象的name屬性；
            $('li').first().removeProp('name');
            console.log($('li').prop('name'));
    
    })
    </script>
</html>

15-jQuery的屬性操做-class和值操做

一、jQuery的屬性值和class操做；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15-jquery的屬性操做-class和值操做</title>
    <style type="text/css">
        span.active{
            font-size: 30px;
            color: greenyellow;
        }
    </style>
</head>
<body>
    <div id="box">
        <p>路飛學城</p>
    </div>
    <button>獲取</button>
    <ul>
        <li class="luffy">路飛學城1</li>
        <li class="luffy">路飛學城2</li>
        <li class="luffy">路飛學城3</li>
        <li class="luffy">路飛學城4</li>
    </ul>
    <span class="span1">路飛變大變小</span>
    <div id="box2">
        啊哈哈
        <p>我是一個段落</p>
        <a href="">百度一下</a>
        <input type="text" value="aaa" name=""/>
        <button id="btn">GET</button>
    </div>

</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
                //addClass() 以及removeClass(),添加類和刪除類；
                $('span').addClass('span2 span3')
                //
                $('span').removeClass('span3')
                
                //
                var isBig = true;
                $('span').click(function(){
                    if(isBig){
                        $(this).addClass('active')
                        isBig = false;    
                    }else{
                        $(this).removeClass('active');
                        isBig = true;
                    }
                    
                })
                //值屬性操做； text() html() val()
                console.log($('#box2').text())
                //獲取的全部；
                console.log($('#box2').text())
                
                //設置值
//                $('#box2').text('<a>路飛學城</>')
//                $('#box2').html('<a href='#'>路飛學城</a>')
                //獲取值
                console.log($('input').val())
                //設置值
                $('input').val('我愛你LJP')
                $('#btn').click(function(){
                    var val = $('input').val()
                    $('#box2').text(val);
                })
                //表單控件使用的一個方法,輸入值後，單擊任意位置，均有反應；
                $('input').change(function(){
                    console.log($(this).val())
                })
        })
    </script>
</html>

16-操做input中的value值

一、input中獲取和設置元素值的方法；

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>16-操做input中的value值</title>
</head>
<body>
    <form action="">
        <input type="radio" name="sex" value="111" />男
        <input type="radio" name="sex" value="112" checked="" />女
        <input type="radio" name="sex" value="113" />gay
        
        <input type="checkbox" value="a" checked=""/>吃飯
        <input type="checkbox" value="b" checked=""/>睡覺
        <input type="checkbox" value="c" checked=""/>打豆豆
        
        <select name="timespan" id="timespan" class="Wdate" >
            <option value="1">8:00-8:30</option>
            <option value="2">8:30-9:00</option>
            <option value="3">9:00-9:30</option>
        </select>
        <input type="text" name="" id="" value="111" />
    </form>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            
        //一、獲取單選框中的value值；
        console.log($('input[type=radio]:checked').val());
        })
        //二、獲取複選框中的值；僅僅是獲取了第一個值；
        console.log($('input[type=checkbox]:checked').val());
        
        //三、下拉列表；
        var obj = $('#timespan option:selected')
        console.log(obj.val());
        
        //設置單選、複選的值；
        $('input[type=radio]').val(['113']);
        $('input[type=checkbox]').val(['b','c']);
        
        //設置下拉列表中的值，必需要用select；
        $('select').val(['3','2','1'])
        
        //文本框
        console.log($("input[type=text]").val())//獲取文本框中的值
        //設置值
        $('input[type=text]').val('試試就試試')
    </script>
</html>

17-jQuery文檔操做-插入節點

一、插入操做；

1、父元素.append(子元素) 追加某元素父元素中添加新的元素；

2、子元素.appendTo(父元素) 追加到某元素子元素添加到父元素；

3、prepend（）前置添加，添加到父元素的第一個位置；

4、prependTo 後置添加，第一個元素添加到父元素中；

5、父.after(子) 在匹配的元素以後插入內容與子.insertAfter(父)；

6、父.before(子) 在匹配的元素以前插入內容與子.insertBefor(父)；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17-jquery文檔操做-插入節點</title>
    <style type="text/css">

    </style>
</head>
<body>
    <ul>

    </ul>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            var oLi = document.createElement('li');
            oLi.innerHTML = "路飛";
            $('ul').append(oLi)
            //
            $('ul').append('<li>LuffyCity</li>')
//            $('ul').append('<li><a href="#">LuffyCity</a></li>')
        //append方法的使用；
        $('ul').append($('span'))
        
        //appendTo()的用法;
        $('<a href="#">路飛2</a>').appendTo($('ul'));
        //pretend插入被選中元素的第一個位置；
        $('ul').prepend('<li>我是第一個元素</li>')
        $('<li>我是第0個元素</li>').prependTo($('ul'));
        
        //after、before；
        $('ul').before('<h3>我是一個2級標題</h3>');
        $('ul').after('<h2>我是一個2級標題</h2>');
        //insertAfter、insertBefore;
        $('<a href="#">第一個</a>').insertAfter($('ul'));
        $('<a href="#">第2個</a>').insertBefore($('ul'));
        
        
        })
    </script>
</html>

18-jQuery文檔操做-複製、替換和刪除

一、jQuery的clone、replaceWith、replaceAll、remove|detach|empty操做；

複製操做clone(false),有參數true、false；
replaceWith()：將全部匹配的元素替換成指定的HTML或DOM元素；
replaceAll()：用匹配的元素替換掉素有selector匹配到的元素；
remove()：刪除節點後，事件也會刪除（簡言之，刪除了整個標籤）；
detach()：刪除節點後，事件會保留；
empty():清空元素中的素有後代節點；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
</head>
<body>
    <h3>我是3級別標題</h3>
    <ul>
        <li>1</li><br>
        <li>2</li><br>
        <li>3</li><br>
    </ul>
    <button id="btn">按鈕</button>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            $('button').click(function(){
                //clone裏面的值可填寫true、false,默認是false；
                $(this).clone(true).insertAfter($(this));
            })
            //替換
            $('h3').replaceWith('<button>替換的按鈕</button>')
            //replaceall
            $('<a href="#">替換超連接</a>').replaceAll('li')
            //刪除
            //一、empty()，清空，只是清空了被選擇元素的內容
//            $('ul').empty()
            //二、remove()移除元素;
//            $('ul').remove()
            //detach()
             var $btn  = $('button').detach()
             console.log($btn[0]);
             
             $('ul').append($btn[0])
        })
        
    </script>

</html>

19-jQuery的位置屬性

一、jQuery中的位置屬性；

position
offset
scrollTop
scrollLeft
innerHeight
innerWidth
outerWeight
weight
height

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>19-jquery的位置屬性</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #box{
                position: relative;
                width: 200px;
                height: 200px;
                border: 1px solid red;
                padding: 10px 5px;
            }
            p{
                position: absolute;
                left:30px;
                top: 30px;
            }
        </style>
    </head>
    <body style="height: 2000px; width: 2000px;">
        <div id="box">
            <p>我是一個段落標籤</p>
        </div>
        
        <button id="btn">動畫吧</button>
        
        <div style="width: 200px;height: 200px;margin:  100px auto;border: 1px solid deepskyblue;"></div>
        
    </body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        
        
        $(function(){
            //1.獲取匹配元素的相對父元素的偏移 position;
            
            console.log($('p').position().left);
            console.log($('p').position().top);
            
            var offsetTop = $('p').position().top + 50 + 'px';
            
            $('#btn').click(function(){
                $('p').animate({top:offsetTop},1000);
            })
            
            //2.獲取匹配元素 相對滾動條捲起的位置信息  scrollTop scrollLeft
            
//            console.log($(document).scrollLeft());
//            console.log($(document).scrollTop());
            
            $(document).scroll(function(){
                console.log($(document).scrollLeft());
                console.log($(document).scrollTop());
            })
            
            //三、offset偏移量：  獲取匹配元素在當前視口的相對偏移 相對於瀏覽器；
            
            console.log($('#box').offset());
            console.log($('p').offset().top);
            console.log($('p').offset().left);
            console.log($('#btn').offset().top);
            
            //獲取元素的寬高
            
            console.log("寬"+$('#box').width());
            console.log("高"+$('#box').height());
            
            //設置寬高
            $('#box').width(400);
            
            //innerWidth / outerWidth
            
            //獲取  width + 2*padding 不包括邊框 獲取匹配元素的內部寬度
            
            console.log($('#box').innerWidth()); //410
            
            // width + 2*padding + 2*border 獲取匹配元素的外部寬度
            console.log($('#box').outerWidth());
        })
    </script>
</html>

20-仿淘寶導航欄案例

一、仿淘寶導航懸停案例；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>20-仿淘寶導航欄案例</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            div{width: 100%;}
            div img{width: 100%;}
        
            .nav{display: none;}
                        
        </style>
    </head>
    <body>
        
        <div class="top">
            <img src="top.jpg" alt="" />
            
        </div>
        <div class="nav">
            <img src="nav.jpg"/>
        </div>
        <div class= 'taobao'>
            <img src="taobao1.png"/>
        </div>
        
        <!--引入js文件-->
        <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            
            $(function(){
                var h = $('.top').height();
                
                
                $(document).scroll(function(){
                    var scollTp = $(document).scrollTop();
                    
                    
                    if(h<scollTp){
                        $('.nav').css({display:'block',position:'fixed',top:0});
                    }else{
                        $('.nav').css({display:'none',position:'static',top:0});
                    }
                    
                })
                
            })
    
            
        </script>
    </body>
</html>

21-jQuery的篩選方法

一、jQuery中的篩選方法；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>21-jquery的篩選方法</title>
    <style type="text/css">
        li.active{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="danger">崔曉昭</li>
        <!--<li><a href="#">LuffyCity</a></li>-->
        <li>李靜瓶</li>
        <li class="danger">崔青良</li>
        <li>高志粉</li>
        <a href="#">百度</a>
        <a href="#" id="anchor">新浪</a>
    </ul>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            console.log($('li'));
        //jQuery中遍歷元素的方法，.each();
            $('ul').children().each(function(index,ele){
    //            console.log(index);
    //            console.log(ele);
                var isDanger = $(this).hasClass('danger');
    //            console.log(isDanger)
                if(isDanger){
                    $(this).css('color','red')
                }else{
    //                $(this).css('font-size','20px')
                }
            })
            console.log($('ul').children('.danger'));
            console.log('li');
            //父級元素，僅表示相鄰；
            console.log($('a').parent())
            console.log($('li').last().prev())
            console.log($('li').last().prevAll())
            //sliblings
            console.log($('#anchor').siblings('a'))
            $('li').hover(function(){
                $(this).addClass('active').siblings('li').removeClass('active');
            })
        })
    </script>
</html>

22-選項卡嵌套

一、選項卡的嵌套及效果；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>    
        <style type="text/css">
            *{padding: 0;margin: 0;}
            ul{
                list-style: none;
            }
            /*清除浮動產生的問題*/
            #box:after{
                content: "";
                display: block;
                clear: both;
            }
            #box{width: 800px;border: 1px solid black;margin: 20px auto;background: blue;}
            #leftBox{width: 200px;float: left;}
            #leftBox li{width: 200px;height: 89px;background: red;margin-bottom: 2px;color: white;font: 50px/89px "黑體";  text-align: center;}
            #rightBox div{display: none;float: left; width: 600px;}
            #rightBox p{width:100%;height: 325px;font: 100px/325px "黑體";text-align: center;background: greenyellow }
            
            /*父元素設置display：table使它成爲一個塊級表格元素
             
             * 子元素設置display：table-cell使子元素成爲表格單元格，就比如是在表格中同樣*/
            #rightBox ul{width: 600px;display: table;}
        
             #rightBox li{display: table-cell;background: purple;height: 40px;border-right: 2px solid blue;font: 30px/40px "黑體";text-align: center;color: white;}
             #leftBox .active{background: yellow;color: black;}
                #rightBox .active{background: white;color: black;}
            
        </style>
    </head>
    <body>
        <div id="box">
            <ul id="leftBox">
                <li>a</li>
                <li>b</li>
                <li>c</li>
                <li>d</li>
            </ul>
            <div id="rightBox">
            <div style="display: block">
                <p>a1</p>
                <ul>
                    <li class="active">a1</li>
                    <li>a2</li>
                    <li>a3</li>
                    <li>a4</li>
                </ul>
            </div>
            <div>
                <p>b1</p>
                <ul>
                    <li class="active">b1</li>
                    <li>b2</li>
                    <li>b3</li>
                    <li>b4</li>
                </ul>
            </div>
            <div>
                <p>c1</p>
                <ul>
                    <li class="active">c1</li>
                    <li>c2</li>
                    <li>c3</li>
                    <li>c4</li>
                    <li>c5</li>
                    <li>c6</li>
                </ul>
            </div>
            <div>
                <p>d1</p>
                <ul>
                    <li class="active">d1</li>
                    <li>d2</li>
                    <li>d3</li>
                    <li>d4</li>
                </ul>
            </div>
            </div>
        </div>
        
    </body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function(){
            //鼠標移入的時候
            $('#leftBox li').mouseover(function(){
                //修改本身的樣式
                $(this).addClass('active').siblings('li').removeClass('active');
                
                //修改右邊的div
                
                console.log($(this).index())
                $('#rightBox div').eq($(this).index()).show().siblings('div').hide();
                
            })
            
            $('#rightBox li').click(function(){
                $(this).addClass('active').siblings('li').removeClass('active');
                
                var liValue  = $(this).html();
                
                $(this).parent().prev().html(liValue);
                
                
            })
            
            
        })
        
    </script>
</html>

23-小米官方部分案例

一、小米官網部分練習；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>23-小米官網部分案例</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        .wrap{
            width: 980px;
            height: 612px;
            margin: 20px auto 0;
            background-color: #f4f3f4;
            border: 1px solid gray;
        }
        ul li{
            float: left;
            margin-left: 10px;
            position: relative;
            overflow: hidden;
            width: 233px;
            height: 300px;
        }
        ul li p{
            width: 233px;
            height: 100px;
            background: rgba(245,102,51,0.7);
            position: absolute;
            bottom: -100px;
            text-align: center;
            color: white;
            line-height: 100px;
        }
        
        
    </style>
</head>
<body>
    <div class="wrap">
        <ul>
            <li><a href="#"><img src="xiaomi_01.png" alt="" /></a><p>百度一下，你就知道！</p></li>
            <li><a href="#"><img src="xiaomi_02.png" alt="" /></a><p>百度一下，你就知道！</p></li>
            <li><a href="#"><img src="xiaomi_03.png" alt="" /></a><p>百度一下，你就知道！</p></li>
            <li><a href="#"><img src="xiaomi_04.png" alt="" /></a><p>百度一下，你就知道！</p></li>
            <li><a href="#"><img src="xiaomi_05.png" alt="" /></a><p>百度一下，你就知道！</p></li>
            <li><a href="#"><img src="xiaomi_07.png" alt="" /></a><p>百度一下，你就知道！</p></li>
            <li><a href="#"><img src="xiaomi_08.png" alt="" /></a><p>百度一下，你就知道！</p></li>
            <li><a href="#"><img src="xiaomi_09.png" alt="" /></a><p>百度一下，你就知道！</p><span></span></li>
        </ul>
    </div>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //mouseenter進入；mouseleave離開；
        $('.wrap li').hover(function(){
            $(this).children('p').stop(true).animate({bottom:0},100);
        },function(){
            $(this).children('p').stop(true).animate({bottom:-100},100);
        })
    </script>
</html>

24-焦點式輪播圖

一、焦點式輪播圖代碼；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>24-焦點式輪播圖</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul,ol{
            list-style: none;
        }
        #wrap{
            width: 650px;
            height: 250px;
            margin: 100px auto 0;
            background: red;
            overflow: hidden;
            position: relative;
        }
        /*#wrap img{display: block;}*/
        #wrap ul{
            height: 250px;
            position: relative;
            z-index: 1;
        }
        #wrap ol{
            height: 30px;
            position: absolute;
            z-index: 2;
            bottom: 0;
            right: 0;
        }
        #wrap>ul>li{
            position: absolute;
            top: 0;
            left: 0;
        }
        #wrap>ol>li{
            float: left;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border: 1px solid white;
            background: gray;
            margin-right: 5px;
        }
        #wrap>ol>li:hover{
            /*設置鼠標形狀*/
            cursor: pointer;
        }
        #wrap li.active{
            padding: 2xp;
            color: orange;
            margin-top: -4px;
            border: 1px solid orange;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <ul>
            <!--設置絕對定位以後，脫離標準流 最後一個盒子層級提高了-->
            <li style="z-index:1;"><a href="#"><img src="01.jpg" alt="" /></a></li>
            <li><a href="#"><img src="02.jpg" alt="" /></a></li>
            <li><a href="#"><img src="03.jpg" alt="" /></a></li>
            <li><a href="#"><img src="04.jpg" alt="" /></a></li>
            <li><a href="#"><img src="05.jpg" alt="" /></a></li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //控制層級關係的索引；
        var index = 0;
        $('#wrap>ol>li').mouseover(function(){
            index ++;
            //修改下標的class；
            $(this).addClass('active').siblings('li').removeClass('active');
            //修改圖片；
            $('#wrap>ul>li').eq($(this).index()).css({left:650,'z-index':index}).animate({
                left:0
            },1000)
        })
    </script>
</html>

25-動態實現輪播圖

一、動態實現輪播圖；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>25-動態實現輪播圖</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        #box{
            /*圖片的寬高 240px 180px*/
            width: 240px;
            height: 180px;
            position: relative;
            margin: 50px auto;
            overflow: hidden;
        }
        ul{
            width: 960px;
            position: absolute;

        }
        ul li{
            float: left;
        }
        p{
            position: absolute;
            left: 80px;
            bottom: 30px;
        }
        p span{
            color: red;
            display: inline-block;
            width: 20px;
            height: 20px;
            text-align: center;
            cursor: pointer;
        }
        p span.active{
            color:white;
            background: greenyellow;
        }
        
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <!--顯示輪播圖的圖片-->
            <!--<li><img src="11.jpg" alt="" /></li>
            <li><img src="12.jpg" alt="" /></li>
            <li><img src="13.jpg" alt="" /></li>
            <li><img src="14.jpg" alt="" /></li>-->
        </ul>
        <p>
            <!--顯示索引-->
        </p>
    </div>
    <button id="play">輪播吧！</button>
    <button id="play">暫停！</button>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //一、獲取本地的圖片數據,後面課程中，這些圖片的數據會從後端服務器獲取出來；
        var imgArr = ['11.jpg','12.jpg','13.jpg','14.jpg'];
        //二、動態生成，即向ul中循環追加每張圖片；
        for(var i = 0;i<imgArr.length;i++){
            $('ul').append("<li><img src="+imgArr[i]+"  /></li>")
        }
        //三、生成索引；
        var str = "";
        $('li').each(function(i,ele){
            str += "<span>"+(i+1)+"</span>"
            
        })
        console.log(str);
        $('p').html(str);
        //默認設置索引的第一個active；
        $('span:first').addClass('active');
        //五、點擊索引
        $('span').click(function(){
            $(this).addClass('active').siblings('span').removeClass('active');
            //獲取咱們當前點擊的索引值；
             var index = $(this).index()
//            $('ul').css('left',-240*index);
            $('ul').animate({
                left:-240*index
            },100)
        })
            var timer = null;
            $('#play').click(function(){
                //開啓定時器；一、索引跟着走；二、圖片跟着走；
                timer = setInterval(next,1000)
                
                
                function next(){
                    
                    if(index == $('li').length-1){
                        //圖片到了，獲得第四張；
                        index = 0;
                        //修改3個span標籤的active
                        $('p span').eq(index).addClass('active').siblings('span').removeClass('active');
                        
                        //修改ul的樣式；
                        $('ul').css('left',0);
                    }else{
                        index ++;
                        console.log(index);
                        $('p span').eq(index).addClass('active').siblings('span').removeClass('active');
                        $('ul').css('left',-240*index);
                        
                    }
                }
        })
    </script>
</html>

26-事件流

一、事件流概念初識；

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

二、什麼是事件流；

　　事件流描述的是從頁面中接收事件的順序。

1）DOM事件流；

事件捕獲階段
處於目標階段
事件冒泡階段

三、事件流相關知識點初識；

1）addEventListener

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

2）document、documentElement和document.body三者之間的關係：

document表明的是整個html頁面；
document.documentElement表明的是<html>標籤；
document.body表明的是<body>標籤；

在標準的「DOM2級事件」中規定，事件流首先是通過事件捕獲階段，接着是處於目標階段，最後是事件冒泡階段。這裏能夠畫個圖示意一下:

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

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

　　須要注意的點：因爲老版本的瀏覽器不支持事件捕獲，所以在實際開發中須要使用事件冒泡，在由特殊須要時再使用事件捕獲。

補充：

　　一、IE中的事件流只支持「事件冒泡」，可是版本到了IE9+之後，實現了「DOM2級事件」，也就是說IE9+之後也能夠在捕獲階段對元素進行相應的操做。

　　二、在DOM事件流中，實際的目標在「捕獲階段」不會接收到事件。而是在「處於目標階段」被觸發，並在事件處理中被當作「冒泡階段」的一部分。而後，「冒泡階段」發生，事件又傳播迴文檔。

四、jQuery中常見的事件；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>26-事件流</title>
    <script>

    window.onload = function(){

        var oBtn = document.getElementById('btn');

        oBtn.addEventListener('click',function(){
            console.log('btn處於事件捕獲階段');
        }, true);
        oBtn.addEventListener('click',function(){
            console.log('btn處於事件冒泡階段');
        }, false);

        document.addEventListener('click',function(){
            console.log('document處於事件捕獲階段');
        }, true);
        document.addEventListener('click',function(){
            console.log('document處於事件冒泡階段');
        }, false);

        document.documentElement.addEventListener('click',function(){
            console.log('html處於事件捕獲階段');
        }, true);
        document.documentElement.addEventListener('click',function(){
            console.log('html處於事件冒泡階段');
        }, false);

        document.body.addEventListener('click',function(){
            console.log('body處於事件捕獲階段');
        }, true);
        document.body.addEventListener('click',function(){
            console.log('body處於事件冒泡階段');
        }, false);

    };

    </script>
</head>
<body>
    <a href="javascript:;" id="btn">按鈕</a>
</body>
</html>

27-jQuery事件對象和事件冒泡

一、jQuery事件對象和事件冒泡；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>27-jquery的事件對象和事件冒泡</title>
    <style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background: gray;
        }
        p{
            width: 100px;
            height: 100px;
            background: red;
        }
        
    </style>
</head>
<body>
    <div id="box">
        <p class="p1"></p>
        <a href="https://www.luffycity.com">LuffyCity</a>
    </div>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //入口函數事件;
        $(function(){
            $('.p1').click(function(ev){
//            $('.p1').mouseover(function(ev){
//            $('.p1').hover(function(ev){
                //事件的類型以及事件的屬性；
                console.log(ev.type);
                console.log(ev.target);
                
                console.log(ev.pageX);
                console.log(ev.pageY);
                alert('當前按鈕事件觸發了')
                
            
                
            //經常使用的事件方法：一、阻止事件冒泡；二、阻止默認事件；
                //一、阻止事件冒泡;
                ev.stopPropagation();
            })
            $('#box').click(function(){
                alert('#box盒子事件觸發了！')

            })
            
            $('a').click(function(ev){
                //阻止a標籤的默認事件；
//                ev.preventDefault();
//                ev.stopPropagation();
                //二、阻止默認事件，好比a標籤；
                alert('阻止了a標籤的超連接跳轉事件');
                return false;//等價於以上兩行被註釋的代碼；
            })
        })
    </script>
</html>

28-jQuery事件的綁定和移除

一、jQuery事件的綁定和移除；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>28-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" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
//事件的綁定
//            $('#box').click(fn)
        //給當前的DOM元素綁定事件；
        //語法：一、jQuery對象.bind('事件類型',fn)；
//        $('#box').bind('click mouseenter',function(){
//            alert('事件被綁定了');
//        })
        //
        function add(){
            console.log('click');
        }
        function add2(){
            console.log('over');
        }
        $('#box').bind({
            'click':add,
            'mouseenter':add2
        })
//        $('#box').bind({
//            'click':function(){
//                console.log('click')
//            },
//            'mouseenter':function(){
//                console.log('mouseenter')
//            }
//        })

        //給當前的DOM元素解除綁定事件；
        //語法：一、jQuery對象.unbind('事件類型')；
        //若是沒有參數，表示移除全部事件；
        setTimeout(function(){
//            $('#box').unbind()
            $('#box').unbind('click')
        },3000)
        
        
        //注意：添加的事件不能發生在將來==》動態生成的元素不能直接添加對象，裏面的事件不能發生=》事件代理
        $('body').append('<div style="width:200px;height:300px;background: yellow;">哈哈哈</div>')
        //補充內容：綁定自定義的事件
        $('button').bind('myClick',function(ev,a,b,c){
            alert(111);
            alert(a);
            alert(b);
        })
        
        
        //觸發自定義的事件
        $('button').trigger('myClick',[1,2,3])
        
        })
    
    </script>
</html>

29-自定義事件和事件代理

一、自定義事件和事件代理；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>29-自定義事件和事件代理</title>
    <style type="text/css">

    </style>
</head>
<body>
    <ul>
        <li>路飛學城</li>
        <li>路飛學城</li>
        <li>路飛學城</li>
        <li>路飛學城</li>
    </ul>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            //先點擊；
            $('ul>li').bind('click',function(){
                console.log($(this))
            })
            
            //事件代理；自身完成不了當前的點擊事件，交給父級元素來作這件事件；
            //語法：父級.on('事件名字','點擊當前的標籤元素',fn)
            $('ul').on('click','li',function(){
                console.log(this);
            })
            //後來添加的；
        $('ul').append('<li>娜美</li>')
        })
    </script>
</html>

30-jQuery的鼠標事件一

一、jQuery的鼠標事件之mousedown\mouseup\mouseover\mouseout\mouseenter\mouseleave；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 30-jquery的鼠標事件一</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 200px;
            height: 200px;
            background: gray;
        }
        #child{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="child">
            
        </div>        
    </div>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(document).ready(function(){
//            //點擊事件；
//            $('#box').click(function(){
//                console.log('click')
//            })
//            //雙擊事件,使用的少；
//            $('#box').dblclick(function(){
//                console.log('dblclick')
//            })
        //鼠標按下不鬆開；
        $('#box').mousedown(function(){
            console.log('mousedown')
        })
        //鼠標鬆開；
        $('#box').mouseup(function(){
            console.log('mouseup')
        })
        
//        //被選元素和子元素；被選中時候，會觸發；
//        $('#box').mouseover(function(){
//            console.log('mouseover');
//        })
//        $('#box').mouseout(function(){
//            console.log('mouseout');
//        })
        //只有被選元素移入的時候，纔會觸發；
        $('#box').mouseenter(function(){
            console.log('mouseenter');
        })
        $('#box').mouseleave(function(){
            console.log('mouseleave');
        })
        
        
        })
    </script>
</html>

31-jQuery的鼠標事件二

一、jQuery的鼠標事件二；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>31-jquery的鼠標事件二</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 200px;
            height: 200px;
            background: gray;
        }
        #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"  value="" />
    </div>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(document).ready(function(){
//            //點擊事件；
//            $('#box').click(function(){
//                console.log('click')
//            })
//            //雙擊事件,使用的少；
//            $('#box').dblclick(function(){
//                console.log('dblclick')
//            })
        //鼠標按下不鬆開；
        $('#box').mousedown(function(){
            console.log('mousedown')
        })
        //鼠標鬆開；
        $('#box').mouseup(function(){
            console.log('mouseup')
        })
        
//        //被選元素和子元素；被選中時候，會觸發；
//        $('#box').mouseover(function(){
//            console.log('mouseover');
//        })
//        $('#box').mouseout(function(){
//            console.log('mouseout');
//        })
        //只有被選元素移入的時候，纔會觸發；
//        $('#box').mouseenter(function(){
//            console.log('mouseenter');
//        })
//        $('#box').mouseleave(function(){
//            console.log('mouseleave');
//        })
        $('input[type=text]').focus(function(){
            console.log($(this).val());
        })
        $('input[type=text]').blur(function(){
            console.log($(this).val());
        })
        $('input[type=password]').keydown(function(e){
            console.log(e.keyCode);
            if(e.keyCode ==13){
                console.log('Enter被按下了')
            }
            console.log($(this).val())
        })
        $('input[type=password]').keyup(function(){
            console.log($(this).val())
        })
        })
    </script>
</html>

32-JQuery的表單事件

一、JQuery的表單事件初識；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>32-jquery的表單事件</title>
    <style type="text/css">
        .show{
            color: red;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <form action="https://www.luffycity.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="">曲奇餅1</option>
        </select><br />
        
        <input type="text" value="hello" id="target" />
        <input type="submit" value="Luffy" />
        <input type="button" name="" id="" value="按鈕" />
    </form>
    <div id="other">
        Trigger the handler        
    </div>
    <div class="show">
        
    </div>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            //change()事件
            //此事件僅限於input元素textarea select
            $('select').change(function(){
                console.log($('select option:selected'));
                $('.show').text($('select option:selected').text());
            })
            //select()方法僅限於用在input type=text textarea
            $('#other').select(function(){
                console.log($(this).text());
            })
            $('form').submit(function(e){
//                alert(111)
                //阻止默認事件；跟服務端一塊兒作，有很大掛鉤！
                e.preventDefault();
                alert(111)
            })
        })
    </script>
</html>

33-jQuery的ajax技術

一、JQuery中的ajax技術初識；　

　　AJAX = 異步的javascript和XML（Asynchronous Javascript and XML）簡言之，在不重載整網頁的狀況下，AJAX經過後臺加載數據，並在網頁上進行顯示。

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

二、jQuery中的load()方法；

　　jQuery load()方法是簡單但強大的AJAX方法。load()方法從服務器加載數據，並把返回的數據放入被選元素中。

注意：load函數最好在服務器網頁中應用，也就是說要在服務器上運行，本地調試須要搭建後端本地環境。

$("selector").load(url,data,callback);

三、jQuery中的getJSON方法；

　　jQuery的AJAX中使用getJSON()方法異步加載JSON格式數據。獲取服務器中的數據，並對數據進行解析，顯示到頁面中

語法: $.getJSON(url,[data],[callback])

四、jQuery中的$.get()方法；

·　　$.get() 方法經過 HTTP GET 請求從服務器上請求數據

語法:$.get(URL,callback);

五、jQuery中的post()方法；

　　與get()方法相比，post()方法多用於以POST方式向服務器發送數據，服務器接收到數據以後，進行處理，並將處理結果返回頁面；

語法：$.post(URL,data,callback);

六、jQuery中的$.ajax()方法；

1.url: 要求爲String類型的參數，（默認爲當前頁地址）發送請求的地址。

2.type: 要求爲String類型的參數，請求方式（post或get）默認爲get。注意其餘http請求方法，例如put和delete也可使用，但僅部分瀏覽器支持。

3.timeout: 要求爲Number類型的參數，設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。

4.async: 要求爲Boolean類型的參數，默認設置爲true，全部請求均爲異步請求。若是須要發送同步請求，請將此選項設置爲false。注意，同步請求將鎖住瀏覽器，用戶其餘操做必須等待請求完成才能夠執行。

5.cache: 要求爲Boolean類型的參數，默認爲true（當dataType爲script時，默認爲false），設置爲false將不會從瀏覽器緩存中加載請求信息。

6.data: 要求爲Object或String類型的參數，發送到服務器的數據。若是已經不是字符串，將自動轉換爲字符串格式。get請求中將附加在url後。防止這種自動轉換，能夠查看　　processData選項。對象必須爲key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換爲&foo1=bar1&foo2=bar2。若是是數組，JQuery將自動爲不一樣值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換爲&foo=bar1&foo=bar2。

7.dataType: 要求爲String類型的參數，預期服務器返回的數據類型。若是不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，並做爲回調函數參數傳遞。可用的類型以下： xml：返回XML文檔，可用JQuery處理。 html：返回純文本HTML信息；包含的script標籤會在插入DOM時執行。 script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），全部post請求都將轉爲get請求。 json：返回JSON數據。 jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換後一個「?」爲正確的函數名，以執行回調函數。 text：返回純文本字符串。

8.beforeSend：要求爲Function類型的參數，發送請求前能夠修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。在beforeSend中若是返回false能夠取消本次ajax請求。XMLHttpRequest對象是唯一的參數。 function(XMLHttpRequest){ this; //調用本次ajax請求時傳遞的options參數 } 

9.complete：要求爲Function類型的參數，請求完成後調用的回調函數（請求成功或失敗時均調用）。參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。 function(XMLHttpRequest, textStatus){ this; //調用本次ajax請求時傳遞的options參數 }

10.success：要求爲Function類型的參數，請求成功後調用的回調函數，有兩個參數。 (1)由服務器返回，並根據dataType參數進行處理後的數據。 (2)描述狀態的字符串。 function(data, textStatus){ //data多是xmlDoc、jsonObj、html、text等等 this; //調用本次ajax請求時傳遞的options參數 }

11.error: 要求爲Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數以下： function(XMLHttpRequest, textStatus, errorThrown){ //一般狀況下textStatus和errorThrown只有其中一個包含信息 this; //調用本次ajax請求時傳遞的options參數 }

12.contentType：要求爲String類型的參數，當發送信息至服務器時，內容編碼類型默認爲"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。

13.dataFilter： 要求爲Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。 function(data, type){ //返回處理後的數據 return data; }

14.dataFilter： 要求爲Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。 function(data, type){ //返回處理後的數據 return data; }

15.global： 要求爲Boolean類型的參數，默認爲true。表示是否觸發全局ajax事件。設置爲false將不會觸發全局ajax事件，ajaxStart或ajaxStop可用於控制各類ajax事件。

16.ifModified： 要求爲Boolean類型的參數，默認爲false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false，即忽略頭信息。

17.jsonp： 要求爲String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分，例如{jsonp:'onJsonPLoad'}會致使將"onJsonPLoad=?"傳給服務器。

18.username： 要求爲String類型的參數，用於響應HTTP訪問認證請求的用戶名。

19.password： 要求爲String類型的參數，用於響應HTTP訪問認證請求的密碼。

20.processData： 要求爲Boolean類型的參數，默認爲true。默認狀況下，發送的數據將被轉換爲對象（從技術角度來說並不是字符串）以配合默認內容類型"application/x-www-form-urlencoded"。若是要發送DOM樹信息或者其餘不但願轉換的信息，請設置爲false。

21.scriptCharset： 要求爲String類型的參數，只有當請求時dataType爲"jsonp"或者"script"，而且type是GET時纔會用於強制修改字符集(charset)。一般在本地和遠程的內容編碼不一樣時使用

演示代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>33-jquery的ajax技術</title>
    <style type="text/css">

    </style>
</head>
<body>
    <button id="btn">演示</button>
    <div id="box">
        
    </div>
</body>
    <script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(document).ready(function(){
//            $('#btn').click(function(){
//                //只傳一個url，導入的index.html文件含有多個傳遞參數，相似於:index/html？name="張三"
////                $('#box').load('./text.html',{name:"張三"});
//                $('#box').load('./text.html');
//            })

        //get請求
        $.ajax({
            url:"./data.json",
            type:'get',
//            dataType:'json',
            success:function(data){
                console.log(data);
            },
            error:function(){
                
            }
        })
        
        //post按時沒法演示，django能夠演示；
        $.ajax({
            url:"/course",
            type:"post",
            data:{
                username:'cxz19930911',
                password:'Ab123'
            },
            sucess:function(data){
                if(data.state == "ok" &&data.status =="200"){
                    //登陸成功！
                }
            },
            error:function(err){
                console.log(err);
            }
        })
        //
        })
    </script>

</html>

34-Bootstrap介紹和引入

一、BootStrap的介紹和引入；

　　凡是使用過Bootstrap的開發者，都不在意作這麼兩件事情：複製and粘貼。哈哈~，是的使用Bootstrap很是簡單，可是在複製粘貼以前，須要先對Bootstrap的用法一一熟悉以後咱們纔開始幹活！

　　Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、javascript 的，它簡潔靈活，使得 Web 開發更加快捷。

它用於開發響應式佈局、移動設備優先的 WEB 項目！

　　首先要知道，咱們爲何要寫自適應的頁面（也叫作響應式頁面）？

　　衆所周知，電腦、平板、手機的屏幕是差距很大的，假如在電腦上寫好了一個頁面，在電腦上看起來不錯，可是若是放到手機上的話，那可能就會亂的一塌糊塗，這時候怎麼解決呢？之前，能夠再專門爲手機定製一個頁面，當用戶訪問的時候，判斷設備是手機仍是電腦，若是是手機就跳轉到相應的手機頁面，例如百度的就是，手機訪問www.baidu.com就會跳轉到m.baidu.com，這樣作簡直就是費力不討好的活，因此聰明的程序員開發了一種自適應寫法，即一次開發，到處顯示！這究竟是一個什麼樣的神器東西呢，接下來就揭曉它的神祕面紗。

簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。

Bootstrap中文網：http://www.bootcss.com/

二、插件和組件的區別；

組件、插件、控件的區別

控件:是編程中用到的,按鈕就算是一個控件,窗口也是等等
組件:是軟件的一部分.軟件的組成部分.
插件:網頁中用到的,flash插件,沒有它瀏覽器不能播放flash.

見優秀的博文吧！

https://blog.csdn.net/zhangyunfei_happy/article/details/47256245

https://blog.csdn.net/haiross/article/details/22662635

三、Bootstrap使用起步；

https://v3.bootcss.com/getting-started/

模板：

https://v3.bootcss.com/getting-started/#template

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!--以最高的IE瀏覽器渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--視口的設置：BootStrap移動設備優先，支持移動端,在多個設備上適應，PC iphone 安卓-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <!--<title>Bootstrap 101 Template</title>-->
    <title>LuffyCity</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-dist/css/bootstrap.min.css" />

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

    <!-- 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>

35-相應式原理

一、首先要知道，咱們爲何要寫自適應的頁面（響應式頁面）；

二、CSS3 的 @media 查詢；

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

CSS語法：
@media mediaType and|not|only (media feature) {
     /*CSS-Code;*/
}

Step1：首先咱們在使用 @media 的時候須要先設置下面這段代碼，來兼容移動設備的展現效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Step2：加載兼容JS文件；

<!--[if lt IE 9]>
　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
　　<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

Step3：設置IE渲染方式默認爲最高（可選）;

　　如今有不少人的IE瀏覽器都升級到IE9以上了，因此這個時候就有又不少詭異的事情發生了，例如如今是IE9的瀏覽器，可是瀏覽器的文檔模式倒是IE8 爲了防止這種狀況，咱們須要下面這段代碼來讓IE的文檔渲染模式永遠都是最新的

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

一、經過靈活應用以上技巧，開發出一個響應式頁面，還不是近在咫尺的感受;

二、不要被 min-width 和 max-width 所迷惑，初學者很容易誤覺得 min-width 的意思是小於xxx的時候才應用，然而這就陷入誤區了，其實它的意思是：當設置了 min-width 的時候，文檔的寬度若是小於設置的值，就不會應用這個區塊裏的CSS樣式，因此 min-width 它才能實現大於等於設置的值得時候，纔會應用區塊裏的CSS樣式，max-width 也是如此;

三、或者這樣想一想，先看代碼，這句代碼的意思是寬度大於等於 300px ，小於等於 500px （ width >=300 && width <=500）的時候應用樣式;

@media screen and (min-width:300px) and (max-width:500px) {
    /* CSS 代碼 */
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>35-響應式原理</title>
    <!--使用@media查詢必須使用以下操做：-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        @media  screen and (max-width: 500px) {
            .box{
                width: 200px;
                height: 300px;
                background: yellow;
            }
        }
        /*300px~600px之間顯示的樣式*/
        @media  screen and (min-width: 500px) and (max-width: 800px) {
        .box{
            width: 200px;
            height: 300px;
            background: red;
        }    
        }
        @media  screen and (min-width: 800px) {
            .box{
                width: 200px;
                height: 300px;
                background: green;
            }
        }
        
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

36-BootStrap的柵格系統介紹

一、Bootstrap全局CSS樣式初識；

https://v3.bootcss.com/css/

　　設置全局 CSS 樣式；基本的 HTML 元素都可以經過 class 設置樣式並獲得加強效果；還有先進的柵格系統。

　　Bootstrap 提供了一套響應式、移動設備優先的流式柵格系統，隨着屏幕或視口（viewport）尺寸的增長，系統會自動分爲最多12列。它包含了易於使用的預約義類，還有強大的mixin 用於生成更具語義的佈局。

Bootstrap鼻祖；https://960.gs/

37-BootStrap的柵格系統使用

一、Bootstrap中格柵系統的使用；

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!--以最高的ie瀏覽器渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <!--視口的設置  移動設備優先 支持移動端 在多個設備上適應  PC iphone 安卓等-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>LuffyCity</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">
        /*不要隨意修改Bootstrap提供出來的系統類*/
            [class^='col']{
                border: 1px solid gray;
            }
    </style>

  </head>
  <body>
      
      
      <!--固定寬度容器 .container-->
      
      <div class="container">
          <h1>柵格系統</h1>
          
          <!--一行-->
          <div class="row">
              <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
                  Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。咱們提供了兩個做此用處的類。注意，因爲 padding 等屬性的緣由，這兩種 容器類不能互相嵌套
              </div>
              <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
                  Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。咱們提供了兩個做此用處的類。注意，因爲 padding 等屬性的緣由，這兩種 容器類不能互相嵌套
              </div>
              <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
                  Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。咱們提供了兩個做此用處的類。注意，因爲 padding 等屬性的緣由，這兩種 容器類不能互相嵌套
              </div>
              <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
                  Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。咱們提供了兩個做此用處的類。注意，因爲 padding 等屬性的緣由，這兩種 容器類不能互相嵌套
              </div>
              <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
                  Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。咱們提供了兩個做此用處的類。注意，因爲 padding 等屬性的緣由，這兩種 容器類不能互相嵌套
              </div>
              <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
                  Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。咱們提供了兩個做此用處的類。注意，因爲 padding 等屬性的緣由，這兩種 容器類不能互相嵌套
              </div>
              
          </div>
          
          
      </div>
  
  </body>
</html>

38-BootStrap的css全局樣式一

一、Bootstrap的CSS全局樣式展現；

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <!--以最高的ie瀏覽器渲染-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <!--視口的設置  移動設備優先 支持移動端 在多個設備上適應  PC iphone 安卓等-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
        <title>LuffyCity</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-dist/css/bootstrap.min.css" />
        <style type="text/css">
            /*不要隨意修改Bootstrap提供出來的系統類*/
            
            [class^='col'] {
                border: 1px solid gray;
            }
        </style>

    </head>

    <body>

        <!--固定寬度容器 .container-->

        <div class="container">
            <h1>全局的css樣式</h1>

            <!--一行-->
            <div class="row">
                <div class="col-md-4">
                    <h1>h1. Bootstrap heading</h1>
                    <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>

                    <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 ustified text ustified text ustified text ustified text ustified text</p>
                    <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>

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

                    <!--響應式的表格-->
                    <div class="table-responsive">

                        <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>18</td>
                                    <td>180</td>
                                </tr>
                                <tr class="danger">
                                    <td>2</td>
                                    <td>小馬哥</td>
                                    <td>18</td>
                                    <td>180</td>
                                </tr>
                                <tr class="info">
                                    <td>3</td>
                                    <td>小馬哥</td>
                                    <td>18</td>
                                    <td>180</td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>小馬哥</td>
                                    <td>18</td>
                                    <td>180</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>

            <div class="row">
                <div class="col-md-6">
                    <form>
                        <div class="form-group">
                            <!--隱藏當前元素-->
                            <label for="username" class="sr-only">用戶名</label>
                            <input type="text" class="form-control" id="username" placeholder="用戶名">
                        </div>
                        <div class="form-group">
                            <label for="pwd">密碼</label>
                            <input type="password" class="form-control" id="pwd" placeholder="密碼">
                        </div>

                        <button type="submit" class="btn btn-success">登陸</button>
                        <button type="submit" class="btn btn-info">註冊</button>
                    </form>
                </div>
                <div class="col-md-6">
                    <form class="">
                        <div class="form-group">
                            <!--隱藏-->
                            <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
                            <div class="input-group">
                                <div class="input-group-addon"><span class="glyphicon glyphicon-yen"></span></div>
                                <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
                                <div class="input-group-addon">.00</div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Transfer cash</button>
                    </form>
                </div>
            </div>

        </div>

    </body>

</html>