主頁 > 後端開發 > 技術點4：jQuery

技術點4：jQuery

2020-11-10 01:37:25 後端開發

jQuery

一、jQuery介紹

1.什么是jQuery？

　　jQuery，顧名思義，也就是 JavaScript 和查詢（Query），它就是輔助 JavaScript 開發的 js 類別庫，

2.jQuery核心思想

　　它的核心思想是 write less,do more(寫得更少,做得更多)，所以它實作了很多瀏覽器的兼容問題，

3.jQuery的流行程度

　　jQuery 現在已經成為最流行的 JavaScript 庫，在世界前 10000 個訪問最多的網站中，有超過 55%在使用jQuery，

4.jQuery的好處

　　①開源、免費；

　　②語法設計簡單，可以使開發更加便捷；

二、jQuery初體驗

需求：使用 jQuery 給一個按鈕系結單擊事件?

代碼示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery單擊事件</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                alert("jQuery的單擊事件");
            });
        });
    </script>
</head>
<body>
    <button id="btn">按鈕</button>
</body>
</html>

效果如下：

 

 

三、jQuery 核心函式

$ 是 jQuery 的核心函式，能完成 jQuery 的很多功能，$()就是呼叫$這個函式， 1、傳入引數為 [ 函式 ] 時： 　　表示頁面加載完成之后，相當于 window.onload = function(){} 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery單擊事件</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () { //等價于 window.onload = function(){}

        });
    </script>
</head>
<body>
    
</body>
</html>
2、傳入引數為 [ HTML 字串 ] 時： 　　會為我們創建這個 html 標簽物件， 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery單擊事件</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            var $div = $("<div>我是div</div>");
            $div.appendTo("body");
        });
    </script>
</head>
<body>

</body>
</html>

效果如下：

 

 

3、傳入引數為 [ 選擇器字串 ] 時： 　　$(“#id 屬性值”);id 選擇器，根據 id 查詢標簽物件 　　$(“標簽名”);標簽名選擇器，根據指定的標簽名查詢標簽物件 　　$(“.class 屬性值”); 型別選擇器，可以根據 class 屬性查詢標簽物件 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery單擊事件</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //根據標簽名選中標簽
            alert($("div"));
            //根據id選中標簽
            $("#btn01").click(function () {
                alert("jQuery的id選擇器");
            });
            //根據class選中標簽
            $(".cla01").click(function () {
                alert("jQuery的class選擇器");
            });
        });
    </script>
</head>
<body>
    <div>我是div</div>
    <button id="btn01">按鈕1</button>
    <button class="cla01">按鈕2</button>
</body>
</html>
  4、傳入引數為 [ DOM 物件 ] 時： 　　會把這個 dom 物件轉換為 jQuery 物件， 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery單擊事件</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            var btnObj = document.getElementById("btn01");
            alert(btnObj);
            alert($(btnObj));
        });
    </script>
</head>
<body>
    <div>我是div</div>
    <button id="btn01">按鈕1</button>
    <button class="cla01">按鈕2</button>
</body>
</html>

效果如下：

 

 

 

 

四、jQuery 物件和 dom 物件區分

1、什么是 jQuery 物件，什么是 dom 物件

 

 

 

 

2、問題：jQuery 物件的本質是什么？

　　jQuery 物件是 dom 物件的陣列 + jQuery 提供的一系列功能函式， 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery單擊事件</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            var $btn = $("button");
            console.log($btn);
            for (var i = 0; i < $btn.length; i++) {
                console.log($btn[i]);
            }
        });
    </script>
</head>
<body>
    <button>按鈕1</button>
    <button>按鈕2</button>
    <button>按鈕3</button>
</body>
</html>

效果如下：

 

 

3、jQuery 物件和 Dom 物件使用區別

　　jQuery 物件不能使用 DOM 物件的屬性和方法 　　DOM 物件也不能使用 jQuery 物件的屬性和方法

4、Dom 物件和 jQuery 物件互轉

dom 物件轉化為 jQuery 物件（*重點）

　　①先有 DOM 物件

　　②$( DOM 物件 ) 就可以轉換成為 jQuery 物件

jQuery 物件轉為 dom 物件（*重點）

　　①先有 jQuery 物件

　　②jQuery 物件[下標]取出相應的 DOM 物件

五、jQuery 選擇器（*****重點）

1、基本選擇器（****重點）

 

 補充：

　　p.myclass：要求標簽名必須是p，而且class屬性的值為myclass，

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            
            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            
            div.hide {
                display: none;
            }
        </style>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function () {
                //1.選擇 id 為 one 的元素 "background-color","#bbffaa"
                $("#btn1").click(function () {
                    $("#one").css("background-color","#bbffaa");
                });

                //2.選擇 class 為 mini 的所有元素
                $("#btn2").click(function () {
                    $(".mini").css("background-color","#bbffaa");
                });

                //3.選擇 元素名是 div 的所有元素
                $("#btn3").click(function () {
                    $("div").css("background-color","#bbffaa");
                });

                //4.選擇所有的元素
                $("#btn4").click(function () {
                    $("*").css("background-color","#bbffaa");
                });

                //5.選擇所有的 span 元素和id為two的元素
                $("#btn5").click(function () {
                    $("span,#two").css("background-color","#bbffaa");
                });
            });

            
        </script>
    </head>
    <body>
