原文：https://blog.csdn.net/qq_43492477/article/details/119147066

一、jQuery

1.1 概念

jQuery：本質是js的庫，是將原本複雜的js代碼進行封裝，提供對應操作的方法，簡化使用。
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

理念：寫的少，做的多。（用更少的代碼做更多的事情）

注意：jQuery中提供的函數或對象與js中的函數或對象是沒有關係的。

由於jquery是js的庫，所以使用前需要引入相應的庫

jquery.min.js是壓縮版；jquery.js是未壓縮、開發版。
目前jQuery有三個大版本：(jquery-xxx.js或者jquery-xxx.min.js)
- 1.x：兼容ie678,使用最爲廣泛的，官方只做BUG維護，
  功能不再新增。因此一般項目來說，使用1.x版本就可以了，
  最終版本：1.12.4 (2016年5月20日)
- 2.x：不兼容ie678，很少有人使用，官方只做BUG維護，
  功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，
  最終版本：2.2.4 (2016年5月20日)
- 3.x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，
  一般不會使用3.x版本的，很多老的jQuery插件不支持這個版本。
  目前該版本是官方主要更新維護的版本。最新版本：3.2.1（2017年3月20日）

1.2 jQuery對象的獲取

注意：使用jQuery語法獲取對象後獲取的是指定標籤代表的jQuery對象

jQuery在進行對象獲取時，考慮到了頁面不同對象的獲取方式，所以參照了CSS選擇器的方式進行頁面元素的獲取。

入口函數:

		$(function () {
	           
		});
123

window.onload 和 $(function) 區別

：
- window.onload 只能定義一次,如果定義多次，後邊的會將前邊的覆蓋掉
- $(function)可以定義多次的。

1.2.1 獲取語法

//簡化語法
$("選擇器")
//與css書寫方式一樣 只不過是將css選擇器書寫在{}前的選擇器內容放在""中
123

1.2.2 基本選擇器

//基本選擇器
//使用js進行獲取
var btns = document.getElementsByTagName("button");
var btns2 = document.getElementsByClassName("btn");
//使用jQuery的形式獲取 jQuery的形式獲取到的元素都是一組元素
//命名的時候爲了和js的變量進行區分，通常jQuery的變量前面都會加上一個$
var $btns = $('button');
var $btns2 = $('.btn');
//典型錯誤：$ is not defined 該錯誤的出現意味着jQuery的文件未加載成功
console.log($btns);
console.log($btns2);
1234567891011

1.2.3 屬性及僞類選擇器

使用css2提供的屬性選擇器及css3提供的僞類選擇器可以更快捷的選擇元素

//css2/3中提供的選擇器
//獲取除了submit按鈕之外的其他的input標籤
var $inNodes = $('input:not([type="submit"])');
console.log($inNodes);

console.log("--------靈魂分割線----------");
var $btns3 = $('button:nth-of-type(2n+1)');
console.log($btns3);
//jQuery中提供的常用選擇器
console.log($('button:eq(1)'));//=
console.log($('button:gt(1)'));//>
console.log($('button:lt(1)'));//<
123456789101112

1.2.4 獲取對象-過濾選擇器

jQuery中大多數的操作都是以函數的形式存在的，對於元素的獲取同樣提供了對應的函數

//jQuery中提供的常用過濾器
console.log($('button').eq(1));
console.log($('input[type="text"]').next());
console.log($('button').parent());
console.log($('button').parent().children('button:eq(0)'));
12345

1.2.5 案例

<style>
    div {
        height: 150px;
        width: 150px;
        background-color: aqua;
        border: black solid 1px;
    }
</style>

<!-- 注意：導入js的script標籤內不能書寫其他代碼 -->
<script src="../js/jquery.min.js"></script>
<script>
    //jquery準備事件簡寫 
    //在頁面元素節點加載結束後執行
    $(function () {
        // 1、通過id獲取jquery對象
        // 在獲取juqery聲明變量保存時  一般要求變量名以$開始 用於區分普通對象與jquery對象
        var $d1 = $("#d1")
        //html()針對innerHtml屬性進行操作的方法
        $d1.html("通過id獲取")
        //方法中如果書寫參數 則爲賦值 不書寫則爲取值
        console.log($d1.html())

        // 2、通過class獲取jquery對象
        var $c1 = $(".c1")
        // jquery對象可以理解爲對應dom對象的數組
        // 在調用賦值方法時 會將代表的所有dom對象進行操作(可以理解爲內部自帶遍歷)
        // 在獲取調用取值方法時 默認獲取第一個(索引爲0)的dom對象對應屬性的值
        console.log($c1)
        $c1.html("通過class獲取")

        // 3、通過標籤獲取jquery對象
        var $div = $("div")
        $div.html("通過標籤獲取")

        // 4、通過屬性獲取標籤
        var text = $("input[type='text']")
        // css  style屬性的對應方法
        // 書寫時填入兩個值 第一個值爲修改或獲取的樣式值  第二個爲賦值
        text.css("background-color", "red")

        // 5、通過僞類選擇
        // eq()選擇指定索引的jquery對象
        var $div2=$("div:eq(1)")
        $div2.css("background-color", "red")
        // gt()選擇大於索引1的jquery對象  lt()小於
        // even 偶數索引   odd奇數索引
        var $divgt1=$("div:even")
        $divgt1.css("background-color", "yellow")

        // 6、jquery提供了過濾的方法
        // eq方法 在獲取的所有jquery中繼續獲取指定索引
        console.log($("div").eq(2))
        // next方法 獲取當前選擇jquery對象下一個元素對象
        console.log($("div").eq(1).next())
        // parent方法 獲取當前標籤的父標籤對象
        console.log($("div").parent())
        // children方法 獲取當前標籤的所有子標籤對象
        console.log($("div").parent().children())
    })
</script>

<body>
    <div id="d1">
    </div>
    <div class="c1">
        c111
    </div>
    <div class="c1">
        c222
    </div>
    <div class="c2">
    </div>
    <input type="text">
    <input type="password">
</body>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576

1.3 jQuery修改屬性

由於html屬性過多。所以jquery在封裝時只爲一些常用的屬性提供了對應的方法，其他屬性使用統一的方法進行設置修改
jQuery中獲取到的元素都是以組的形式存在的，元素值的三種操作方式結合API詳細瞭解

<script src="../js/jquery.min.js"></script>
<script>
    // 頁面主要標籤加載後執行
    $(function () {
        // jquery所有的方法基本都是書寫參數進行賦值 不書寫則爲獲取
        // html()方法
        $("span").html("html方法等價於innerHTML<br>")
        // text()方法
        // 將內容直接書寫在頁面 不識別標籤
        $("span").text("html方法等價於innerHTML<br>")

        // val()方法
        // 設置獲取指定對象的值
        $("input").val("val方法等價於value屬性")
        //alert($("input").val()) //在方法中不書寫參數則爲獲取

        // attr()屬性通用操作方法
        // 第一個參數爲操作的屬性名  第二個參數爲修改值
        $("input").attr("type","button")
        //alert($("input").attr("type"))
    })
</script>

<body>
    <span></span>
    <input type="text" value="默認值">
    <input type="text">
    <input type="text" >
</body>
1234567891011121314151617181920212223242526272829
// 得到匹配元素集合中每個元素的合併文本，包括他們的後代
//console.log($('p').text());
console.log($('p').text('揍你啊'));

// 獲取集合中第一個匹配元素的HTML內容 
console.log($('p').html());
//console.log($('p').html('揍你啊'));

// 獲取匹配的元素集合中第一個元素的當前值
console.log($('input').val());
// 將修改集合中每個元素的值
$('input').val("lala");
123456789101112

1.4 jQuery修改樣式

多樣式的修改語法與json的使用相同，其複合屬性可使用"-"鏈接也可以首字母大寫鏈接

<style>
    .div2{
        height: 100px;
        background-color: green;
    }
  
</style>

<script src="../js/jquery.min.js"></script>
<script>
    $(function () {
        // 1、通過修改樣式屬性的形式修改(不建議使用) 
        //jquery對style屬性提供了對應的css方法
        //在進行使用時賦值的樣式與css書寫樣式屬性名相同
        //在屬性字符串書寫時不要寫錯
        //jquery支持鏈式調用（可以重複調用方法設置）
        var $div0 = $("div:eq(0)")
        // $div0.css("background-color", "red").css("height", 100)
        //也支持json數據形式的樣式輸入
        $div0.css({ "background-color": "red", "height": 100 })
        console.log($div0.css("height"))

        // 2、通過修改class屬性的形式修改(建議使用) 
        //jauery對於class書寫提供了操作方法
        var $div1 = $("div:eq(1)")
        //addClass("class") 添加classs
        $div1.addClass("div2")
        //removeClass("remove") 移除class
        $div1.removeClass("div2")

        //hasClass 判斷指定class是否存在
        console.log( $div1.hasClass("div2"))

        //toggleClass 切換class
        //如果包含指定class則刪除 不包含則添加
        $div1.toggleClass("div2")
    })
