一句話解釋jQuery——選擇元素，對其操做

這篇文章你將看到

• jQuery 有多牛，牛在哪兒
• jQuery 有哪些編程套路（設計模式）
• jQuery 經典操做

1、jQuery 有多牛，牛在哪兒

• jQuery 很牛

  • 2006年發佈，是世界上壽命最長的前端函數庫
  • 全球80%的網站都在用

• jQuery 牛在不會JS的小白都能看懂使用

  • 舉兩個例子

  // 之前若是不用 jQuery，監聽事件（兼容 IE 6）你得這麼寫
  if (button.addEventListener)
      button.addEventListener('click',fn);
  else if (button.attachEvent) {
      button.attachEvent('onclick', fn);
  }else {
      button.onclick = fn;
  }
  
  // 可是若是你用 jQuery，你只須要這麼寫
  $(button).on('click', fn)
  複製代碼

  // 若是你想獲取 .nav > .navItem 對應的全部元素，用 jQuery 是這樣寫的`
  $('.nav > .navItem')
  // 在 IE 6 上，你得這麼寫
  var navItems = document.getElementsByClassName('navItem')
  var result = []
  for(var i = 0; i < navItems.length; i++){
      if(navItems[i].parentNode.className.match(/\bnav\b/){
          result.push(navItems[i])
      }
  }
  複製代碼

  能夠看到 jQuery 代碼可讀性很是強，這都源自於其經典的設計思路和編程套路，下面一塊兒來看看jQuery用到的那些編程套路

2、通俗地講下jQuery 的部分設計模式（編程套路）

• 不用new的構造函數，這個模式沒有專門的名字

好比建立新元素，只要把新元素直接傳入jQuery的構造函數就好了

$('<p>Hello</p>')
複製代碼

• 鏈式操做

$('div').find('h3').eq(2).html('Hello')
複製代碼

• $(支持多種函數)，重載

$ 這個函數的參數能夠是函數、字符串、元素和 jQuery 對象，甚至還能接受多個參數

$(fn)
$('div')
$(div)
$($(div))
$('span', '#scope1')
複製代碼

• 事件委託

$('div').on('click', 'span', function(){...})
複製代碼

• 取值器賦值器合二爲一

$('h1').html(); //html()沒有參數，表示取出h1的值
$('h1').html('Hello'); //html()有參數Hello，表示對h1進行賦值
複製代碼

• 命名空間

// 你的插件在一個 button 上綁定了不少事件
$button.on('click.plugin', function(){...})
$button.on('mouseenter.plugin', function(){...})
// 而後你想在某個時刻移除以上全部事件
$button.off('.plugin')
複製代碼

• 此外還有不少不所有例舉，後面會出文章專門講這一塊
  • 用閉包隱藏細節，也沒有專門的名字
  • $.fn 是 $.prototype 的別名
  • jQuery 針對不一樣瀏覽器使用不一樣代碼，適配器
  • ......

3、jQuery 經典操做

一句話講清jQuery的基本設計思想和主要用法，就是 "選擇元素，對其操做" 。 這是它區別於其餘Javascript庫的根本特色。

另外jQuery最使人稱道、最方便的特色，在於每一步的jQuery操做，返回的都是一個Api對象(或者說Api對象)，於是能夠用 jQuery 玩出不少騷操做，一塊兒來看看：

• jQuery 獲取元素的精妙

jQuery獲取元素很是簡單，將一個選擇表達式，放進構造函數jQuery()（簡寫爲$），便可獲得被選中的「元素」。

注意：這裏獲得的並不是是真正的網頁元素，而是一個Api對象，這個對象包含不少操做元素的屬性

表達式能夠是css選擇器

$(document) //選擇整個文檔對象
$('#myId') //選擇ID爲myId的網頁元素
$('div.myClass') // 選擇class爲myClass的div元素
$('input[name=first]') // 選擇name屬性等於first的input元素
複製代碼

也能夠是jQuery特有的表達式

$('a:first') //選擇網頁中第一個a元素
$('tr:odd') //選擇表格的奇數行
$('#myForm :input') // 選擇表單中的input元素
$('div:visible') //選擇可見的div元素
$('div:gt(2)') // 選擇全部的div元素，除了前三個
$('div:animated') // 選擇當前處於動畫狀態的div元素
複製代碼

• jQuery 的鏈式操做是怎樣的

這是jQuery返回一個Api對象這一特性最經典的用法，在選中網頁元素後，能夠對它進行一系列操做，而且全部操做能夠鏈接在一塊兒，以鏈條的形式寫出來

$('div').find('h3').eq(2).html('Hello')
複製代碼

拆解後是這樣：

$('div') //找到div元素
.find('h3') //選擇其中的h3元素
.eq(2) //選擇第3個h3元素
.html('Hello'); //將它的內容改成Hello
複製代碼

jQuery還提供了.end()方法，使得結果集能夠後退一步

$('div')
.find('h3')
.eq(2)
.html('Hello')
**.end() //退回到選中全部的h3元素的那一步**
.eq(0) //選中第一個h3元素
.html('World'); //將它的內容改成World
複製代碼

• jQuery 如何建立元素

直接將新元素直接傳入jQuery的構造函數，便可建立新元素

$('<p>Hello</p>')
$('<li class="new">new list item</li>')
$('ul').append('<li>list item</li>')
複製代碼

• jQuery 如何移動元素

兩種方式

// 移動元素自身
$('div').insertAfter($('p')); // 把div元素移動p元素後面

// 移動其餘元素
$('p').after($('div')); // 把p元素加到div元素前面
複製代碼

• jQuery 如何修改元素的屬性

$("img").attr("src","img/a.jpg");
$("img").attr("width","100px");

// 詳細用法
$(selector).attr(attribute)       //返回被選元素的屬性值。
$(selector).attr(attribute,value)    //設置被選元素的屬性和值。
$(selector).attr(attribute,function(index,oldvalue)) //用函數返回值設置被選元素的屬性和值。 $(selector).attr({attribute:value, attribute:value ...}) //爲被選一個以上的元素設置屬性和值。 複製代碼