JQuery學(xué)習(xí)（一）

1.導(dǎo)入js文件

(1)將jquery-1.8.3.js文件放入項目的js目錄下
(2)引入js文件

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

(3)測試代碼

<script>
        $(function () {
            alert("Hello Query");
        });
    </script>

(4)測試結(jié)果

image.png

2.JQuery加載比JS快

原因：JQuery是當(dāng)整個dom樹結(jié)構(gòu)加載完畢就會加載介衔，JS在整個頁面加載完畢后<包括里面的其他內(nèi)容吟策，比如圖片>
測試代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS與JQ加載區(qū)別</title>
    <script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
    <script>
        //傳統(tǒng)JS加載方式
        window.onload = function () {
            alert("測試JS加載方式");
        }
        //JQ加載方式
        jQuery(document).ready(function () {
            alert("測試JQ加載方式")
        })
    </script>
</head>
<body>

</body>
</html>

測試結(jié)果：優(yōu)先顯示JQuery加載內(nèi)容

image.png

3.JQuery加載方式

（1）JQuery簡寫為$：

JQuery(document)  與$(document)表達(dá)一致

（2）JQuery加載不存在覆蓋問題，順序執(zhí)行

 //JQ加載方式: 順序執(zhí)行粮宛，先彈出“測試JQ加載方式”
        jQuery(document).ready(function () {
            alert("測試JQ加載方式");
        })
        $(document).ready(function () {
            alert("測試JQ$加載");
        })

（3） jQuery(document).ready簡寫為$:

        $(function () {
            alert("測試簡寫JQuery（Document）.ready")
        })

4.JQuery獲取元素 $("#btn")，btn為元素id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ的獲取</title>
    <script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
    <script>
        //1.傳統(tǒng)方式獲取
        $(function () {
            document.getElementById("btn").onclick=function () {
                location.href="JS與JQ加載區(qū)別.html";
            }
        })
        //2.JQuery方式獲取  ->$("#btn")
        $(function () {
            $("#btn").click(function () {
                location.href="JS與JQ加載區(qū)別.html";
            })
        })
    </script>
</head>
<body>
    <input type="button" value="點我有驚喜" id="btn" />
</body>
</html>

5.DOM對象和JQuery對象的轉(zhuǎn)換

（1）DOM對象無法直接操作JQuery對象的屬性和方法;JQuery無法操作JS對象的屬性和方法
（2）轉(zhuǎn)換示例：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>DOM對象和JQuery對象的轉(zhuǎn)換</title>
    <script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
    <script>
        function write1() {
            //1.JS的DOM操作
             document.getElementById("span1").innerHTML="哈哈哈哈";
            //DOM對象轉(zhuǎn)化為JQuery對象
            var spanEle=document.getElementById("span1");
            $(spanEle).html("測試哈哈哈哈");
        }

        $(function () {
            $("#btn").click(function () {
                $("#span1").html("呵呵呵呵");
                //JQuery對象向DOM對象轉(zhuǎn)換方式一
                $("#span1").get(0).innerHTML="測試呵呵呵呵";
                //JQuery對象向DOM對象轉(zhuǎn)換方式二
                $("#span1")[0].innerHTML="測試呵呵呵呵2";
            });
        });
    </script>
</head>
<body>
    <input type="button" value="JS寫入" onclick="write1()"/>
    <input type="button" value="JQuery寫入" id="btn"><br />
    測試：<span id="span1">測試代碼</span>
</body>
</html>

練習(xí)示例：使用JQuery完成首頁定時彈出廣告圖片位置

準(zhǔn)備：定時彈出的廣告代碼

<!--定時彈出廣告圖片位置-->
            <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none" id="img2"/>

（1）導(dǎo)入JQuery

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

（2）書寫廣告顯示的定時操作

$(function () {
                time = setInterval("showAD()",3000);
            })

（3）書寫顯示廣告圖片的函數(shù)

function showAD() {
                //3.獲取廣告圖片，并讓其顯示
                $("#img2").show(1000);
                //4.書寫清除廣告顯示的定時操作
                clearInterval(time);
                //5.書寫廣告隱藏的定時操作
                time = setInterval("hiddAD()",3000);
            }

show（）顯示的無動畫版本
show（speed,[callback]）顯示的動畫版本饵沧，speed取值：slow、normal赌躺、fast或表示動畫時長的毫秒值（1000）
（4）書寫隱藏廣告圖片函數(shù)

function hiddAD() {
                $("#img2").hide();
                clearInterval(time);
            }

hide（）顯示的無動畫版本
hide（speed,[callback]）顯示的動畫版本狼牺，speed取值：slow、normal礼患、fast或表示動畫時長的毫秒值（1000）

