【jQuery】-----jQuery簡介（一）

query在線api文檔：http://t.mb5u.com/jquery/
最新的api文檔：http://api.jquery.com

官方網站：http://www.ycku.com
北風網網址：http://www.ibeifeng.com

一．什麼是jQuery

一、 什麼是DOM 對象
每個頁面都是一個DOM（Document Object Model，文本對象模型）對象，經過傳統
的JavaScript 方法訪問頁面中的元素，就是訪問DOM 對象。

例如，頁面中有兩個<div> 標記元素以下：
<div id="Tmp"> 測試文本</div>
<div id="Out"></div>
經過下面的JavaScript 代碼能夠訪問DOM 對象，以及獲取或設置其內容值：
var tDiv=document.getElementById("Tmp"); // 獲取DOM 對象
var oDiv=document.getElementById("Out"); // 獲取DOM 對象
var cDiv=tDiv.innerHTML; // 獲取DOM 對象中的內容
oDiv.innerHTML=cDiv; // 設置DOM 對象中的內容
 

二、什麼是jQuery 對象
在jQuery 庫中，經過自己自帶的方法獲取頁面元素的對象，稱爲jQuery 對象；

var tDiv=$("#Tmp"); // 獲取jQuery 對象
var oDiv=$("#Out"); // 獲取jQuery 對象
var cDiv=tDiv.html(); // 獲取jQuery 對象中的內容
oDiv.html(cDiv); // 設置jQuery 對象中的內容
經過代碼對比能夠看出，jQuery 對象訪問方法比DOM 對象訪問方法更簡單、高效，它
們都實現一樣的功能。
 

jQuery是一個JavaScript庫，它經過封裝原生的JavaScript函數獲得一整套定義好的方法。它的做者是John Resig，於2006年建立的一個開源項目，隨着愈來愈多開發者的加入，jQuery已經集成了JavaScript、CSS、DOM和Ajax於一體的強大功能。它能夠用最少的代碼，完成更多複雜而困難的功能，從而獲得了開發者的青睞。

二．jQuery基本語法

（一）$自己就是jQuery對象的縮寫形式

alert($==jQuery)--->true

能夠本身從新定義代替$

jQuery.noConflict(); //將$符全部權剔除

var  Y = jQuery;

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

$(function (){} ); //執行一個匿名函數

$(‘#box’); //進行執行的ID元素選擇

$(‘#box’).css(‘color’, ‘red’); //執行功能函數

因爲$自己就是jQuery對象的縮寫形式，那麼上面的三段代碼也能夠寫成以下形式：

jQuery(function () {});

jQuery(‘#box’);

jQuery(‘#box’).css(‘color’, ‘red’);

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

（二）代碼註釋

jQuery中代碼註釋和js一直，單行用//,多行用/* */

（三）jquery對象

alert（$）;//jQuery 對象的內部

alert（$()）//返回jQuery 對象

alert（$(‘#box’)）//返回jQuery 對象

alert（$(‘#box’).css('color','red')）//返回jQuery 對象

三．加載模式

咱們在以前的代碼一直在使用$(function () {});這段代碼進行首尾包裹，那麼爲何必需要包裹這段代碼呢？緣由是咱們jQuery庫文件是在body元素以前加載的，咱們必須等待全部的DOM元素加載後，延遲支持DOM操做，不然就沒法獲取到。

在延遲等待加載，JavaScript提供了一個事件爲load，方法以下：

window.onload = function () {}; //傳統的js寫法

$(document).ready(function () {}); //jQuery

上面的$(document).ready(function(){}) 能夠簡寫成$(function(){})，

 

在實際應用中，咱們都不多直接去使用window.onload，由於他須要等待圖片之類的大型元素加載完畢後才能執行JS代碼。因此，最頭疼的就是網速較慢的狀況下，頁面已經全面展開，圖片還在緩慢加載，這時頁面上任何的JS交互功能所有處在假死狀態。而且只能執行單次在屢次開發和團隊開發中會帶來困難。

4、jQuery常規選擇器

jQuery 最核心的組成部分就是：選擇器引擎。它繼承了CSS 的語法，能夠對DOM 元

素的標籤名、屬性名、狀態等進行快速準確的選擇，而且沒必要擔憂瀏覽器的兼容性。

簡單選擇器、進階選擇器、高級選擇器

 

1. 簡單選擇器

   包括Id選擇器、class選擇器、元素標籤選擇器

  

       說明：id 選擇器是最快的選擇器
              <div id="box"/> 
              一個id在頁面只容許出現一次。可是若是一個id在頁面出現了屢次。這時，在此id
             上用css添加樣式，那麼 這多個元素都會執行添加的樣式。 使用jquery添加樣式的話，只添
              加到第一個此id上 的元素

二、進階選擇器

在簡單選擇器中，咱們瞭解了最基本的三種選擇器：元素標籤名、ID 和類(class)。那麼在基礎選擇器外，還有一些進階和高級的選擇器方便咱們更精準的選擇元素。