前端面試題《JQuery》

.jQuery庫中的$()是什么？

$() 函數是 jQuery() 函數的別稱，$()函數用于將任何對象包裹成 jQuery對象，接著被允許調用定義在jQuery對象上的多個不同方法。甚至可以將一個選擇器字符串傳入$()函數，它會返回一個包含所有匹配的DOM元素數組的jQuery對象。這個問題我已經見過好幾次被提及，盡管它非常基礎，它經常被用來區分一個開發人員是否了解jQuery。

2.網頁上有5個div元素，如何使用 jQuery來選擇它們？

jQuery支持不同類型的選擇器，例如ID選擇器、class選擇器、標簽選擇器。鑒于這個問題沒提到ID和class，可以用標簽選擇器來選擇所有的div 元素。jQuery代碼：$("div")，這樣會返回一個包含所有5個div標簽的jQuery 對象。

3.$(this) 和 this 關鍵字在 jQuery 中有何不同？

這對于很多java零基礎學jQuery的初學者來說是一個棘手的問題，其實是個簡單的問題。$(this) 返回一個jQuery對象，你可以對它調用多個 jQuery方法，比如用text()獲取文本，用val()獲取值等等。而this代表當前元素，它是JavaScript關鍵詞中的一個，表示上下文中的當前DOM元素。你不能對它調用 jQuery方法，直到它被 $() 函數包裹，例如 $(this)。

4.使用CDN加載 jQuery庫的主要優勢是什么？

除了報錯節省服務器帶寬以及更快的下載速度這許多的好處之外, 最重要的是，如果瀏覽器已經從同一個CDN下載類相同的jQuery版本, 那么它就不會再去下載它一次，因此今時今日，許多公共的網站都將jQuery用于用戶交互和動畫, 如果瀏覽器已經有了下載好的jQuery庫，網站就能有非常好的展示機會。

5.jQuery中的方法鏈是什么？使用方法鏈有什么好處？

方法鏈是對一個方法返回的結果調用另一個方法，這使得代碼簡潔明了，同時由于只對DOM進行了一輪查找，性能方面更加出色。

6.如何將一個HTML元素添加到DOM樹中的？

可以用 jQuery方法appendTo()將一個HTML元素添加到DOM樹中。這是jQuery提供的眾多操控DOM的方法中的一個。可以通過appendTo()方法在指定的DOM元素末尾添加一個現存的元素或者一個新的HTML元素。

7.說出jQuery中常見的幾種函數以及他們的含義是什么?

（1）get()取得所有匹配的DOM元素集合；

（2）get(index)取得其中一個匹配的元素.index表示取得第幾個匹配的元素；

（3）append(content)向每個匹配的元素內部追加內容；

（4）after(content)在每個匹配的元素之后插入內容；

（5）html()/html(var)取得或設置匹配元素的html內容；

（6）find(expr)搜索所有與指定表達式匹配的元素；

（7）bind(type,[data],fn)為每個匹配元素的特定事件綁定事件處理函數；

（8）empty()刪除匹配的元素集合中所有的子節點；

（9）hover(over,out)一個模仿懸停事件(鼠標移動到一個對象上面及移出這個對象)的方法；

（10）attr(name)取得第一個匹配元素的屬性值。

8.jQuery 能做什么？

獲取頁面的元素；修改頁面的外觀；改變頁面大的內容；響應用戶的頁面操作；為頁面添加動態效果；無需刷新頁面，即可以從服務器獲取信息；簡化常見的javascript任務。

9.jquery中的選擇器和CSS中的選擇器有區別嗎？

jQuery選擇器支持CSS里的選擇器，jQuery選擇器可用來添加樣式和添加相應的行為，CSS中的選擇器是只能添加相應的樣式。

10.jQuery的特點都有什么？

jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的CSS選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

ntroduction to jQuery

jQuery 是一個快速、簡潔的 JavaScript 框架，是目前最流行的 JavaScript 程序庫，它是對 JavaScript 對象和函數的封裝
jQuery 的設計思想是 Write less, do more
實現隔行變色效果，JavaScript 要循環加判斷，而 jQuery 只需一句關鍵代碼

$("tr:even").css("background-color", "#ccc");

jQuery Function

訪問和操作 DOM 元素
控制頁面樣式
對頁面事件進行處理
擴展新的 jQuery 插件
與 Ajax 技術完美結合

