1.JQ完成定時彈出廣告

　　步驟分析

1. 創建html文檔
2. 在頁面中創建一個廣告部分的div,設置div隱藏
3. 設置定時操作,1秒執行一個顯示的方法
4. 設置定時操作.1秒執行一個隱藏方法

//引入JQ
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
    <script>
        //定義一個時間的全局變量
        var time;
        //設置加載時的函數
        $(function(){
            //設置時間綁定顯示的函數
 

            time = setInterval("showAd()",1000);
        });
        //顯示的函數
        function showAd(){
            //獲取廣告div對象
            $("#adDiv").show(5000,hideAd);
            //清空時間
            clearInterval(time);
            //調用隱藏函數
            time = setInterval("hideAd()",1000);
        }
        //隱藏函數
        function
 
 hideAd() {
            //獲取對象
            $("#adDiv").hide(5000);
            //清空時間
            clearInterval(time);
        }
    </script>

2.表格的隔行換色

　　步驟分析

1. 引入JQ的js
2. 在頁面加載的函數中,選擇奇數行,添加樣式
3. 在頁面加載的函數中,選擇偶數行,添加樣式

//引入JQ的js
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
    <script>
        //
 
綁定頁面加載的函數
        $(function(){
            //為奇數行添加樣式
            $("table tr:odd").css("background","#0000FF");
            //為偶數行添加樣式
            $("table tr:even").css("background","#E9FBEB");
        });
    </script>

3.復選框的全選和全不選

　　步驟分析

1. 引入jq的js
2. 編寫頁面加載的函數
3. 點擊上面的復選框,獲取下面的復選框
4. 修改下面的復選框的值

//引入jq的js
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
    <script>
        //編寫頁面加載的函數
        $(function(){
            //得打最上面的復選框,添加點擊函數
            $("#selectAll").click(function(){
                //得打下面的復選框,讓上下checked保持一致
                $(":checkbox").prop("checked",this.checked);
            });
        });
    </script>

4.二級聯動

　　步驟分析

1. 引入jq的js
2. 獲得第一個下拉列表的change事件
3. 獲得被選中的下拉列表的值
4. 去數組中進行對比
5. 獲取數組中的值
6. 創建元素,創建文本,將文本添加到元素,將元素添加到第二個列表中

    //引入jq的js
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
    <script>
        //綁定頁面加載的函數
        $(function(){
            //創建數組
            var arrs = [["a","b"]["c","d"]];
            /*添加change函數*/
            $("#province").change(function(){
                //清空列表
                $("#city").get(0).options.length=1;
                //得到被選中的value
                var val = this.value;
                //遍歷數組
                $.each(arrs, function(i,n) {
                    if(i == value) {
                        $.each(n, function(j,m) {
                            //添加元素和文本
                            $("#city").append("<option>"+m+"</option>");
                        });
                    }
                });
            });
        });
    </script>

5.下拉列表的左右選擇

//引入jq的js
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
    <script>
    //綁定頁面加載函數
        $(function(){
            //向右邊添加的div添加雙擊事件
            $("#selectLeft").dbclick(function(){
                //獲得左邊的被選中的option元素添加到右邊
                $("#selectLeft option:selected").appendTo("#selectRight");
            });
            //向左邊添加的div添加雙擊事件
            $("#selectLeft").dbclick(function(){
                //獲得右邊的被選中的option元素添加到左邊
                $("#selectRight option:selected").appendTo("#selectLeft");
            });
        });
    </script>

JQuery基礎以及5個小案例