jQuery學(xué)習(xí)基礎(chǔ)知識(shí)小結(jié)
更新時(shí)間:2010年11月25日 20:00:36 作者:
jQuery學(xué)習(xí)基礎(chǔ)知識(shí)小結(jié),剛開始學(xué)習(xí)jquery的朋友可以參考下。
jQuery學(xué)習(xí)筆記:
jQuery學(xué)習(xí)
1、基本語法:
$(selector).action()
$:定義jQuery
selector:選擇符,查詢和查找HTML元素
action():對(duì)元素執(zhí)行的操作
實(shí)例:
$(this).hide()------隱藏當(dāng)前元素
$("p"),hide()-------隱藏所有的p元素
$("#ID").hide()-----隱藏id=ID的元素
$("p.Class")--------隱藏class=Class的P
$(document).ready(function(){-----});
這樣用為了防止文檔未加載就運(yùn)行jQuery代碼。
2、選擇器通過屬性選擇元素
$("[href]") 選擇所有具有href屬性的元素
$("[href='AA']") 選擇屬性href=‘AA'的元素
$("[href!='AA']")選擇所有href!=‘AA'的元素
$("[href$='.jpg']")選取所有href值以.jpg結(jié)尾的元素
3、選擇器選擇Css屬性
$("p").css("background-color","red"); 修改所有的p元素的背景顏色為紅色
$("div#ID .Class") id=ID的div元素中所有class=Class的元素
4、名稱沖突
var jQMy = jQuery.noConflict() yong jQMy代替$
5、常用事件
$(document).ready(function) 文檔的就緒事件
$(selector).click(function) 被選元素的點(diǎn)擊事件
$(selector).dblclick(function) 被選元素的雙擊事件
$(selector).focus(function) 被選元素獲得焦點(diǎn)事件
$(selector).mouseover(function) 被選元素鼠標(biāo)懸停事件
6、jQuery效果
$(selector).hide() 隱藏被選元素
$(selector).show() 顯示被選元素
$(selector).toggle() 切換(在隱藏與顯示之間)被選元素
$(selector).slideDown() 向下滑動(dòng)(顯示)被選元素
$(selector).slideUp() 向上滑動(dòng)(隱藏)被選元素
$(selector).slideToggle() 對(duì)被選元素切換向上滑動(dòng)和向下滑動(dòng)
$(selector).fadeIn() 淡入被選元素
$(selector).fadeOut() 淡出被選元素
$(selector).fadeTo() 把被選元素淡出為給定的不透明度
$(selector).animate() 對(duì)被選元素執(zhí)行自定義動(dòng)畫
參數(shù):"slow", "fast", "normal" 或毫秒
回調(diào)函數(shù):callback
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
7、jQuery的HTML操作
$(selector).html(content) 改變被選元素的(內(nèi)部)HTML
$(selector).append(content) 向被選元素的(內(nèi)部)HTML 追加內(nèi)容
$(selector).prepend(content) 向被選元素的(內(nèi)部)HTML “預(yù)置”(Prepend)內(nèi)容
$(selector).after(content) 在被選元素之后添加 HTML
$(selector).before(content) 在被選元素之前添加 HTML
8、jQuery的CSS操作
$(selector).css(name,value) 為匹配元素設(shè)置樣式屬性的值
$(selector).css({properties}) 為匹配元素設(shè)置多個(gè)樣式屬性
$(selector).css(name) 獲得第一個(gè)匹配元素的樣式屬性值
$(selector).height(value) 設(shè)置匹配元素的高度
$(selector).width(value) 設(shè)置匹配元素的寬度
9、jQuery AJAX 請(qǐng)求
$(selector).load(url,data,callback) 把遠(yuǎn)程數(shù)據(jù)加載到被選的元素中
$.ajax(options) 把遠(yuǎn)程數(shù)據(jù)加載到 XMLHttpRequest 對(duì)象中
$.get(url,data,callback,type) 使用 HTTP GET 來加載遠(yuǎn)程數(shù)據(jù)
$.post(url,data,callback,type) 使用 HTTP POST 來加載遠(yuǎn)程數(shù)據(jù)
$.getJSON(url,data,callback) 使用 HTTP GET 來加載遠(yuǎn)程 JSON 數(shù)據(jù)
$.getScript(url,callback) 加載并執(zhí)行遠(yuǎn)程的 JavaScript 文件
(selector) jQuery 元素選擇器語法
(url) 被加載的數(shù)據(jù)的 URL(地址)
(data) 發(fā)送到服務(wù)器的數(shù)據(jù)的鍵/值對(duì)象
(callback) 當(dāng)數(shù)據(jù)被加載時(shí),所執(zhí)行的函數(shù)
(type) 被返回的數(shù)據(jù)的類型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 請(qǐng)求的所有鍵/值對(duì)選項(xiàng)
jQuery學(xué)習(xí)
1、基本語法:
$(selector).action()
$:定義jQuery
selector:選擇符,查詢和查找HTML元素
action():對(duì)元素執(zhí)行的操作
實(shí)例:
$(this).hide()------隱藏當(dāng)前元素
$("p"),hide()-------隱藏所有的p元素
$("#ID").hide()-----隱藏id=ID的元素
$("p.Class")--------隱藏class=Class的P
$(document).ready(function(){-----});
這樣用為了防止文檔未加載就運(yùn)行jQuery代碼。
2、選擇器通過屬性選擇元素
$("[href]") 選擇所有具有href屬性的元素
$("[href='AA']") 選擇屬性href=‘AA'的元素
$("[href!='AA']")選擇所有href!=‘AA'的元素
$("[href$='.jpg']")選取所有href值以.jpg結(jié)尾的元素
3、選擇器選擇Css屬性
$("p").css("background-color","red"); 修改所有的p元素的背景顏色為紅色
$("div#ID .Class") id=ID的div元素中所有class=Class的元素
4、名稱沖突
var jQMy = jQuery.noConflict() yong jQMy代替$
5、常用事件
$(document).ready(function) 文檔的就緒事件
$(selector).click(function) 被選元素的點(diǎn)擊事件
$(selector).dblclick(function) 被選元素的雙擊事件
$(selector).focus(function) 被選元素獲得焦點(diǎn)事件
$(selector).mouseover(function) 被選元素鼠標(biāo)懸停事件
6、jQuery效果
$(selector).hide() 隱藏被選元素
$(selector).show() 顯示被選元素
$(selector).toggle() 切換(在隱藏與顯示之間)被選元素
$(selector).slideDown() 向下滑動(dòng)(顯示)被選元素
$(selector).slideUp() 向上滑動(dòng)(隱藏)被選元素
$(selector).slideToggle() 對(duì)被選元素切換向上滑動(dòng)和向下滑動(dòng)
$(selector).fadeIn() 淡入被選元素
$(selector).fadeOut() 淡出被選元素
$(selector).fadeTo() 把被選元素淡出為給定的不透明度
$(selector).animate() 對(duì)被選元素執(zhí)行自定義動(dòng)畫
參數(shù):"slow", "fast", "normal" 或毫秒
回調(diào)函數(shù):callback
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
7、jQuery的HTML操作
$(selector).html(content) 改變被選元素的(內(nèi)部)HTML
$(selector).append(content) 向被選元素的(內(nèi)部)HTML 追加內(nèi)容
$(selector).prepend(content) 向被選元素的(內(nèi)部)HTML “預(yù)置”(Prepend)內(nèi)容
$(selector).after(content) 在被選元素之后添加 HTML
$(selector).before(content) 在被選元素之前添加 HTML
8、jQuery的CSS操作
$(selector).css(name,value) 為匹配元素設(shè)置樣式屬性的值
$(selector).css({properties}) 為匹配元素設(shè)置多個(gè)樣式屬性
$(selector).css(name) 獲得第一個(gè)匹配元素的樣式屬性值
$(selector).height(value) 設(shè)置匹配元素的高度
$(selector).width(value) 設(shè)置匹配元素的寬度
9、jQuery AJAX 請(qǐng)求
$(selector).load(url,data,callback) 把遠(yuǎn)程數(shù)據(jù)加載到被選的元素中
$.ajax(options) 把遠(yuǎn)程數(shù)據(jù)加載到 XMLHttpRequest 對(duì)象中
$.get(url,data,callback,type) 使用 HTTP GET 來加載遠(yuǎn)程數(shù)據(jù)
$.post(url,data,callback,type) 使用 HTTP POST 來加載遠(yuǎn)程數(shù)據(jù)
$.getJSON(url,data,callback) 使用 HTTP GET 來加載遠(yuǎn)程 JSON 數(shù)據(jù)
$.getScript(url,callback) 加載并執(zhí)行遠(yuǎn)程的 JavaScript 文件
(selector) jQuery 元素選擇器語法
(url) 被加載的數(shù)據(jù)的 URL(地址)
(data) 發(fā)送到服務(wù)器的數(shù)據(jù)的鍵/值對(duì)象
(callback) 當(dāng)數(shù)據(jù)被加載時(shí),所執(zhí)行的函數(shù)
(type) 被返回的數(shù)據(jù)的類型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 請(qǐng)求的所有鍵/值對(duì)選項(xiàng)
相關(guān)文章
基于jQuery實(shí)現(xiàn)選取月份插件附源碼下載
這是一個(gè)基于jQuery的可以選擇年份和月份的月份拾取插件,你可以設(shè)置點(diǎn)擊頁面上的任意元素觸發(fā)彈出年月選擇面板,可以是一個(gè)鏈接也可以是一個(gè)輸入框,廣泛應(yīng)用于月份查詢,而無需設(shè)置select表單。2015-12-12
jQuery EasyUI API 中文文檔 - Parser 解析器
jQuery EasyUI API 中文文檔 - Parser 解析器,使用jQuery EasyUI的朋友可以參考下。2011-09-09
jquery入門—選擇器實(shí)現(xiàn)隔行變色實(shí)例代碼
JQuery入門—選擇器實(shí)現(xiàn)隔行變色如何實(shí)現(xiàn)呢?JQuery選擇器繼承了CSS、path語音的部分語法,允許通過標(biāo)簽名、屬性名、內(nèi)容對(duì)DOM元素進(jìn)行快速、準(zhǔn)確的選擇,接下來詳細(xì)介紹,需要的朋友可以參考下2013-01-01
基于jquery實(shí)現(xiàn)圖片上傳本地預(yù)覽功能
這篇文章主要介紹了基于jquery實(shí)現(xiàn)圖片上傳本地預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下2016-01-01
使用jquery局部刷新(jquery.load)從數(shù)據(jù)庫取出數(shù)據(jù)
jquery提供了很好的ajax交互,我這里用的是直接返回字符串,用的是jquery.load方法從數(shù)據(jù)庫取出的數(shù)據(jù)2014-01-01
Easy UI動(dòng)態(tài)樹點(diǎn)擊文字實(shí)現(xiàn)展開關(guān)閉功能
這篇文章主要介紹了Easy UI動(dòng)態(tài)樹點(diǎn)擊文字實(shí)現(xiàn)展開關(guān)閉功能,需要的朋友可以參考下2017-09-09
jQuery插件FusionCharts繪制2D環(huán)餅圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制2D環(huán)餅圖效果,結(jié)合實(shí)例形式分析了jQuery使用插件FusionCharts載入xml數(shù)據(jù)繪制2D環(huán)餅圖的相關(guān)步驟與操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-04-04
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建菜單與按鈕
這篇文章主要幫助大家輕松學(xué)習(xí)jQuery插件EasyUI,重點(diǎn)是EasyUI創(chuàng)建菜單與按鈕,按鈕分為鏈接按鈕、菜單按鈕、分割按鈕,對(duì)這方面感興趣的小伙伴們可以參考一下2015-11-11