jQuery 能做的 JavaScript 也都能做，但使用 jQuery 能大幅提高開發效率

jQuery Advantages

體積小，壓縮后只有 100 KB 左右
強大的選擇器
出色的 DOM 封裝
可靠的事件處理機制
出色的瀏覽器兼容性

jQuery Usage

jQuery 作為一個單獨存在的 js 文件，并不會與其他的 js 文件發生沖突

<script src="js/jquery-3.4.1.min.js"></script>

基本的語法介紹

<script>
    $(selector).action();
</script>

工廠函數 $()：將 DOM 對象轉化為 jQuery 對象

選擇器 selector：獲取需要操作的 DOM 元素

方法 action()：jQuery 中提供的方法，其中包括綁定事件處理的方法 “$” 等同于 “jQuery”

例如：

<body>
    <p>hello</p>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    alert($("p").text());
</script>

jQuery 對象與 DOM 對象

DOM 對象和 jQuery 對象分別擁有一套獨立的方法，不能混用

$("#title").html();
// 等同于
document.getElementById("title").innerHTML;

如果要混用它們，就要進行轉換

DOM 對象轉 jQuery 對象

// a 是 DOM 對象
var a=document.getElementById("name");
// b 是 jQuery 對象
var b=$(a);

jQuery 對象轉 DOM 對象

// a 是 jQuery 對象
var a=$("#name");
// b 是 DOM 對象
var b=jqObject.get(0);

選擇器

基本選擇器

基本選擇器包括標簽選擇器、類選擇器、ID選擇器、并集選擇器、交集選擇器和全局選擇器。

<p>中國</p>
<p>China</p>
<p class="jy">加油</p>
<p id="wan">萬</p>
<h3 class="jy">加油</h3>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 標簽選擇器，獲得所有的 p
    $("p").css("color","red");
    // 類選擇器
    $(".jy").css("color","red");
    // ID 選擇器，更具備唯一性
    $("#wan").css("color","red");
    // 并集選擇器 ".jy" 和 "#wan"
    $(".jy,#wan").css("color","red");
    // 交集選擇器，既是 h3 標簽，又擁有 ".jy" 的元素
    $("h3.jy").css("color","red");
</script>

層次選擇器

<h3>000</h3>
<div id="x">
    111
    <p>p1</p>
    <div>
        <p>p2</p>
    </div>
</div>
<h3>222</h3>
<h3>333</h3>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 后代選擇器，忽略層級，選取所有后代元素
    $("#x p").css("color","red");
    // 子代選擇器，只選取子層的元素
    $("#x>p").css("color","red");
    // 相鄰元素選擇器，下一個緊鄰的兄弟元素 h3
    $("#x+h3").css("color","red");
    // 同輩元素選擇器，#x 元素之后的的所有兄弟元素 h3
    $("#x~h3").css("color","red");
</script>

屬性選擇器

<a href="www.baidu.com">百度</a>
<a href="www.sina.com.cn">新浪網</a>
<a href="http://www.163.com">網易</a>
<p href="x">測試1</p>
<p href="x" title="x">測試2</p>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 選取擁有 href 屬性的元素
    $("[href]").css("color","red");
    // 選取擁有 href=x 的元素
    $("[href='x']").css("color","red");
    // 選取 a 標簽中 href 不等于 x 的元素
    $("a[href!='x']").css("color","red");
    // 選取 href 屬性以 www 開頭的元素
    $("[href^='www']").css("color","red");
    // 選取 href 屬性以 com 結尾的元素
    $("[href$='com']").css("color","red");
    // 選取 href 屬性包含 a 的元素
    $("[href*='a']").css("color","red");
    // 選取擁有 href 屬性和 title 屬性，并且 title=x 的 p 元素
    $("p[href][title='x']").css("color","red");
</script>

過濾選擇器

<h2 id="h2#x">選擇</h2>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 第一個 li
    $("li:first").css("color","red");
    // 最后一個 li
    $("li:last").css("color","red");
    // 偶數行的 li
    $("li:even").css("color","red");
    // 奇數行的 li
    $("li:odd").css("color","red");
    // 下標為 2 的 li
    $("li:eq(2)").css("color","red");
    // 下標大于 1 的 li
    $("li:gt(1)").css("color","red");
    // 下標小于 2 的 li
    $("li:lt(2)").css("color","red");
    // 使用轉義符
    $("#h2\\#x").css("color","red");