</script>

<body>
    <div></div>
    <div></div>
</body>
12345678910111213141516171819202122232425262728293031323334353637383940414243
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function(){
    //this.style.color = "red";
    //修改單個樣式.css(key,val)
    //$('button').css('color','darkcyan');
    //修改多個樣式.css({key:val,key:val,...})
    $('button').css({'color':'red','font-size':'20px'})
    //獲取樣式
    console.log($('button').css('font-size'));
}
12345678910

1.5 jQuery和DOM對象之間的轉換

jQuery對象只能使用jQuery中提供的函數或屬性，同樣的jQuery中的屬性或函數只能由jQuery對象調用

JavaScript對象(DOM對象)只能使用JavaScript中提供的函數或屬性，同樣的JavaScript中的屬性或函數只能由JavaScript對象進行調用

因此：在使用jQuery獲取之後，需要使用DOM對象(Javascript對象)中的屬性進行操作，這個時候就需要將jQuery對象轉換爲對應的DOM對象。

1.5.1 jQuery對象轉DOM對象

方法
- jQuery中提供了get(index)函數用於對象的轉換
- 使用數組下標的形式進行轉換。

<script src="../js/jquery.min.js"></script>
<style>
    div {
        height: 100px;
        width: 100px;
        border: solid 1px;
    }
</style>
<script>
    $(function () {
        var $div = $("div")
        console.log($div)
        //jquery對象可以看做是dom對象的數組
        //jquery對象轉換爲dom對象就是將對應的dom對象從數組中取出來
        //1、使用數組索引下標進行獲取
        console.log($div[0])
        // for(var d of $div){
        //     console.log(d);
        // }
        
        //2、jquery提供了轉換的方法get()
        console.log($div.get(0))
    })
</script>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
1234567891011121314151617181920212223242526272829

1.5.2 DOM對象轉jQuery對象

DOM對象轉jQuery對象只需要滿足jQuery的格式要求即可，使用$()包裹js對象後就是jQuery對象

<script src="../js/jquery.min.js"></script>
<style>
    div {
        height: 100px;
        width: 100px;
        border: solid 1px;
    }
</style>
<script>
    $(function () {
       var d1= document.getElementById("d1");
       console.log(d1)
       //dom轉換jquery方法就是使用$()進行包裹 將對應dom對象傳入
       console.log($(d1))
 
       var div=document.getElementsByTagName("div")
       console.log(div)
       console.log($(div))
    })
</script>
<body>
    <div id="d1"></div>
    <div></div>
    <div></div>
</body>
12345678910111213141516171819202122232425

1.6 jQuery中的遍歷形式

數組、集合或json對象的遍歷，jQuery中提供了新的更簡潔的遍歷形式

通用語法
要遍歷的jquery對象.each(function(){遍歷方法})

1.6.1 遍歷節點

$('選擇器').each(function(index,element){})，該寫法是用於遍歷獲取到的元素對象

//目的：輸出元素的內容 函數中不帶參數
/* $('button').each(function(){
		console.log(this.innerHTML);
	}) */
//函數中帶有一個參數,該參數代表下標
/* $('button').each(function(index){
		console.log(index);
	}) */
//參數一：下標，參數二：對象
$('button').each(function(index,element){
    console.log(index,element.innerHTML);
})
console.log("-----------靈魂分割線-----------");
12345678910111213

1.6.2 遍歷數組或集合

$.each(data,function(key,value){})，主要用於遍歷數組或json對象等

//遍歷指定的集合數據,參數一：代表要遍歷的集合對象，參數二：函數
var arr = ["張飛","劉備","關羽"];
/* $.each(arr,function(){
		console.log(this);
	}) */

/* $.each(arr,function(index){
		console.log(index);
	}) */

$.each(arr,function(index,element){
    console.log(index,element);
})
var json = {"name":'張飛',"age":13};
$.each(json,function(key,val){
    console.log(key,val);
})
1234567891011121314151617

1.6.3 案例

<script src="../js/jquery.min.js"></script>
<style>
    div {
        height: 100px;
        width: 100px;
        border: solid 1px;
    }
</style>
<script>
    $(function () {
        //1、輸出遍歷
        $("div").each(function(){
            //使用this關鍵字代表每個取出的對象
            //取出的時dom對象
            console.log(this)
            //這種方式與增強for循環結果相似
        })

        //2、聲明索引 在遍歷時使用
        $("div").each(function(i){
            //使用this關鍵字代表每個取出的對象
            //取出的時dom對象
            console.log(i,this)
            //這種方式與增強for循環結果相似
        })

        //3、聲明索引以及保存對象的變量
        $("div").each(function(i,e){
            //e與this相同都代表取出的dom對象
            console.log(i,e)
        })

        //數組遍歷
        var strArr=["aaa","bbb","ccc"];
        $.each(strArr,function(index,value){
            console.log(index,value)
        })

        //json數據遍歷
        var jsonObj={"k1":"v1","k2":"v2"};
        $.each(jsonObj,function(key,value){
            console.log(key,value)
        })
    })
</script>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950

1.7 jQuery事件

jquery針對不同的事件提供了相應的事件方法，通過選擇器選擇對應的jquery對象調用對應的事件方法，就可以將事件與對應的dom對象進行綁定

事件書寫格式

$("dom").事件名(function(){
    事件執行方法
})
123

1.7.1 ready事件

ready和onload的區別：

1、onload事件是在頁面的DOM結構及圖片資源都加載完畢後執行的，而ready事件是在DOM結構加載完後執

2、onload事件只能使用一次，ready事件可使用多次

$(document).ready(function(){
    //就緒執行
})
//簡化寫法
$(function(){
     //就緒執行
})
1234567
<script src="../js/jquery.min.js"></script>
<script>
    window.onload = function () {
        alert("頁面加載結束1")
    }
    //onload只能執行一次  執行後書寫的
    window.onload = function () {
        alert("頁面加載結束2")
    }

    //ready可以書寫多個並執行
    $(document).ready(function(){
        alert("dom標籤加載結束1")
    })
    $(function(){
        alert("dom標籤加載結束2")
    })

</script>
12345678910111213141516171819

1.7.2 click點擊事件

<style>
    div {
        height: 100px;
        width: 100px;
        border: solid 1px;
    }
</style>
<script src="../js/jquery.min.js"></script>
<!-- jquery旋轉插件 -->
<script src="../js/jquery.rotate.min.js"></script>
<script>
    $(function () {
        //獲取jquery對象設置點擊事件
        $("div").click(function () {
            var i = 0;
            console.log($(this).html())
            setInterval(() => {
                //由旋轉插件提供的旋轉方法 
                $(this).rotate(i--);
            }, 1);
        })
    })
</script>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
</body>
12345678910111213141516171819202122232425262728

1.7.3 獲取焦點`focus`/失去焦點`blur`事件

一般用於輸入框，當選擇輸入框獲取光標時就是獲取焦點，輸入結束失去光標就是失去焦點

<script src="../js/jquery.min.js"></script>
<script>
    $(function () {
        //獲取焦點
        $("input").focus(function () {
            console.log("獲取焦點" + this)
        })
        
        //失去焦點
        $("input").blur(function () {
            // console.log("失去焦點" + this)
            //失去焦點後將數據輸入div
            $("div").html($(this).val())
        })
    })
</script>
<body>
    <input type="text">
    <div></div>
</body>
1234567891011121314151617181920

1.7.4 submit表單提交事件

<script src="../js/jquery.min.js"></script>
<script>
    $(function () {
        $("form").submit(function(){
            console.log("表單提交")
            //jquery提交方法可以直接通過方法中的return進行表單的阻止
            return false;
        })
    })
</script>
<body>
    <form action="#">
        <input type="text" name="t">
        <input type="submit" value="提交">
    </form>
</body>
12345678910111213141516

1.7.5 鼠標事件

<style>
    div{
        height: 200px;
        width: 200px;
        border: solid 1px;
    }
</style>
<script src="../js/jquery.min.js"></script>
<script>
    $(function(){
        $("div:eq(0)").mousedown(function(){
            console.log("鼠標按下")
        })
        $("div:eq(1)").mouseup(function(){
            console.log("鼠標擡起")
        })
        $("div:eq(2)").mouseover(function(){
            console.log("鼠標移入")
        })
        $("div:eq(3)").mouseout(function(){
            console.log("鼠標移出")
        })
         $("div:eq(4)").mousemove(function(){
             console.log("鼠標移動")
         })

        // event事件對象
        //當相應事件發生時 都會創建相應的事件對象 保存對應事件的相應信息
        $("div:eq(4)").mousemove(function(event){
           //event 就是事件對象 保存事件發生相應的數據
            console.log(event);
          $(this).html(event.pageX+","+event.pageY)//頁面位置
          $(this).html(event.offsetX+","+event.offsetY)//當前標籤位置
        })
    })
</script>
<body>
    <div>mousedown</div>
    <div>mouseup</div>
    <div>mouseover</div>
    <div>mouseout</div>
    <div>mousemove</div>
