jQuery

jQuery是一個快速、簡潔的JavaScript庫。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

使用jQuery獲取元素

• jQuery定義了一套選擇器規則，和css選擇器的目的一樣，都是為了選擇出符合特定規則的元素。

選擇器：

元素獲取的方法

對于一個特定結果集，我們想獲取到指定index的jQuery對象

• 使用 .eq(index): $('div').eq(3); // 獲取結果集中的第四個jQuery對象
• 使用 .get(index): $('div').get(3); //獲取結果集中的第四個jQuery對象
• 使用 [index] 這種方法會獲取到DOM對象: $('div')[3]; //獲取結果集中 第四個jQuery對象轉換為DOM對象的結果

兄弟元素獲取

• next([selector]):next取得匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合 $('.test').next();
• prev([selector]):next取得匹配的元素集合中每一個元素緊鄰的前面同輩元素的元素集合 $('.test').prev('li');
• nextAll([selector])
• prevAll([selector])
• siblings([selectors])：獲得匹配元素集合中每個元素的兄弟元素,可以提供一個可選的選擇器

父子元素的獲取

• parent([selector]):取得匹配元素集合中，每個元素的父元素，可以提供一個可選的選擇器 $('li.item-a').parent()
• parents([selector]):獲得集合中每個匹配元素的祖先元素，可以提供一個可選的選擇器作為參數
• children([selector]): 獲得匹配元素集合中每個元素的子元素，選擇器選擇性篩選
• find([selector]): 查找符合選擇器的后代元素

篩選當前結果集

• first()：獲取當前結果集中的第一個對象
• last()：獲取當前結果集的最后一個對象
• .filter(selector), filter(function(index))：篩選當前結果集中符合條件的對象，參數可以是一個選擇器或者一個函數

$('li').filter(':even')

$('li').filter(function(index) {
  return index % 3 == 2;
})


//相當于對結果集中的每個元素(DOM對象)進行了處理，但只有返回true的元素才會被選中(選中后再被包裝成jquery對象)
$('li').filter(function(index, node){
  // 這里node和this的類型都是DOM對象
  console.log(node);
  console.log(this);
  return true; // 最終會得到所有li元素
  // 因此可以通過相關操作,只對符合的元素返回true
});

• not(selector), not(function(index)):從匹配的元素集合中移除指定的元素，和filter相反
• is(selector), is(function(index)), is(dom/jqObj):判斷當前匹配的元素集合中的元素，是否為一個選擇器，DOM元素，或者jQuery對象，如果這些元素至少一個匹配給定的參數，那么返回true
• has(selector), has(dom)：篩選匹配元素集合中的那些有相匹配的選擇器或DOM元素的后代元素 $('li').has('span')

jQuery DOM操作

創建元素

• 只需要把DOM字符串傳入$方法即可返回一個jQuery對象

var obj = $('<div class="test"><p><span>Done</span></p></div>');

添加元素

• append(content[,content]) / append(function(index,html))：匹配的元素/對象 尾部插入內容(插入到最后)

  • 可以一次添加多個內容，內容可以是DOM對象、HTML string、 jQuery對象
  • 如果參數是function，function可以返回DOM對象、HTML string、jQuery 對象，參數是集合中的元素位置與原來的html值

• appendTo(target)：對象 插入到目標元素尾部，目標元素可以是selector, DOM對象, HTML string, 元素集合, jQuery對象

  • $( "<p>Test</p>" ).appendTo( $( ".container" ) );

• prepend(content[,content]) / prepend(function(index,html)):向匹配的元素頭部追加內容，用法和append類似，內容添加到最開始

  • $( ".inner" ).prepend( "<p>Test</p>" );

• prependTo(target):對象 插入到目標元素頭部

  • $( "<p>Test</p>" ).prependTo( ".inner" );

• before([content][,content]) / before(function):在 匹配的元素/對象 前面(不是頭部，而是外面，和對象并列同級)插入內容

• insertBefore(target):把對象插入到target之前（同樣不是頭部，是同級）

• after([content][,content]) / after(function(index)):在匹配的元素/對象前面(不是頭部，而是外面，和對象并列同級)插入內容
  后面(不是尾部，而是外面，和對象并列同級)插入內容

• insertAfter(target): 把對象插入到target之后（同樣不是尾部，是同級）、

刪除元素

• remove([selector]):刪除被選元素（及其子元素）,可以添加一個可選的選擇器參數來過濾匹配的元素
  • $("#div1").remove();