<!--     <div>
        <h1>基本選擇器</h1>
    </div>     -->    
        <input type="button" value="選擇 id 為 one 的元素" id="btn1" />
        <input type="button" value="選擇 class 為 mini 的所有元素" id="btn2" />
        <input type="button" value="選擇 元素名是 div 的所有元素" id="btn3" />
        <input type="button" value="選擇 所有的元素" id="btn4" />
        <input type="button" value="選擇 所有的 span 元素和id為two的元素" id="btn5" />
        
        <br>
        <div class="one" id="one">
            id 為 one,class 為 one 的div
            <div class="mini">class為mini</div>
        </div>
        <div class="one" id="two" title="test">
            id為two,class為one,title為test的div
            <div class="mini" title="other">class為mini,title為other</div>
            <div class="mini" title="test">class為mini,title為test</div>
        </div>
        <div class="one">
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini" title="tesst">class為mini,title為tesst</div>
        </div>
        <div style="display:none;" class="none">style的display為"none"的div</div>
        <div class="hide">class為"hide"的div</div>
        <div>
            包含input的type為"hidden"的div<input type="hidden" size="8">
        </div>
        <span class="one" id="span">^^span元素^^</span>
    </body>
</html>

2、層級選擇器（****重點）

 

 

代碼示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            
            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            
            div.hide {
                display: none;
            }            
        </style>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                //1.選擇 body 內的所有 div 元素 
                $("#btn1").click(function(){
                    $("body div").css("background", "#bbffaa");
                });

                //2.在 body 內, 選擇div子元素  
                $("#btn2").click(function(){
                    $("body>div").css("background", "#bbffaa");
                });

                //3.選擇 id 為 one 的下一個 div 元素 
                $("#btn3").click(function(){
                    $("#one + div").css("background", "#bbffaa");
                });

                //4.選擇 id 為 two 的元素后面的所有 div 兄弟元素
                $("#btn4").click(function(){
                    $("#two ~ div").css("background", "#bbffaa");
                });
            });
        </script>
    </head>
    <body>    
    
<!--     <div>
        <h1>層級選擇器:根據元素的層級關系選擇元素</h1>
        ancestor descendant  ：
        parent > child            ：
        prev + next            ：
        prev ~ siblings        ：
    </div>     -->
        <input type="button" value="選擇 body 內的所有 div 元素" id="btn1" />
        <input type="button" value="在 body 內, 選擇div子元素" id="btn2" />
        <input type="button" value="選擇 id 為 one 的下一個 div 元素" id="btn3" />
        <input type="button" value="選擇 id 為 two 的元素后面的所有 div 兄弟元素" id="btn4" />
        <br><br>
        <div class="one" id="one">
            id 為 one,class 為 one 的div
            <div class="mini">class為mini</div>
        </div>
        <div class="one" id="two" title="test">
            id為two,class為one,title為test的div
            <div class="mini" title="other">class為mini,title為other</div>
            <div class="mini" title="test">class為mini,title為test</div>
        </div>
        <div class="one">
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini" title="tesst">class為mini,title為tesst</div>
        </div>
        <div style="display:none;" class="none">style的display為"none"的div</div>
        <div class="hide">class為"hide"的div</div>
        <div>
            包含input的type為"hidden"的div<input type="hidden" size="8">
        </div>
        <span id="span">^^span元素^^</span>
    </body>
</html>

3、過濾選擇器 

基本過濾器：

 

 代碼示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            
            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            
            div.hide {
                display: none;
            }            
        </style>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                function anmateIt(){
                    $("#mover").slideToggle("slow", anmateIt);
                }
                anmateIt();
            });
            
            $(document).ready(function(){
                //1.選擇第一個 div 元素  
                $("#btn1").click(function(){
                    $("div:first").css("background", "#bbffaa");
                });

                //2.選擇最后一個 div 元素
                $("#btn2").click(function(){
                    $("div:last").css("background", "#bbffaa");
                });

                //3.選擇class不為 one 的所有 div 元素
                $("#btn3").click(function(){
                    $("div:not(.one)").css("background", "#bbffaa");
                });

                //4.選擇索引值為偶數的 div 元素
                $("#btn4").click(function(){
                    $("div:even").css("background", "#bbffaa");
                });

                //5.選擇索引值為奇數的 div 元素
                $("#btn5").click(function(){
                    $("div:odd").css("background", "#bbffaa");
                });

                //6.選擇索引值為大于 3 的 div 元素
                $("#btn6").click(function(){
                    $("div:gt(3)").css("background", "#bbffaa");
                });

                //7.選擇索引值為等于 3 的 div 元素
                $("#btn7").click(function(){
                    $("div:eq(3)").css("background", "#bbffaa");
                });

                //8.選擇索引值為小于 3 的 div 元素
                $("#btn8").click(function(){
                    $("div:lt(3)").css("background", "#bbffaa");
                });

                //9.選擇所有的標題元素
                $("#btn9").click(function(){
                    $(":header").css("background", "#bbffaa");
                });

                //10.選擇當前正在執行影片的所有元素
                $("#btn10").click(function(){
                    $(":animated").css("background", "#bbffaa");
                });
                //11.選擇沒有執行影片的最后一個div元素
                $("#btn11").click(function () {
                    $("div:not(:animated):last").css("background", "#bbffaa");
                });
            });
        </script>
    </head>
    <body>        