</body>
12345678910111213141516171819202122232425262728293031323334353637383940414243

div鼠標跟隨練習

<style>
    body {
        margin: 0;
        height: 100vh;
        width: 100%;
        /* vh vw視口高度與寬度 就是當前瀏覽器展示大小 會分成100份 */
    }

    div {
        height: 200px;
        width: 200px;
        background-color: aqua;
        position: absolute;
    }
</style>
<script src="../js/jquery.min.js"></script>
<script>
    $(function () {
        //爲body添加鼠標移動事件
        $("body").mousemove(function (e) {
            //通過事件對象獲取鼠標位置
            var x = e.pageX;
            var y = e.pageY;

            //計算中心位置
            var left = x - $("div").width() / 2;
            var top = y - $("div").height() / 2;
            //設置對應div位置
            $("div").css({ "left": left, "top": top })

        })

    })
</script>
<body>
    <!-- 頁面中div隨鼠標移動 -->
    <div></div>
</body>
1234567891011121314151617181920212223242526272829303132333435363738

1.7.6 鍵盤事件

<script src="../js/jquery.min.js"></script>
<script>
    $(function () {
        $("input").keypress(function (e) {
            //鍵盤按下擡起事件
            console.log(e.key,e.keyCode)
            //key按下的key值
            //keyCode 對應碼值
        })
    })
</script>
<body>
    <input type="text">
</body>
1234567891011121314

WASD控制div標籤頁面移動

<style>
    body {
        margin: 0;
        height: 100vh;
        width: 100%;
    }

    div {
        height: 100px;
        width: 100px;
        background-color: aqua;
        position: absolute;
        left: 0;
    }
</style>
<script src="../js/jquery.min.js"></script>
<script>
    $(function () {
        //爲body添加鍵盤事件
        var setint;
        $("body").keypress(function (e) {
            clearInterval(setint)
            setint= setInterval(() => {
                move1(e.key)
            }, 100);
        })

        function move1(key) {
            //key代表移動方向
            //通過事件獲取按鍵值 
            var $div = $("div");
            //獲取當前left屬性值字符串
            var leftStr = $div.css("left")
            //通過  截取與轉換轉換爲數值
            var left = parseInt(leftStr.substring(0, leftStr.length - 2))
            //獲取當前left屬性值字符串
            var topStr = $div.css("top")
            //通過  截取與轉換轉換爲數值
            var top = parseInt(topStr.substring(0, topStr.length - 2))

            if (key == "d") {
                //設置移動
                $div.css("left", left + $div.width())
            } else if (key == "s") {
                $div.css("top", top + $div.height())
            } else if (key == "w") {
                $div.css("top", top - $div.height())
            } else if (key == "a") {
                $div.css("left", left - $div.width())
            }
        }
    })
</script>
<body>
    <div>

    </div>
</body>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758

1.7.7 事件冒泡

由於頁面標籤是嵌套書寫，所以在對內部標籤添加事件後可能會導致外部標籤也會觸發

事件冒泡指事件向上傳遞-通常存在於具有包裹關係的元素中

如何阻止事件冒泡？
只要有事件的存在就一定有事件源-event

阻止事件冒泡：event.stopPropagation();

<script src="../js/jquery.min.js"></script>
<script>
    $(function () {
        // $('button').click(function () {
        //     alert('btn up');
        // })

        $('div').click(function () {
            alert('div up')
        })

        $('body').click(function () {
            alert('body up')
        })

        $('button').click(function (event) {
            //阻止事件冒泡 只允許當前觸發
            event.stopPropagation();
            alert('btn up');
        })
    })
</script>

<body>
    <div>
        <button>按鈕</button>
    </div>
</body>
12345678910111213141516171819202122232425262728

1.8 jQuery事件綁定

jquery事件是以方法的形式進行綁定，不能實現靈活的操作，所以jquery提供了事件綁定與解綁的方法，可以通過字符串參數動態的進行對應事件以及標籤的綁定與解綁

1.8.1 on單個事件綁定

通過on方法將事件字符串以及處理事件的方法傳入進行綁定

$("dom").on("事件名"，function(){處理事件函數})
1
<style>
    div {
        width: 100px;
        height: 100px;
        border: solid 1px;
    }
</style>
<script src="../js/jquery.min.js"></script>
<script>
    $(function () {
        //on 綁定的語法
        //$("dom").on("事件名",function(){處理事件方法})

        $("button").click(function () {
            var name = $("input").val()
            //使用on綁定語法 將其事件綁定
            $("div").on(name,function(e){
                console.log(e.type)
            })
        })

    })
</script>

<body>
    <!-- 在輸入框輸入綁定的事件名 點擊按鈕爲div綁定指定的事件 -->
    <input type="text" id="i1"> <button>綁定</button>
    <div></div>
</body>
1234567891011121314151617181920212223242526272829

1.8.2 on多個事件綁定

對於一個標籤可以進行多個事件的綁定，on方法同樣通過參數也可以同時爲標籤綁定多個不同事件

爲多個事件綁定不同函數

使用json數據將多個數據與對應函數進行綁定

$("dom").on({"事件1":"事件函數","事件2"："事件函數"})
1

1.8.3 on後添加的元素綁定事件

針對通過動態添加到頁面中的元素進行事件綁定（此處先做了解，動態增刪時演示案例）

語法：$(已存在的父元素).on(事件名,子元素選擇器,函數)

//給刪除標籤添加點擊事件
$('table').on('click','.del',function(){
    $(this).parent().parent().remove()
})
1234
<style>
    div {
        width: 100px;
        height: 100px;
        border: solid 1px;
    }
</style>
<script src="../js/jquery.min.js"></script>
<script>
    $(function () {
        //爲div同時綁定鼠標移入與鼠標移出事件
        $("div").on({
            "mouseover": function () { console.log("鼠標移入") },
            "mouseout": function () { console.log("鼠標移出") }
        })
    })
</script>
<body>

    <div></div>
</body>
123456789101112131415161718192021

爲多個事件綁定相同函數

將多個事件字符串使用空格分隔綁定相同的函數

$("dom").on("事件1 事件2 事件3"，"事件函數")
1
<style>
    div {
        width: 100px;
        height: 100px;
        border: solid 1px;
    }
</style>
<script src="../js/jquery.min.js"></script>
<script>
    $(function () {
        //爲div同時綁定鼠標移入與鼠標移出事件 使用相同的事件函數
        $("div").on("mouseover mouseout", function (e) {
            console.log(e.type)
        })
    })
</script>
<body>
    <div></div>
</body>
12345678910111213141516171819

1.9 jQuery元素動態操作

使用JavaScript的形式進行元素的增刪時，優點是邏輯清晰明瞭，缺點是比較繁瑣

1.9.1 節點的添加

獲取子元素 / 父元素

函數	描述
parent()	獲取父元素
children()	獲取子元素

節點的添加

函數	描述
prepend()	將指定元素元素添加到當前元素的第一個位置
append()	將指定元素添加到的當前元素的最後一個位置
before()	在指定行同級之後添加指定標籤
after()	在指定行同級之後添加指定標籤

<script src="/js/jquery.min.js"></script>
<script>
    $(function () {
    	// append()方法
        $("button:eq(0)").click(function () {
            //jquery添加方法無需創建標籤 會自定根據書寫的標籤創建對應標籤
            //append在當前標籤末尾添加指定標籤
            $("tbody").append("<tr><td>" + prompt("請輸入姓名") + "</td><td>" + prompt("請輸入年齡") + "</td><td>" + prompt("請輸入性別") + "</td></tr>")
        })
        
        // prepend()方法
        $("button:eq(1)").click(function () {
            //prepend在當前標籤首位添加指定標籤
            $("tbody").prepend("<tr><td>" + prompt("請輸入姓名") + "</td><td>" + prompt("請輸入年齡") + "</td><td>" + prompt("請輸入性別") + "</td></tr>")
        })
        
        // before()方法
        $("button:eq(2)").click(function () {
            var line=prompt("請輸入插入的行")
            //先獲取指定行  
            //before在指定行同級之前添加指定標籤
            $("tbody>tr:eq("+(line-1)+")").before("<tr><td>" + prompt("請輸入姓名") + "</td><td>" + prompt("請輸入年齡") + "</td><td>" + prompt("請輸入性別") + "</td></tr>")
        })  
        
        // after()方法
        $("button:eq(3)").click(function () {
            var line=prompt("請輸入插入的行")
            //先獲取指定行  
            //after在指定行同級之後添加指定標籤
            $("tbody>tr:eq("+(line-1)+")").after("<tr><td>" + prompt("請輸入姓名") + "</td><td>" + prompt("請輸入年齡") + "</td><td>" + prompt("請輸入性別") + "</td></tr>")
        })  


    })
</script>

<body>
    <button>在末尾添加一行</button> <button>在首行添加一行</button>
    <button>在指定行之前插入一行</button> <button>在指定行之後插入一行</button>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
                <th>性別</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
            <tr>
                <td>5</td>
                <td>5</td>
                <td>5</td>
            </tr>
        </tbody>
    </table>
