一、什么是jQuery？

答：Jquery它是javascript的一個(gè)輕量級(jí)框架，對(duì)javascript進(jìn)行封裝，它提供了很多方便的選擇器。供你快速定位到需要操作的元素上面去。還提供了很多便捷的方法。

二、怎么使用jquery？

Jquery它是一個(gè)庫(框架)，要想使用它，必須先引入！
jquery-1.8.3.js：一般用于學(xué)習(xí)階段。
jquery-1.8.3.min.js：用于項(xiàng)目使用階段

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

三、Jquery的簡(jiǎn)單入門

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jquery入門</title>
        <script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
        <script>
            $(function(){
                alert("hello，jQuery ！");
            });
        </script>
    </head>
    <body>
    </body>
</html>

四、JS與JQ頁面加載區(qū)別？

傳統(tǒng)的方式頁面加載會(huì)存在覆蓋問題，加載比JQ慢(整個(gè)頁面加載完畢<包括里面的其它內(nèi)容，比如圖片>)；
JQ不存在覆蓋問題，加載的時(shí)候是順序執(zhí)行，加載速度比JS快。

五、元素獲取：

//JS
document.getElementById();
//JQ
$(“#id”);

六、Jquery對(duì)象與DOM對(duì)象轉(zhuǎn)換：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script>
            function JSWrite(){
                //document.getElementById("span1").innerHTML="美美噠！";
                var spanEle = document.getElementById("span1");
                $(spanEle).html("美美噠！");
            }
            
            $(function(){
                /*document.getElementById("btn1").onclick = function(){
                    document.getElementById("span1").innerHTML="帥帥噠！";
                }*/
                $("#btn1").click(function(){
                    //JQ對(duì)象轉(zhuǎn)換成DOM對(duì)象的第一種方式
                    //$("#span1")[0].innerHTML="呵呵噠！";
                    //JQ對(duì)象轉(zhuǎn)換成DOM對(duì)象的第二種方式
                    $("#span1").get(0).innerHTML="呵呵噠！";
                });
                
            });
        </script>
    </head>
    <body>
        <input type="button" value="JS寫入" onclick="JSWrite()"/>
        <input type="button" value="JQ寫入" id="btn1"/><br /><br />
        <span id="span1">sssss</span>
    </body>
</html>

注意：JQ對(duì)象只能操作JQ里面的屬性和方法
JS對(duì)象只能操作JS里面的屬性和方法。

七、Jquery的效果

jQuery效果.png

案例1：廣告圖片的顯示與隱藏：

步驟：
第一步：引入jQuery相關(guān)的文件
第二步：書寫頁面加載函數(shù)
第三步：在頁面加載函數(shù)中，獲取顯示廣告圖片的元素。
第四步：設(shè)置定時(shí)操作(顯示廣告圖片的函數(shù))
第五步：在顯示廣告圖片的函數(shù)中，使用jQuery的方法讓廣告圖片顯示(show())
第六步：清除顯示廣告圖片的定時(shí)操作
第七步：設(shè)置定時(shí)操作(隱藏廣告圖片的函數(shù))
第八步：在隱藏廣告圖片的函數(shù)中，使用jQuery的方法讓廣告圖片隱藏(hide())
第九步：清除隱藏廣告圖片的定時(shí)操作

部分代碼如下：

<script>
            $(function(){
                //1.書寫顯示廣告圖片的定時(shí)操作
                time = setInterval("showAd()",3000);
            });
            
            //2.書寫顯示廣告圖片的函數(shù)
            function showAd(){
                //3.獲取廣告圖片，并讓其顯示
                //$("#img2").show(1000);
                //$("#img2").slideDown(5000);
                $("#img2").fadeIn(4000);
                //4.清除顯示圖片定時(shí)操作
                clearInterval(time);
                //5.設(shè)置隱藏圖片的定時(shí)操作
                time = setInterval("hiddenAd()",3000);
            }
            
            function hiddenAd(){
                //6.獲取廣告圖片，并讓其隱藏
                //$("#img2").hide();
                //$("#img2").slideUp(5000);
                $("#img2").fadeOut(6000);
                //7.清除隱藏圖片的定時(shí)操作
                clearInterval(time);
            }
</script>

補(bǔ)充內(nèi)容：Toggle的使用
表示顯示和隱藏彼此循環(huán)

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $("#img1").toggle();
                });
            });
            
        </script>
    </head>
    <body>
        <input type="button" value="顯示/隱藏" id="btn1"/><br />
        ![](../img/registImg.jpg)
    </body>
</html>

八、選擇器的使用：

1、基本選擇器：