<!--     <div>
    :first             
    :last             
    :not(selector)     
    :even             
    :odd             
    :eq(index)         
    :gt(index)         
    :lt(index)         
    :header         
    :animated         
    </div> -->
        <input type="button" value="選擇第一個 div 元素" id="btn1" />
        <input type="button" value="選擇最后一個 div 元素" id="btn2" />
        <input type="button" value="選擇class不為 one 的所有 div 元素" id="btn3" />
        <input type="button" value="選擇索引值為偶數的 div 元素" id="btn4" />
        <input type="button" value="選擇索引值為奇數的 div 元素" id="btn5" />
        <input type="button" value="選擇索引值為大于 3 的 div 元素" id="btn6" />
        <input type="button" value="選擇索引值為等于 3 的 div 元素" id="btn7" />
        <input type="button" value="選擇索引值為小于 3 的 div 元素" id="btn8" />
        <input type="button" value="選擇所有的標題元素" id="btn9" />
        <input type="button" value="選擇當前正在執行影片的所有元素" id="btn10" />        
        <input type="button" value="選擇沒有執行影片的最后一個div" id="btn11" />
        
        <h3>基本選擇器.</h3>
        <br><br>
        <div class="one" id="one">
            id 為 one,class 為 one 的div
            <div class="mini">class為mini</div>
        </div>
        <div class="one" id="two" title="test">
            id為two,class為one,title為test的div
            <div class="mini" title="other">class為mini,title為other</div>
            <div class="mini" title="test">class為mini,title為test</div>
        </div>
        <div class="one">
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini" title="tesst">class為mini,title為tesst</div>
        </div>
        <div style="display:none;" class="none">style的display為"none"的div</div>
        <div class="hide">class為"hide"的div</div>
        <div>
            包含input的type為"hidden"的div<input type="hidden" size="8">
        </div>
        <div id="mover">正在執行影片的div元素.</div>
    </body>
</html>

內容過濾器： 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            
            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            
            div.hide {
                display: none;
            }            
        </style>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                function anmateIt(){
                    $("#mover").slideToggle("slow", anmateIt);
                }
    
                anmateIt();                
            });
            
            /** 
            :contains(text)   
            :empty               
            :has(selector)     
            :parent             
            */
            $(document).ready(function(){
                //1.選擇 含有文本 'di' 的 div 元素
                $("#btn1").click(function(){
                    $("div:contains('di')").css("background", "#bbffaa");
                });

                //2.選擇不包含子元素(或者文本元素) 的 div 空元素
                $("#btn2").click(function(){
                    $("div:empty").css("background", "#bbffaa");
                });

                //3.選擇含有 class 為 mini 元素的 div 元素
                $("#btn3").click(function(){
                    $("div:has(.mini)").css("background", "#bbffaa");
                });

                //4.選擇含有子元素(或者文本元素)的div元素
                $("#btn4").click(function(){
                    $("div:parent").css("background", "#bbffaa");
                });
            });
        </script>
    </head>
    <body>        
        <input type="button" value="選擇 含有文本 'di' 的 div 元素" id="btn1" />
        <input type="button" value="選擇不包含子元素(或者文本元素) 的 div 空元素" id="btn2" />
        <input type="button" value="選擇含有 class 為 mini 元素的 div 元素" id="btn3" />
        <input type="button" value="選擇含有子元素(或者文本元素)的div元素" id="btn4" />
        
        <br><br>
        <div class="one" id="one">
            id 為 one,class 為 one 的div
            <div class="mini">class為mini</div>
        </div>
        <div class="one" id="two" title="test">
            id為two,class為one,title為test的div
            <div class="mini" title="other">class為mini,title為other</div>
            <div class="mini" title="test">class為mini,title為test</div>
        </div>
        <div class="one">
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini" title="tesst">class為mini,title為tesst</div>
        </div>
        <div style="display:none;" class="none">style的display為"none"的div</div>
        <div class="hide">class為"hide"的div</div>
        <div>
            包含input的type為"hidden"的div<input type="hidden" size="8">
        </div>
        <div id="mover">正在執行影片的div元素.</div>
    </body>
</html>

屬性過濾器：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div,span,p {
    width: 140px;
    height: 140px;
    margin: 5px;
    background: #aaa;
    border: #000 1px solid;
    float: left;
    font-size: 17px;
    font-family: Verdana;
}

div.mini {
    width: 55px;
    height: 55px;
    background-color: #aaa;
    font-size: 12px;
}

