jQuery筆記

jQuery

什么是jQuery？

jQuery是一個實用的JavaScript函數庫，jQuery極大地簡化了JS對DOM的操作，封裝并實現的一系列常用的方法。

10年積累的網站建設、網站制作經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站制作后付款的網站建設流程，更有揭陽免費網站建設讓你可以放心的選擇與我們合作。

jQuery庫封裝了JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

其實除了jQuery，還有許許多多的開源好用的JavaScript庫，只不過jQuery較為流行，使用廣泛所以要著重了解和學習

jQuery能夠做什么？

快速獲取文檔元素

jQuery的選擇機制構建于Css的選擇器，它提供了快速查詢DOM文檔中元素的能力，而且大大強化了JavaScript中獲取頁面元素的方式。

提供漂亮的頁面動態效果

jQuery中內置了一系列的動畫效果，可以開發出非常漂亮的網頁，許多網站都使用jQuery的內置的效果，比如淡入淡出、元素移除等動態特效。

創建AJAX無刷新網頁

AJAX是異步的JavaScript和XML的簡稱，可以開發出非常靈敏無刷新的網頁，特別是開發服務器端網頁時，比如PHP網站，需要往返地與服務器通信，如果不使用AJAX，每次數據更新不得不重新刷新網頁，而使用AJAX特效后，可以對頁面進行局部刷新，提供動態的效果。

提供對JavaScript語言的增強

jQuery提供了對基本JavaScript結構的增強，比如元素迭代和數組處理等操作。

增強的事件處理

jQuery提供了各種頁面事件，它可以避免程序員在HTML中添加太多事件處理代碼，最重要的是，它的事件處理器消除了各種瀏覽器兼容性問題。

更改網頁內容

jQuery可以修改網頁中的內容，比如更改網頁的文本、插入或者翻轉網頁圖像，jQuery簡化了原本使用JavaScript代碼需要處理的方式。

jQuery如何使用？

上文提到jQuery是一個實用的JavaScript函數庫，那么引入jQuery就和引入一個JavaScript文件的方式相同，通常是外部引入

jQuery文件可以從jQuery的官網下載或者其他第三方網站下載到不同的版本，引入到HTML頁面后即可使用

jQuery的基本設計和主要用法，就是"選擇某個網頁元素，然后對其進行某種操作"

jQuery語法

jQuery 語法是通過選取 HTML 元素，并對選取的元素執行某些操作

基礎語法： $(selector).action()

jQuery詳解

jQuery入口函數

等著DOM結構渲染完畢即可執行內部代碼，不必等到所有外部

資源加載完成，jQuery幫我們完成了封裝。

第一種方法

$(document).ready(function(){
    ...//此處是頁面DOM加載完成的入口
});

第二種方法

$(function(){
   ...//此處是頁面DOM加載完成的入口
});

jQuery的頂級對象

$是jQuery的另外一個名稱

 $(function(){
     alert(111)
  })//alert(111)
 
jQuery(function(){
     alert(111)
 })

$是jQuery中的頂級對象（可以把元素包裝成我們的jQuery對象）
```
 $('div').hide();
```

jQuery對象和DOM對象

DOM對象：用原生js獲取過來的對象就是DOM對象
```
 var myDiv=document.querySelector('div');
```
jQuery對象：用jquery方式獲取過來的對象是jQuery對象。本質：通過$符把元素進行了封裝
```
 $('div');
```
jQuery對象只能使用jQuery方法，DOM對象則使用原生的JavaScript方法和屬性

兩者之間可以相互轉換
- DOM對象轉換為jQuery對象
  - 直接獲取div，得到的就是jQuery對象
```
 $('div');
```
  - 已經使用原生的js獲取過來DOM
```
var myDiv=document.querySelector('div');
$(myDiv);
```
- jQuery對象轉換為DOM對象
```
$('div')[0].function(); 
$('div').get(0).function();
```

jQuery選擇器

$("選擇器") //里面選擇器直接寫CSS選擇器即可，要加引號

名稱	用法	描述
ID選擇器	$("#id")	獲取指定id的元素
全選選擇器	$("*")	匹配所有的元素
類選擇器	$(".class")	獲取同一類class的元素
標簽選擇器	$("div")	獲取同一標簽的所有元素
并集選擇器	$("div,p,li")	獲取多個元素
交集選擇器	$("li,current")	交集元素
子代選擇器	$("ul>li")	使用>號，獲取親兒子層級的元素；注意，并不會獲取孫子層級的元素
后代選擇器	$(“ul li”)	使用空格，選擇后代選擇器，獲取ul下的所有li元素，包括孫子等。