• empty(): 清空被選擇元素內所有子元素
• detach(): 會返回刪除的jquery對象,方便該jquery對象插入到其他位置(這部分remove可以實現),但是使用detach方法可以保持jquery對象上的事件,但是remove不能

包裹元素

• wrap(wrappingElement) / wrap(function(index)): 為每個對象包裹一層HTML結構，可以是selector, element, HTML string, jQuery object

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$('.inner').wrap("<div class='new'></div>");

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

• wrapAll(wrappingElement):把所有匹配對象包裹在同一個HTML結構中

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$('.inner').wrapAll("<div class='new'></div>");

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div>

• wrapInner(wrappingElement) / .wrapInner(function(index))

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

$('.inner').wrapInner("<div class='new'></div>");

<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>

• unwap():把DOM元素的parent移除

• html([string]): 用于獲取/修改元素的innerHTML

  • 當沒有傳遞參數的時候，返回元素的innerHTML
  • 當傳遞了一個string參數的時候，修改元素的innerHTML為參數值

• text():和html方法類似，操作的是DOM的innerText值

屬性和CSS操作

• jQuery對象可能包含了多個DOM對象,為jQuery直接添加事件處理程序,其內的所有DOM對象都會擁有該事件處理程序,相當于為每個對象都添加了事件處理程序

<ul class="img-list">
    <li data-src = "1.jpg">1</li>
    <li data-src = "2.jpg">2</li>
    <li data-src = "3.jpg">3</li>
</ul>
<button type="button" id="add">增加</button>
<script>
$('.img-list>li').on('click', function(){
    // 這里this指的是 <li data-src = "x.jpg">x</li> DOM對象
    var url = $(this).attr('data-src');
    $image.attr('src', url);
})
$('#add').on('click', function(){
    $('.imag-list').append("<li data-src = '1.jpg'>1</li>");
})
</script>

• 注意:$('.img-list>li')獲取的jQuery對象是靜態的,不會因為后續的相關操作而變化(例如再網ul中新插入li,但是該li不會擁有上述事件處理程序)

屬性相關:

• val():這是一個讀寫雙用的方法,用來處理 input 的value,當方法沒有參數的時候返回input的value值，當傳遞了一個參數的時候，方法修改input的value值為參數值.

$('input').val();
$('input').val('newValue');

//js原生方法獲取input元素的value值
var input = document.getElementById('#username');
console.log(input.value);
input.value = 'newValue';

• .attr():獲取/設置元素特定屬性的值

$('img').get(0).attr("src");  // 獲取img的src

$('img').get(0).attr("src", "http://image.baidu.com/123.jpg");

// js原生原生方法 獲取/設置元素特定屬性的值

var img = document.querySelector("img");
var origin = img.getAttribute("src");
img.setAttribute("src", "http://image.baidu.com/123.jpg")

• removeAttr(): 移除屬性

$('div').removeAttr('id');
// js原生方法
document.querySelector('div').removeAttribute('div');

CSS相關

• css():

// 查看jquery對象的所有css樣式
console.log($('#container').css());
// 獲取jquery對象的指定樣式
var color = $('#container').css("background-color");
var styleProps = $('#container').css([
  "width",
  "height",
  "color",
  "background-color"
]);
// 為jquery對象設置樣式
$('#container').css( "background-color", "yellow" );

$('#container').css({
  "background-color": "yellow",
  "font-weight": "bolder"
});

// 輸出element的所有有css樣式
document.querySelector('#container').style;
// 輸出element的指定樣式
document.querySelector('#container').style.borderColor;
// 設置element的指定樣式
document.querySelector('#container').style.border = "1px solid red";

• 當狀態發生改變時,需要對元素的樣式做出改變,使用直接修改css樣式的方法太繁瑣,可以將元素在新狀態時的樣式寫在一個類中,當狀態改變時,只需修改元素的class值或者添加class值即可

• addClass(className)和removeClass(className):

$( "p" ).addClass( "myClass yourClass" );
$( "p" ).removeClass( "yourClass" );
//JS原生方法
var p = document.querySelector('p');
p.classList.add("myClass","yourClass");
p.classList.remove("yourClass")

• hasClass(className):檢查元素是否包含某個class，返回true/false

• toggleClass(className):用于切換class

第一次執行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble bounce">Some text.</div>
第二次執行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble">Some text.</div>