jQuery之常用方法總結————看這一篇就夠了

1. JQ中常用的操作DOM方法

//=>1.獲取DOM元素
//操作方法：JQ選擇器（根據選擇器類型快速獲取需要的元素）
$([selector],[context])
	$('#box')
	$('.imgBox')
	$('.box a')
    $('a',box)
    ...
  :eq(n) 獲取集合中索引爲n的
  :gt(n) 大於這個索引的
  :lt(n) 小於這個索引的
------------------------------       
//節點之間關係的屬性：用JQ選擇器獲取的元素，我們設置變量名的時候一般都以$開始
//=>還可以再設置對應的選擇器進行二次篩選
let $box = $('.box');
$box.children('a'); //=>獲取對應的子元素
$box.find('a'); //=>獲取對應的後代元素
$('a').filter('.active'); //=>同級篩選（在所有的A中篩選出具備CLASS='ACTIVE'樣式類的A）
$box.prev();
$box.prev('p'); //=>獲取它上一個標籤名爲P的哥哥
$box.prevAll();
$box.next();
$box.nextAll('.link');
$box.siblings(); //=>獲取所有的兄弟
$box.index(); //=>獲取索引
$box.parent(); //=>獲取父元素
$box.parents(); //=>獲取所有的祖先元素，一直到document

------------------------------  

//=>2.DOM增刪改
let str = `<div id="box" class='box'>
	...
</div>`;
$('body').append(str); //=>追加到容器BODY的末尾
$('body').html(str); //=>等價於innerHTML  $('body').html()不傳參是獲取BODY中的HTML內容，除了這個方法還有text方法，等價於innerText

$A.insertBefore($B); //=>把$A放到$B的前面（注意點：$A,$B都是頁面中已經存在的元素）
$A.insertAfter($B); //=>把$A放到$B的後面
$(`<div id="box" class='box'>
	哈哈
</div>`).insertBefore($A); //=>需要把新增加元素放到$A前面，需要把字符串用$()包起來，相當於創建了一個元素

$A.appendTo($B); //=>$B.append($A) 在$B容器的末尾追加$A
$A.prependTo($B); //=>$B.prepend($A) 在$B容器的開頭追加$A

$A.clone();  //=>實現元素的克隆
$A.remove(); //=>實現元素的刪除

//=>操作表單元素的內容
$inp.val() //獲取表單元素內容
$inp.val('AAA') //設置表單元素內容
//html和text方法是操作非表單元素內容的

------------------------------  

//=>3.操作自定義屬性
$box.attr('data-type') //=>獲取自定義屬性值
$box.attr('data-type','B') //=>設置自定義屬性值
$box.attr({
    'type':1,
    'name':'AA'
}); //=>批量設置
$box.removeAttr('data-type');//=>移除自定義屬性
//表單元素操作內置或者自定義屬性一般使用prop和removeProp
$radio.prop('checked')
$radio.prop('checked',true)
...

//=>4.操作CSS樣式（盒子模型屬性）
//設置樣式
$box.css('width',200); //=>css方法是設置或者批量設置樣式（原理是設置STYLE行內樣式）$box.css({ width:200,height:200 })，寫的值不加單位，方法會幫我們自動設置上px單位
$box.addClass('active');//=>設置樣式類（原理是對className的操作），removeClass是移除，hasClass驗證是否存在某個樣式類，toggleClass之前有就是移除，沒有就是新增

//獲取樣式
$box.css('width'); //=>不設置值的時候就是獲取（原理是getComputedStyle，所有經過計算的樣式都可以獲取）
$box.offset(); //=>當前元素距離BODY的左偏移和上偏移
$box.position(); //=>當前元素距離父參照物的左偏移和上偏移
$box.innerWidth/.innerHeight/.outerWidth/.outerHeight() //=>等價於clientWidth/Height 和 offsetWidth/Height
$(document).scrollTop([val]); //=>可以獲取或者設置scrollTop的信息，對應的方法 .scrollLeft

2.除了操作DOM，JQ中還提供了其它有助於項目開發的方法

//=>事件處理
//$元素.on([event type],[function])
//$元素.off([event type],[function])
//$元素.bind()  $元素.unbind()  $元素.delegate() ...
//$元素.click() .mouseover .mouseout ...等常用事件的快捷綁定
$box.on('click',function(){});
$box.click(function(){});

//=>動畫處理
//.animate([目標樣式],[總時間],[運動方式],[運動完做的事情])
//.stop / .finish
$box.stop().animate({
    top:100,
    left:200
},1000,'linear',function(){});

//=>AJAX請求處理
let _DATA=null;
$.ajax({
    url:'json/product.json',
    method:'GET',
    async:false,
    dataType:'json',
    success:result=>{
        //result:當請求成功執行success函數，result就是從服務器獲取的結果
        _DATA=result;
    }
});

//=>常用的工具方法
$.each([數組、類數組、對象],function(index,item){
    //=>遍歷數組中的每一項 index:索引 item:當前循環這一項（對象：index是屬性名 item屬性值）
});
$('A').each(function(index,item){});

//$.toArray()轉換爲數組  $.merge()數組合並  $.makeArray()把類數組轉換爲數組  $.uniqueSort()去重加排序  $.type數據類型檢測 ...