</script>

事件

鼠標事件

鼠標事件是當用戶在文檔上移動或單擊鼠標時而產生的事件。

<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 點擊一下，切換照片
    $("img").click( function(){
        // this 是事件觸發的源頭
        $(this).attr( "src","img/2.jpg" );
    } );
    // 移動到元素上
    $("img").mouseover( function(){
        $(this).css( "border","2px solid red" );
    } );
    // 離開元素
    $("img").mouseout( function(){
        $(this).css( "border","2px solid white" );
    } );
</script>

鍵盤事件

用戶每次按下或者釋放鍵盤上的鍵時都會產生事件。

<input>
<h3></h3>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("input").keyup( function(){
        // 獲取框中的值
        var str=$(this).val();
        // 將 h3 元素中的文本內容更改為 str
        $("h3").text( str );
    } );
</script>

表單事件

當元素獲得焦點時，會觸發 focus 事件，失去焦點時，會觸發 blur 事件。

<form action="">
    <p>帳號：<input id="a" value="請輸入帳號..."></p>
    <p>電話：<input id="b"></p>
</form>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 獲得焦點（激活/點擊一下）
    $("#a").focus(function(){
        $(this).val("");
    });
?
    // 失去焦點（未激活/未點擊）
    $("#a").blur(function(){
        $(this).val("請輸入帳號...");
    });
</script>

鼠標懸停復合事件

hover() 方法相當于 mouseover 與 mouseout 事件的組合。

<img src="img/3.jpg" width="400">
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("img").hover(
        function(){
            $(this).css("border","5px solid red");
        },
        function(){
            $(this).css("border","5px solid white");
        }
    );
</script>

連續點擊復合事件

<h2>選擇</h2>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("h2").click(function(){
        // 連續點擊，ul 的可見和隱藏進行切換
        $("ul").toggle();
    });
</script>

事件的動態綁定

對 dom 元素綁定事件的另一種寫法

綁定一個事件

$(".del").on('click', function() {
    alert('hello');
})

綁定多個事件

$(".del").on('click mouseover', function() {
    alert('hello');
})

元素的隱藏和顯示

改變元素的寬和高（帶動畫效果）

show(speed)：顯示
hide(speed)：隱藏
toggle(speed) 等價于 show + hide：顯示的隱藏，隱藏的顯示

可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>
<body>
    <button id="btn1">顯示</button>
    <button id="btn2">隱藏</button>
    <button id="btn3">切換</button>
    <div></div>
?
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function(){
            $("div").show('slow');
        });
        $("#btn2").click(function(){
            // fast:快速的
            // slow:緩慢的
            // 毫秒：自定義
            $("div").hide(2000); 
        });
        $("#btn3").click(function(){
            $("div").toggle(1000);
        });
    </script>
</body>

改變元素的高（拉伸效果）

slideDown(speed)：顯示
slideUp(speed)：隱藏
slideToggle(speed) 等價于 slideDown + slideUp

可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒

<script>
    $("#btn1").click(function(){
        // 向下伸展
        $("div").slideDown(1000);
    });
    $("#btn2").click(function(){
        // 向上收縮
        $("div").slideUp(1000);
    });
    $("#btn3").click(function(){
        // 切換
        $("div").slideToggle(1000);
    });
</script>

不改變元素的大小（淡入淡出效果）

fadeIn(speed) 顯示
fadeOut(speed) 隱藏
fadeToggle(speed) 等價于 fadeIn + fadeOut 動畫
fadeTo(speed, 透明度) 方法允許漸變為給定的不透明度（值介于 0 與 1 之間）

可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒

<script>
    $("#btn1").click(function(){
        // 顯示：映入眼簾
        $("div").fadeIn(1000);
    });
?
    $("#btn2").click(function(){
        // 隱藏：淡出我的視線
        $("div").fadeOut(1000);
    });
?
    $("#btn3").click(function(){
        // 切換
        $("div").fadeToggle(1000);
    });
?
    $("#btn4").click(function(){
        // 1 秒內變成 50% 的透明度
        $("div").fadeTo(1000,0.5);
    });
</script>

鏈

鏈是允許在同一個元素上在一條語句中運行多個 jQuery 方法，可以把動作/方法鏈接在一起。

