jQuery和jQuery選擇器

jQuery 概述

jQuery是一個JavaScript庫,使開發者更加便捷的操做文檔對象、選擇DOM元素、製做動畫效果、進行事件處理、使用異步數據傳輸AJAX等功能。javascript

jQuery是免費、開源、輕量級的js庫,兼容各類瀏覽器,write less, do more;css

最流行的javascript庫,在世界前10000個訪問最多的網站中,有超過55%在使用jQuery。html

jQuery的特色

{輕量級java

{功能強大的選擇器瀏覽器

{對DOM操做的封裝less

{完善的Ajax的封裝dom

{普遍的瀏覽器兼容性異步

{鏈式代碼方式函數

{邏輯代碼與表示代碼分離動畫

{豐富的插件

jQuery 對象介紹

oDOM對象轉化爲jQuery對象

對於DOM對象,只須要用$()把DOM對象包裝起來,就能夠得到一個jQuery對象了。示例代碼以下:

var foo =document.getElementById("foo");

var $foo =$(foo);

jQuery對象轉成DOM對象: 
兩種轉換方式將一個jQuery對象轉換成DOM對象:[index]和.get(index); 
(1)jQuery對象是一個數據對象,能夠經過[index]的方法,來獲得相應的DOM對象。 
如:var $v =$("#v") ; //jQuery對象 
var v=$v[0]; //DOM對象 
alert(v.checked) //檢測這個checkbox是否被選中 
(2)jQuery自己提供,經過.get(index)方法,獲得相應的DOM對象 
如:var $v=$("#v"); //jQuery對象 
var v=$v.get(0); //DOM對象 
alert(v.checked) //檢測這個checkbox是否被選中 

注意,this是標準dom對象,要用$(this)來轉化爲jQuery對象。

jQuery選擇器簡介

選擇器是jQuery強大功能的基礎,在jQuery中,對事件處理、遍歷DOM和Ajax操做都依賴於選擇器。它徹底繼承了CSS的風格,使用簡單。若是能熟練掌握jQuery選擇器,不只能簡化程序代碼,並且能夠達到事半功倍的效果。

根據查找HTML代碼中元素的依據不一樣,jQuery選擇器能夠分爲基本選擇器、層次選擇器、過濾選擇器和表單選擇器。

舉個栗子:

$("input:not(.myClass)")選取class不是myClass的<input>元素

$(":focus")選取當前頁面中得到焦點的元素,

注意都是要有引號的。

表單選擇器    

$(":input")選取全部的<input>、<textarea>、<select>和<button>元素

$(":text")選取全部的單行文本框

$(":password")選取全部的密碼框

$(":radio")選取全部的單選框

$(":checkbox")選取全部的多選框

$(":submit")選取全部的提交按鈕

$(":image")選取全部的圖像按鈕

$(":reset")選取全部的重置按鈕

$(":button")選取全部的按鈕

$(":file")選取全部的上傳按鈕

$(":hidden")選取全部的不可見元素

 

jQuery 中元素屬性與樣式類的操做

jQuery中提供了attr()方法,用於查詢或設置匹配元素的屬性和值。基本語法結構以下所示:

查詢:$(selector).attr(attribute)

設置:$(selector).attr(attribute,value)

設置多個屬性值:$(selector).attr({attribute:value, attribute:value ...})

必須加引號的,必須的必。

jQuery中提供了removeAttr()方法,用於從被選元素中移除屬性。其基本語法結構以下所示:

$(selector).removeAttr(attribute)

其中,參數attribute爲必選項,表示從指定元素中移除的屬性。

添加樣式類 

jQuery中提供了addClass()方法,用於向被選元素添加一個或多個類。其基本語法結構以下所示:

$(selector).addClass(class)

可使用函數向被選元素添加類。其基本語法結構以下所示:

$(selector).addClass(function(index,oldclass))

其中,參數function表示返回一個或多個待添加類名的函數,參數index是可選的,表示選擇器的index位置,參數oldclass 也是可選的,表示選擇器的舊的類名。

jQuery中提供了removeClass()方法,用於從全部匹配的元素中移除所有或者指定的CSS類:

$(selector).removeClass(class)

其中,參數class爲可選項,表示要移除的類的名稱。如需移除若干類,可使用空格來分隔類名,若是不設置該參數,則會移除全部類。

還可使用函數類移除類:

$(selector).removeClass(function(index,oldclass))

交替樣式類   

toggleClass()方法用於設置或移除被選元素的一個或多個類,該方法將檢查被選元素中指定的類。若是不存在則添加類,若是已設置則移除類,造成交替效果。其基本語法結構以下所示:

$(selector).toggleClass(class,switch)

      其中,參數class是必選項,表示添加或移除類的指定元素。如需設置若干個類,可使用空格來分隔類名。switch參數爲可選項,該參數必須爲布爾值,用以表示添加或移除類。當switch爲true時,表示添加類,爲false表示移除類。

能夠用來建立開關效果。

注意:jQuery還有一個toggle()方法,這個方法原本有兩個做用,一個是切換顯示狀態,如今這個效果額仍然可使用,還有一個是點擊交替執行做用,相似於上面的toggleClass(),可是再jQuery1.8版本時廢棄了,再1.9版本就移除了。

jQuery 中樣式屬性與元素內容的操做

css()方法能夠返回第一個匹配元素的CSS屬性值。其基本語法結構以下所示:

$(selector).css(name)

    其中,參數name表示CSS屬性的名稱,該參數可包含任何CSS屬性。

css()方法還能夠爲全部匹配元素設置指定的CSS屬性。其基本語法結構以下所示:

$(selector).css(name,value) //注意雙引號

css()方法還能夠設置多個CSS屬性/值對,其基本語法結構以下所示:

$(selector).css({property:value, property:value, ...})

大括號,雙引號。

設置元素位置偏移   

offset()方法用來返回或設置匹配元素相對於文檔的偏移座標。當返回偏移座標,其基本語法結構以下:

      $(selector).offset()

      該方法將返回第一個匹配元素的偏移座標。方法返回的對象包含兩個整型屬性:top 和 left,以像素爲單位。獲取這兩個整型屬性的語法格式以下:

  $(selector).offset().top

  $(selector).offset().left

      當設置全部匹配元素的偏移座標,其基本語法結構以下:

  $(selector).offset({top:value,left:value});

      參數{top:value,left:value}表示以像素爲單位的top和left座標。//說得是座標,而不是偏移量

操做HTML代碼   

jQuery中的html()方法能夠用來返回或設置被選元素的內容。若是該方法未設置參數,將會返回第一個匹配元素的當前內容。其基本語法結構以下:

  $(selector).html()

     當使用該方法設置一個值時,它將會覆蓋全部匹配元素的內容。其基本語法結構以下:

  $(selector).html(content)

     其中,參數content爲可選項,用以設置被選元素的新內容。該參數可包含HTML標籤。

操做文本

jQuery中的text()方法也能夠用來獲取或設置被選元素的內容。但與html()方法不一樣的是,該方法將只讀取元素的純文本內容,包括其後代元素,將會刪除內容中的HTML標籤。

  $(selector).text()

      當該方法用於設置值時,它將會覆蓋被選元素的全部內容。其基本語法結構以下:

  $(selector).text(content)

      其中,參數content表示被選元素的新文本內容。

操做表單元素的值   

jQuery中的val()方法能夠返回或設置頁面中表單中<input>元素的value屬性的值。若是該方法未設置參數,則返回被選元素的當前值,其基本語法結構以下:

  $(selector).val()

      若是要設置元素的value屬性值時,其基本語法結構以下:

  $(selector).val(value)

    其中,參數value表示爲<input>元素設置的屬性值

相關文章
相關標籤/搜索