</body>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566

1.9.2 節點的刪除

結點的刪除

函數	描述
empty()	從被選元素中刪除子元素
remove()	刪除被選元素（及其子元素）

<script src="/js/jquery.min.js"></script>
<script>
    $(function () {
        $("body>button").click(function () {
            //清空tboday中的標籤
            $("tbody").empty()
        })


        $("td>button").click(function () {
            //remove方法 將當前jquery代表的標籤刪除
           $(this).parent().parent().remove()
        })
    })
</script>

<body>
    <button>清空表格數據</button>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
                <th>性別</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td><button>刪除</button></td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>3</td>
                <td><button>刪除</button></td>
            </tr>
            <tr>
                <td>5</td>
                <td>5</td>
                <td>5</td>
                <td><button>刪除</button></td>
            </tr>
        </tbody>
    </table>
</body>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

1.10 正則表達式-RegExp

1.10.1 概述

正則表達式主要是爲了去處理(驗證)一些比較複雜的數據，例如：手機號運營商區分、身份證號驗證等

如果只是簡單的驗證就不要多此一舉再去使用正則表達式，例如：是否爲空、是否是11位數字等

要求：只需要各位掌握其基本的使用形式即可，不需要你寫複雜的表達式，因爲，通常情況下，公司會提供所需要的正則表達式的語句，或者公司沒這方面的要求，通常情況下就直接百度一個。

1.10.2 語法

var patt=new RegExp(pattern,modifiers);
或者更簡單的方式:
var patt=/pattern/modifiers;
pattern（模式）描述了表達式的模式

modifiers(修飾符) 用於指定全局匹配、區分大小寫的匹配和多行匹配

方括號用於查找某個範圍內的字符:

表達式	描述
[abc]	查找方括號之間的任何字符。
[^abc]	查找任何不在方括號之間的字符。
[0-9]	查找任何從 0 至 9 的數字。
[a-z]	查找任何從小寫 a 到小寫 z 的字符。
[A-Z]	查找任何從大寫 A 到大寫 Z 的字符。
[A-z]	查找任何從大寫 A 到小寫 z 的字符。
[adgk]	查找給定集合內的任何字符。
[^adgk]	查找給定集合外的任何字符。
(red\|blue\|green)	查找任何指定的選項

量詞（掌握加粗的三個使用方式即可）：

量詞	描述
n+	匹配任何包含至少一個 n 的字符串。
n*	匹配任何包含零個或多個 n 的字符串。
n?	匹配任何包含零個或一個 n 的字符串。
n{X}	匹配包含 X 個 n 的序列的字符串。
n{X,Y}	匹配包含 X 至 Y 個 n 的序列的字符串。
n{X,}	匹配包含至少 X 個 n 的序列的字符串。
n$	匹配任何結尾爲 n 的字符串。
^n	匹配任何開頭爲 n 的字符串。
?=n	匹配任何其後緊接指定字符串 n 的字符串。
?!n	匹配任何其後沒有緊接指定字符串 n 的字符串。

RegExp對象方法：

方法	描述	FF	IE
compile	編譯正則表達式。	1	4
exec	檢索字符串中指定的值。返回找到的值，並確定其位置。	1	4
test	檢索字符串中指定的值。返回 true 或 false

1.10.3 練習

<script>
    //基本語法[識別字符]{長度}[識別字符2]{長度}
    var str1 = "111abbb"//要判斷的字符串
    var regObj1 = /[a]{1}/  //校驗規則
    //只要包含一個a返回true
    console.log(regObj1.test(str1));

    console.log("~~~~~~~~~~~~~~~~~~~~~")

    var str2 = "a1b1c1cc"//要判斷的字符串
    var regObj2 = /[abc]{2}/ //校驗規則
    //只要存在兩個連續的字符中包含abc任意兩個
    console.log(regObj2.test(str2));

    console.log("~~~~~~~~~~~~~~~~~~~~~")
    var str3 = "aaaaa"
    var regObj3 = /a/ //校驗規則
    //省略寫法默認長度爲1 如果只有一個字符[]也可以省略
    console.log(regObj3.test(str3));

    console.log("~~~~~~~~~~~~~~~~~~~~~")
    var str4 = "111fuck11"
    var regObj4 = /fuck/ //校驗規則
    //必須包含fuck
    console.log(regObj4.test(str4));

    console.log("~~~~~~~~~~~~~~~~~~~~~")
    var str5 = "asdaaabbccssdda"
    var regObj5 = /a{2}b{2}c{2}/ //校驗規則
    console.log(regObj5.test(str5));
    //校驗輸入的字符串包含連續的aabbcc

    console.log("~~~~~~~~~~~~~~~~~~~~~")

    //必須是長度爲11的數字
    //在指定長度設置時 必須使用^與$前後包裹

    var str6 = "1.........."
    var regObj6 = /^1[0-9]{10}$/ //校驗規則
    //^必須以之後的識別字符開頭  放在識別[]中就是取反
    //$必須以之前的識別字符結尾
    // 一起使用用於限制字符串總長度
    console.log(regObj6.test(str6));

    var str7 = "cbaaaaa";
    var regObj7 = /[a]{1}[b]{1}[c]{1,}/ //校驗規則


    //註冊賬號
    //必須以大寫字母開頭 可以包含字母與數字 長度必須大於6位
    var nameObje = /^[A-Z]{1}[0-9A-Za-z]{5,}$/

    //註冊密碼
    //只能書寫數字 並且長度爲6位
    var pwdObj = /^[0-9]{6}$/

    //註冊郵箱
    var strs="[email protected]";
    var mailObj = /^[A-z0-9]+@(qq|163|sina|126|168)+.com$/
    console.log(mailObj.test(strs))

    //註冊手機號
    var phoneObj=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[1|3|5|6]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
    
</script>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465

1.10.4 案例-表單驗證

用戶提交表單時對錶單中的數據進行驗證，同時，當輸入框失去焦點時進行快速驗證提示，提供用戶體驗性

在前臺向後臺發送數據並存儲至數據庫的過程中，有時前臺客戶會書寫不符合格式要求的數據，這個時候就需要使用表單驗證（如果後臺接收錯誤的數據可能會報錯，並且通知前臺進行響應，爲了減少後臺以及服務器的壓力，在頁面進行表單驗證，不正確的數據就不會發送給服務器，減少服務器請求次數）

<form action="#">
  <label for="uname">username：</label><input type="text" name="uname" id="uname"><span></span><br>
  <label for="email">email：</label><input type="text" name="email" id="email"><span></span><br>
  <input type="submit" value="check">
</form>
12345
//定義用戶名及郵箱的驗證規則
let unameVerify = /^[0-9A-z]{6,12}$/i;
let emailVerify = /[0-9A-z]{1,}@[0-9A-z]{2,}\.(cn|com)$/;
//定義表單提交事件
$('form').submit(function(){
    //驗證表單內容是否完全符合規則
    let flag = false;
    $('input:not([type="submit"])').each(function(){
        let content = $(this).val();
        //用戶名驗證
        if($(this).attr('name') == "uname"){
            if(!unameVerify.test(content)){
                //不符合規則
                flag = false;
                return;
            }
            flag = true;
        }
        if($(this).attr('name') == "email"){
            if(!emailVerify.test(content)){
                flag = false;
                return;
            }
            flag = true;
        }
    })
    return flag;
})
//通過焦點事件對單個輸入框進行驗證
$('input:not([type="submit"])').on({
    //焦點事件
    focus:function(){
        if($(this).attr("name") == "uname"){
            $(this).next().text("數字+字母6~12位");
            $(this).next().css("color","#b0b0b0");
        }
        if($(this).attr("name") == "email"){
            $(this).next().text("郵箱格式：[email protected]/com");
            $(this).next().css("color","#b0b0b0");
        }
    },
    //失去焦點事件
    blur:function(){
        let content = $(this).val()
        if($(this).attr("name") == "uname"){
            if(!unameVerify.test(content)){
                $(this).next().text("用戶名格式不正確");
                $(this).next().css("color","red");
            }
        }
        if($(this).attr("name") == "email"){
            if(!emailVerify.test(content)){
                $(this).next().text("郵箱格式不正確");
                $(this).next().css("color","red");
            }
        }
    }
})
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758

1.11 jQuery動畫

在進行樣式操作時，我們可以通過不同的樣式切換實現動畫的效果，但是如果直接進行樣式切換沒有過度效果可能不太明顯

1.11.1 基本的顯示隱藏

jQuery對於顯示隱藏的效果（對display屬性）提供了顯示、隱藏、切換方法

函數	描述
show()	顯示方法
hide()	隱藏方法
toggle()	切換方法

<style>
    div {
        height: 100px;
        width: 100px;
        background-color: aqua;
    }