例如：點擊一次按鈕，讓 div 完成 4 個指定動作：

背景變粉
字體變綠
向上收縮
向下拉伸

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
        color:white;
        font-size: 3em;
    }    
</style>
<body>
    <button>試試</button>
    <div>hello</div>
?
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            $("div").css("background-color","pink").css("color","green").slideUp(1000).slideDown(1000);
        });
    </script>
</body>

DOM 和 CSS 的操作

屬性函數

attr("屬性") 獲得元素的屬性值。

attr("屬性", "新值") 修改元素的屬性值。

attr(樣式參數) 樣式參數可以寫成 json 格式。

<body>
    <button id="btn1">點我試試</button>
    <hr>
    <img src="img/1.jpg" title="風景圖" width="300">
?
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function(){
            $("img").attr("src","img/2.jpg");
            $("img").attr("title","高清風景圖");
            $("img").attr({width:"200",height:"200"});
        });
    </script>
</body>

val() 獲得表單元素中的 value 值

val("x") 修改表單元素中的 value 值

html() 獲得元素中的內容（標簽 + 文本）

html("x") 修改元素中的內容（標簽 + 文本）

text() 獲得元素中的文本

text("x") 修改元素中的文本

<button>試試</button>
<hr>
<input id="username">
?
<div>
    <h1><i>中國加油</i></h1>
</div>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        // input 框中的值
        alert($("input").val());
        // 修改 input 框中的值
        $("input").val("66666");
        // 獲得 div 中的內容（包含標簽信息）
        alert($("div").html());
        // 獲得 div 中的內容（不包含標簽信息，只包含文本內容）
        alert($("div").text());
        // 修改 div 中的內容（全部內容都覆蓋）
        $("div").text("祖國萬歲！");
    });
</script>

樣式函數

css("屬性") 獲得該屬性值

css("屬性", "值") 設置屬性的值

css({json}) 設置多個屬性的值

<style>
    div{
        width: 150px;
        height: 150px;
        background-color: #000;
    }
</style>
<body>
    <button>試試</button>
    <hr>
    <div></div>
?
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            // 獲取 css 屬性，width 的值
            var w=$("div").css("width");
?
            // 一個鍵值對
            $("div").css("background-color","pink");
?
            // 鏈式編程
            $("div").css("background-color","pink").css("border-radius","50%");
?
            // json 為參數
            $("div").css({
                opacity:"0.4",
                background:"orange",
                borderRadius:"50%"
            });
        });
    </script>
</body>

width() 獲得元素的寬度

width(number) 修改元素的寬度

height() 獲得元素的高度

height(number) 修改元素的高度

<style>
    div{
        width: 150px;
        height: 150px;
        background-color: #000;
    }
</style>
<body>
    <button>試試</button>
    <hr>
    <div></div>
?
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            //（無參）獲取寬度
            var w=$("div").width();
            //（無參）獲取高度
            var h=$("div").height();
            alert("寬:"+w+"px，高:"+h+"px");
            //（傳參）修改寬度
            $("div").width("300");
            //（傳參）修改高度
            $("div").height("300");
        });
    </script>
</body>

類樣式函數

addClass() 為元素添加類樣式

removeClass() 將元素的類樣式移除

toggleClass() 樣式的切換；有->無，無->有

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: #000;
    }
    .a{
        background: palevioletred;
        border-radius: 50%;
    } 
    .b{
        border:5px dashed darkcyan;
        opacity: 0.6;
    }
    .cn{
        background: #000;
        color: #FFF;
        font-family: 字魂49號-逍遙行書;
    }
</style>
<body>
    <button id="btn1">試試</button>
    <button id="btn2">取消透明度</button>
    <button id="btn3">樣式切換</button>
    <hr>
    <div></div>
    <h1>中華人民共和國</h1>
?
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function(){
            // $("div").addClass("a");
            $("div").addClass("a b");
        });
?
        $("#btn2").click(function(){
            $("div").removeClass("b");
        });
?
        $("#btn3").click(function(){
            $("h1").toggleClass("cn");
        });
    </script>
</body>

節點操作

<input>
<button id="test">測試</button>
?
<ul>
    <li>西游記</li>
    <li>三國演義</li>
    <li>水滸傳</li>