div.hide {
    display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    /**
[attribute]             
[attribute=value]         
[attribute!=value]          
[attribute^=value]         
[attribute$=value]         
[attribute*=value]         
[attrSel1][attrSel2][attrSelN]  
    
    
    */
    $(function() {
        //1.選取含有 屬性title 的div元素
        $("#btn1").click(function() {
            $("div[title]").css("background", "#bbffaa");
        });
        //2.選取 屬性title值等于'test'的div元素
        $("#btn2").click(function() {
            $("div[title='test']").css("background", "#bbffaa");
        });
        //3.選取 屬性title值不等于'test'的div元素(*沒有屬性title的也將被選中)
        $("#btn3").click(function() {
            $("div[title!='test']").css("background", "#bbffaa");
        });
        //4.選取 屬性title值 以'te'開始 的div元素
        $("#btn4").click(function() {
            $("div[title^='te']").css("background", "#bbffaa");
        });
        //5.選取 屬性title值 以'est'結束 的div元素
        $("#btn5").click(function() {
            $("div[title$='est']").css("background", "#bbffaa");
        });
        //6.選取 屬性title值 含有'es'的div元素
        $("#btn6").click(function() {
            $("div[title*='es']").css("background", "#bbffaa");
        });
        
        //7.首先選取有屬性id的div元素，然后在結果中 選取屬性title值 含有'es'的 div 元素
        $("#btn7").click(function() {
            $("div[id][title*='es']").css("background", "#bbffaa");
        });
        //8.選取 含有 title 屬性值, 且title 屬性值不等于 test 的 div 元素
        $("#btn8").click(function() {
            $("div[title][title!='test']").css("background", "#bbffaa");
        });
    });
</script>
</head>
<body>
    <input type="button" value="選取含有 屬性title 的div元素." id="btn1" />
    <input type="button" value="選取 屬性title值等于'test'的div元素." id="btn2" />
    <input type="button"
        value="選取 屬性title值不等于'test'的div元素(沒有屬性title的也將被選中)." id="btn3" />
    <input type="button" value="選取 屬性title值 以'te'開始 的div元素." id="btn4" />
    <input type="button" value="選取 屬性title值 以'est'結束 的div元素." id="btn5" />
    <input type="button" value="選取 屬性title值 含有'es'的div元素." id="btn6" />
    <input type="button"
        value="組合屬性選擇器,首先選取有屬性id的div元素，然后在結果中 選取屬性title值 含有'es'的 div 元素."
        id="btn7" />
    <input type="button"
        value="選取 含有 title 屬性值, 且title 屬性值不等于 test 的 div 元素." id="btn8" />

    <br>
    <br>
    <div class="one" id="one">
        id 為 one,class 為 one 的div
        <div class="mini">class為mini</div>
    </div>
    <div class="one" id="two" title="test">
        id為two,class為one,title為test的div
        <div class="mini" title="other">class為mini,title為other</div>
        <div class="mini" title="test">class為mini,title為test</div>
    </div>
    <div class="one">
        <div class="mini">class為mini</div>
        <div class="mini">class為mini</div>
        <div class="mini">class為mini</div>
        <div class="mini"></div>
    </div>
    <div class="one">
        <div class="mini">class為mini</div>
        <div class="mini">class為mini</div>
        <div class="mini">class為mini</div>
        <div class="mini" title="tesst">class為mini,title為tesst</div>
    </div>
    <div style="display: none;" class="none">style的display為"none"的div</div>
    <div class="hide">class為"hide"的div</div>
    <div>
        包含input的type為"hidden"的div<input type="hidden" value="123456789"
            size="8">
    </div>
    <div id="mover">正在執行影片的div元素.</div>
</body>
</html>

可見性過濾器：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            
            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            
            div.hide {
                display: none;
            }            
        </style>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                function anmateIt(){
                    $("#mover").slideToggle("slow", anmateIt);
                }
    
                anmateIt();    
            });
            /**
                :hidden   
                :visible  
            */
            $(document).ready(function(){
                //1.選取所有可見的  div 元素
                $("#btn1").click(function(){
                    $("div:visible").css("background", "#bbffaa");
                });

                //2.選擇所有不可見的 div 元素
                //不可見：display屬性設定為none，或visible設定為hidden
                $("#btn2").click(function(){
                    $("div:hidden").show("slow").css("background", "#bbffaa");
                });

                //3.選擇所有不可見的 input 元素
                $("#btn3").click(function(){
                    alert($("input:hidden").attr("value"));
                });    
            });
        </script>
    </head>
    <body>        
        <input type="button" value="選取所有可見的  div 元素" id="btn1">
        <input type="button" value="選擇所有不可見的 div 元素" id="btn2" />
        <input type="button" value="選擇所有不可見的 input 元素" id="btn3" />
        
        <br>
        <div class="one" id="one">
            id 為 one,class 為 one 的div
            <div class="mini">class為mini</div>
        </div>
        <div class="one" id="two" title="test">
            id為two,class為one,title為test的div
            <div class="mini" title="other">class為mini,title為other</div>
            <div class="mini" title="test">class為mini,title為test</div>
        </div>
        <div class="one">
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini" title="tesst">class為mini,title為tesst</div>
        </div>
        <div style="display:none;" class="none">style的display為"none"的div</div>
        <div class="hide">class為"hide"的div</div>
        <div>
            包含input的type為"hidden"的div<input type="hidden" value="123456789" size="8">
        </div>
        <div id="mover">正在執行影片的div元素.</div>
    </body>
</html>
表單過濾器:

 

 

表單物件屬性過濾器： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function(){
                    
                //1.對表單內 可用input 賦值操作
                $("#btn1").click(function(){
                    $(":text:enabled").val("New Value");
                });
                //2.對表單內 不可用input 賦值操作
                $("#btn2").click(function(){
                    $(":text:disabled").val("New Value Too");
                });
                //3.獲取多選框選中的個數  使用size()方法獲取選取到的元素集合的元素個數
                $("#btn3").click(function(){
                    alert($(":checkbox:checked").size())
                });
                //4.獲取多選框，每個選中的value值
                $("#btn4").click(function(){
                    var str = "";
                    var eles = $(":checkbox:checked");
                    console.log(eles);
                    for(var i=0;i<eles.size();i++){
                        str += "【"+$(eles[i]).val()+"】";
                    }
                    alert(str)
                });
                //5.獲取下拉框選中的內容  
                $("#btn5").click(function(){
                    var str = "";
                    //注意這個選擇器的特殊，因為select里面的option是真正的被選擇項，
                    //所以 :selected 選擇器和 select[name='test']選擇器的關系是子父關系
                    //必須按斬訓本選擇器選擇后代的方法選
                    var els = $("select option:selected");
                    console.log(els);
                    for(var i=0;i<els.size();i++){
                        str += "【"+$(els[i]).val()+"】";
                    }
                    alert(str)
                });
            })    
        </script>
    </head>
    <body>
        <h3>表單物件屬性過濾選擇器</h3>
         <button id="btn1">對表單內 可用input 賦值操作.</button>
           <button id="btn2">對表單內 不可用input 賦值操作.</button><br /><br />
         <button id="btn3">獲取多選框選中的個數.</button>
         <button id="btn4">獲取多選框選中的內容.</button><br /><br />
         <button id="btn5">獲取下拉框選中的內容.</button><br /><br />
         
        <form id="form1" action="#">            
            可用元素: <input name="add" value="可用文本框1"/><br>
            不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br>
            可用元素: <input name="che" value="可用文本框2"/><br>
            不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br>
            <br>
            
            多選框: <br>
            <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
            <input type="checkbox" name="newsletter" value="test2" />test2
            <input type="checkbox" name="newsletter" value="test3" />test3
            <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
            <input type="checkbox" name="newsletter" value="test5" />test5
            
            <br><br>
            下拉串列1: <br>
            <select name="test" multiple="multiple" style="height: 100px" id="sele1">
                <option>浙江</option>
                <option selected="selected">遼寧</option>
                <option>北京</option>
                <option selected="selected">天津</option>
                <option>廣州</option>
                <option>湖北</option>
            </select>
            
            <br><br>
            下拉串列2: <br>
            <select name="test2">
                <option>浙江</option>
                <option>遼寧</option>
                <option selected="selected">北京</option>
                <option>天津</option>
                <option>廣州</option>
                <option>湖北</option>
            </select>
        </form>        
    </body>
