1. 程式人生 > >jQuery攻略

jQuery攻略

一、簡介

1.介紹
  jQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之後又一個優秀的JavaScript程式碼庫(或JavaScript框架)。jQuery設計的宗旨是“write Less,Do More”,
即倡導寫更少的程式碼,做更多的事情。它封裝JavaScript常用的功能程式碼,提供一種簡便的JavaScript設計模式,優化HTML文件操作、事件處理、動畫設計和Ajax互動。

 

2.優勢

  • 一款輕量級的JS框架。jQuery核心js檔案才幾十kb,不會影響頁面載入速度。
  • 豐富的DOM選擇器,jQuery的選擇器用起來很方便,比如要找到某個DOM物件的相鄰元素,JS可能要寫好幾行程式碼,而jQuery一行程式碼就搞定了,再比如要將一個表格的隔行變色,jQuery也是一行程式碼搞定。
  • 鏈式表示式。jQuery的鏈式操作可以把多個操作寫在一行程式碼裡,更加簡潔。
  • 事件、樣式、動畫支援。jQuery還簡化了js操作css的程式碼,並且程式碼的可讀性也比js要強。
  • Ajax操作支援。jQuery簡化了AJAX操作,後端只需返回一個JSON格式的字串就能完成與前端的通訊。
  • 跨瀏覽器相容。jQuery基本相容了現在主流的瀏覽器,不用再為瀏覽器的相容問題而傷透腦筋。
  • 外掛擴充套件開發。jQuery有著豐富的第三方的外掛,例如:樹形選單、日期控制元件、圖片切換外掛、彈出視窗等等基本前端頁面上的元件都有對應外掛,並且用jQuery外掛做出來的效果很炫,並且可以根據自己需要去改寫和封裝外掛,簡單實用。

3.jQuery內容:

  • 選擇器
  • 篩選器
  • 樣式操作
  • 文字操作
  • 屬性操作
  • 文件處理
  • 事件
  • 動畫效果
  • 外掛
  • each、data、Ajax

4.jQuery物件
  jQuery物件就是通過jQuery包裝DOM物件後產生的物件。jQuery物件是 jQuery獨有的。如果一個物件是 jQuery物件,那麼它就可以使用jQuery裡的方法:例如$(“#i1”).html()。

  $("#i1").html()的意思是:獲取id值為 i1的元素的html程式碼。其中 html()是jQuery裡的方法。

  相當於: document.getElementById("i1").innerHTML;

  雖然 jQuery物件是包裝 DOM物件後產生的,但是 jQuery物件無法使用 DOM物件的任何方法,同理 DOM物件也沒不能使用 jQuery裡的方法。

  一個約定,我們在宣告一個jQuery物件變數的時候在變數名前面加上$:

var $variable = jQuery對像
var variable = DOM物件
$variable[0]//jQuery物件轉成DOM物件

  拿上面那個例子舉例,jQuery物件和DOM物件的使用:

$("#i1").html();//jQuery物件可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM物件使用DOM的方法