</ul>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("#test").click(function(){
        var bookname=$("input").val();
        // 通過工廠函數，創建新的 li 節點
        var newli=$("<li>"+bookname+"</li>");
?
        /* 添加子節點 */
        // newli 添加到 ul 后面
        $("ul").append(newli);
        // newli 添加到 ul 后面
        newli.appendTo("ul");
        // newli 添加到 ul 前面
        $("ul").prepend(newli);
        newli.prependTo("ul");
?
        /* 添加同輩節點 */
        // newli 添加到最后的 li 的后面
        $("li:last").after( newli );
        newli.insertAfter("li:last");
        //newli 添加到最后的 li 的前面
        $("li:last").before(newli);
        newli.insertBefore("li:last");
?
        /* 替換節點 */
        // 將第二個 li 替換成 newli
        $("li:eq(1)").replaceWith(newli);
        newli.replaceAll( "li:eq(1)" );
?
        /* 復制節點 */
        // 復制第一個 li，并插入到最后一個 li 的后面
        $("li:first").clone().insertAfter("li:last");
?
        /* 刪除節點 */
        // 清空了節點上的文本（節點并沒有消失）
        $("li:eq(1)").empty();
        // 刪除節點
        $("li:eq(1)").remove();
    });
</script>

遍歷節點

祖先元素

用于向上遍歷 DOM 樹的方法

parent() 返回被選元素的直接父元素，僅僅是上一級
parents() 返回被選元素的所有祖先元素，它一路向上直到文檔的根元素，可以選擇輩分

<p><button>測試</button></p>
<ul>
    <li>a</li>
    <li>
        <b>b</b>
    </li>
    <li>c</li>
</ul>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        // 找爸爸
        var x=$("b").parent().html();
        // 找祖宗 ul
        var x=$("b").parents("ul").html();
        // 找祖宗 body
        var x=$("b").parents("body").html();
        alert( x );
    });
</script>

同輩元素

next() 獲取緊鄰匹配元素之后的元素

prev() 獲取緊鄰匹配元素之前的元素

siblings([selector]) 獲取位于匹配元素前面和后面的所有同輩元素

<button>測試</button>
<p>p1</p>
<ul>
    <li>a</li>
    <li>
        <b>b</b>
    </li>
    <li>c</li>
</ul>
<p>p2</p>
<p id="x">p3</p>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        // 緊鄰的下一個元素
        var x=$("ul").next().text();
        // 緊鄰的上一個元素
        var x=$("ul").prev().text();
        // 所有的兄弟中 id=x 的
        var x=$("ul").siblings("#x").text();
        // ul 的所有兄弟：1 個 button，3 個 p，2 個 script
        var arr=$("ul").siblings();
        for(var i=0 ;i< arr.length ;i++){
            alert(arr[i]);
        }
    });
</script>

后代元素

后代是子、孫、曾孫等等

children([selector]) 方法返回被選元素的所有直接子元素

<button>測試</button>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        // 所有子節點：a b c
        var x=$("ul").children().text();
        // ul 中的第一個子節點
        var x=$("ul").children("li:first").text();
        alert(x);
    });
</script>

find(選擇器) 方法返回被選元素的后代元素，一路向下直到最后一個后代

<button>測試</button>
<ul>
    <li>盤古</li>
    <li>蚩尤</li>
    <li>刑天
        <p>龔工</p>
    </li>
    <h3>祝融</h3>
</ul>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        // 在 ul 中查找 p 元素，忽略層級
        var x=$("ul").find("p").text();
        // 在 ul 中查找 h3 元素，忽略層級
        var x=$("ul").find("h3").text();
        // 不知道找什么
        var x=$("ul").find().text();
        alert(x);
    });
</script>

元素的過濾

first() 過濾第一個元素

last() 過濾最后一個元素

eq(index) 過濾到下標為 index 的元素

not() 除了什么之外的元素

is() 返回布爾，判斷是不是這種元素

<button>測試</button>
<ul>
    <li>盤古</li>
    <li>蚩尤</li>
    <li>刑天</li>
</ul>
?
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        // 第一個 li
        var x=$("li").first().text();
        // 最后一個 li
        var x=$("li").last().text();
        // 下標為 1 的 li
        var x=$("li").eq(1).text();
        // 除了下標為 1 的其余所有 li
        var x=$("li").not("li:eq(1)").text();
        // 返回布爾型，li 的父節點是不是 ul
        var x=$("li").parent().is("ul");
        alert(x);
    });