</html>

六、jQuery 元素篩選

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>DOM查詢</title>
        <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }
            
            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }
            
            div.hide {
                display: none;
            }            
        </style>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                function anmateIt(){
                    $("#mover").slideToggle("slow", anmateIt);
                }
                anmateIt();
                
                //(1)eq()  選擇索引值為等于 3 的 div 元素
                $("#btn1").click(function(){
                    $("div").eq(3).css("background-color","#bfa");
                });
                //(2)first()選擇第一個 div 元素
                 $("#btn2").click(function(){
                     //first()   選取第一個元素
                    $("div").first().css("background-color","#bfa");
                });
                //(3)last()選擇最后一個 div 元素
                $("#btn3").click(function(){
                    //last()  選取最后一個元素
                    $("div").last().css("background-color","#bfa");
                });
                //(4)filter()在div中選擇索引為偶數的
                $("#btn4").click(function(){
                    //filter()  過濾   傳入的是選擇器字串
                    $("div").filter(":even").css("background-color","#bfa");
                });
                 //(5)is()判斷#one是否為:empty或:parent
                //is用來檢測jq物件是否符合指定的選擇器
                $("#btn5").click(function(){
                    alert($("#one").is(":empty"));
                });
                
                //(6)has()選擇div中包含.mini的
                $("#btn6").click(function(){
                    //has(selector)  選擇器字串    是否包含selector
                    $("div").has(".mini").css("background-color","#bfa");
                });
                //(7)not()選擇div中class不為one的
                $("#btn7").click(function(){
                    //not(selector)  選擇不是selector的元素
                    $("div").not(".one").css("background-color","#bfa");
                });
                //(8)children()在body中選擇所有class為one的div子元素
                $("#btn8").click(function(){
                    //children()  選出所有的子元素
                    $("body").children("div.one").css("background-color","#bfa");
                });
                
                
                //(9)find()在body中選擇所有class為mini的div元素
                $("#btn9").click(function(){
                    //find()  選出所有的后代元素
                    $("body").find("div.mini").css("background-color","#bfa");
                });
                //(10)next() #one的下一個div
                $("#btn10").click(function(){
                    //next()  選擇下一個兄弟元素
                    $("#one").next("div").css("background-color","#bfa");
                });
                //(11)nextAll() #one后面所有的span元素
                $("#btn11").click(function(){
                    //nextAll()   選出后面所有的元素
                    $("#one").nextAll("span").css("background-color","#bfa");
                });
                //(12)nextUntil() #one和span之間的元素
                $("#btn12").click(function(){
                    //
                    $("#one").nextUntil("span").css("background-color","#bfa")
                });
                //(13)parent() .mini的父元素
                $("#btn13").click(function(){
                    $(".mini").parent().css("background-color","#bfa");
                });
                //(14)prev() #two的上一個div
                $("#btn14").click(function(){
                    //prev()  
                    $("#two").prev("div").css("background-color","#bfa")
                });
                //(15)prevAll() span前面所有的div
                $("#btn15").click(function(){
                    //prevAll()   選出前面所有的元素
                    $("span").prevAll("div").css("background-color","#bfa")
                });
                //(16)prevUntil() span向前直到#one的元素
                $("#btn16").click(function(){
                    //prevUntil(exp)   找到之前所有的兄弟元素直到找到exp停止
                    $("span").prevUntil("#one").css("background-color","#bfa")
                });
                //(17)siblings() #two的所有兄弟元素
                $("#btn17").click(function(){
                    //siblings()    找到所有的兄弟元素，包括前面的和后面的
                    $("#two").siblings().css("background-color","#bfa")
                });
                
                
                //(18)add()選擇所有的 span 元素和id為two的元素
                $("#btn18").click(function(){
                    $("span").add("#two").css("background-color","#bfa");
                    
                });
            });
        </script>
    </head>
    <body>        
        <input type="button" value="eq()選擇索引值為等于 3 的 div 元素" id="btn1" />
        <input type="button" value="first()選擇第一個 div 元素" id="btn2" />
        <input type="button" value="last()選擇最后一個 div 元素" id="btn3" />
        <input type="button" value="filter()在div中選擇索引為偶數的" id="btn4" />
        <input type="button" value="is()判斷#one是否為:empty或:parent" id="btn5" />
        <input type="button" value="has()選擇div中包含.mini的" id="btn6" />
        <input type="button" value="not()選擇div中class不為one的" id="btn7" />
        <input type="button" value="children()在body中選擇所有class為one的div子元素" id="btn8" />
        <input type="button" value="find()在body中選擇所有class為mini的div后代元素" id="btn9" />
        <input type="button" value="next()#one的下一個div" id="btn10" />
        <input type="button" value="nextAll()#one后面所有的span元素" id="btn11" />
        <input type="button" value="nextUntil()#one和span之間的元素" id="btn12" />
        <input type="button" value="parent().mini的父元素" id="btn13" />
        <input type="button" value="prev()#two的上一個div" id="btn14" />
        <input type="button" value="prevAll()span前面所有的div" id="btn15" />
        <input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />
        <input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />
        <input type="button" value="add()選擇所有的 span 元素和id為two的元素" id="btn18" />

        
        <h3>基本選擇器.</h3>
        <br /><br />
        文本框<input type="text" name="account" disabled="disabled" />
        <br><br>
        <div class="one" id="one">
            id 為 one,class 為 one 的div
            <div class="mini">class為mini</div>
        </div>
        <div class="one" id="two" title="test">
            id為two,class為one,title為test的div
            <div class="mini" title="other"><b>class為mini,title為other</b></div>
            <div class="mini" title="test">class為mini,title為test</div>
        </div>
        
        <div class="one">
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini">class為mini</div>
            <div class="mini" title="tesst">class為mini,title為tesst</div>
        </div>
        <div style="display:none;" class="none">style的display為"none"的div</div>
        <div class="hide">class為"hide"的div</div>
        <span id="span1">^^span元素 111^^</span>
        <div>
            包含input的type為"hidden"的div<input type="hidden" size="8">
        </div>
        <span id="span2">^^span元素 222^^</span>
        <div id="mover">正在執行影片的div元素.</div>
    </body>