</style>
<script src="../js/jquery.min.js"></script>
<script>
    $(function () {
        var $div = $("div");
        $("button:eq(0)").click(function () {
            //將display設置爲block
            $div.show()
        })
        $("button:eq(1)").click(function () {
            //將display設置爲none
            $div.hide()
        })
        $("button:eq(2)").click(function () {
            //根據當前設置進行隱藏與顯示的切換
            $div.toggle()
        })

    })
</script>

<body>
    <button>顯示</button><button>隱藏</button><button>切換</button>
    <div></div>
    <div></div>
    <div></div>
</body>
123456789101112131415161718192021222324252627282930313233

1.11.2 使用透明方式顯示隱藏

通過將標籤透明度進行設置之後顯示隱藏的方法，提供了淡入、淡出、切換、設置對應透明度方法

函數	描述
fadeIn()	淡入方法
fadeOut()	淡出方法
fadeToggle()	淡入淡出切換方法
fadeTo()	設置透明度方法

<style>
    div {
        height: 100px;
        width: 100px;
        background-color: aqua;
    }
</style>
<script src="../js/jquery.min.js"></script>
<script>
    $(function () {
        var $div = $("div");
        // 兩個參數 執行時間   回調方法
        $("button:eq(0)").click(function () {
            // 如果不寫參數則使用默認的參數
            $div.fadeIn();
        })
        $("button:eq(1)").click(function () {
            // 設置執行時間
            $div.fadeOut(1000)
        })
        $("button:eq(2)").click(function () {
            //設置回調方法
            //當執行結束後執行回調方法
            $div.fadeToggle(2000,function(){
                //注意每個標籤執行結束後都會執行
                alert("執行結束")
            })
        })
        $("button:eq(3)").click(function () {
            //設置透明度方法 需要指定透明度
            // 執行時間  透明度  回調方法
            $div.fadeTo(1000,0.3,function(){
                console.log("將透明度修改爲50%")
            })

        })
    })
</script>

<body>
    <button>淡入</button><button>淡出</button><button>切換</button><button>透明度</button>
    <div></div>
    <div></div>
    <div></div>
</body>
123456789101112131415161718192021222324252627282930313233343536373839404142434445

1.11.3 使用滑動(摺疊)方式顯示隱藏

函數	描述
slideDown()	向下滑動方法
slideUp()	向上滑動方法
slideTogeele()	切換方法

<style>
    div {
        height: 100px;
        width: 100px;
        background-color: aqua;
    }
</style>
<script src="../js/jquery.min.js"></script>
<script>
    $(function () {
        var $div = $("div");
        $("button:eq(0)").click(function () {
            //執行時間  回調方法
            $("p").slideDown(2000);
        })
        $("button:eq(1)").click(function () {
            $("p").slideUp(3000,function(){
                console.log("將p標籤收起")
            });
        })
        $("button:eq(2)").mouseover(function () {
           $("p").slideToggle(5000)
        })

    })
</script>

<body>
    <button>顯示</button><button>隱藏</button><button>切換</button>
    <p>這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話</p>
  
    <p>這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話</p>
  
    <p>這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話這是一句話</p>
</body>
1234567891011121314151617181920212223242526272829303132333435

1.11.4 自定義動畫

通過設置不同的樣式以及過渡，通過jquery動畫方法實現動畫的展示

函數	描述
animate(json樣式修改，執行時間，回調方法)	自定義動畫方法

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: aqua;
        border: solid 1px;
        position: absolute;

    }
</style>

<script src="../js/jquery.min.js"></script>
<script>
    $(function () {
        $("button").click(function () {
            //只需要書寫最終的樣式即可
            //注意設置的樣式會在指定時間內同時進行變換
            $("div").animate({ "border-radius": 50 }, 1000)
            //動畫順序執行 會在前一個動畫執行結束後執行
            //也可以將之後的變化書寫在回調方法中(建議)
            $("div").animate({
                "left": 100,
                "width": 50,
                "height": 50,
            }, 2000)
        })
    })
</script>

<body>
    <button>執行動畫</button>
    <div></div>
</body>
123456789101112131415161718192021222324252627282930313233

1.12 插件機制

插件：增強jQuery的功能

實現方法：
- $.fn.extend(object)
  增強 ‘通過jQuery獲取的對象’ 的功能。如：$("#id")
- $.extend(object)
  增強 ‘jQUery對象自身’ 的功能。如：$ / jQuery
$.fn.extend(object)的代碼演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery對象進行方法擴展</title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
       //使用jquery插件 給jq對象添加2個方法 check()選中所有複選框，uncheck()取消選中所有複選框
        
        //1.定義jqeury的對象插件
        $.fn.extend({
            //定義了一個check()方法。所有的jq對象都可以調用該方法
            check:function () {
               //讓複選框選中

                //this:調用該方法的jq對象
                this.prop("checked",true);
            },
            uncheck:function () {
                //讓複選框不選中

                this.prop("checked",false);
            }
        });

        $(function () {
            // 獲取按鈕
            //$("#btn-check").check();
            //複選框對象.check();

            $("#btn-check").click(function () {
                //獲取複選框對象
                $("input[type='checkbox']").check();

            });

            $("#btn-uncheck").click(function () {
                //獲取複選框對象
                $("input[type='checkbox']").uncheck();

            });
        });
    </script>
</head>
<body>
<input id="btn-check" type="button" value="點擊選中複選框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="點擊取消複選框選中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">籃球
<input type="checkbox" value="volleyball">排球

</body>
</html>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354

$.extend(object)的代碼演示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery對象進行方法擴展</title>
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //對全局方法擴展2個方法，擴展min方法：求2個值的最小值；擴展max方法：求2個值最大值
        
        $.extend({
            max:function (a,b) {
                //返回兩數中的較大值
                return a >= b ? a:b;
            },
            min:function (a,b) {
                //返回兩數中的較小值
                return a <= b ? a:b;
            }
        });

        //調用全局方法
        var max = $.max(4,3);
        //alert(max);

        var min = $.min(1,2);
        alert(min);
    </script>
</head>
<body>
</body>
</html>
12345678910111213141516171819202122232425262728293031

1.13 案例

1.13.1 廣告顯示和隱藏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>廣告的自動顯示與隱藏</title>
    <style>
        #content {
            width: 100%;
            height: 500px;
            background: #999
        }
    </style>

    <!--引入jquery-->
    <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
    <script>
        /*
            需求：
                1. 當頁面加載完，3秒後。自動顯示廣告
                2. 廣告顯示5秒後，自動消失。

            分析：
                1. 使用定時器來完成。setTimeout (執行一次定時器)
                2. 分析發現JQuery的顯示和隱藏動畫效果其實就是控制display
                3. 使用  show/hide方法來完成廣告的顯示
         */

        //入口函數，在頁面加載完成之後，定義定時器，調用這兩個方法
        $(function () {
            //定義定時器，調用adShow方法 3秒後執行一次
            setTimeout(adShow, 3000);
            //定義定時器，調用adHide方法，8秒後執行一次
            setTimeout(adHide, 8000);
        });

        //顯示廣告
        function adShow() {
            //獲取廣告div，調用顯示方法
            $("#ad").show("slow");
        }

        //隱藏廣告
        function adHide() {
            //獲取廣告div，調用隱藏方法
            $("#ad").hide("slow");
        }
    </script>
</head>
<body>
<!-- 整體的DIV -->
<div>
    <!-- 廣告DIV -->
    <div id="ad" style="display: none;">
        <img style="width:100%" src="./image/adv.jpg"/>
    </div>

    <!-- 下方正文部分 -->
    <div id="content">
        正文部分
    </div>
</div>
</body>
</html>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263

1.13.2 抽獎

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery案例之抽獎</title>
    <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>

    <script language='javascript' type='text/javascript'>

        /*
            分析：
                1. 給開始按鈕綁定單擊事件
                    1.1 定義循環定時器
                    1.2 切換小相框的src屬性
                        * 定義數組，存放圖片資源路徑
                        * 生成隨機數。數組索引
                2. 給結束按鈕綁定單擊事件
                    2.1 停止定時器
                    2.2 給大相框設置src屬性

         */
        var imgs = ["./image/man00.jpg",
            "./image/man01.jpg",
            "./image/man02.jpg",
            "./image/man03.jpg",
            "./image/man04.jpg",
            "./image/man05.jpg",
            "./image/man06.jpg",
        ];
        var startId;//開始定時器的id
        var index;//隨機角標
        $(function () {
            //處理按鈕是否可以使用的效果
            $("#startID").prop("disabled", false);
            $("#stopID").prop("disabled", true);
            //1. 給開始按鈕綁定單擊事件
            $("#startID").click(function () {
                // 1.1 定義循環定時器 20毫秒執行一次
                startId = setInterval(function () {
                    //處理按鈕是否可以使用的效果
                    $("#startID").prop("disabled", true);
                    $("#stopID").prop("disabled", false);
                    //1.2生成隨機角標 0-6
                    index = Math.floor(Math.random() * 7);//0.000--0.999 --> * 7 --> 0.0-----6.9999
                    //1.3設置小相框的src屬性
                    $("#img1ID").prop("src", imgs[index]);

                }, 20);
            });
            //2. 給結束按鈕綁定單擊事件
            $("#stopID").click(function () {
                //處理按鈕是否可以使用的效果
                $("#startID").prop("disabled", false);
                $("#stopID").prop("disabled", true);
                // 1.1 停止定時器
                clearInterval(startId);
                // 1.2 給大相框設置src屬性
                $("#img2ID").prop("src", imgs[index]).hide();
                //顯示1秒之後
                $("#img2ID").show(1000);
            });
        });
    </script>