</script>

案例

手風琴特效

<style>
    dd {
        /* 隱藏元素 */
        display: none;
    }
</style>
<body>
    <nav>
        <header>網站</header>
        <ul>
            <li>
                <dl>
                    <dt>求職</dt>
                    <dd>1.簡歷</dd>
                    <dd>2.面試</dd>
                    <dd>3.入職</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>教育</dt>
                    <dd>1.看視頻</dd>
                    <dd>2.做作業</dd>
                    <dd>3.在線輔導</dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt>創業</dt>
                    <dd>1.幫助小企業</dd>
                    <dd>2.頭腦風暴</dd>
                    <dd>3.賺錢啦</dd>
                </dl>
            </li>
        </ul>
    </nav>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("nav dt").click(function(){
            // 所有的 dd 全部都閉合上，除了自己的兄弟
            $("dd").not($(this).siblings()).slideUp(500);
            // 自己的兄弟進行切換，顯示閉合上，閉合的顯示出來
            $(this).siblings().slideToggle(500);
        });
    </script>
</body>

購物車結算

<style>
    .minus,.plus{
        border:1px solid #999;
        /* 超鏈接 a 是行內元素 */
        /* 轉換成行內塊顯示，才能改變寬和高 */
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        text-decoration: none;
    }
</style>
<body>
    <table border="1" cellspacing="0" width="400">
        <tr>
            <td>商品編號</td>
            <td>名稱</td>
            <td>單價</td>
            <td>數量</td>
            <td>總價</td>
        </tr>
        <tr>
            <td>1</td>
            <td>炸香腸</td>
            <td>3</td>
            <td>
                <a href="#" class="minus">-</a>
                <span>1</span>
                <a href="#" class="plus">+</a>
            </td>
            <td>3</td>
        </tr>
        <tr>
            <td>2</td>
            <td>王八</td>
            <td>10</td>
            <td>
                <a href="#" class="minus">-</a>
                <span>1</span>
                <a href="#" class="plus">+</a>
            </td>
            <td>10</td>
        </tr>
        <tr>
            <td>3</td>
            <td>恐龍</td>
            <td>1000</td>
            <td>
                <a href="#" class="minus">-</a>
                <span>1</span>
                <a href="#" class="plus">+</a>
            </td>
            <td>1000</td>
        </tr>
    </table>
    <p style="width: 400px; text-align: right;">
        總價：<b style="color:red;">111</b> <button>提交訂單</button>
    </p>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/car.js"></script>
</body>

car.js

$(".plus").click(function(){
    // 獲得原來的商品數量
    var i=$(this).prev().text();
    i++;
    // 現在的商品數量
    $(this).prev().text(i);
    // 商品單價
    var price=$(this).parent().prev().text();
    // 商品總價
    var total=i*price;
    // 現在商品的總價
    $(this).parent().next().text(total);
    getTotal();
});
?
?
$(".minus").click(function(){
    var i=$(this).next().text();
    i--;
    // 數量已經是 0 了，詢問用戶是否刪除該商品
    if(i==0){
        if( confirm("是否刪除該商品？") ){
            $(this).parents("tr").remove();
        }
    }else{
        $(this).next().text(i);
        // 商品單價
        var price=$(this).parent().prev().text();
        // 商品總價
        var total=i*price;
        // 現在商品的總價
        $(this).parent().next().text(total);
    }
    getTotal();
});
?
// 計算所有商品的總價
// function getTotal(){
//     // 總價錢
//     var sum=0;
//     var arr=$("tr:not(tr:first)").find("td:last");
//     for(var i=0;i<arr.length ; i++){
//        sum +=Number(arr[i].innerHTML) ;
//     }
//     $("b").text(sum);
// }
?
function getTotal(){
    // 總價錢
    var sum=0;
    $("tr:not(tr:first)").find("td:last").each(function(){
        sum +=Number($(this).text());
    });
    $("b").text(sum);
}

想了解更多，歡迎關注我的微信公眾號：Renda_Zhang

query 操作DOM元素(1)

.clone()

　　創建一個匹配的元素集合的深度拷貝。

　　.clone([withDataAndEvents])

　　　　withDataAndEvents (默認為false)

　　　　　　一個Boolean 表示是否會復制元素上的時間處理函數。

　　.clone([withDataAndEvents][,deepwithDataAndEvents])