</html>

七、jQuery 的屬性操作

 

 1.html()

獲取：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            $("button").click(function () {
                //獲取
                alert($("div").html());
            });


        });

    </script>
</head>
<body>
    <div>我是div標簽 <span>我是div中的span</span></div>
    <button>操作輸入框</button>
</body>
</html>

效果如下：

 設定：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            $("button").click(function () {
                //設定
                $("div").html("<p>段落標簽</p>");
            });
        });

    </script>
</head>
<body>
    <div>我是div標簽 <span>我是div中的span</span></div>
    <button>操作輸入框</button>
</body>
</html>

效果如下：

 

 2.text()

獲取：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            $("button").click(function () {
                //獲取
                alert($("div").text());
            });
        });

    </script>
</head>
<body>
    <div>我是div標簽 <span>我是div中的span</span></div>
    <button>操作輸入框</button>
</body>
</html>

效果如下：

 

 設定：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            $("button").click(function () {
                //設定
                $("div").text("<p>段落標簽</p>");
            });
        });

    </script>
</head>
<body>
    <div>我是div標簽 <span>我是div中的span</span></div>
    <button>操作輸入框</button>
</body>
</html>

效果如下：

 

 3.val()

獲取：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            $("button").click(function () {
                //獲取
                alert($(":text").val());
            });
        });

    </script>
</head>
<body>
<input type="text" value="abc" />
    <button>操作輸入框</button>
</body>
</html>

效果如下：

 

 設定：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            $("button").click(function () {
                //設定
                $(":text").val("hello");
            });
        });

    </script>
</head>
<body>
<input type="text" value="abc" />
    <button>操作輸入框</button>
</body>
</html>

效果如下：

 

 val()方法操作單選、復選、下拉串列：

操作單選：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            $(":radio").val(["radio2"]);
        });

    </script>
</head>
<body>
單選：
<input name="radio" type="radio" value="radio1" />radio1
<input name="radio" type="radio" value="radio2" />radio2
</body>
</html>

效果如下：

 

 操作復選：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            $(":checkbox").val(["checkbox2","checkbox3"]);
        });

    </script>
</head>
<body>
多選：
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
</body>
</html>

效果如下：

 

 操作下拉串列：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            $("#multiple").val(["mul1","mul2","mul4"]);
            $("#single").val(["sin3"]);
        });

    </script>
</head>
<body>
下拉多選 ：
<select id="multiple" multiple="multiple" size="4">
    <option value="mul1">mul1</option>
    <option value="mul2">mul2</option>
    <option value="mul3">mul3</option>
    <option value="mul4">mul4</option>
</select>
<br/>

下拉單選 ：
<select id="single">
    <option value="sin1">sin1</option>
    <option value="sin2">sin2</option>
    <option value="sin3">sin3</option>
</select>
</body>
</html>

效果如下：

 

 操作單選、復選、下拉單復選：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);
        });

    </script>
</head>
<body>
<body>
    單選：
    <input name="radio" type="radio" value="radio1" />radio1
    <input name="radio" type="radio" value="radio2" />radio2
    <br/>
    多選：
    <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
    <br/>

    下拉多選 ：
    <select id="multiple" multiple="multiple" size="4">
        <option value="mul1">mul1</option>
        <option value="mul2">mul2</option>
        <option value="mul3">mul3</option>
        <option value="mul4">mul4</option>
    </select>
    <br/>

    下拉單選 ：
    <select id="single">
        <option value="sin1">sin1</option>
        <option value="sin2">sin2</option>
        <option value="sin3">sin3</option>
    </select>
</body>
</body>
</html>

效果如下：

 

 4.attr()

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            //獲取
            alert($(":checkbox:first").attr("name"));
            //設定
            $(":checkbox:first").attr("name", "abc")
        });

    </script>
</head>
<body>
多選：
<input name="checkbox" type="checkbox" checked="checked" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
</body>
</html>

5.prop()

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            //獲取
            alert($(":checkbox:first").prop("checked"));//true
            //設定
            $(":checkbox:first").prop("checked",false);
        });

    </script>
</head>
<body>
多選：
<input name="checkbox" type="checkbox" checked="checked" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
</body>
</html>

6.練習（全選、全不選、反選）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    
    $(function(){
        //給全選系結單擊事件
        $("#checkedAllBtn").click(function () {
            $(":checkbox").prop("checked",true);
        });
        //給全不選系結單擊事件
        $("#checkedNoBtn").click(function () {
            $(":checkbox").prop("checked",false);
        });
        //給反選系結單擊事件
        $("#checkedRevBtn").click(function () {
            $(":checkbox[name='items']").each(function () {
                //在each遍歷的function函式中，有一個this物件，這個this物件就是當前遍歷到的DOM物件
                this.checked = !this.checked;
            });

            //檢查是否滿選
            //獲取全不的球類個數
            var allCount = $(":checkbox[name='items']").length;
            //獲取選中的球類個數
            var checkedCount = $(":checkbox[name='items']:checked").length;
            //相等選中，不相等不選
            $("#checkedAllBox").prop("checked",allCount == checkedCount);
        });
        //提交按鈕單擊事件
        $("#sendBtn").click(function () {
            //獲取選中的球類的復選框
            $(":checkbox[name='items']:checked").each(function () {
                alert(this.value);
            });
        });
        //給【全選/全不選】系結單擊事件
        $("#checkedAllBox").click(function () {
            //在事件的function函式中，有一個this物件，這個this物件是當前正在回應事件的DOM物件
            $(":checkbox[name='items']").prop("checked",this.checked);
        });
        //給全部球類系結單擊事件
        $(":checkbox[name='items']").click(function () {
            //檢查是否滿選
            //獲取全部的球類個數
            var allCount = $(":checkbox[name='items']").length;
            //獲取選中的球類個數
            var checkedCount = $(":checkbox[name='items']:checked").length;
            $("#checkedAllBox").prop("checked",allCount == checkedCount);
        });
    });
    