示例完整代碼：

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
            //1.書寫廣告顯示的定時操作
            $(function () {
                time = setInterval("showAD()",3000);
            })
            //2.書寫顯示廣告圖片的函數(shù)
            function showAD() {
                //3.獲取廣告圖片是钥，并讓其顯示
                $("#img2").show(1000);
                //4.書寫清除廣告顯示的定時操作
                clearInterval(time);
                //5.書寫廣告隱藏的定時操作
                time = setInterval("hiddAD()",3000);
            }
            //6.書寫隱藏廣告圖片的函數(shù)
            function hiddAD() {
                $("#img2").hide();
                clearInterval(time);
            }
</script>

6.toggle方法的使用

用途：內(nèi)容的顯示和隱藏
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Toggle的使用</title>
    <style>
        div{
            border: 1px solid white;
            width: 500px;
            height: 350px;
            margin: auto;
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("#img1").toggle();
            })
        })

    </script>
</head>
<body>
    <div>
        <input type="button" value="顯示/隱藏" id="btn"/><br/>
        <img src="../img/飛機(jī)05.gif" width="100%" height="100%" id="img1">
    </div>
</body>
</html>

7.選擇器的基本類型

（1）#id 根據(jù)id選擇
（2）element
（3）.class
（4）* --匹配所有的元素
（5）select1,select2,selectN --將所有選擇的元素一起返回（并）
示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本選擇器</title>
        <link rel="stylesheet" href="../../css/style.css" />
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script>
            //id選擇器
            $(function () {
                $("#btn1").click(function () {
                    $("#one").css("background-color","red");
                })
            });
            //類選擇器
            $(function () {
                $("#btn2").click(function () {
                    $(".mini").css("background-color","blue");
                })
            })
            //element選擇器
            $(function () {
                $("#btn3").click(function () {
                    $("div").css("background-color","yellow");
                })
            })
            //選擇所有元素
            $(function () {
                $("#btn4").click(function () {
                    $("*").css("background-color","pink");
                })
            })
            //選擇幾個元素
            $(function () {
                $("#btn5").click(){
                   $(".mini,#two").css("background-color","pink");
                }
            })
        </script>
    </head>
    <body>
        <input type="button" id="btn1" value="選擇為one的元素"/>
        <input type="button" id="btn2" value="選擇樣式為mini的元素"/>
        <input type="button" id="btn3" value="選擇所有的div元素"/>
        <input type="button" id="btn4" value="選擇所有元素"/>
        <input type="button" id="btn5" value="選擇id為two并且樣式為mini的元素"/>
        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>
        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>
        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>
        <span id="four">
        </span>
    </body>
</html>

8.層級選擇器

（1）在給定的祖先元素下匹配所有的后代元素（匹配子元素、子元素的子元素等所有后代元素） ---“ ” 空格
（2）在給定父元素下匹配所有的子元素（匹配子元素） --">"
（3）匹配所有緊接在prev元素后的next元素（匹配相鄰元素） --“+”
（4）匹配prev元素之后的所有siblings元素（匹配當(dāng)前元素的同輩元素） --“~”
示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>層級選擇器</title>
        <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script type="text/javascript">
            //選擇所有后代元素
            $(function () {
                $("#btn1").click(function () {
                    $("body div").css("background-color","gold");
                })
            })
            //選擇子元素
            $(function () {
                $("#btn2").click(function () {
                    $("body>div").css("background-color","red");
                })
            })
            //選擇相鄰元素
            $(function () {
                $("#btn3").click(function () {
                    $("#two+div").css("background-color","blue");
                })
            })
            //選擇所有同級元素
            $(function () {
                $("#btn4").click(function () {
                    $("#one~div").css("background-color","pink");
                })
            })
        </script>
    </head>
    <body>
        <input type="button" id="btn1" value="選擇body中的所有的div元素"/>
        <input type="button" id="btn2" value="選擇body中的第一級的孩子"/>
        <input type="button" id="btn3" value="選擇id為two的元素的下一個元素"/>
        <input type="button" id="btn4" value="選擇id為one的所有的兄弟元素"/>
        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>
        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>
        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>
        <span id="four">
        </span>
    </body>
</html>

9.基本過濾選擇器