　　　　withDataAndEvents (默認為false)

　　　　　　一個Boolean 表示是否會復制元素上的時間處理函數。

　　　　deepwithDataAndEvents

　　　　　　一個布爾值，指示是否對時間處理程序和克隆的元素的所有子元素的數據應該被復制。默認情況下它的值相匹配的第一個參數的值。

　　　　　　$(".hello").clone().appendTo(".goodbye")

　　　　　　效果： <div class="hello">Hello</div>

　　　　　　　　Goodbye

　　　　　　　　<div class="hello">Hello</div>

　　　　　　</div>

.wrap()

　　在集合中匹配的每個元素周圍包裹一個HTML 結構。

　　.wrap([wrappingElement])

　　　　wrappingElement 一個選擇器，元素，html字符 jq 對象指定的html結構環繞包裹的匹配元素。

.wrap(function)

　　　　function 一個回調函數，返回用于包裹匹配元素的HTML內容或對象。

　　　　　　<div class="inner">Hello</div>

　　　　　　<div class="inner">Goodbye</div>

</div>

$('.inner').wrap('<div class="new" />');

結果：

　　　　　　　　<div class="inner">Hello</div>

　　　　　　</div>

　　　　　　　　<div class="inner">Goodbye</div>

　　　　　　</div>

$('inner').wrap(function(){

return '<div class="'+$(this).text()+'"/>'

})

　　　　　　　　<div class="inner">Hello</div>

　　　　　　</div>

　　　　　　　　<div class="inner">Goodbye</div>

　　　　　　</div>

.wrapAll()

在集合中所有的匹配元素的外褒一個HTML結構。

.wrapAll(wrappingElement)

wrappingElement

一個選擇器，元素，html字符。

　　　　　　<div class="inner">Hello</div>

　　　　　　<div class="inner">Goodbye</div>

</div>

$('.inner').wrapAll('<div class="new" />');

　　　　　　　　　　<div class="inner">Hello</div>

　　　　　　　　　　<div class="inner">Goodbye</div>

　　　　　　　　</div>

.wrapAll(function)

function

一個回調函數。index 表示匹配元素在集合中的索引的位置。this 指向集合中的當前位置。

$("p").wrapAll($(".doublediv"));

在所有的"p"元素

.wraplnner()

在匹配元素里的內容外包一層結構。

.wraplnner(wrappingElement)

wrappingElement 用來包在匹配元素的內容外面的HTML片段選擇表達式，jquery對象 DOM 元素。

　　　　　　<div class="inner">Hello</div>

　　　　　　<div class="inner">Goodbye</div>

</div>

$('.inner').wrapInner('<div class="new" />');

　　　　　　　　　　<div class="new">Hello</div>

　　　　　　　　</div>

　　　　　　　　　　<div class="new">Goodbye</div>

　　　　　　　　</div>

.wraplnner(function(index))

function(index)

function 一個返回HTML結構的函數，用來包裹在匹配元素的外面 this 指匹配中的元素。

$("P").wrapInner(document.createElement("b"));

.append()

在每個匹配元素里面的末尾處插入參數內容。

.append(content[,content])

content DOM 元素 DOM 數組，HTML字符串 jquery 對象。

content 一個或多個DOM 元素，元素數組，HTML字符串。

<h2>Greetings</h2>

　　　　　　<div class="inner">Hello</div>

　　　　　　<div class="inner">Goodbye</div>

</div>

$('.inner').append('<p>Test</p>');

效果：

<h2>Greetings</h2>

　　　　　　　　　　Hello

　　　　　　　　</div>

　　　　　　　　　　Goodbye

　　　　　　　　</div>

.append(function(index,html))

function(index,html)

返回一個html 字符串，DOM 元素，對象函數。this 指向元素集合中的當前元素。

<p>I would like to say: </p>

$('p').append(document.createTextNode("Hello"))

效果：

<p>I would like to say: Hello</p>

.appendTo()

將匹配的元素插入到目標元素的最后面

.appendTo(target)

target 一個選擇符，元素，HTML 字符串，DOM 元素數組。

　　　　　　<div class="inner">Hello</div>

　　　　　　<div class="inner">Goodbye</div>

</div>

$('<p>Test</p>').appendTo('.inner');

　　　　　　　　Hello

　　　　　　</div>

　　　　　　　　Goodbye