</head>
<body>

<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
    <img id="img1ID" src="./image/man00.jpg" style="width:160px;height:100px"/>
</div>

<!-- 大像框 -->
<div style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
    <img id="img2ID" src="./image/man00.jpg" width="800px" height="500px"/>
</div>

<!-- 開始按鈕 -->
<input
        id="startID"
        type="button"
        value="點擊開始"
        style="width:150px;height:150px;font-size:22px">

<!-- 停止按鈕 -->
<input
        id="stopID"
        type="button"
        value="點擊停止"
        style="width:150px;height:150px;font-size:22px">
</body>
</html>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192

二、Bootstrap

1.1 概念

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

框架:一個半成品軟件，開發人員可以在框架基礎上，在進行開發，簡化編碼。

好處：
\1. 定義了很多的css樣式和js插件。我們開發人員直接可以使用這些樣式和插件得到豐富的頁面效果。
\2. 響應式佈局：同一套頁面可以兼容不同分辨率的設備。

Bootstrap庫(Bootstrap的所有js插件都依賴 jQuery，所以在加載bootstrap.min.js前必須先加載jquery.min.js)
bootstrap.min.css、jquery.min.js、bootstrap.min.js

1.2 快速入門

下載Bootstrap

在項目中將這三個文件夾複製

創建html頁面，引入必要的資源文件

<!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">
	    <!-- 上述3個meta標籤必須放在最前面，任何其他內容都必須跟隨其後！ -->
	    <title>Bootstrap HelloWorld</title>
	
	    <!-- Bootstrap -->
	    <link href="css/bootstrap.min.css" rel="stylesheet">
	    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
	    <script src="js/jquery-3.2.1.min.js"></script>
	    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
	    <script src="js/bootstrap.min.js"></script>
	</head>
	<body>
		<h1>你好，世界！</h1>
	</body>
	</html>
1234567891011121314151617181920

三、Layui

Layui：是一套開源的 Web UI 解決方案，採用自身經典的模塊化規範，並遵循原生 HTML/CSS/JS 的開發方式，極易上手，拿來即用。

使用之前，需要提前導入Layui的css、js文件

3.1 元素

使用layui的css樣式進行頁面效果的書寫（部分樣式使用到js）

3.1.1 字體圖標

layui 的所有圖標全部採用字體形式，取材於阿里巴巴矢量圖標庫（iconfont）。因此你可以把一個 icon 看作是一個普通的文字，這意味着你直接用 css 控制文字屬性，如 color、font-size，就可以改變圖標的顏色和大小。你可以通過 font-class 或 unicode 來定義不同的圖標。

<!-- 導入layui  css樣式文件 -->
<link rel="stylesheet" href="../layui/css/layui.css">
<style>
    i {
        /* 圖標可以看作文本 可以直接通過響應屬性進行樣式的修改 */
        color: red;
        /* 在進行修改時注意權重問題 */
        font-size: 50px !important;
    }
</style>

<body>
    <!-- 1、使用對應圖標unicode字符 -->
    <!-- 標籤書寫layui-icon 用於將其設置爲一個圖標 使用對應的unicode 值填入標籤 -->
    <i class="layui-icon">&#xe68c;</i>

    <hr>
    <!-- 2、使用對應圖標的class 書寫 -->
    <!-- 標籤書寫layui-icon 與圖標對應的class 通過僞元素形式添加 -->
    <i class="layui-icon layui-icon-heart-fill"></i>

    <hr>
    <i class="layui-icon layui-icon-heart" onmouseover="moveup(this)" onmouseout="movedown(this)"></i>
</body>
<script>

    function moveup(e) {
        e.classList.replace("layui-icon-heart", "layui-icon-heart-fill")
    }
    function movedown(e) {
        e.classList.replace("layui-icon-heart-fill", "layui-icon-heart")
    }
</script>
123456789101112131415161718192021222324252627282930313233

3.1.2 動畫

layui 的動畫全部採用 CSS3，因此不支持 ie8 和部分不支持 ie9。

<style>
    div {
        background-color: aqua;
        height: 100px;
        width: 100px;
    }
</style>
<link rel="stylesheet" href="../layui/css/layui.css">

<body>
    <input type="text" id="i1"> <button onclick="to()">按鈕</button>

    <!-- 通過兩個class設置 一個樣式設置爲當前標籤進行動畫展示  一個用於選擇對應動畫 -->
    <div id="d1" class="layui-anim"></div>

    <div  class="layui-anim layui-anim-rotate layui-anim-loop"></div>
</body>

<script>
    function to() {
        var i1 = document.getElementById("i1")
        document.getElementById("d1").classList.add(i1.value)
    }
</script>
123456789101112131415161718192021222324

3.1.3 按鈕

向任意HTML元素設定class=“layui-btn”，建立一個基礎按鈕。通過追加格式爲layui-btn-{type}的class來定義其它按鈕風格。內置的按鈕class可以進行任意組合，從而形成更多種按鈕風格。

<style>
    #btnDiv {
        width: 200px;
    }
</style>
<link rel="stylesheet" href="../layui/css/layui.css">


<body>
    <!-- layui 樣式設置按鈕 可以將任意標籤設置爲按鈕樣式 -->

    <a href="#" class="layui-btn layui-btn-primary">原始</a>
    <span class="layui-btn"> 默認</span>
    <div class="layui-btn layui-btn-normal">百搭</div>
    <button class="layui-btn layui-btn-warm">暖色</button>
    <input type="button" class="layui-btn layui-btn-danger" value="警告">
    <i class="layui-btn layui-btn-disabled">禁用</i>

    <hr>
    <!-- 繼續添加可以設置按鈕的主題（修改按鈕樣式） -->

    <a href="#" class="layui-btn layui-btn-primary  layui-border-green">原始主色</a>
    <!-- 可以繼續在原始按鈕基礎上進行樣式設置 -->

    <hr>
    <!-- 按鈕使用默認尺寸進行設置 但是也可以自己通過css樣式修改 也提供了常用的尺寸 -->

    <button type="button" class="layui-btn layui-btn-lg">一個標準的按鈕</button>
    <button type="button" class="layui-btn">一個標準的按鈕</button>
    <button type="button" class="layui-btn layui-btn-sm">一個標準的按鈕</button>
    <button type="button" class="layui-btn layui-btn-xs">一個標準的按鈕</button>

    <!-- 有時需要按鈕根據按鈕所在的標籤進行填充layui-btn-fluid -->
    <button type="button" class="layui-btn layui-btn-fluid ">流體按鈕</button>

    <div id="btnDiv">
        <button type="button" class="layui-btn layui-btn-fluid ">一個標準的按鈕</button>
    </div>

    <hr>
    <!-- 直角的按鈕有時並不好看 所以可以通過 添加圓角 -->
    <button class="layui-btn layui-btn-warm layui-btn-radius">暖色</button>

    <hr>
    <!-- 將按鈕與圖標組合實現 圖標按鈕 -->
    <button class="layui-btn layui-btn-radius">
        <i class="layui-icon layui-icon-heart-fill"></i>收藏
    </button>
    <hr>
    <!-- 在書寫多個按鈕時 按鈕之間默認存在間距 -->
    <div class="layui-btn layui-btn-normal">百搭</div>
    <button class="layui-btn layui-btn-warm">暖色</button><br>
    <!-- 可以通過書寫按鈕組的方式 將其放置在一起 -->
    <!-- 書寫div將多個按鈕放在同一個div中 使用class layui-btn-group -->
    <div class="layui-btn-group">
        <div class="layui-btn layui-btn-normal">百搭</div>
        <button class="layui-btn layui-btn-warm">暖色</button>
    </div>

    <div class="layui-btn-group">
        <button type="button" class="layui-btn layui-btn-sm">
            <i class="layui-icon">&#xe654;</i>
        </button>
        <button type="button" class="layui-btn layui-btn-sm">
            <i class="layui-icon">&#xe642;</i>
        </button>
        <button type="button" class="layui-btn layui-btn-sm">
            <i class="layui-icon">&#xe640;</i>
        </button>
        <button type="button" class="layui-btn layui-btn-sm">
            <i class="layui-icon">&#xe602;</i>
        </button>
    </div>
</body>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374

3.1.4 表單

在一個容器中設定 class=“layui-form” 來標識一個表單元素塊，通過規範好的HTML結構及CSS類，來組裝成各式各樣的表單元素，並通過內置的 form模塊 來完成各種交互。

