DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jquery的介紹與使用
jquery的介紹與使用
編輯:JavaScript綜合知識     

  當前流行的JavaScript庫有:

  jQuery, MooTools,Prototype, Dojo, YUI,EXT_JS DWR

  jQuery由美國人JohnResig創建,至今已吸引了來自世界各地的眾多javascript高手加入其team。

  jQuery是繼prototype之後又一個優秀的Javascript框架。其宗旨是——WRITELESS,DO MORE,寫更少的代碼,做更多的事情。

  它是輕量級的js庫(壓縮後只有21k),這是其它的js庫所不及的,它兼容CSS3,還兼容各種浏覽器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。

  jQuery是一個快速的,簡潔的javaScript庫,使用戶能更方便地處理HTMLdocuments、events、實現動畫效果,並且方便地為網站提供AJAX交互。

  jQuery還有一個比較大的優勢是,它的文檔說明很全,而且各種應用也說得很詳細,同時還有許多成熟的插件可供選擇。

  jQuery能夠使用戶的html頁保持代碼和html內容分離,也就是說,不用再在html裡面插入一堆js來調用命令了,只需定義id即可。

  jQuery對象就是通過jQuery包裝DOM對象後產生的對象。

  引入jquery: 將js文件導入項目中,在引入頁面

  jQuery對象是jQuery獨有的.如果一個對象是jQuery對象,那麼它就可以使用jQuery裡的方法: $(“#test”).html();

  比如:

  $("#test").html() 意思是指:獲取ID為test的元素內的html代碼。其中html()是jQuery裡的方法

  這段代碼等同於用DOM實現代碼:

  document.getElementById("test ").innerHTML;

  雖然jQuery對象是包裝DOM對象後產生的,但是jQuery無法使用DOM對象的任何方法,同理DOM對象也不能使用jQuery裡的方法.亂使用會報錯

  約定:如果獲取的是 jQuery對象,那麼要在變量前面加上 $.

  •var$variable =jQuery對象

  •varvariable = DOM對象

  選擇器是jQuery的根基,在jQuery中,對事件處理, 遍歷DOM和Ajax 操作都依賴於選擇器

  jQuery選擇器的優點:

  •簡潔的寫法

  •完善的事件處理機制

  ==========================基本選擇器

  $("#id")//通過id查找節點元素

  $("標簽名")//通過標簽名查找節點元素

  $(".class的值")//通過class屬性的值查找節點元素

  $("*")//查找所有的節點標簽

  ==========================層次選擇器

  $("標簽或者id或者class 標簽或者id或者class")//查找標簽或者id或者class節點中的所有標簽或者id或者class節點---“ ”空格代表指定標簽裡面的所有標簽,class,id

  $("標簽或者id或者class>標簽或者id或者class")//查找標簽或者id或者class節點中的子節點標簽或者id或者class--“>”代表父子關系

  $("標簽或者id或者class+標簽或者id或者class")//查找標簽或者id或者class的下一個標簽或者id或者class節點--“+”下一個節點

  $("標簽或者id或者class~標簽或者id或者class")//查找標簽或者id或者class的以後的所有的標簽或者id或者class節點--“~”以後的所有節點

  $("id或者class").siblings("div")//查找id或者class並且是指定節點的節點元素

  ==========================基礎過濾選擇器

  --------$(節點元素:條件)

  $("標簽或者id或者class:first")//查找標簽或者id或者class第一個出現的節點元素

  $("標簽或者id或者class:last")//查找標簽或者id或者class最後一個出現的節點元素

  $("div:not(標簽或者id或者class)")//查找某節點上不為標簽或者id或者class節點元素,注意沒有id或者class屬性也包括在內

  $("標簽或者id或者class:even")//查找標簽或者id或者class出現順序為偶數的節點元素

  $("標簽或者id或者class:odd")//查找標簽或者id或者class出現順序為奇數的節點元素

  $("標簽或者id或者class":gt(index))//查找標簽或者id或者class索引值大於指定index的節點元素;gt是 greater than的縮寫

  $("標簽或者id或者class:eq(index)")//查找標簽或者id或者class索引值等於指定index的節點元素;eq是equals的簡寫

  $("標簽或者id或者class:lt(index)")//查找標簽或者id或者class索引值小於指定index的節點元素;lt是less than的簡寫

  $(":header")//查找所有的標題節點元素;是固定寫法

  $("標簽或者id或者class").slideToggle(800,method);//讓標簽或者id或者class節點元素動起來,800表示動畫時長的毫秒數,method回調的方法

  ==========================內容過濾選擇器

  $("標簽或者id或者class:contains('di')")//查找標簽或者id或者class內容裡面包含指定內容的節點元素

  $("標簽或者id或者class:empty")//查找標簽或者id或者class沒有任何子元素的節點元素

  $("標簽或者id或者class:has(標簽或者id或者class)")//查找標簽或者id或者class包含標簽或者id或者class元素的節點元素

  $("標簽或者id或者class:parent")//查找標簽或者id或者class包含子元素的節點元素

  $("標簽或者id或者class:not(:contains('di'))")//查找標簽或者id或者class不包含指定文本內容的節點元素

  ==========================可見度過濾選擇器

  $("標簽或者id或者class:visible")//查找標簽或者id或者class為可見元素的節點元素

  $("標簽或者id或者class:hidden").show()//查找標簽或者id或者class為隱藏元素的節點元素

  each(function(index,domEle){

  alert(index+"==="+domEle.value);

  });//jquery的遍歷方法:index是角標,domEle是將節點元素對象轉換成dom對象返回

  $.each(需要遍歷的對象或數組,function(index,domEle){})//jquery的靜態方法

  ==========================屬性過濾選擇器

  $("標簽或者id或者class[title]")//查找標簽或者id或者class節點元素屬性為title的節點元素

  $("標簽或者id或者class[title=test]")//查找標簽或者id或者class節點元素屬性為title並且等於指定值的節點元素

  $("標簽或者id或者class[title!=test]")//查找標簽或者id或者class節點元素屬性為title並且不等於指定值的節點元素;注意沒有title屬性的也包括在內

  $("標簽或者id或者class[title^=te]")//查找標簽或者id或者class節點元素屬性為title並且屬性值以指定開始值的節點元素

  $("標簽或者id或者class[title$=te]")//查找標簽或者id或者class節點元素屬性為title並且屬性值以指定結束值的節點元素

  $("標簽或者id或者class[title*=te]")//查找標簽或者id或者class節點元素屬性為title並且屬性值包含指定值的節點元素

  $("標簽或者id或者class[title*=te][屬性]...")//查找標簽或者id或者class節點元素同時過濾多個屬性,的節點元素

  ==========================子元素過濾選擇器

  $("標簽或者id或者class :nth-child(index)")//查找標簽或者id或者class節點下的指定子元素;注意在:之前加空格,index是從1開始

  $("標簽或者id或者class :first-child")//查找標簽或者id或者class節點下的第一個子元素

  $("標簽或者id或者class :last-child")//查找標簽或者id或者class節點下的第一個子元素

  $("標簽或者id或者class :only-child")//查找標簽或者id或者class節點如果只有一個子元素,就返回

  ==========================表單選擇器

  input[type=checkbox]:checked").length//獲取多選按鈕的選中的個數

  $("select>option:selected")//獲取下拉選框選中的內容,一般用each遍歷

  ==========================匹配選擇器

  $(":input")//返回值 集合元素 說明:匹配所有 input, textarea, select 和 button 元素

  $(”:text”)//返回值 集合元素 說明: 匹配所有的單行文本框.

  $(”:password”)//返回值 集合元素 說明: 匹配所有密碼框.

  $(”:radio”)//返回值 集合元素 說明: 匹配所有單選按鈕.

  $(”:checkbox”)//返回值 集合元素 說明: 匹配所有復選框

  $(”:submit”)//返回值 集合元素 說明: 匹配所有提交按鈕.

  $(”:image”)//返回值 集合元素 說明: 匹配所有圖像域.

  $(”:reset”)//返回值 集合元素 說明: 匹配所有重置按鈕.

  $(”:button”)//返回值 集合元素 說明: 匹配所有按鈕.這個包括直接寫的元素button.

  $(”:file”)//返回值 集合元素 說明: 匹配所有文件域.

  $(”input:hidden”)//返回值 集合元素 說明: 匹配所有不可見元素,或者type為hidden的元素.這個選擇器就不僅限於表單了,除了匹配input中的hidden外,那些style為hidden的也會被匹配.

  注意: 要選取input中為hidden值的方法就是上面例子的用法,但是直接使用 “:hidden”的話就是匹配頁面中所有的不可見元素,包括寬度或高度為0的,

  ==========================

  =====創建節點元素

  $("

 

")//標簽怎麼寫就怎麼寫,注意自閉合標簽的寫法:
 

 

  =====插入節點

  $("#a").append($("#b"))//將後面的b節點添加到a節點上

  $("#a").appendTo($("#b"))//將前面的a節點添加到b節點上

  $("#a").after($("#b"))//將後面的b節點添加到a節點的後面

  $("#a").before($("#b"))//將後面的b節點添加到a節點的前面

  $("#a").insertAfter($("#b"))//將前面的a節點插入到b節點的後面

  $("#a").insertBefore($("#b"))//將前面的a節點插入到b節點的前面

  =====刪除節點元素

  remove()//刪除節點元素,自身刪除

  empty()//刪除所有的字節點,不刪除屬性節點

  =====克隆節點元素

  clone(boolean)//克隆一個節點,默認只克隆節點,不克隆事件,如果傳入一個true就代表事件也同時克隆

  =====替換節點元素

  $("#a").repalaceWith($("#b"))//將a節點替換成b節點

  $("#a").repalaceAll($("#b"))//將b節點替換成a節點

  =====常用的基本方法

  val()//獲取節點元素的值

  val("xxx")//改變節點元素的值

  text()//獲取節點對象的文本內容

  text("abcd")//設置文本節點

  attr("name")//獲取name屬性值

  attr("name","zhangsan")//設置name屬性值

  removeAtt("name")//刪除屬性

  ==========================

  -----.css('屬性值','屬性名')//設置樣式

  =====dom/jquery轉換

  -----$(dom對象)將dom對象裝換成jquery對象

  -----var name = $變量名[index] //將jquery轉換成dom對象

  -----jquery提供了一個get(index)方法將jquery轉換成dom對象

  -----$(document).ready(function(){});//所有頁面中的內容加載完畢才執行//簡寫格斯:$().ready(function(){});

  -----$(window).load(function(){})//一般不用

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved