jQuery操作

jQuery 是一個 JavaScript 庫。
jQuery 極大地簡化了 JavaScript 編程。

下載 jQuery

共有兩個版本的 jQuery 可供下載：一份是精簡過的，另一份是未壓縮的（供調試或閱讀）。

這兩個版本都可從 jQuery.com 下載

jQuery 語法

jQuery 語法實例

  • $(this).hide()
    演示 jQuery hide() 函數，隱藏當前的 HTML 元素。
  • $("#test").hide()
    演示 jQuery hide() 函數，隱藏 id="test" 的元素。
  • $("p").hide()
    演示 jQuery hide() 函數，隱藏所有 <p> 元素。
  • $(".test").hide()
    演示 jQuery hide() 函數，隱藏所有 class="test" 的元素。

入口操作:

$(function(){

})

$(document).ready(function(){

})

相當于js的onlaod = functino(){}

在線js
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

(1) jQuery 元素選擇器

jQuery 使用 CSS 選擇器來選取 HTML 元素。

$("p") 選取 <p> 元素。

$("p.intro") 選取所有 class="intro" 的 <p> 元素。

$("p#demo") 選取所有 id="demo" 的 <p> 元素。

$('ul>li:nth-child(2)')

$('li~p')

$('li+p')

$('ul li')

(2) jQuery 屬性選擇器

jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。

$("[href]") 選取所有帶有 href 屬性的元素。

$("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。

$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。

("[href='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。

(3) jQuery CSS 選擇器

jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性。

下面的例子把所有 p 元素的背景顏色更改為紅色：

$("p").css("background-color","red");

jQuery 效果

一 jQuery hide() 和 show() 顯示隱藏
語法：
$(selector).hide(speed,callback);

$(selector).show(speed,callback);
  • 可選的 speed 參數規(guī)定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
  • 可選的 callback 參數是隱藏或顯示完成后所執(zhí)行的函數名稱。
  • 下面的例子演示了帶有 speed 參數的 hide() 方法：
通過 jQuery，您可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素
$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});
實例
$("button").click(function(){
  $("p").hide(1000);
});

jQuery toggle()

通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。

顯示被隱藏的元素，并隱藏已顯示的元素：

實例
$("button").click(function(){
  $("p").toggle();
});
語法：
$(selector).toggle(speed,callback);
  • 可選的 speed 參數規(guī)定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
  • 可選的 callback 參數是 toggle() 方法完成后所執(zhí)行的函數名稱。

二 jQuery 效果 - 淡入淡出

一 jQuery Fading 方法
通過 jQuery，您可以實現元素的淡入淡出效果。

jQuery 擁有下面四種 fade 方法：

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()
fadeIn() 方法

jQuery fadeIn() 用于淡入已隱藏的元素。

語法：
$(selector).fadeIn(speed,callback);
  • 可選的 speed 參數規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
  • 可選的 callback 參數是 fading 完成后所執(zhí)行的函數名稱

下面的例子演示了帶有不同參數的 fadeIn() 方法：

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可見元素。

語法：
$(selector).fadeOut(speed,callback);
  • 可選的 speed 參數規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
  • 可選的 callback 參數是 fading 完成后所執(zhí)行的函數名稱。

下面的例子演示了帶有不同參數的 fadeOut() 方法：

實例
$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。

如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。

如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。

語法：
$(selector).fadeToggle(speed,callback);

可選的 speed 參數規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是 fading 完成后所執(zhí)行的函數名稱。

下面的例子演示了帶有不同參數的 fadeToggle() 方法：

實例
$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

jQuery fadeTo() 方法

jQuery fadeTo() 方法允許漸變?yōu)榻o定的不透明度（值介于 0 與 1 之間）。

語法：
$(selector).fadeTo(speed,opacity,callback);

必需的 speed 參數規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置為給定的不透明度（值介于 0 與 1 之間）。

可選的 callback 參數是該函數完成后所執(zhí)行的函數名稱。

下面的例子演示了帶有不同參數的 fadeTo() 方法：

實例
$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

三 jQuery 效果 - 滑動

jQuery 滑動方法可使元素上下滑動。

jQuery 滑動方法

通過 jQuery，您可以在元素上創(chuàng)建滑動效果。

jQuery 擁有以下滑動方法：

  • slideDown()
  • slideUp()
  • slideToggle()

jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑動元素。

語法：
$(selector).slideDown(speed,callback);

可選的 speed 參數規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是滑動完成后所執(zhí)行的函數名稱。

下面的例子演示了 slideDown() 方法：

實例
$("#flip").click(function(){
  $("#panel").slideDown();
});

jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑動元素。

語法：
$(selector).slideUp(speed,callback);

可選的 speed 參數規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是滑動完成后所執(zhí)行的函數名稱。

下面的例子演示了 slideUp() 方法：

實例
$("#flip").click(function(){
  $("#panel").slideUp();
});

jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。

如果元素向下滑動，則 slideToggle() 可向上滑動它們。

如果元素向上滑動，則 slideToggle() 可向下滑動它們。

$(selector).slideToggle(speed,callback);

可選的 speed 參數規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是滑動完成后所執(zhí)行的函數名稱。

下面的例子演示了 slideToggle() 方法：

實例
$("#flip").click(function(){
  $("#panel").slideToggle();
});

四 jQuery 效果 - 動畫

jQuery 動畫 - animate() 方法

jQuery animate() 方法用于創(chuàng)建自定義動畫。

語法：

$(selector).animate({params},speed,callback);

必需的 params 參數定義形成動畫的 CSS 屬性。

可選的 speed 參數規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。

可選的 callback 參數是動畫完成后所執(zhí)行的函數名稱。

下面的例子演示 animate() 方法的簡單應用；它把 <div> 元素移動到右邊，直到 left 屬性等于 250 像素為止：

實例
$("button").click(function(){
  $("div").animate({left:'250px'});
});

jQuery animate() [??n??met] - 操作多個屬性

請注意，生成動畫的過程中可同時使用多個屬性：

實例
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});
提示：可以用 animate() 方法來操作所有 CSS 屬性嗎？

是的，幾乎可以！不過，需要記住一件重要的事情：當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right

默認情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。

jQuery animate() - 使用相對值

也可以定義相對值（該值相對于元素的當前值）。需要在值的前面加上 += 或 -=：

實例
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

屬性值設置為'toggle'

   <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({
                    width:'toggle',
                    height:'toggle'
                });
            });
        });
    </script>
</head>
<body>
<button>開始動畫</button>
<p>默認情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

jQuery animate() - 使用隊列功能

默認地，jQuery 提供針對動畫的隊列功能。

這意味著如果您在彼此之后編寫多個 animate() 調用，jQuery 會創(chuàng)建包含這些方法調用的“內部”隊列。然后逐一運行這些 animate 調用。

實例 1

隱藏，如果您希望在彼此之后執(zhí)行不同的動畫，那么我們要利用隊列功能：

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});
<button>開始動畫</button>
<p>默認情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
實例 2

下面的例子把 <div> 元素移動到右邊，然后增加文本的字號：

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});
<button>開始動畫</button>
<p>默認情況下，所有 HTML 元素的位置都是靜態(tài)的，并且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

jQuery stop() 方法

jQuery stop() 方法用于停止動畫或效果，在它們完成之前。

stop() 方法適用于所有 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。

語法
$(selector).stop(stopAll,goToEnd);

可選的 stopAll 參數規(guī)定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向后執(zhí)行。

可選的 goToEnd 參數規(guī)定是否立即完成當前動畫。默認是 false。

因此，默認地，stop() 會清除在被選元素上指定的當前動畫。

下面的例子演示 stop() 方法，不帶參數：

實例
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});

<style type="text/css"> 
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="stop">停止滑動</button>
<div id="flip">點擊這里，向下滑動面板</div>
<div id="panel">Hello world!</div>

jQuery HTML

一 jQuery - 獲得內容和屬性

獲得內容 - text()、html() 以及 val()

三個簡單實用的用于 DOM 操作的 jQuery 方法：

  • text() - 設置或返回所選元素的文本內容
  • html() - 設置或返回所選元素的內容（包括 HTML 標記 當內容存在標簽時才會進行返回）
  • val() - 設置或返回表單字段的值

下面的例子演示如何通過 jQuery text() 和 html() 方法來獲得內容：

實例
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>
<body>
<p id="test">這是段落中的<b>粗體</b>文本。</p>
<button id="btn1">顯示文本</button>
<button id="btn2">顯示 HTML</button>
</body>