jQuery隱式迭代

隱式迭代就是把匹配的所有元素內部進行遍歷循環，給每一個元素添加css這個方法

給匹配到的所有元素進行循環遍歷，執行相應的方法，而不是我們再進行循環，簡化我們的操作，方便我們調用。

 <head>
 <style>
        div{
            width: 300px;
            height: 300px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
      $("div").css("background","pink");
    </script>
</body>

jQuery篩選選擇器

語法	用法	描述
:first	$("li:first")	獲取第一個li元素
:last	$("li:last")	獲取最后一個選擇器
:eq(index)	$(li:eq(2))	獲取到的li元素中，選擇索引號為2的元素，索引號index從0開始
:odd	$("li:odd")	獲取到的li元素中，選擇索引號為奇數的元素
:even	$("li:even")	獲取到的li元素中，選擇索引號為偶數的元素

jQuery篩選方法

語法	用法	說明
parent()	$("li").parent();	查找父級，最近一級
parents()	$("li").parents("選擇器");	查找指定祖先父級
children(selector)	$("ul").children("li")	相當于$("ul>li"),最近一級（親兒子）
find(selector)	$("ul").find("li")	相當于$("ul li"),后代選擇器
siblings(selector)	$(".first").siblings("li")	查找兄弟節點，不包括自己本身
nextAll([expr])	$(".first").nextAll()	查找當前元素之后所有的同輩元素
prevAll([expr])	$(".last").prevAll()	查找當前元素之前的所有同輩元素
hasClass(class)	$('div').hasClass("protected")	檢查當前的元素是否含有某個特定的類
eq(index)	$("li").eq(2)	相當于$("li:eq(2)"),index從0開始

$(".son").parent();
$('.nav').children("p").css("color","red");
$('.nav').find("p").css("color","red"); 
$(".content div").eq(index).siblings().hide();
$(".content div").eq(index).show();

jQuery樣式操作

操作css方法

jQuery可以使用css方法來修改簡單元素樣式；也可以操作類，修改多個樣式
- 參數只寫屬性名，則返回屬性值
```
$("div").css("width")
```
- 參數是屬性名，屬性值，逗號分離，是設置一組樣式，屬性必須加引號，值如果是數字可以不用跟單位和引號
```
$("div").css("width","500px")
```
- 參數可以是對象形式，方便設置多組樣式。屬性名和屬性值用冒號隔開，屬性可以不用加引號
```
 $("div").css({
        "width":"500",
        "height":"1000"
      })
```

設置類樣式方法

添加類

$("div").click(function(){
   $(this).addClass("current");
 })

刪除類

$("div").click(function(){
  $(this).removeClass("current");
})

切換類

 $("div").click(function(){
   $(this).toggleClass("current");
})

類操作與className操作

原生JS中className會覆蓋元素原先里面的類名。

jQuery里面類操作只是對指定類進行操作，不影響原先的類名

jQuery效果

顯示隱藏
- show()
```
show([speed,[easing],[fn]])
```
  顯示參數
  
  (1)參數可以省略，無動畫直接顯示
  
  (2)speed:三種預定速度之一的字符串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，默認是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
$("button").eq(0).click(function(){
 $("div").show(1000,function(){
      alert(12)
   })
  });
```
- hide()
```
hide([speed,[easing],[fn]])
```
  隱藏參數
  
  (1)參數可以省略，無動畫直接顯示
  
  (2)speed:三種預定速度之一的字符串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，默認是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
$("button").eq(1).click(function(){
                  $("div").hide(1000,function(){
                   alert(1)
                  })
                });
```
- toggle()
```
toggle([speed,[easing],[fn]])
```
  切換參數
  
  (1)參數可以省略，無動畫直接顯示
  
  (2)speed:三種預定速度之一的字符串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，默認是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
 $("button").eq(2).click(function(){
                  $("div").toggle(1000,function(){
                    alert(1)
                  });
```
滑動
- slideDown()
```
slideDown([speed,[easing],[fn]])
```
  (1)參數可以省略，無動畫直接顯示
  
  (2)speed:三種預定速度之一的字符串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，默認是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
$("div").slideDown(1000);
```
- slideUp()
```
slideUp([speed,[easing],[fn]])
```
  (1)參數可以省略，無動畫直接顯示
  
  (2)speed:三種預定速度之一的字符串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，默認是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
$("div").slideUp(1000);
```
- slideToggle()
```
slideToggle([speed,[easing],[fn]])
```
  1)參數可以省略，無動畫直接顯示
  
  (2)speed:三種預定速度之一的字符串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，默認是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
 $("div").slideToggle(1000);
```
- 事件切換（就是鼠標經過和離開的復合寫法）
```
hover([over],out)
```
  (1)over：鼠標移到元素上要觸發的函數（相當于mouseenter）
  
  (2)out：鼠標移出元素要觸發的函數（相當于mouseleave）
```
 $("button").eq(2).hover(function(){
                  $("div").slideUp(1000);
                },function(){
                  $("div").slideDown(1000);
                });
//相當于
 $("button").eq(2).hover(function(){
                 $("div").slideToggle(1000);
         });
```
動畫隊列及其停止排隊方法
- 動畫或效果隊列
  
  動畫或者效果一旦觸發就會執行，如果多次觸發，就會造成多個動畫或者效果隊列
- 停止排隊
```
stop()
```
  (1)stop()方法用于停止動畫或效果
  
  (2)注意：stop()寫到動畫或者效果前面，相當于停止結束上一次的動畫
```
$("div").stop().slideToggle(1000); 
```
淡入淡出
- fadeIn()
```
fadeIn([speed,[easing],[fn]])
```
  1)參數可以省略，無動畫直接顯示
  
  (2)speed:三種預定速度之一的字符串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，默認是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
$("div").stop().fadeIn(1000);
```
- fadeOut()
```
fadeOut([speed,[easing],[fn]])
```
  1)參數可以省略，無動畫直接顯示
  
  (2)speed:三種預定速度之一的字符串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，默認是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
$("div").stop().fadeOut(1000);
```
- fadeToggle()
```
fadeToggle([speed,[easing],[fn]])
```
  1)參數可以省略，無動畫直接顯示
  
  (2)speed:三種預定速度之一的字符串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，默認是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
$("div").stop().fadeToggle(1000);
```
- fadeTo()
```
fadeTo([[speed],opacity,[easing],[fn]])
```
  (1)opacity透明度必須寫，取值0-1之間
  
  (2)speed:三種預定速度之一的字符串（“show”，“normal”，or “fast”）或表示動畫時長的毫秒數值（如：1000）。必須寫
  
  (3)easing:(Optional)用來指定切換效果，默認是“swing”，可用參數“linear”。
```
$("div").stop().fadeTo(1000,0.5);
```
自定義動畫
- animate()
```
animate(params,[speed],[easing],[fn])
```
  參數
  
  (1)params:想要更改的樣式屬性，以對像形式傳遞，必須寫。屬性名可以不帶引號，如果是復合屬性采用駝峰命名法borderLeft。其余參數都可以省略
  
  (2)speed:三種預定速度之一的字符串("slow","normal",or"fast")或表示動畫時長的毫秒數值
  
  (3)easing:(Optional)用來指定切換效果，默認是“swing”，可用參數“linear”
  
  (4)fn:回調函數,在動畫完成時執行的函數，每個元素執行一次
```
//手風琴效果
$(function(){
  $(".king li").mouseenter(function(){
  $(this).stop().animate({
  width:200
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
  $(this).siblings("li").stop().animate({
  width:100
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
 })
 })
```

jQuery屬性操作

設置或獲取元素固有屬性值

元素固有屬性就是元素自帶的屬性，比如a元素里面的href，比如input元素里面的type
- 獲取屬性方法
```
prop("屬性")
```
- 設置屬性語法
```
prop("屬性","屬性值")
```
```
$("input").prop("checked")
$("a").prop("title","wwww");
```
元素的自定義屬性

用戶自己給元素添加的屬性，我們稱之為自定義屬性。比如給div添加index=“1”
- 獲取屬性語法
```
attr("屬性") //類似原生getAttribute()
```
- 設置屬性語法
```
attr("屬性","屬性值") //類似原生setAttribute()
```
  該方法也可以獲取H5自定義屬性
```
$("div").attr("index")
$("div").attr("index","34")
```
數據緩存data()

data()方法可以在指定的元素上存取數據，并不會修改DOM元素結構。一旦頁面刷新，之氣那存放的數據都將會被刪除
- 附加數據語法
```
data("name","value") //向被選元素附加數據
```
- 獲取數據語法
```
data("name") //向被選元素獲取數據
```
  同時，還可以讀取HTML5自定義屬性data-index，得到的是數字型
```
 $("span").data("uname","andy");
 $("span").data("uname")
```

jQuery內容文本值

普通元素內容html()(相當于原生innerHTML)

html() //獲取元素內容
html("內容") //設置元素內容
$("div").html();//獲取元素內容
$("div").html("123");//設置元素內容

普通元素文本內容text()（相當于原生innerText）

text()  //獲取元素內容
text("內容") //設置元素內容
$("div").text(); //獲取元素內容
$("div").text("123"); //設置元素內容

設置表單值 val()

val() //獲取表單值
val("內容") //設置表單內容
$("input").val(); //獲取表單值
$("input").val("123"); //設置表單內容

tofixed(index)(保留幾位小數方法)

(p*n).toFixed(2)//保留兩位小數

jQuery尺寸、位置操作

jQuery尺寸

語法	用法
width()/height()	取得匹配元素寬度和高度值只算width/height
innerWidth()/innerHeight()	取得匹配元素寬度和高度值包含padding
outerWidth()/outerHeight()	取得匹配元素寬度和高度值包含padding、border
outerWidth(true)/outerHeight(true)	取得匹配元素寬度和高度值包含padding、borde、margin

  div{
     width: 200px;
     height: 200px;
     background-color: aqua;
     padding: 10px;
     border: 15px solid red;
     margin: 20px;
   } 
	  $("div").width(500)
	  console.log($("div").width()); //500
      console.log($("div").innerWidth());//520
      console.log($("div").outerWidth());//550
      console.log($("div").outerWidth(true));//590

以上參數為空，則是獲取相應值，返回的是數字型
如果參數為數字，則是修改相應值。
參數可以不必寫單位

jQuery位置

位置主要有三個：offset()、position、scrollTop()/scrollLeft()
- offset()
  
  offset()設置或返回被選元素相對于文檔的偏移坐標，跟父級沒有關系
  
  該方法有2個屬性left、top。offset().top用于獲取距離文檔頂部的距離，offset().left用于獲取距離文檔左側的距離。
  
  可以設置元素的偏移：offset({top:10,left:30})
- position()
  
  position方法用于返回被選元素相對于帶有定位的父級偏移坐標，如果父級都沒有定位，則以文檔為準。
- scrollTop()/scrollLeft()
  
  scrollTop()方法設置或返回被選元素被卷去的頭部或左側。

jQuery元素操作

遍歷元素

JQuery隱式迭代對同一類元素做出了同樣的操作。如果想要給同一類元素做不同操作，就需要用到遍歷

語法1
```
$("div").each(function(index,domEle){xxx;})
```
- each()方法遍歷匹配的每一個元素。主要用DOM處理。each每一個
- 里面的回調函數有2個參數：index是每個元素的索引號，demEle是每個DOM元素對象，不是jQuery對象
- 想用jQuery方法，需要給這個dom元素轉換為jquery對象
```
var arr=["red","blue","pink"]
 $(function(){
 $("div").each(function(index,domEle){
 $(domEle).css("color",arr[index])
 })
})
```
  語法2
```
$.each(object,function(index,element){xxx;})
```
  - $each()方法可用于遍歷任何對象。主要用于數據處理，比如數組，對象
  - 里面的函數有兩個參數：index是每個元素的索引號，element遍歷內容

創建元素

$("<li></li>")
$("<li>我是后來創建的li</li>")

動態的創建了一個

添加元素

內部添加

element.append("內容")
$("ul").append(li)//放到內容的最后面
$("ul").prepend(li)//放到內容的最前面

把內容放入匹配元素內部的后面，類似于原生appendChild

外部添加

element.after("內容") //把內容放入目標元素后面
$(".test").after(div) //把內容放入目標元素后面

element.before("內容") //把內容放入目標元素前面
$(".test").before(div) //把內容放入目標元素前面

刪除元素

element.remove() //刪除匹配的元素（本身）
 $("ul").remove()
element.empty() //可以刪除匹配的元素里面的子節點 孩子
 $("ul").empty();
element.html() //可以刪除匹配元素里面的子節點 孩子
$("ul").html();

$(".p-action a").click(function(){
   $(this).parents(".cart").remove();
 })

jQuery事件

事件注冊
- 單個事件注冊
```
element.事件(function(){})
$("div").click(function(){事件處理程序})
```
  其他事件和原生基本一致
  
  比如，mouseover、mouseout、blur、focus等

事件處理

on()綁定事件

on()方法在匹配元素上綁定一個或多個事件的事件處理函數

element.on(events,[selector],fn)

1.events:一個或多個用空格分隔的事件類型，如"click"或“keydown”、

2.selector：元素的子元素選擇器

3.fn:回調函數即綁定在元素身上的偵聽函數

  //事件處理不同的
$("div").on({
   click:function(){
   $("div").css("background","black")
   },
   mouseover:function(){
   $("div").css("background","pink")
    }
 })
//事件處理相同的
$("div").on("mouseover mouseout",function(){
 	$(this).toggleClass("togg");
  })

on()方法還可以進行委派操作，事件委派的操作的定義是，把原來加給子元素身上的事件綁定在父元素身上，就是把事件委派給父元素

$('ul').on('click','li',function(){
    alert('hello world!');
})

動態創建的元素，click()沒有辦法綁定事件，on()可以給動態生成的元素綁定事件

 $("ul").on("click","li",function(){
    alert(11)
 })
 var li=$("<li>我是后來的</li>")
 $("ul").append(li);

如果有的事件只想觸發一次，可以使用one()來綁定事件

$('ul').one('click','li',function(){
    alert('hello world!');
})

自動觸發事件

有些事件希望自動觸發，比如輪播圖自動播放功能跟點擊右側按鈕一致。可以利用定時器自動觸發右側按鈕點擊事件，不必鼠標點擊觸發

第一種

$("div").click();//第一種簡寫形式 元素.事件() 會觸發元素的默認行為

第二種

$("div").trigger("click");//第二種自動觸發方式 會觸發元素的默認行為

第三種

 $("div").triggerHandler("click");//第三種自動觸發方式  不會觸發元素的默認行為

事件處理解綁

事件解綁off()

$("div").off() //解除了div身上的所有事件
$("div").off("click"); //解除了div身上的點擊事件
$("ul").off("click","li") //解除事件委托

事件對象

事件被觸發，就會有事件對象的產生
```
element.on(events,[selector],function(event){})
```
阻止默認行為：event.preventDefault()或者return false

阻止冒泡：event.stopPropagation()

jQuery拷貝對象

如果想要把某個對象拷貝(合并)給另外一個對象使用，此時可以用$.extend()方法

語法：

$.extend([deep],target,object1,[objectN])

deep:如果設true為深拷貝，默認為false淺拷貝
target:要拷貝的對象
object1:待拷貝到第一個對象的對象
objectN:待拷貝到第N個對象的對象
淺拷貝是把被拷貝的對象復雜數據類型中的地址拷貝給目標對象，修改目標對象會影響被拷貝對象
深拷貝，前面加true，完全克隆（拷貝的對象，而不是地址），修改目標對象不會影響被拷貝對象。

var targetObj={
       id:1
};
	var obj={
        id:1,
	    name:"andy"
     };
  $.extend(targetObj,obj);//淺拷貝
  $.extend(true,targetObj,obj);//深拷貝

jQuery多庫共存

jQuery使用$作為表示符，隨著jQuery的流行，其他js庫也會用這$作為標識符，這樣一起使用會引起沖突

需要一個解決方案，讓jQuery和其他的js庫不存在沖突，可以同時存在，這就叫多庫共存

解決方案：

把里面的$符號統一改為jQuery。比如jQuery("div")

jQuery變量規定新的名稱：$noConflict() var xx=$.noConflict()

 <div></div>
              <script>
                $(function(){
               function $(ele){
                 return document.querySelector(ele);
               }
               console.log(div);//error
               jQuery.each();//right
               var suibian=jQuery.noConflict();
               console.log(suibian("span"));//right
                })
              </script>

jQuery插件

jQuery功能比較有限，想要更復雜的特效效果，可以借助jQuery插件完成

jQuery插件庫 https://www.jq22.com/
jQuery之家 http://www.htmleaf.com/

jQuery插件使用步驟

引入相關文件。（jQuery文件和插件文件）
復制相關html、css、js（調用插件）

常用插件：

瀑布流
圖片懶加載（圖片使用延遲加載在可提高網頁下載速度。也能幫助減輕服務器負載，當我們頁面滑動到可視區域，再顯示圖片）
全屏滾動

中文翻譯網站：http://www.dowebok.com/demo/2014/77/

Bootstrap JS 插件：

bootstrap框架也是依賴于jQuery開發的，因此里面的js插件使用，也必須引入jQuery文件

分享文章：jQuery筆記
URL鏈接：http://m.kartarina.com/article40/dsoghho.html

成都網站建設公司_創新互聯，為您提供網站營銷、商城網站、外貿建站、微信公眾號、網站排名、網站策劃

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容