寫得少做得多——jQuery
阿新 • • 發佈：2020-12-26
<!--
總結1：
1、初識
jQuery是一個js檔案，下載後引用即可使用。
jQuery壓縮包，有兩個檔案，壓縮與未壓縮的。未壓縮在寫程式碼時用的，當釋出時用壓縮的js檔案。
jQuery的頂級物件：
我們知道DOM的頂級物件是document,BOM的頂級物件是window,而jQuery的頂級物件是$。
且它們之間存在window.document.$這樣的關係。
jQuery入口函式的寫法
第一種：$(douement).ready(function(){
});
第二種(推薦)：$(function(){
})
還有...
入口函式載入的區別：
原生與jQuery會等頁面DOM物件載入完成，但jQuery入口函式不會等待頁面的圖片的載入。
解決jQuery的$符號衝突問題：
釋放$的使用權：var yy=$.noConflict();//用yy代替了$,其它不變。
2、核心函式--$()
使用：
1、接收函式--入口函式
2、接收字串，作為選擇器或生成DOM物件（如果字串內是html程式碼）
3、接收DOM--包裝為jquery物件
擴充套件：jQuery物件的本質是一個偽陣列。驗證：輸出$("<選擇器>")，（如果有0~length-1的屬性，並且有length屬性就是一個偽陣列）
3、(回顧JS)靜態方法與例項方法
function AClass(){
}
靜態方法:
直接新增在類中，AClass.staticMethod=function (){} //用函式名呼叫AClass.staticMethod();
例項方法：
新增在類的原型中，AClass.prototype.instanceMethod=function (){};//用類的例項呼叫 new AClass().instanceMethod();
4、jQuery的靜態方法
遍歷的方法each與map
說明:jQuery的each與map方法既可以遍歷陣列與字典，特別字典——偽陣列，可以它有一個length屬性，可以像陣列一樣進行遍歷。兩者遍歷方法不同的是map可以接收其返回值來返回一個新陣列，且兩者回調函式引數位置顛倒。
偽陣列是一個字典,具有正確的index:value,..與length:Num屬性，遍歷方法會根據length來檢查index:value如果在此長度內有不合法的就會判斷為字典，而不是偽陣列。（$.isArray(v)靜態方法 可判斷是否是一個真陣列,即真陣列與偽陣列間的判斷） 使用：
var vei={0:2,1:2,2:3,3:4,length:3};
//單純的遍歷用each
$.each(vei,function (index,value){
});
=====================================
//想通過處理遍歷陣列並返回新陣列用map
var reArr=
$.map(vei,function(value, index){
return value;
});
元素的大小：
使用及說明：
width()或height()獲取的是元素實際大小。
innerWidth()或innerHeight()包括內邊距
outerWidth()或outerHeight()包括邊框//若傳入true引數,包括外邊距
jQery常用的幾個靜態方法
（1）holdReady(boolean);//是jQuery入口函式的開關。在jQuery入口函式前傳入true暫停jQery，false是恢復。
（2）val();//獲取value屬性值。特別地，應用在select中，子標籤option的value值就是select的value值。
（3）index();//獲取在兄弟元素中對應的索引值
（4）trim(str);//返回str去除兩邊空格的字串。
5、使用WS編寫程式碼的兩個技能
生成死程式碼：開啟設定搜尋live左邊加號新增一個Live Template，記得設定應用的“場景”。
預設開啟的瀏覽器：在Keymap下搜尋default openn這項，為其新增一個快捷鍵即可（可在設定中直接搜尋）。
6、jQuery選擇器
選擇器：
預設已會的：
普通選擇器：id、class、標籤選擇器
常用複合選擇器：標籤+類選擇器
多條件選擇器：$("div,p,h2");
層級選擇器：“x p”與“x>p”，前者是後代的，後者是子代的。
特定選擇器：
索引選擇器：$("ul>li:eq(4)"):索引為4的。如果"大於4"的（多個）:gt(4),"小於4"的（多個）:lt(4)。
##奇偶選擇器：$("ul>li:even")偶，$("ul>li:odd")奇；
首尾選擇器：$('li:last')最後面的; first最前面的。
屬性選擇器：$(".comment>li[index=1]")。// [index^=1][index$=1][index*=1]
##顯示與隱藏選擇器：:hidden獲取display=none的元素，:visible"獲取可見元素//補充：display（隱藏）與visibility（隱形）
排除選擇器：not('#beng_3')，''內是選擇器，排除選擇器內的。
查詢：
關係選擇器：
父物件：parent("li")//括號內是父類的特徵
兄弟：
next() //下一位兄弟，nextAll()下面的全部兄弟元素
prev() //上一位兄弟，prevAll()上面的全部兄弟元素
siblings("li") //選擇全部li兄弟元素。
子元素：children(".menu_head")//選擇class="menu_head"的子物件。
下尋選擇器：$("p").find("#live") //find引數是一個選擇器，向下查詢。
表單子屬性選中選擇器:
下拉列表select[name=?]>option[value?]：（multiple="multiple" 加入該屬性可多選）選擇器":selected" 匹配所有選中的option元素 (使用示例：$("select option:selected") ) 。
複選框（input:checkbox && name相同）或單選按鈕(input:radio && name相同才是一組單選組)[方圓選框]：":checked" 匹配所有選中的被選中元素 (使用示例：$("input:checked") )
7、屬性與屬性節點:
介紹：任何物件都有屬性，但只有DOM物件才有屬性節點，因為DOM物件存在attributes屬性，裡面的屬性就是屬性節點。
jQuery:
prop：用於操作物件的屬性（id,class,name...）。
查增：<jQuery物件>.prop(..);//一個引數查詢，二個引數設定。
刪除：<jQuery物件>.removeProp(..);//只有一個引數，想刪除多個只需用空格隔開。
attr：操作方法同上。用於操作屬性節點，也可以操作屬性，但特別的屬性如checked等屬性，attr得到的是undefined。這個是我們不想看到的。這時我們需要用prop來代替。
8、jQuery操作樣式
通過新增類單元
addClass("class1 class2");//新增類名[可鏈式]
removeClass("class2");//刪除類名，什麼都不寫，移除目標的所有class單元
toggleClass("class1");//有刪除，沒有新增
hasClass(<檢測的類名單元>); //檢視有沒有此類名
通過css屬性：
<jquery物件>.css("width","100px").css(..)..;//單鏈單引數為讀取
批量設定：<jquery物件>.css({//介意使用
width:"100px", //如果”值“改為函式，可以得到兩個函式引數，順序是index與現在的屬性的大小，而index是選擇器中自己所在的索引
backgroundColor:"red"
});
9、操作文字值屬性
<jQuery物件>.html(v);//賦入值就設定，沒有就獲取
<jQuery物件>.text(v);//同上
<jQuery物件>.val(v);//同上，且可獲取/設定文字框的value屬性值。
總結2：
1、位置
點選的點位置
clientX、clientY: 點選位置距離當前可視區域的x，y座標[已驗證]
pageX、pageY :對於整個頁面來說，包括了被捲去的body部分的長度
相對距離：在定位的基礎上，即子元素跟最近定位的祖先元素的距離。
獲取：position();//輸出是與最近定位元素的距離（自身的定位量屬性）{top:"",left:""}
設定：jquery不支援這種方式進行設定，可以通過設定其css設定。
## 另外offsetParent可以獲取最近的祖先定位元素
絕對距離：該元素在視窗邊框的距離。[已驗證：並不是相對含有定位的父元素的值]
獲取：offset().left;
設定：offset({
left:300,
top:200
});
滾動條：首先對目標設定overflow,變成滾動狀態，然後用下面的方法獲取滾動條的滾動距離，如果有值則設定（設定式滾動）
hidden 內容會被修剪，並且其餘內容是不可見的。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
垂直：$("#scroll").scrollTop()+$("#scroll").height() > $("#scroll")[0].scrollHeight
水平：$("#scroll").scrollLeft()+$("#scroll").width() > $("#scroll")[0].scrollWidth
事件:如果是頁面滾動條，要給window繫結事件
$(window).scroll(function(){
//水平/垂直滑動會觸發
});
2、幾個重要的css屬性
元素的隱藏與隱形：
隱藏:display:none/bolck
隱形：visibility:hidden/visible
#擴充套件：通過為父元素新增class,使子元素指定樣式生效。（內部用到父元素的class）。
$("li").mousemove(function (){
$(this).addClass("c1");
});
3、鏈式程式設計
條件：在jquery中，大部分都是返回jQuery物件的，鏈式程式設計就是把jquery方法且返回jquery物件的方法連在一直。
常用方法：
end():如果返回的是jquery物件但已不是頭部的物件(斷鏈)，我們可以用此方法返回到最近的一個"破壞性"操作之前。
4、動畫
（1）顯示與隱藏
show(900);//引數還可以是特定的字串
hide(900);//引數還可以是特定的字串
（2）滑入與滑出
slideUp(800);//收起
slideDown(800);//拉下
slideToggle(800);//切換
（3）淡入與淡出
fadeIn(2000) //淡入
fadeOut(2000) //淡出
fadeToggle(2000) //切換
fadeTo(2000,0.4) //透明度
（4）屬性動畫效果
$("#box").animate({
"":"",
"":"",
"":""
},<改變的時間>,[過渡效果'linear'是勻速],[回
（5）停止當前的動畫，執行後面的動
delay(ms): $("#ul1").animate({},700).delay(2000).animate({},700) //delay不馬上執行鏈後面的，而是等待指定的時間後執行。
stop(): (boolean,boolean)==第一個引數：是否停止後續的動畫，第二個引數：是否立即完成當前動畫（為flase或無參代表立即停止當前動畫）。
(6)實現無限滾動的方法
1、利用外邊距實現：如果向左無限滾動
offSet = 0;
var tt;
function autoPlay(){
tt = setInterval(function () {
offSet -= 10;
$("ul").css({
"marginLeft": offSet
});
if (offSet <= -800) {
offSet = 0;//一下子換過來
}
}, 50);
}
關閉：clearInterval(tt);
繼續：autoPlay();
2、利用動畫animate實現無限滾動
var m=-800;
function autoPlay(){
$("ul").animate({
left:m
},4000,function (){
$(this).css({
left:"0px" //一下子換過來
});
autoPlay();//遞迴式
});
}
autoPlay();
關閉：stop();//停止當前的動畫，
4、關於節點
外前：在指定元素前面新增一個兄弟元素 $("div").before(<new>);
內前：在指定元素中所以元素前新增一個子元素 $("div").prepend(<new>);//被動新增（相反）用prependTo
內後： 在指定元素中所以元素後新增一個子元素 $("div").append(<new>); //append是被動新增，而appendTo是主動新增
外後：在指定元素後面新增一個兄弟元素 $("div").after(<new>);
除此，我們還可以用html新增元素，但如果不處理，不同的是html方法是在元素內進行替換原有元素的。
資料的遍歷新增，示例：
var att=$.map(datas,function (value,index){
return "<tr><td><a href='"+value.url+"'>"+value.name+"</a></td> <td> "+value.type+"</td></tr>";
});
$("#tbd").html(att);
刪除元素
1、$("div.box:eq(0)").empty();清除
2、$("div.box:eq(0)").html("");
3、$("div.box:eq(0)").remove();自決
4、元素保留式刪除
$(".box3").click(function (){
//刪除元素的標籤的事件
alert("Hello!");
});
$("button:eq(3)").click(function (){
//刪除-保留
var rb=$("div").detach(".box3");//左引數大致，右才是真正，如沒是大致
$("button:eq(4)").click(function (){
//恢復
$("#box1").append(rb);//
});
});
元素的克隆
var obj=$("div.box:eq(0)").clone();
$("div.box:eq(1)").append(obj);
元素的包裹：
將指定元素進行包裹： $("p").wrap({function(){ return "<div></div>"}});
批指定元素的父元素刪除（拆包）$("p").unwrap();
##$(",").wrapAll(function(){ return "<div></div>"});將選中的元素用一個元素包裹起來。
## $("").wraplnner(function(){ return "<div></div>"});將每一個匹配的元素的子內容(文字節點也會包裹起來)用一個HTML結構包裹起來
元素的替換：$("p").replaceWith("<新標籤>");
6、案例
（1）全選與全不選(邏輯)
$(function () {
//當點選全選/全不選時
$("#j_cbAll").click(function (){
$("#j_tb").find(":checkbox").prop("checked",$(this).prop("checked"));
});
//當點選下面的時，會獲取checkbox的數量與已選中（checked=true）的checkbox的數量，如果相等，改變全選/全不選為打勾，否則設定為不打勾狀態。
$("#j_tb").find(":checkbox").click(function (){
var sum=$("#j_tb").find(":checkbox").length;
var issum=$("#j_tb").find(":checked").length;
if(sum==issum){
$("#j_cbAll").prop("checked",true);
}else{
$("#j_cbAll").prop("checked",false);
}
});
});
（2）固定導航欄（邏輯）
$(function () {
//滾動條事件：只要全域性文件的滾動條滾動就會被觸發
$(document).scroll(function (){
\\如果垂直方向滾動的距離大於導航欄以上的距離,...
if($(document).scrollTop()>=$(".top").height()){
$(".nav").css({
position:"fixed",
top:"0px"
});
$(".main").css("marginTop",$(".nav").height());
}else{
//將導航欄還原
$(".nav").css("position","static");
$(".main").css("marginTop",0);
}
});
});
7、事件的繫結
介紹：事件的繫結除了以eventName(function(){});這種外，還有以下這些，它們繫結相同或不同事件都是不會覆蓋的。這有點像css({})模式一樣，css是為元素批量設定樣式，而在事件on({})，我們可以用元素設定批量繫結事件。
使用：
（1）為自己繫結多個事件
$("#box").on({
"click":function(){alert("點選了")},
"mouseover":function (){alert("滑入")}
});
#代替此功能的方法：bind方法，除此bind還可以一次為元素繫結多個行為相同的事件。
$("#but1").bind("click mouseover",function (){
//為一個元素繫結多個事件，但事件行為是一樣的。
});
（2）事件的委託
說明：委託的元素一般是其外層元素（祖父），子元素被點選後，通過事件的冒泡，委託的元素監聽到點選了誰，然後回撥函式的this指向它，而在表面看來是為其子元素綁定了事件。
$("#box").on("click","p",function (){
//this是動態的
});
代替此功能的方法：delegate，它也可以為子元素繫結事件（注意引數不同）。
$("#box").delegate("p","click",function (){
//this是動態的
});
（3）事件的解綁
$("#自身").off("事件名","子代");//off無參自身及子代，有一參為自身解除指定事件（子代delegate繫結的事件被解綁），有兩參為子代解除
## $("#a").unbind("click");//為指定元素解除指定的事件
$("#parend").undelegate("#child","click");//還有刪除由delegate()方法繫結的事件
（4）事件的觸發
$("#but1").click();//不能寫引數，觸發 $("#but1")的click事件。
#其它觸發方法
$("#but1").trigger("click");//需要寫引數（事件名），會觸發預設行為與事件冒泡。
$("#but1").triggerHandler("click");//不會觸發預設行為與事件冒泡
# 預設行為：只輸數字案例
//用return false;或：
$("#key").keydown(function(e){
e=e||window.e;
var key=e.keyCode;
if((key<48 && key!=8) || (key>57 &&key<96 )|| key>105 ){
e.preventBubble(); //主動取消預設行為
}
});
#事件的冒泡：如果子父級有相同的元素，如果子級的事件觸發了，會向外（根級）冒泡，即外面的相同事件也會被觸發，如果在回撥函式中返回false，就可以取消事件的冒泡與預設行為（比如點選超連結會預設跳轉）。
$("#a3").click(function(e){
e=e||window.e;
//return false; //停止事件的冒泡，且結束函式
e.stopPropagation();//停止事件的冒泡行為，並且不會結束函式
});
（5）自定義事件
意義：可以在一種條件下進行觸發，而這就是自定義事件的觸發條件。
設定：以on進行設定如$("..").<自定義的事件名>(function(){...});
觸發：用trigger（"<eventName>"）;來觸發自定義的事件。
（6）事件的名稱空間
說明：如果我們想設定有名稱空間的事件，要用on設定，比如$("...").on("click.zjazn",function(){...})
使用：上面定義的也是click事件，但要觸發它，如果單純觸發click，那麼範圍小的click.zjazn一就會被觸發，如果觸發的是範圍小的click.zjazn，則不會觸發範圍大的click，冒泡也只會觸發“外元素”的指定名稱空間的事件。
（6）具體事件的說明
1、移入移出事件：mouseover\mouseover與mouseenter\mouseleave（推薦）的區別是後者不受子元素的干擾，在子元素內不會受子元素干擾而觸發。
移入移出強大的方法:hover(function(){//移入},function(){//移出})，兩個引數分別包含移入與移出，一個引數既是移入也是移出。
8、jQuery UI
說明：jQuery主要分為 3個部分：互動、小部件、效果庫
案例1：展開與關閉
結構：
<div id="box">
<div>
<a href="javascript:;">使用者熱評</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div>
<a href="javascript:;">我的動態</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div>
<a href="javascript:;">我的粉絲</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
邏輯：
$("div>a").click(function () {
if($(this).next().height()==0){
//是關的狀態
$(this).parent().siblings().children("ul").animate({height:"0px"},1000);
var num=$(this).next().children().length;
$(this).next().stop().animate({
height:num*30+"px"
},1000);
}else{
//是開的狀態
$(this).next().stop().animate({
height:"0px"
},1000);
}
});
案例2：元素的拖拽
//拖拽函式的實現
1、給元素繫結一個點選事件，此時獲取滑鼠在box中的相對位置（呼叫jQuery元素物件的offset方法獲取偏移量資訊分別用來減去事件引數e.pageX/Y）.
2、再給元素繫結移動事件與松下事件，移動時獲取e.pageX/Y分別減去相對位置（向上移動，保持在box中的相對位置不變）作為offset新的偏移量。
3、鬆開時，解綁移動與松下事件。
擴充套件內容:
圖片懶載入：
1、引入jquery-1.12.2.min.js 與lazyload.min.js。
圖片<img class="lazy" data-original="img/01.png"> .
js: $("img.lazy").lazyload();
jquery自定義外掛：
(function($){
$.fn.tableColor=function(){
this[0].style.color="red";
console.log(this);//一般呼叫this是$("xxx"),它是一個偽陣列
}
})(jQuery);
$("p").tableColor();
物件合併：
-->