　　　　　　</div>

.html()

獲取集合中第一個匹配元素的HTML 內容或設置每一個HTML內容。

.html()

這個方法不接收任何元素。

　　　　　　<div class="demo-box">Demonstration Box</div>

</div>

$('div.demo-container').html();

獲得到的結果

<div class="demo-box">Demonstration Box</div>

.html(htmlString)

htmlString 用來設置每一個匹配元素的HTML代碼

.html(function(index oldHTML))

用來返回設置HTML內容的一個函數

　　　　　　<div class="demo-box">Demonstration Box</div>

</div>

$('div.demo-container').html('<p>All new content. <em>You bet!</em></p>');

效果如下：

　　　　　　　　<p>All new content. <em>You bet!</em></p>

</div>

.prepend()

將參數內容插入到每個匹配元素的前面。（元素內容）

.prepend(content[,content])

DOM 元素，元素數組，HTML 字符串對象。

　　　　　　　　<div class="inner">Hello</div>

　　　　　　　　<div class="inner">Goodbye</div>

</div>

$('.inner').prepend('<p>Test</p>');

效果：

　　　　　　　　　　Hello

　　　　　　　　</div>

　　　　　　　　　　Goodbye

　　　　　　　　　　</div>

.prepend(function(index.html))

一個返回HTML字符串，DOM元素，jQuery對象的函數，該字符串用來插入到匹配元素的開始處

$("p").prepend(document.createTextNode("Hello "));

.prependTo()

將所有的元素插入到目標元素前面（元素內）。

.prependTo(target)

target 一個選擇器, DOM元素，元素數組，HTML字符串，或者jQuery對象，將被插入到匹配元素前的內容。

　　　　　　<div class="inner">Hello</div>

　　　　　　<div class="inner">Goodbye</div>

</div>

$('<p>Test</p>').prependTo('.inner');

效果：

　　　　　　　　Hello

　　　　　　</div>

　　　　　　　　Goodbye

　　　　　　</div>

.text()

得到匹配元素集合中每個元素的合并文本。包括他們的后代。

.text() 這個方法不接受任何參數。

　　　　<div class="demo-box">Demonstration Box</div>

　　　　<ul>

　　　　</ul>

　　</div>

　　$('div.demo-container').text()

　　效果如下：

　　　　Demonstration Box list item 1 list item 2

　　.text(textString)

　　　　設置匹配元素集合中每個元素的文本內容

　　.text(text)

　　　　用于設置匹配元素內容的文本。

　　.text( function(index, text) )

　　　　用來返回設置文本內容的一個函數。

　　$('div.demo-container').text('<p>This is a test.</p>');

　　.text() 方法不能使用在 input 元素上。輸入的文本需要使用 .val() 方法。

在線咨詢

上一篇：用Vue制作穿梭框
下一篇：華三防火墻IPS、AV、ACG特征庫授權Licens

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端面試題《JQuery》

.jQuery庫中的$()是什么？

2.網頁上有5個div元素，如何使用 jQuery來選擇它們？

3.$(this) 和 this 關鍵字在 jQuery 中有何不同？

4.使用CDN加載 jQuery庫的主要優勢是什么？

5.jQuery中的方法鏈是什么？使用方法鏈有什么好處？

6.如何將一個HTML元素添加到DOM樹中的？

7.說出jQuery中常見的幾種函數以及他們的含義是什么?

8.jQuery 能做什么？

9.jquery中的選擇器和CSS中的選擇器有區別嗎？

10.jQuery的特點都有什么？

ntroduction to jQuery

jQuery Function

jQuery Advantages

jQuery Usage

基本的語法介紹

jQuery 對象與 DOM 對象

選擇器

基本選擇器

層次選擇器

屬性選擇器

過濾選擇器

事件

鼠標事件

鍵盤事件

表單事件

鼠標懸停復合事件

連續點擊復合事件

事件的動態綁定

元素的隱藏和顯示

改變元素的寬和高（帶動畫效果）

改變元素的高（拉伸效果）

不改變元素的大小（淡入淡出效果）

鏈

DOM 和 CSS 的操作

屬性函數

樣式函數

類樣式函數

節點操作

遍歷節點

祖先元素

同輩元素

后代元素

元素的過濾

案例

手風琴特效

購物車結算

query 操作DOM元素(1)

您的項目需求