十分鐘玩轉(zhuǎn) jQuery

2016-07-26索寧?JavaScript

轉(zhuǎn)自:http://www.cnblogs.com/suoning/p/5683047.html

一否彩、簡介

定義

jQuery創(chuàng)始人是美國John Resig,是優(yōu)秀的Javascript框架;

jQuery是一個輕量級催跪、快速簡潔的javaScript庫若厚。

jQuery對象

jQuery產(chǎn)生的對象時jQuery獨有的讥邻,只能自己調(diào)用

書寫規(guī)則

支持鏈式操作迫靖;

在變量前加””符號(var”符號(varvariable = jQuery 對象)院峡;

注:此規(guī)定并不是強制要求。

二系宜、尋找元素

選擇器

基本選擇器照激、層級選擇器、屬性選擇器 與CSS類似盹牧,這里不再細說俩垃,詳細猛戳這里。

基本篩選器

$('li:first')//第一個元素

$('li:last')//最后一個元素

$("tr:even")//索引為偶數(shù)的元素汰寓,從 0 開始

$("tr:odd")//索引為奇數(shù)的元素口柳,從 0 開始

$("tr:eq(1)")//給定索引值的元素

$("tr:gt(0)")//大于給定索引值的元素

$("tr:lt(2)")//小于給定索引值的元素

$(":focus")//當前獲取焦點的元素

$(":animated")//正在執(zhí)行動畫效果的元素

內(nèi)容選擇器

$("div:contains('nick')")//包含nick文本的元素

$("td:empty")//不包含子元素或者文本的空元素

$("div:has(p)")//含有選擇器所匹配的元素

$("td:parent")//含有子元素或者文本的元素

表單選擇器

$(":input")//匹配所有 input, textarea, select 和 button 元素

$(":text")//所有的單行文本框

$(":password")//所有密碼框

$(":radio")//所有單選按鈕

$(":checkbox")//所有復(fù)選框

$(":submit")//所有提交按鈕

$(":reset")//所有重置按鈕

$(":button")//所有button按鈕

$(":file")//所有文件域

$("input:checked")//所有選中的元素

$("select option:selected")//select中所有選中的option元素

篩選器

過濾

$("p").eq(0)//當前操作中第N個jQuery對象,類似索引

$('li').first()//第一個元素

$('li').last()//最后一個元素

$(this).hasClass("test")//元素是否含有某個特定的類,返回布爾值

$('li').has('ul')//包含特定后代的元素

查找

$("div").children()//div中的每個子元素,第一層

$("div").find("span")//div中的包含的所有span元素,子子孫孫

$("p").next()//緊鄰p元素后的一個同輩元素

$("p").nextAll()//p元素之后所有的同輩元素

$("#test").nextUntil("#test2")//id為"#test"元素之后到id為'#test2'之間所有的同輩元素,掐頭去尾

$("p").prev()//緊鄰p元素前的一個同輩元素

$("p").prevAll()//p元素之前所有的同輩元素

$("#test").prevUntil("#test2")//id為"#test"元素之前到id為'#test2'之間所有的同輩元素,掐頭去尾

$("p").parent()//每個p元素的父元素

$("p").parents()//每個p元素的所有祖先元素,body,html

$("#test").parentsUntil("#test2")//id為"#test"元素到id為'#test2'之間所有的父級元素,掐頭去尾

$("div").siblings()//所有的同輩元素,不包括自己

三、屬性操作

基本屬性操作

$("img").attr("src");//返回文檔中所有圖像的src屬性值

$("img").attr("src","test.jpg");//設(shè)置所有圖像的src屬性

$("img").removeAttr("src");//將文檔中圖像的src屬性刪除

$("input[type='checkbox']").prop("checked",true);//選中復(fù)選框

$("input[type='checkbox']").prop("checked",false);

$("img").removeProp("src");//刪除img的src屬性

CSS類

$("p").addClass("selected");//為p元素加上 'selected' 類

$("p").removeClass("selected");//從p元素中刪除 'selected' 類

$("p").toggleClass("selected");//如果存在就刪除,否則就添加

HTML代碼/文本/值

$('p').html();//返回p元素的html內(nèi)容

$("p").html("Hello nick!");//設(shè)置p元素的html內(nèi)容

$('p').text();//返回p元素的文本內(nèi)容

$("p").text("nick");//設(shè)置p元素的文本內(nèi)容

$("input").val();//獲取文本框中的值

$("input").val("nick");//設(shè)置文本框中的內(nèi)容

四踩寇、CSS操作

樣式

$("p").css("color");//訪問查看p元素的color屬性

$("p").css("color","red");//設(shè)置p元素的color屬性為red

$("p").css({"color":"red","background":"yellow"});//設(shè)置p元素的color為red啄清,background屬性為yellow(設(shè)置多個屬性要用{}字典形式)

位置

$('p').offset()//元素在當前視口的相對偏移,Object {top: 122, left: 260}

$('p').offset().top

$('p').offset().left

$("p").position()//元素相對父元素的偏移,對可見元素有效六水,Object {top: 117, left: 250}

$(window).scrollTop()//獲取滾輪滑的高度

$(window).scrollLeft()//獲取滾輪滑的寬度

$(window).scrollTop('100')//設(shè)置滾輪滑的高度為100

尺寸

$("p").height();//獲取p元素的高度

$("p").width();//獲取p元素的寬度

$("p:first").innerHeight()//獲取第一個匹配元素內(nèi)部區(qū)域高度(包括補白俺孙、不包括邊框)

$("p:first").innerWidth()//獲取第一個匹配元素內(nèi)部區(qū)域?qū)挾?包括補白、不包括邊框)

$("p:first").outerHeight()//匹配元素外部高度(默認包括補白和邊框)

$("p:first").outerWidth()//匹配元素外部寬度(默認包括補白和邊框)

$("p:first").outerHeight(true)//為true時包括邊距

五掷贾、文檔處理

內(nèi)部插入

$("p").append("nick");//每個p元素內(nèi)后面追加內(nèi)容

$("p").appendTo("div");//p元素追加到div內(nèi)后

$("p").prepend("Hello");//每個p元素內(nèi)前面追加內(nèi)容

$("p").prependTo("div");//p元素追加到div內(nèi)前

外部插入

$("p").after("nick");//每個p元素同級之后插入內(nèi)容

$("p").before("nick");//在每個p元素同級之前插入內(nèi)容

$("p").insertAfter("#test");//所有p元素插入到id為test元素的后面

$("p").insertBefore("#test");//所有p元素插入到id為test元素的前面

替換

$("p").replaceWith("Paragraph. ");//將所有匹配的元素替換成指定的HTML或DOM元素

$("Paragraph. ").replaceAll("p");//用匹配的元素替換掉所有 selector匹配到的元素

刪除

$("p").empty();//刪除匹配的元素集合中所有的子節(jié)點睛榄,不包括本身

$("p").remove();//刪除所有匹配的元素,包括本身

$("p").detach();//刪除所有匹配的元素(和remove()不同的是:所有綁定的事件、附加的數(shù)據(jù)會保留下來)

復(fù)制

$("p").clone()//克隆元素并選中克隆的副本

$("p").clone(true)//布爾值指事件處理函數(shù)是否會被復(fù)制

六想帅、事件

頁面載入

當頁面載入成功后再運行的函數(shù)事件

$(document).ready(function(){

dosomething...

});

//簡寫

$(function($){

dosomething...

});

頁面處理

//bind 為每個匹配元素綁定事件處理函數(shù)场靴,綁定多個用{}。

$("p").bind("click",function(){

alert($(this).text());

});

$(menuF).bind({

"mouseover":function(){

$(menuS).parent().removeClass("hide");

},"mouseout":function(){

$(menuS).parent().addClass("hide");

}

});

$("p").one("click",fun...)//one 綁定一個一次性的事件處理函數(shù)

$("p").unbind("click")//解綁一個事件

頁面委派

// 與bind 不同的是當時間發(fā)生時才去臨時綁定港准。

$("p").delegate("click",function(){

dosomething...

});

$("p").undelegate();//p元素刪除由 delegate() 方法添加的所有事件

$("p").undelegate("click")//從p元素刪除由 delegate() 方法添加的所有click事件

事件

$("p").click();//單擊事件

$("p").dblclick();//雙擊事件

$("input[type=text]").focus()//元素獲得焦點時,觸發(fā) focus 事件

$("input[type=text]").blur()//元素失去焦點時,觸發(fā) blur事件

$("button").mousedown()//當按下鼠標時觸發(fā)事件

$("button").mouseup()//元素上放松鼠標按鈕時觸發(fā)事件

$("p").mousemove()//當鼠標指針在指定的元素中移動時觸發(fā)事件

$("p").mouseover()//當鼠標指針位于元素上方時觸發(fā)事件

$("p").mouseout()//當鼠標指針從元素上移開時觸發(fā)事件

$(window).keydown()//當鍵盤或按鈕被按下時觸發(fā)事件

$(window).keypress()//當鍵盤或按鈕被按下時觸發(fā)事件,每輸入一個字符都觸發(fā)一次

$("input").keyup()//當按鈕被松開時觸發(fā)事件

$(window).scroll()//當用戶滾動時觸發(fā)事件

$(window).resize()//當調(diào)整瀏覽器窗口的大小時觸發(fā)事件

$("input[type='text']").change()//當元素的值發(fā)生改變時觸發(fā)事件

$("input").select()//當input 元素中的文本被選擇時觸發(fā)事件

$("form").submit()//當提交表單時觸發(fā)事件

$(window).unload()//用戶離開頁面時

(event object) 對象

所有的事件函數(shù)都可以傳入event參數(shù)方便處理事件

$("p").click(function(event){

alert(event.type);//"click"

});

(evnetobject)屬性方法:

event.pageX//事件發(fā)生時旨剥,鼠標距離網(wǎng)頁左上角的水平距離

event.pageY//事件發(fā)生時,鼠標距離網(wǎng)頁左上角的垂直距離

event.type//事件的類型

event.which//按下了哪一個鍵

event.data//在事件對象上綁定數(shù)據(jù)浅缸,然后傳入事件處理函數(shù)

event.target//事件針對的網(wǎng)頁元素

event.preventDefault()//阻止事件的默認行為(比如點擊鏈接轨帜,會自動打開新頁面)

event.stopPropagation()//停止事件向上層元素冒泡

七、效果

基本

$("p").show()//顯示隱藏的匹配元素

$("p").show("slow");//參數(shù)表示速度,("slow","normal","fast"),也可為900毫秒

$("p").hide()//隱藏顯示的元素

$("p").toggle();//切換 顯示/隱藏

滑動

$("p").slideDown("900");//用900毫秒時間將段落滑下

$("p").slideUp("900");//用900毫秒時間將段落滑上

$("p").slideToggle("900");//用900毫秒時間將段落滑上衩椒,滑下

淡入淡出

$("p").fadeIn("900");//用900毫秒時間將段落淡入

$("p").fadeOut("900");//用900毫秒時間將段落淡出

$("p").fadeToggle("900");//用900毫秒時間將段落淡入,淡出

$("p").fadeTo("slow",0.6);//用900毫秒時間將段落的透明度調(diào)整到0.6

八蚌父、對象訪問

$.trim()//去除字符串兩端的空格

$.each()//遍歷一個數(shù)組或?qū)ο螅琭or循環(huán)

$.inArray()//返回一個值在數(shù)組中的索引位置毛萌,不存在返回-1

$.grep()//返回數(shù)組中符合某種標準的元素

$.extend()//將多個對象苟弛,合并到第一個對象

$.makeArray()//將對象轉(zhuǎn)化為數(shù)組

$.type()//判斷對象的類別(函數(shù)對象、日期對象阁将、數(shù)組對象膏秫、正則對象等等

$.isArray()//判斷某個參數(shù)是否為數(shù)組

$.isEmptyObject()//判斷某個對象是否為空(不含有任何屬性)

$.isFunction()//判斷某個參數(shù)是否為函數(shù)

$.isPlainObject()//判斷某個參數(shù)是否為用"{}"或"new Object"建立的對象

$.support()//判斷瀏覽器是否支持某個特性

模擬each()內(nèi)部實現(xiàn)機制

九、插件拓展機制

//方式一

jQuery.fn.extend({

check:function(){

returnthis.each(function(){this.checked=true;});

},

uncheck:function(){

returnthis.each(function(){this.checked=false;});

}

});

$("input[type=checkbox]").check();

$("input[type=radio]").uncheck();

//方式二

jQuery.extend({

min:function(a,b){returna

max:function(a,b){returna>b?a:b;}

});

jQuery.min(2,3);//2

jQuery.max(4,5);//5

Title

111

222

jQuery.fn.extend({

show1:function(){

varval=this.text();

val=val+"sb";

returnval;

},

show2:function(){

}

});

varret=$(".title").show1();

console.log(ret);

jQuery.extend({

s1:function(arg){

varval=$(arg).text();

returnval+"sb";

},

s2:function(){

}

});

varret2=$.s1(".title");

console.log(ret2);

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末做盅,一起剝皮案震驚了整個濱河市荔睹,隨后出現(xiàn)的幾起案子狸演,更是在濱河造成了極大的恐慌,老刑警劉巖僻他,帶你破解...
    沈念sama閱讀 216,692評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件宵距,死亡現(xiàn)場離奇詭異,居然都是意外死亡吨拗,警方通過查閱死者的電腦和手機满哪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,482評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來劝篷,“玉大人哨鸭,你說我怎么就攤上這事〗考耍” “怎么了像鸡?”我有些...
    開封第一講書人閱讀 162,995評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長哈恰。 經(jīng)常有香客問我只估,道長,這世上最難降的妖魔是什么着绷? 我笑而不...
    開封第一講書人閱讀 58,223評論 1 292
  • 正文 為了忘掉前任蛔钙,我火速辦了婚禮,結(jié)果婚禮上荠医,老公的妹妹穿的比我還像新娘吁脱。我一直安慰自己,他們只是感情好彬向,可當我...
    茶點故事閱讀 67,245評論 6 388
  • 文/花漫 我一把揭開白布兼贡。 她就那樣靜靜地躺著,像睡著了一般娃胆。 火紅的嫁衣襯著肌膚如雪遍希。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,208評論 1 299
  • 那天缕棵,我揣著相機與錄音孵班,去河邊找鬼。 笑死招驴,一個胖子當著我的面吹牛篙程,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播别厘,決...
    沈念sama閱讀 40,091評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼虱饿,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起氮发,我...
    開封第一講書人閱讀 38,929評論 0 274
  • 序言:老撾萬榮一對情侶失蹤渴肉,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后爽冕,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體仇祭,經(jīng)...
    沈念sama閱讀 45,346評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,570評論 2 333
  • 正文 我和宋清朗相戀三年颈畸,在試婚紗的時候發(fā)現(xiàn)自己被綠了乌奇。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,739評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡眯娱,死狀恐怖礁苗,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情徙缴,我是刑警寧澤试伙,帶...
    沈念sama閱讀 35,437評論 5 344
  • 正文 年R本政府宣布,位于F島的核電站于样,受9級特大地震影響疏叨,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜百宇,卻給世界環(huán)境...
    茶點故事閱讀 41,037評論 3 326
  • 文/蒙蒙 一考廉、第九天 我趴在偏房一處隱蔽的房頂上張望秘豹。 院中可真熱鬧携御,春花似錦、人聲如沸既绕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,677評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽凄贩。三九已至誓军,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間疲扎,已是汗流浹背昵时。 一陣腳步聲響...
    開封第一講書人閱讀 32,833評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留椒丧,地道東北人壹甥。 一個月前我還...
    沈念sama閱讀 47,760評論 2 369
  • 正文 我出身青樓,卻偏偏與公主長得像壶熏,于是被迫代替她去往敵國和親句柠。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,647評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 一、簡介 定義 jQuery創(chuàng)始人是美國John Resig溯职,是優(yōu)秀的Javascript框架精盅; jQuery是一...
    HarryBotter閱讀 237評論 0 0
  • 一、簡介 定義 jQuery創(chuàng)始人是美國John Resig谜酒,是優(yōu)秀的Javascript框架叹俏; jQuery是一...
    西柚子啊喂閱讀 272評論 0 1
  • (續(xù)jQuery基礎(chǔ)(1)) 第5章 DOM節(jié)點的復(fù)制與替換 (1)DOM拷貝clone() 克隆節(jié)點是DOM的常...
    凜0_0閱讀 1,338評論 0 8
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性僻族。 1....
    LaBaby_閱讀 1,171評論 0 1
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式她肯。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,335評論 0 2