id選擇器：$(“#id名稱”);

元素選擇器：$(“元素名稱”);
類選擇器：$(“.類名”);
通配符：*

案例代碼：

<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>
            $(function(){
                $("#btn1").click(function(){
                    $("#one").css("background-color","pink");
                });
                $("#btn2").click(function(){
                    $(".mini").css("background-color","pink");
                });
                $("#btn3").click(function(){
                    $("div").css("background-color","pink");
                });
                $("#btn4").click(function(){
                    $("*").css("background-color","pink");
                });
                $("#btn5").click(function(){
                    $("#two .mini").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>

2、層級(jí)選擇器：

ancestor descendant: 在給定的祖先元素下匹配所有的后代元素(兒子、孫子、重孫子)

parent > child :在給定的父元素下匹配所有的子元素(兒子)
prev + next: 匹配所有緊接在 prev 元素后的 next 元素(緊挨著的，同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

案例代碼：

<html>
    <head>
        <meta charset="UTF-8">
        <title>層級(jí)選擇器</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(){
                    $("body div").css("background-color","pink");
                });
                $("#btn2").click(function(){
                    $("body>div").css("background-color","pink");
                });
                $("#btn3").click(function(){
                    $("#two+div").css("background-color","pink");
                });
                $("#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中的第一級(jí)的孩子"/>
        <input type="button" id="btn3" value="選擇id為two的元素的下一個(gè)元素"/>
        <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>

3、基本過濾器：

$('li').first()等價(jià)于：$(“l(fā)i:first”)

過濾器.png

案例代碼：

<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>
            $(function(){
                $("#btn1").click(function(){
                    $("div:first").css("background-color","pink");
                });
                $("#btn2").click(function(){
                    $("div:last").css("background-color","pink");
                });
                $("#btn3").click(function(){
                    $("div:odd").css("background-color","pink");
                });
                $("#btn4").click(function(){
                    $("div:even").css("background-color","pink");
                });
            });
        </script>
        
    </head>
    <body>
        <input type="button" id="btn1" value="body中的第一個(gè)div元素"/>
        <input type="button" id="btn2" value="body中的最后一個(gè)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>

4、屬性選擇器：

<html>
    <head>
        <meta charset="UTF-8">
        <title>層級(jí)選擇器</title>
        <link rel="stylesheet" href="../../css/style.css"  type="text/css"/>
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $("div[id]").css("background-color","pink");
                });
                $("#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>

5、表單選擇器：

表單選擇器.png

<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>
            $(function(){
                $("#btn1").click(function(){
                    $(":input").css("background-color","pink");
                });
                $("#btn2").click(function(){
                    $(":text").css("background-color","pink");
                });
            });
        </script>
    </head>
    <body>
        <input type="button" id="btn1" value="選擇所有input元素" />
        <input type="button" id="btn2" value="選擇文本框" />
        <br/>
        <form>
            <input type="text " /><br />
            <input type="checkbox" /><br />
            <input type="radio" /><br />
            <input type="image" /><br />
            <input type="file" /><br />
            <input type="submit" />
            <input type="reset" /><br />
            <input type="password" /><br />
            <input type="button" /><br />
            <select><option/></select><br />
            <textarea></textarea><br />
            <button></button>
        </form>
    </body>
</html>

九、JQ實(shí)現(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(){
//              //獲取tbody下面的偶數(shù)行并設(shè)置背景顏色
//              $("tbody tr:even").css("background-color","yellow");
//              //獲取tbody下面的奇數(shù)行并設(shè)置背景顏色
//              $("tbody tr:odd").css("background-color","red");

                //2.獲取tbody下面的偶數(shù)行并設(shè)置背景顏色
                $("tbody tr:even").addClass("even");
                $("tbody tr:even").removeClass("even");
                //3.獲取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>編號(hào)</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>

十、JQ實(shí)現(xiàn)全選與全不選案例：

<!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(){
                $("#select").click(function(){
                    //獲取下面所有的 復(fù)選框并將其選中狀態(tài)設(shè)置跟編碼的前端 復(fù)選框保持一致。
                    //attr方法與JQ的版本有關(guān)，在1.8.3及以下有效。
                    //$("tbody input").attr("checked",this.checked);
                    $("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>編號(hào)</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>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

JavaEE_day05_JQuery01

JavaEE_day05_JQuery01

一、什么是jQuery？

二、怎么使用jquery？

三、Jquery的簡(jiǎn)單入門

四、JS與JQ頁面加載區(qū)別？

五、元素獲取：

六、Jquery對(duì)象與DOM對(duì)象轉(zhuǎn)換：

七、Jquery的效果

八、選擇器的使用：

九、JQ實(shí)現(xiàn)表格隔行換色案例：

十、JQ實(shí)現(xiàn)全選與全不選案例：

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

JavaEE_day05_JQuery01

一、什么是jQuery？

二、 怎么使用jquery？

三、Jquery的簡(jiǎn)單入門

四、JS與JQ頁面加載區(qū)別？

五、元素獲取：

六、Jquery對(duì)象與DOM對(duì)象轉(zhuǎn)換：

七、Jquery的效果

八、選擇器的使用：

九、JQ實(shí)現(xiàn)表格隔行換色案例：

十、JQ實(shí)現(xiàn)全選與全不選案例：

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、什么是jQuery？

二、怎么使用jquery？

三、Jquery的簡(jiǎn)單入門

四、JS與JQ頁面加載區(qū)別？

五、元素獲取：

七、Jquery的效果

八、選擇器的使用：

九、JQ實(shí)現(xiàn)表格隔行換色案例：

十、JQ實(shí)現(xiàn)全選與全不選案例：