</script>
</head>
<body>

    <form method="post" action="">
    
        你愛好的運動是？<input type="checkbox" id="checkedAllBox" />全選/全不選 
        
        <br />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="籃球" />籃球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br />
        <input type="button" id="checkedAllBtn" value="全　選" />
        <input type="button" id="checkedNoBtn" value="全不選" />
        <input type="button" id="checkedRevBtn" value="反　選" />
        <input type="button" id="sendBtn" value="提　交" />
    </form>

</body>
</html>

八、DOM 的增刪改

 

 

 1.append()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        //需求：向p標簽內部插入一個span標簽
        $(function () {
            $("p").append("<span>hello</span>");
        });
    </script>
</head>
<body>
    <p>段落1</p>
</body>
</html>

效果如下：

 

 2.appendTo()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        //需求：將p標簽添加到兩個div標簽中
        $(function () {
            $("p").appendTo("div");
        });
    </script>
</head>
<body>
    <p>段落1</p>
    <div></div>
    <div></div>
</body>
</html>

效果如下：

 

 3.prepend()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("p").prepend("<b>hello</b>");
        });
    </script>
</head>
<body>
    <p>段落1</p>
</body>
</html>

效果如下：

 

 4.prependTo()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="../02_javascript/Demo/script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("p").prependTo("







      
  

      轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/208573.html
      