下面的例子演示如何通過 jQuery val() 方法獲得輸入字段的值：

實例
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});
</script>
</head>

<body>
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button>顯示值</button>

獲取屬性 - attr()

jQuery attr() 方法用于獲取屬性值。

下面的例子演示如何獲得鏈接中 href 屬性的值：

實例
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#w3s").attr("href"));
  });
});
</script>
</head>
<body>
<p><a  id="w3s">W3School.com.cn</a></p>
<button>顯示 href 值</button>

二 jQuery - 設置內容和屬性

設置內容 - text()、html() 以及 val()

我們將使用前一章中的三個相同的方法來設置內容：

  • text() - 設置或返回所選元素的文本內容
  • html() - 設置或返回所選元素的內容（包括 HTML 標記）
  • val() - 設置或返回表單字段的值

下面的例子演示如何通過 text()、html() 以及 val() 方法來設置內容：

實例
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
  });
});
</script>
</head>
<body>
<p id="test1">這是段落。</p>
<p id="test2">這是另一個段落。</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">設置文本</button>
<button id="btn2">設置 HTML</button>
<button id="btn3">設置值</button>

設置屬性 - attr()

jQuery attr() 方法也用于設置/改變屬性值。

下面的例子演示如何改變（設置）鏈接中 href 屬性的值：

實例
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#w3s").attr("href","http://www.baidu.com");
  });
});
</script>
</head>

<body>
<p><a href="http://http://www.xialigang.com"" id="w3s">http://www.xialigang.com</a></p>
<button>改變 href 值</button>
<p>請把鼠標指針移動到鏈接上，或者點擊該鏈接，來查看已經改變的 href 值。</p>
</body>

attr() 方法也允許您同時設置多個屬性。

下面的例子演示如何同時設置 href 和 title 屬性：

實例
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#w3s").attr({
      "href" : "http://www.baidu.com",
      "title" : "title"
    });
  });
});
</script>
</head>
<body>
<p><a  id="w3s">W3School.com.cn</a></p>
<button>改變 href 和 title 值</button>
<p>請把鼠標指針移動到鏈接上，或者點擊該鏈接，來查看已經改變的 href 值和已經設置的 title 值。</p>
</body>

三 jQuery - 添加元素 以及獲取動態(tài)添加元素的節(jié)點

添加新的 HTML 內容

用于添加新內容的四個 jQuery 方法：

  • append() - 在被選元素的結尾插入內容
  • prepend() - 在被選元素的開頭插入內容
  • after() - 在被選元素之后插入內容
  • before() - 在被選元素之前插入內容

一 jQuery append() 方法

jQuery append() 方法在被選元素的結尾插入內容。

實例
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表項</button>
</body>

jQuery prepend() 方法

jQuery prepend() 方法在被選元素的開頭插入內容。