（1）“:first” 獲取匹配的第一個元素
（2）“:last” 獲取匹配的最后一個元素
（3）“:even” 獲取匹配索引值的偶數(shù)元素缅叠，從0開始計數(shù)悄泥，即第1、3痪署、5個索引
（4）“:odd”獲取匹配索引值的奇數(shù)元素码泞，從0開始奇數(shù)，即0狼犯、2余寥、4個索引
示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>層級選擇器</title>
        <link rel="stylesheet" href="../../css/style.css" type="text/css"/>
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script type="text/javascript">
            $(function () {
                $("#btn1").click(function () {
                    $("body div:first").css("background-color","gold");
                })
            })
            $(function () {
                $("#btn2").click(function () {
                    $("body div:last").css("background-color","red");
                })
            })
            $(function () {
                $("#btn3").click(function () {
                    $("body div:odd").css("background-color","blue");
                })
            })
            $(function () {
                $("#btn4").click(function () {
                    $("body div:even").css("background-color","pink");
                })
            })
        </script>
    </head>
    <body>
        <input type="button" id="btn1" value="body中的第一個div元素"/>
        <input type="button" id="btn2" value="body中的最后一個div元素"/>
        <input type="button" id="btn3" value="選擇body中的奇數(shù)的div"/>
        <input type="button" id="btn4" value="選擇body中的偶數(shù)的div"/>
        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>
        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>
        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>
        <span id="four">
        </span>
    </body>
</html>

10.屬性選擇器

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>層級選擇器</title>
        <link rel="stylesheet" href="../../css/style.css" />
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script>
            $(function () {
                $("#btn1").click(function () {
                    $("div[id]").css("background-color","red");
                })
            })
            $(function () {
                $("#btn2").click(function () {
                    $("div[id=two]").css("background-color","pink");
                })
            })
        </script>
    </head>
    <body>
        <input type="button" id="btn1" value="選擇有id屬性的div"/>
        <input type="button" id="btn2" value="選擇有id屬性的值為two的div"/>
        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>
        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>
        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>
        <span id="four">
        </span>
    </body>
</html>

11.練習(xí)：表單隔行換色實現(xiàn)代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用jQuery完成表格隔行換色</title>
        <link rel="stylesheet" href="../css/style.css" />
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function () {
                //實現(xiàn)方式一：直接更改css樣式
                //獲取tbody下面的偶數(shù)行并設(shè)置背景顏色
                $("tbody>tr:even").css("background-color","yellow");
                //獲取tbody下面的奇數(shù)行并設(shè)置背景顏色
                $("tbody>tr:odd").css("background-color","green");

                //實現(xiàn)方式二：引用CSS文件中的樣式
                //獲取tbody下面的偶數(shù)行并設(shè)置背景顏色
                $("tbody>tr:even").addClass("even");
                //獲取tbody下面的奇數(shù)行并設(shè)置背景顏色
                $("tbody>tr:odd").addClass("odd");

            })
        </script>

    </head>
    <body>
        <table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
            <thead>
                <tr>
                    <th>編號</th>
                    <th>姓名</th>
                    <th>年齡</th>
                </tr>
            </thead>
            <tbody>
                <tr >
                    <td>1</td>
                    <td>張三</td>
                    <td>22</td>
                </tr>
                <tr >
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr >
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr >
                    <td>4</td>
                    <td>趙六</td>
                    <td>29</td>
                </tr>
                <tr >
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr >
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

實現(xiàn)方式二說明（常用）：
在.css文件中添加樣式如下：

.even       { background:#FFF38F;}  /* 偶數(shù)行樣式*/
.odd        { background:#FFFFEE;}  /* 奇數(shù)行樣式*/
.selected       { background:#FF6500;color:#fff;}

addClass（）：為每個匹配的元素添加指定的類名
添加類名后即可直接使用css文件中的樣式

12.練習(xí)：全選和全不選

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用jQuery完成復(fù)選框的全選和全不選</title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <!--<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>-->
        <script>
            $(function () {
                //獲取tbody所有的復(fù)選框，并將其屬性設(shè)置為編號前即class=select的復(fù)選框的屬性已知
                $("#select").click(function () {
                    //attr是否有效與JQuery版本有關(guān)悯森，在1.8.3及以下有效
                    // $("tbody input").attr("checked",this.checked);  //說明：此處的this指代的是class=select的復(fù)選框
                    //prop所有版本都支持宋舷，建議使用prop
                    $("tbody input").prop("checked",this.checked);
                });
            });

        </script>

    </head>
    <body>
        <table border="1" width="500" height="50" align="center" id="tbl" >
            <thead>
                <tr>
                    <td colspan="4">
                        <input type="button" value="添加" />
                        <input type="button" value="刪除" />
                    </td>
                </tr>
                <tr>
                    <th><input type="checkbox" id="select"></th>
                    <th>編號</th>
                    <th>姓名</th>
                    <th>年齡</th>
                </tr>
            </thead>
            <tbody>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>1</td>
                    <td>張三</td>
                    <td>22</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>4</td>
                    <td>趙六</td>
                    <td>29</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr >
                    <td><input type="checkbox" class="selectOne"/></td>
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>