標籤：Java 

      
上一篇：SpringBoot第五集：整合Druid和MyBatis（2020最新最易懂）
下一篇：配置ng-zerro的nz-date-picker時間選擇組件
標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • 【C++】Microsoft C++、C 和匯編程式檔案

    ......

    uj5u.com 2020-09-10 00:57:23 more
  • 例外宣告

    相比于斷言適用于排除邏輯上不可能存在的狀態，例外通常是用于邏輯上可能發生的錯誤。 例外宣告 Item 1：當函式不可能拋出例外或不能接受拋出例外時，使用noexcept 理由 如果不打算拋出例外的話，程式就會認為無法處理這種錯誤，并且應當盡早終止，如此可以有效地阻止例外的傳播與擴散。 示例 //不可 ......

    uj5u.com 2020-09-10 00:57:27 more
  • Codeforces 1400E Clear the Multiset(貪心 + 分治)

    鏈接：https://codeforces.com/problemset/problem/1400/E 來源：Codeforces 思路：給你一個陣列，現在你可以進行兩種操作，操作1：將一段沒有 0 的區間進行減一的操作，操作2：將 i 位置上的元素歸零。最終問：將這個陣列的全部元素歸零后操作的最少 ......

    uj5u.com 2020-09-10 00:57:30 more
  • UVA11610 【Reverse Prime】

    本人看到此題沒有翻譯，就附帶了一個自己的翻譯版本 思考 這一題，它的第一個要求是找出所有 $7$ 位反向質數及其質因數的個數。 我們應該需要質數篩篩選1~$10^{7}$的所有數，這里就不慢慢介紹了。但是，重讀題，我們突然發現反向質數都是 $7$ 位，而將它反過來后的數字卻是 $6$ 位數，這就說明 ......

    uj5u.com 2020-09-10 00:57:36 more
  • 統計區間素數數量

    1 #pragma GCC optimize(2) 2 #include <bits/stdc++.h> 3 using namespace std; 4 bool isprime[1000000010]; 5 vector<int> prime; 6 inline int getlist(int ......

    uj5u.com 2020-09-10 00:57:47 more
  • C/C++編程筆記：C++中的 const 變數詳解，教你正確認識const用法

    1、C中的const 1、區域const變數存放在堆疊區中，會分配記憶體（也就是說可以通過地址間接修改變數的值）。測驗代碼如下： 運行結果： 2、全域const變數存放在只讀資料段（不能通過地址修改，會發生寫入錯誤）， 默認為外部聯編，可以給其他源檔案使用（需要用extern關鍵字修飾） 運行結果： ......

    uj5u.com 2020-09-10 00:58:04 more
  • 【C++犯錯記錄】VS2019 MFC添加資源不懂如何修改資源宏ID

    1. 首先在資源視圖中，添加資源 2. 點擊新添加的資源，復制自動生成的ID 3. 在解決方案資源管理器中找到Resource.h檔案，編輯，使用整個專案搜索和替換的方式快速替換 宏宣告 4. Ctrl+Shift+F 全域搜索，點擊查找全部，然后逐個替換 5. 為什么使用搜索替換而不使用屬性視窗直 ......

    uj5u.com 2020-09-10 00:59:11 more
  • 【C++犯錯記錄】VS2019 MFC不懂的批量添加資源

    1. 打開資源頭檔案Resource.h，在其中預先定義好宏 ID（不清楚其實ID值應該設定多少，可以先新建一個相同的資源項，再在這個資源的ID值的基礎上遞增即可） 2. 在資源視圖中選中專案資源，按F7編輯資源檔案，按 ID 型別 相對路徑的形式添加 資源。（別忘了先把檔案拷貝到專案中的res檔案 ......

    uj5u.com 2020-09-10 01:00:19 more
  • C/C++編程筆記：關于C++的參考型別，專供新手入門使用

    今天要講的是C++中我最喜歡的一個用法——參考，也叫別名。 參考就是給一個變數名取一個變數名，方便我們間接地使用這個變數。我們可以給一個變數創建N個參考，這N + 1個變數共享了同一塊記憶體區域。(參考型別的變數會占用記憶體空間，占用的記憶體空間的大小和指標型別的大小是相同的。雖然參考是一個物件的別名，但 ......

    uj5u.com 2020-09-10 01:00:22 more
  • 【C/C++編程筆記】從頭開始學習C ++：初學者完整指南

    眾所周知，C ++的學習曲線陡峭，但是花時間學習這種語言將為您的職業帶來奇跡，并使您與其他開發人員區分開。您會更輕松地學習新語言，形成真正的解決問題的技能，并在編程的基礎上打下堅實的基礎。 C ++將幫助您養成良好的編程習慣（即清晰一致的編碼風格，在撰寫代碼時注釋代碼，并限制類內部的可見性），并且由 ......

    uj5u.com 2020-09-10 01:00:41 more
最新发布
  • Rust中的智能指標:Box<T> Rc<T> Arc<T> Cell<T> RefCell<T> Weak

    Rust中的智能指標是什么 智能指標（smart pointers）是一類資料結構，是擁有資料所有權和額外功能的指標。是指標的進一步發展 指標（pointer）是一個包含記憶體地址的變數的通用概念。這個地址參考，或 ” 指向”（points at）一些其 他資料 。參考以 & 符號為標志并借用了他們所 ......

    uj5u.com 2023-04-20 07:24:10 more
  • Java的值傳遞和參考傳遞

    值傳遞不會改變本身，參考傳遞（如果傳遞的值需要實體化到堆里）如果發生修改了會改變本身。 1.基本資料型別都是值傳遞 package com.example.basic; public class Test { public static void main(String[] args) { int ......

    uj5u.com 2023-04-20 07:24:04 more
  • [2]SpinalHDL教程——Scala簡單入門

    第一個 Scala 程式 shell里面輸入 $ scala scala> 1 + 1 res0: Int = 2 scala> println("Hello World!") Hello World! 檔案形式 object HelloWorld { /* 這是我的第一個 Scala 程式 * 以 ......

    uj5u.com 2023-04-20 07:23:58 more
  • 理解函式指標和回呼函式

    理解 函式指標 指向函式的指標。比如： 理解函式指標的偽代碼 void (*p)(int type, char *data); // 定義一個函式指標p void func(int type, char *data); // 宣告一個函式func p = func; // 將指標p指向函式func ......

    uj5u.com 2023-04-20 07:23:52 more
  • Django筆記二十五之資料庫函式之日期函式

    本文首發于公眾號：Hunter后端 原文鏈接：Django筆記二十五之資料庫函式之日期函式 日期函式主要介紹兩個大類，Extract() 和 Trunc() Extract() 函式作用是提取日期，比如我們可以提取一個日期欄位的年份，月份，日等資料 Trunc() 的作用則是截取，比如 2022-0 ......

    uj5u.com 2023-04-20 07:23:45 more
  • 一天吃透JVM面試八股文

    什么是JVM？ JVM，全稱Java Virtual Machine（Java虛擬機），是通過在實際的計算機上仿真模擬各種計算機功能來實作的。由一套位元組碼指令集、一組暫存器、一個堆疊、一個垃圾回收堆和一個存盤方法域等組成。JVM屏蔽了與作業系統平臺相關的資訊，使得Java程式只需要生成在Java虛擬機 ......

    uj5u.com 2023-04-20 07:23:31 more
  • 使用Java接入小程式訂閱訊息！

    更新完微信服務號的模板訊息之后，我又趕緊把微信小程式的訂閱訊息給實作了！之前我一直以為微信小程式也是要企業才能申請，沒想到小程式個人就能申請。 訊息推送平臺🔥推送下發【郵件】【短信】【微信服務號】【微信小程式】【企業微信】【釘釘】等訊息型別。 https://gitee.com/zhongfuch ......

    uj5u.com 2023-04-20 07:22:59 more
  • java -- 緩沖流、轉換流、序列化流

    緩沖流 緩沖流, 也叫高效流, 按照資料型別分類： 位元組緩沖流：BufferedInputStream，BufferedOutputStream 字符緩沖流：BufferedReader，BufferedWriter 緩沖流的基本原理，是在創建流物件時，會創建一個內置的默認大小的緩沖區陣列，通過緩沖 ......

    uj5u.com 2023-04-20 07:22:49 more
  • Java-SpringBoot-Range請求頭設定實作視頻分段傳輸

    老實說，人太懶了，現在基本都不喜歡寫筆記了，但是網上有關Range請求頭的文章都太水了 下面是抄的一段StackOverflow的代碼...自己大修改過的，寫的注釋挺全的，應該直接看得懂，就不解釋了 寫的不好...只是希望能給視頻網站開發的新手一點點幫助吧. 業務場景：視頻分段傳輸、視頻多段傳輸（理 ......

    uj5u.com 2023-04-20 07:22:42 more
  • Windows 10開發教程_編程入門自學教程_菜鳥教程-免費教程分享

    教程簡介 Windows 10開發入門教程 - 從簡單的步驟了解Windows 10開發，從基本到高級概念，包括簡介，UWP，第一個應用程式，商店，XAML控制元件，資料系結，XAML性能，自適應設計，自適應UI，自適應代碼，檔案管理，SQLite資料庫，應用程式到應用程式通信，應用程式本地化，應用程式 ......

    uj5u.com 2023-04-20 07:22:35 more

Copyright © 2010-2020 有解無憂