實例
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").prepend("<b>Prepended text</b>");
  });
  $("#btn2").click(function(){
    $("ol").prepend("<li>Prepended item</li>");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表項</button>
</body>

jQuery after() 和 before() 方法

jQuery after() 方法在被選元素之后插入內容。 最多只能添加3個參數值

jQuery before() 方法在被選元素之前插入內容。

實例
$("img").after("Some","text","after");
$("img").before("Some","text"," before");
例子
function afterText()
{
var txt1="<b>I </b>";                    // 以 HTML 創(chuàng)建元素
var txt2=$("<i></i>").text("love ");     // 通過 jQuery 創(chuàng)建元素
var txt3=document.createElement("big");  // 通過 DOM 創(chuàng)建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3,text1);          // 在 img 之后插入新元素
}

<img src="/i/eg_w3school.gif" alt="W3School Logo" />
<br><br>
<button onclick="afterText()">在圖片后面添加文本</button>

jQuery如何獲取動態(tài)添加的元素

一、問題描述

用jQuery的append()方法動態(tài)添加了一段html代碼之后，發(fā)現在為新添加的元素綁定click事件時無法獲取該新元素。

二、解決方法

live()的官方定義和用法:

live() 方法為被選元素附加一個或多個事件處理程序，并規(guī)定當這些事件發(fā)生時運行的函數。通過 live() 方法附加的事件處理程序適用于匹配選擇器的當前及未來的元素（比如由腳本創(chuàng)建的新元素）。

image

live()的詳細使用方法可以查看jQuery live()

live()和bind()的區(qū)別就是live不僅可以給頁面中現有的元素綁定事件，還可以給將來動態(tài)添加進來的元素綁定時間。

于是我用live()替換了bind(),但報出了新錯誤：TypeError: $(...).live is not a function

經過查詢以后發(fā)現，原來是jQuery 1.9及其以上已經無法使用live（），可以用on()方法代替live().

on()的官方定義和用法:

on() 方法在被選元素及子元素上添加一個或多個事件處理程序。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。

注意：使用 on() 方法添加的事件處理程序適用于當前及未來的元素（比如由腳本創(chuàng)建的新元素）。

image

on()的詳細使用方法可以查看jQuery on()

四 jQuery - 刪除元素

刪除元素/內容

如需刪除元素和內容，一般可使用以下兩個 jQuery 方法：

  • remove() - 刪除被選元素（及其子元素）
  • empty() - 從被選元素中刪除子元素

jQuery remove() 方法

jQuery remove() 方法刪除被選元素及其子元素。

實例
$("#div1").remove()
jQuery empty() 方法

jQuery empty() 方法刪除被選元素的子元素（清空）。

實例

$("#div1").empty();

過濾被刪除的元素

jQuery remove() 方法也可接受一個參數，允許您對被刪元素進行過濾。

該參數可以是任何 jQuery 選擇器的語法。

下面的例子刪除 class="italic" 的所有 <p> 元素：

實例
$("p").remove(".italic");

五 jQuery - 獲取并設置 CSS 類

jQuery 操作 CSS

jQuery 擁有若干進行 CSS 操作的方法:

  • addClass() - 向被選元素添加一個或多個類
  • removeClass() - 從被選元素刪除一個或多個類
  • toggleClass() - 對被選元素進行添加/刪除類的切換操作
  • css() - 設置或返回樣式屬性

jQuery addClass() 方法

下面的例子展示如何向不同的元素添加 class 屬性。當然，在添加類時，也可以選取多個元素：

實例
$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});
也可以在 addClass() 方法中添加多個類：
實例
$("button").click(function(){
  $("#div1").addClass("important blue");
});

jQuery removeClass() 方法

下面的例子演示如何不同的元素中刪除指定的 class 屬性：

實例
$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

jQuery toggleClass() 方法

下面的例子將展示如何使用 jQuery toggleClass() 方法。該方法對被選元素進行添加/刪除類的切換操作：

實例
$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

六 jQuery - css() 方法

jQuery css() 方法

css() 方法設置或返回被選元素的一個或多個樣式屬性。

返回 CSS 屬性

如需返回指定的 CSS 屬性的值，請使用如下語法：

css("propertyname");

下面的例子將返回首個匹配元素的 background-color 值：

實例
$("p").css("background-color");

設置 CSS 屬性

如需設置指定的 CSS 屬性，請使用如下語法：

css("propertyname","value");

下面的例子將為所有匹配元素設置 background-color 值：

實例
$("p").css("background-color","yellow");

設置多個 CSS 屬性

如需設置多個 CSS 屬性，請使用如下語法：

css({"propertyname":"value","propertyname":"value",...});

下面的例子將為所有匹配元素設置 background-color 和 font-size：

實例
$("p").css({"background-color":"yellow","font-size":"200%"});
IMG_2158.jpg
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 通過jQuery，您可以選?。ú樵?，query）HTML元素，并對它們執(zhí)行“操作”（actions）。 jQuer...
    枇杷樹8824閱讀 720評論 0贊 3
  • 這是16年5月份編輯的一份比較雜亂適合自己觀看的學習記錄文檔，今天18年5月份再次想寫文章，發(fā)現簡書還為我保存起的...
    Jenaral閱讀 3,142評論 2贊 9
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標準。 注意：講述HT...
    kismetajun閱讀 28,804評論 1贊 45
  • 概要 64學時 3.5學分 章節(jié)安排 電子商務網站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,846評論 0贊 3
  • 做噩夢了，夢見自己被怪獸追，保護我的人還是你。就在你抱住我的那一刻，醒了。 搞不懂自己怎么想的，更搞不...
    寂靜里安然閱讀 175評論 0贊 0

友情鏈接更多精彩內容