jQuery

什么是jQuery？

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

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檔案

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/498872.html

標籤：jQuery

上一篇：layui動態渲染上傳時在渲染外洗掉已選檔案取消上傳

下一篇：jQuery datatable 表頭表體生成滾動條

jQuery筆記