注意：layui的form表單需要對應模塊的支持（需要使用js）才能完成對應標籤的效果展示
在導入對應css與js的基礎上需要添加form模塊

form模塊

//在當前頁添加模塊
layui.use("模塊名form", function(){ 
	//操作代碼
      var form = layui.form //獲取form模塊
});
//同時添加多個模塊
layui.use(['form', 'upload'], function(){ 
	//操作代碼
    var form = layui.form //獲取form模塊
  ,upload = layui.upload; //獲取upload模塊
});
1234567891011

表單組成

<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>
<style>
    #formDiv {
        width: 600px;
        border: solid;
    }

    form {
        width: 500px;
    }
</style>

<body>
    <div id="formDiv">
        <form action="#" class="layui-form layui-form-pane">
            <!-- 輸入框  -->
            <!-- class="layui-input"：layui.css提供的通用CSS類 -->
            賬號:<input type="text" class="layui-input" name="username">
            密碼:<input type="password" class="layui-input" name="password">

            <hr>
            <!-- 下拉框 -->
            <!-- 直接書寫 無需特殊class 加載模塊會自動樣式的操作 -->
            <select name="city">
                <option value="">請選擇一個城市</option>
                <option value="010">北京</option>
                <option value="021">上海</option>
                <option value="0571">杭州</option>
            </select>
            <!-- 在選項中進行分組提示 -->
            <select name="quiz">
                <option value="">請選擇</option>
                <optgroup label="城市記憶">
                    <option value="你工作的第一個城市">你工作的第一個城市？</option>
                    <option value="你的第一輛車">你的第一輛車？</option>
                </optgroup>
                <optgroup label="學生時代">
                    <option value="你的工號">你的工號？</option>
                    <option value="你最喜歡的老師">你最喜歡的老師？</option>
                </optgroup>
            </select>
            <hr>
            <!-- 複選框 -->
            <!-- 直接書寫 無需class 但是需要將提示文本書寫在title屬性上 -->
            <!-- 
                屬性title可自定義文本（溫馨提示：如果只想顯示覆選框，可以不用設置title）
                屬性checked可設定默認選中
                屬性lay-skin可設置複選框的風格 primary默認 switch開關 -->
            默認風格：
            <input type="checkbox" name="" title="寫作" checked>
            <input type="checkbox" name="" title="發呆">
            <input type="checkbox" name="" title="禁用" disabled>
            <br>
            原始風格：
            <input type="checkbox" name="" title="寫作" lay-skin="primary" checked>
            <input type="checkbox" name="" title="發呆" lay-skin="primary">
            <input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
            <br>
            開關風格：
            <!--  lay-text="開啓|關閉" 設置開發風格展示文字 -->
            <input type="checkbox" name="" title="寫作" lay-skin="switch" lay-text="掛掉他|讓他活">


            <hr>
            <!-- 文本域 -->
            <!-- class="layui-textarea"：layui.css提供的通用CSS類 -->
            <textarea name="" class="layui-textarea"></textarea>

            <hr>
            <!-- 組裝表單 -->
            <!-- layui設置表單有些換行有些不換行 使用表單組裝進行表單位置的設置 -->
            <!-- 
                class="layui-inline"：定義外層行內
                class="layui-input-inline"：定義內層行內 -->


            <!-- 外層使用layui-form-item 包裹對應的表單標籤 -->
            <div class="layui-form-item">
                <!-- 在內部將需要設置在同一行的標籤設置在同一個 <div class="layui-inline"> -->
                <label class="layui-form-label">賬號</label>
                <!-- 可以理解爲將當前標籤設置爲行內元素 -->
                <div class="layui-inline">
                    <input type="text" class="layui-input" name="username">
                </div>
            </div>
            <!-- 如果需要換行則再創建div書寫 layui-form-item -->
            <div class="layui-form-item">
                <!-- 在內部將需要設置在同一行的標籤設置在同一個 <div class="layui-inline"> -->
                <label class="layui-form-label">密碼</label>
                <!-- 可以理解爲將當前標籤設置爲行內元素 -->
                <div class="layui-inline">
                    <input type="text" class="layui-input" name="password">
                </div>
            </div>

            <hr>
            <!-- 方框風格 在form表單class 追加layui-form-pane -->
        </form>
    </div>
</body>

<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;
    });
</script>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108

案例

<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>
<style>
    #formDiv{
        width: 500px;
        border:  solid 1px;
    }
</style>
<body>
    <div id="formDiv">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">輸入框</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required lay-verify="required" placeholder="請輸入標題"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密碼框</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" required lay-verify="required" placeholder="請輸入密碼"
                        autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">輔助文字</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手機號</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" required lay-verify="required" placeholder="請輸入手機號"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">選擇框</label>
                <div class="layui-input-block">
                    <select name="city" lay-verify="required">
                        <option value=""></option>
                        <option value="0">北京1</option>
                        <option value="1">上海2</option>
                        <option value="2">廣州3</option>
                        <option value="3">深圳4</option>
                        <option value="4">杭州5</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">複選框</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="like[write]" title="寫作">
                    <input type="checkbox" name="like[read]" title="閱讀" checked>
                    <input type="checkbox" name="like[dai]" title="發呆">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">開關</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="switch" lay-skin="switch">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">單選框</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男">
                    <input type="radio" name="sex" value="女" title="女" checked>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">文本域</label>
                <div class="layui-input-block">
                    <textarea name="desc" placeholder="請輸入內容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</body>

<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;
    });
</script>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889

3.2 組件

使用layui的js 進行頁面動態效果的書寫與實現

3.2.1 form表單

事件觸發

語法：form.on('event(過濾器值)', callback);
默認情況下，事件所觸發的是全部的form模塊元素，但如果你只想觸發某一個元素，使用事件過濾器即可。如：
form模塊在 layui 事件機制中註冊了專屬事件，所以當你使用layui.onevent()自定義模塊事件時，請勿佔用form名。form支持的事件如下：
觸發select選擇

下拉選擇框被選中時觸發，回調函數返回一個object參數，攜帶兩個成員：

// 默認情況下，事件所觸發的是全部的form模塊元素
form.on('select()', function(data){
  console.log(data);
});

// 如果你只想觸發某一個元素，使用事件過濾器即可
form.on('select(test)', function(data){
  console.log(data.elem); //得到select原始DOM對象
  console.log(data.value); //得到被選中的值
  console.log(data.othis); //得到美化後的DOM對象
});
1234567891011

觸發checkbox複選

複選框點擊勾選時觸發，回調函數返回一個object參數，攜帶兩個成員：

form.on('checkbox(filter)', function(data){
  console.log(data.elem); //得到checkbox原始DOM對象
  console.log(data.elem.checked); //是否被選中，true或者false
  console.log(data.value); //複選框value值，也可以通過data.elem.value得到
  console.log(data.othis); //得到美化後的DOM對象
});        
123456

觸發switch開關

開關被點擊時觸發，回調函數返回一個object參數，攜帶兩個成員：

form.on('switch(filter)', function(data){
  console.log(data.elem); //得到checkbox原始DOM對象
  console.log(data.elem.checked); //開關是否開啓，true或者false
  console.log(data.value); //開關value值，也可以通過data.elem.value得到
  console.log(data.othis); //得到美化後的DOM對象
});  
123456

觸發radio單選

radio單選框被點擊時觸發，回調函數返回一個object參數，攜帶兩個成員：

form.on('radio(filter)', function(data){
  console.log(data.elem); //得到radio原始DOM對象
  console.log(data.value); //被點擊的radio的value值
});  
1234

觸發submit提交

點擊或者表單被執行提交時觸發，其中回調函數只有在驗證全部通過後纔會進入，回調返回三個成員：

form.on('submit(*)', function(data){
  console.log(data.elem) //被執行事件的元素DOM對象，一般爲button對象
  console.log(data.form) //被執行提交的form對象，一般在存在form標籤時纔會返回
  console.log(data.field) //當前容器的全部表單字段，名值對形式：{name: value}
  return false; //阻止表單跳轉。如果需要表單跳轉，去掉這段即可。
});
123456

表單賦值 / 取值

語法：form.val('filter', object);
用於給指定表單集合的元素賦值和取值。如果 object 參數存在，則爲賦值；如果 object 參數不存在，則爲取值。
注：其中「取值」功能爲 layui 2.5.5 開始新增

//給表單賦值
form.val("formTest", { //formTest 即 class="layui-form" 所在元素屬性 lay-filter="" 對應的值
  "username": "賢心" // "name": "value"
  ,"sex": "女"
  ,"auth": 3
  ,"check[write]": true
  ,"open": false
  ,"desc": "我愛layui"
});
 
//獲取表單區域所有值
var data1 = form.val("formTest");
123456789101112

表單驗證

只需要在表單元素上加上 lay-verify="" 屬性值即可

自定義了類似上面的驗證規則後，你只需要把 key 賦值給輸入框的 lay-verify 屬性即可：

