十分鐘玩轉 jQuery

一壶硅、簡介

定義

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

jQuery是一個輕量級巩螃、快速簡潔的javaScript庫。

jQuery對象

jQuery產生的對象時jQuery獨有的娃磺,只能自己調用

書寫規(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í)行動畫效果的元素

內容選擇器

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

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

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

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

表單選擇器

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

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

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

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

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

$(":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");//設置所有圖像的src屬性

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

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

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

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

CSS類

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

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

//只需要通過空格來間隔 class 值即可一次性清除掉多個 class

$('.xx').removeClass('a b c');

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

HTML代碼/文本/值

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

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

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

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

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

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

四潦牛、CSS操作

樣式

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

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

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

位置

$('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')//設置滾輪滑的高度為100

尺寸

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

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

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

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

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

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

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

五静盅、文檔處理

內部插入

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

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

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

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

外部插入

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

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

$("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ù)會保留下來)

復制

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

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

六蒿叠、事件

頁面載入

當頁面載入成功后再運行的函數(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()//當調整瀏覽器窗口的大小時觸發(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毫秒時間將段落的透明度調整到0.6

八致稀、對象訪問

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

$.each()//遍歷一個數(shù)組或對象,for循環(huán)

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

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

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

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

$.type()//判斷對象的類別(函數(shù)對象、日期對象遇八、數(shù)組對象矛绘、正則對象等等

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

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

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

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

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

模擬each()內部實現(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);

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末刃永,一起剝皮案震驚了整個濱河市货矮,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌斯够,老刑警劉巖次屠,帶你破解...
    沈念sama閱讀 212,542評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異雳刺,居然都是意外死亡劫灶,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,596評論 3 385
  • 文/潘曉璐 我一進店門掖桦,熙熙樓的掌柜王于貴愁眉苦臉地迎上來本昏,“玉大人,你說我怎么就攤上這事枪汪∮磕拢” “怎么了?”我有些...
    開封第一講書人閱讀 158,021評論 0 348
  • 文/不壞的土叔 我叫張陵雀久,是天一觀的道長宿稀。 經(jīng)常有香客問我,道長赖捌,這世上最難降的妖魔是什么祝沸? 我笑而不...
    開封第一講書人閱讀 56,682評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮越庇,結果婚禮上罩锐,老公的妹妹穿的比我還像新娘。我一直安慰自己卤唉,他們只是感情好涩惑,可當我...
    茶點故事閱讀 65,792評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著桑驱,像睡著了一般竭恬。 火紅的嫁衣襯著肌膚如雪跛蛋。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,985評論 1 291
  • 那天痊硕,我揣著相機與錄音赊级,去河邊找鬼。 笑死寿桨,一個胖子當著我的面吹牛此衅,可吹牛的內容都是我干的。 我是一名探鬼主播亭螟,決...
    沈念sama閱讀 39,107評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼挡鞍,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了预烙?” 一聲冷哼從身側響起墨微,我...
    開封第一講書人閱讀 37,845評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎扁掸,沒想到半個月后翘县,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,299評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡谴分,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,612評論 2 327
  • 正文 我和宋清朗相戀三年锈麸,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片牺蹄。...
    茶點故事閱讀 38,747評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡忘伞,死狀恐怖,靈堂內的尸體忽然破棺而出沙兰,到底是詐尸還是另有隱情氓奈,我是刑警寧澤,帶...
    沈念sama閱讀 34,441評論 4 333
  • 正文 年R本政府宣布鼎天,位于F島的核電站舀奶,受9級特大地震影響,放射性物質發(fā)生泄漏斋射。R本人自食惡果不足惜育勺,卻給世界環(huán)境...
    茶點故事閱讀 40,072評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望绩鸣。 院中可真熱鬧怀大,春花似錦、人聲如沸呀闻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,828評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽捡多。三九已至蓖康,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間垒手,已是汗流浹背蒜焊。 一陣腳步聲響...
    開封第一講書人閱讀 32,069評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留科贬,地道東北人泳梆。 一個月前我還...
    沈念sama閱讀 46,545評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像榜掌,于是被迫代替她去往敵國和親优妙。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,658評論 2 350

推薦閱讀更多精彩內容

  • 2016-07-26索寧JavaScript 轉自:http://www.cnblogs.com/suoning/...
    天明_閱讀 440評論 0 1
  • 一憎账、簡介 定義 jQuery創(chuàng)始人是美國John Resig套硼,是優(yōu)秀的Javascript框架; jQuery是一...
    西柚子啊喂閱讀 271評論 0 1
  • (續(xù)jQuery基礎(1)) 第5章 DOM節(jié)點的復制與替換 (1)DOM拷貝clone() 克隆節(jié)點是DOM的常...
    凜0_0閱讀 1,324評論 0 8
  • 1.JQuery 基礎 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式胞皱。設計者無需花費時間糾纏JS復雜的高級特性邪意。 1....
    LaBaby_閱讀 1,167評論 0 1
  • 1.JQuery 基礎 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設計者無需花費時間糾纏JS復雜的高級特性反砌。 1....
    LaBaby_閱讀 1,330評論 0 2