<input type="text" lay-verify="username" placeholder="請輸入用戶名">
<input type="password" lay-verify="pass" placeholder="請輸入密碼">
12

自定義校驗規則：

form.verify({
  username: function(value, item){ //value：表單的值、item：表單的DOM對象
    if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
      return '用戶名不能有特殊字符';
    }
    if(/(^\_)|(\__)|(\_+$)/.test(value)){
      return '用戶名首尾不能出現下劃線\'_\'';
    }
    if(/^\d+\d+\d$/.test(value)){
      return '用戶名不能全爲數字';
    }
    
    //如果不想自動彈出默認提示框，可以直接返回 true，這時你可以通過其他任意方式提示（v2.5.7 新增）
    if(value === 'xxx'){
      alert('用戶名不能爲敏感詞');
      return true;
    }
  }
  
  //我們既支持上述函數式的方式，也支持下述數組的形式
  //數組的兩個值分別代表：[正則匹配、匹配不符時的提示文字]
  ,pass: [
    /^[\S]{6,12}$/
    ,'密碼必須6到12位，且不能出現空格'
  ] 
});      
1234567891011121314151617181920212223242526
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
<body>
    <form class="layui-form" action="#" lay-filter="formObj">
        <!-- 提示：如果你不想用form，你可以換成div等任何一個普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">輸入框</label>
            <div class="layui-input-block">
                <input type="text" name="name" placeholder="請輸入" autocomplete="off" class="layui-input" lay-verify="pwd">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">下拉選擇框</label>
            <div class="layui-input-block">
                <select name="interest" lay-filter="aihao">
                    <option value="0">寫作</option>
                    <option value="1">閱讀</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">請填寫描述</label>
            <div class="layui-input-block">
                <textarea placeholder="請輸入內容" name="desc" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>

    </form>
    <script src="../layui/layui.js"></script>
    <script>
        layui.use('form', function () {
            var form = layui.form;

            //對於事件的觸發需要使用layui的語法進行設置
            //書寫語法爲 form.on("事件(綁定字符串),function()");
            //綁定字符串就是在標籤書寫的lay-filter="aihao"對應的值
            form.on('select(aihao)', function (data) {
                console.log(data.elem); //得到select原始DOM對象
                console.log(data.value); //得到被選中的值
                console.log(data.othis); //得到美化後的DOM對象
            });

            form.on('submit(*)', function (data) {
                console.log(data.elem) //被執行事件的元素DOM對象，一般爲button對象
                console.log(data.form) //被執行提交的form對象，一般在存在form標籤時纔會返回
                console.log(data.field) //當前容器的全部表單字段，名值對形式：{name: value}

                //獲取表單數據方法
                //返回表格中書寫的json格式數據
                console.log(form.val("formObj"))
                return true; //阻止表單跳轉。如果需要表單跳轉，去掉這段即可。
            });

            //表單校驗
            //layui提供了豐富的表單校驗方式
            //只需要 lay-verify="校驗規則" 就可以在提交前自動進行校驗操作
            //默認提供了常用的規則 如手機號 郵箱等
            //也可以自定義規則書寫


            //自定義校驗需要書寫校驗規則 之後可以直接通過lay-verify="規則"將對應規則綁定標籤

            //爲當前頁面定義校驗規則方法
            //參數爲json格式數據            
            form.verify({
                //校驗規則json書寫語法
                //key 校驗規則名稱 value 校驗相關數組
                uname:[
                    //數組中依次填寫 校驗正則對象 以及提示信息
                    /^[0-9]{5}$/,
                    "賬號格式不對"
                ],
                pwd:[/^[A-z0-9]{6}$/,"密碼格式不對"]
            });
        });
    </script>
</body>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182

3.2.2 table數據表格

創建一個table實例最簡單的方式是，在頁面放置一個元素 <table id="demo"></table>，然後通過 table.render() 方法指定該容器

<script src="../layui/layui.js"></script>
<link rel="stylesheet" href="../layui/css/layui.css">

<body>
    <table id="table1" lay-filter="test"></table>
</body>

<script>
    //加載模塊
    layui.use('table', function() {
        var table = layui.table;

        //第一個實例
        table.render({
            //用於綁定表格
            elem: '#table1',
            height: 500,
            url: 'data.json' //數據接口
                ,
            page: true //開啓分頁
                ,
            cols: [
                [ //表頭
                    // 表頭書寫json形式數據  
                    //用於將獲取的json數據中對應的屬性名與表頭實際展示名相匹配
                    {
                        field: 'id',
                        title: 'ID',
                        width: 80,
                        sort: true,
                        fixed: 'left',
                        unresize: true
                    }, {
                        field: 'username',
                        title: '用戶名',
                        width: 80
                    }, {
                        field: 'sex',
                        title: '性別',
                        width: 80,
                        sort: true
                    }, {
                        field: 'city',
                        title: '城市',
                        width: 80
                    }, {
                        field: 'sign',
                        title: '簽名',
                        width: 177
                    }, {
                        field: 'experience',
                        title: '積分',
                        width: 80,
                        sort: true
                    }, {
                        field: 'logins',
                        title: '登錄次數',
                        width: 120,
                        sort: true
                    }, {
                        field: 'score',
                        title: '評分',
                        width: 80,
                        sort: true
                    }, {
                        field: 'classify',
                        title: '職業',
                        width: 80
                    }, {
                        field: 'wealth',
                        title: '財富',
                        width: 135,
                        sort: true,
                        minWidth: 100
                    }
                ]
            ],
            toolbar: true //打開工具欄
                ,
            defaultToolbar: ['filter', 'print', 'exports'] //設置工具欄
                ,
            limits: [1, 3, 5, 7] //設置分頁選項
                ,
            title: "標題"
        });

    });
</script>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990

四、響應式佈局

4.1 概念

同一套頁面可以兼容不同分辨率的設備。

實現：依賴於柵格系統：將一行平均分成12個格子，可以指定元素佔幾個格子

4.2 步驟

定義容器

：相當於之前的table、

容器分類：
\1. container：兩邊留白
\2. container-fluid：每一種設備都是100%寬度

定義行

：相當於之前的tr

樣式：row
定義元素

：指定該元素在不同的設備上，所佔的格子數目。
樣式

：
col-設備代號-格子數目
設備代號：
\1. xs：超小屏幕手機 (<768px)：col-xs-12
\2. sm：小屏幕平板 (≥768px)
\3. md：中等屏幕桌面顯示器 (≥992px)
\4. lg：大屏幕大桌面顯示器 (≥1200px)

4.3 注意

一行中如果格子數目超過12，則超出部分自動換行。

柵格類屬性可以向上兼容。柵格類適用於與屏幕寬度大於或等於分界點大小的設備。

如果真實設備寬度小於了設置柵格類屬性的設備代碼的最小值，會一個元素沾滿一整行。

每日一點點進步
不進則退

【轉】前端-jQuery、Bootstrap、Layui和響應式佈局

原文：https://blog.csdn.net/qq_43492477/article/details/119147066

一、jQuery

1.1 概念

1.2 jQuery對象的獲取

1.2.1 獲取語法

1.2.2 基本選擇器

1.2.3 屬性及僞類選擇器

1.2.4 獲取對象-過濾選擇器

1.2.5 案例

1.3 jQuery修改屬性

1.4 jQuery修改樣式

1.5 jQuery和DOM對象之間的轉換

1.5.1 jQuery對象轉DOM對象

1.5.2 DOM對象轉jQuery對象

1.6 jQuery中的遍歷形式

1.6.1 遍歷節點

1.6.2 遍歷數組或集合

1.6.3 案例

1.7 jQuery事件

1.7.1 ready事件

1.7.2 click點擊事件

1.7.3 獲取焦點focus/失去焦點blur事件

1.7.4 submit表單提交事件

1.7.5 鼠標事件

1.7.6 鍵盤事件

1.7.7 事件冒泡

1.8 jQuery事件綁定

1.8.1 on單個事件綁定

1.8.2 on多個事件綁定

1.8.3 on後添加的元素綁定事件

1.9 jQuery元素動態操作

1.9.1 節點的添加

1.9.2 節點的刪除

1.10 正則表達式-RegExp

1.10.1 概述

1.10.2 語法

1.10.3 練習

1.10.4 案例-表單驗證

1.11 jQuery動畫

1.11.1 基本的顯示隱藏

1.11.2 使用透明方式顯示隱藏

1.11.3 使用滑動(摺疊)方式顯示隱藏

1.11.4 自定義動畫

1.12 插件機制

1.13 案例

1.13.1 廣告顯示和隱藏

1.13.2 抽獎

二、Bootstrap

1.1 概念

1.2 快速入門

三、Layui

3.1 元素

3.1.1 字體圖標

3.1.2 動畫

3.1.3 按鈕

3.1.4 表單

3.2 組件

3.2.1 form表單

3.2.2 table數據表格

四、響應式佈局

4.1 概念

4.2 步驟

4.3 注意

1.7.3 獲取焦點`focus`/失去焦點`blur`事件