JQ知識整理

一诅炉、基本選擇器:####

A:$('li:first') //第一個元素
B:$('li:last') //最后一個元素
C:$("tr:even") //索引為偶數(shù)的元素勘天,從 0 開始
D:$("tr:odd") //索引為奇數(shù)的元素,從 0 開始
E:$("tr:eq(1)") //給定索引值的元素
F:$("tr:gt(0)") //大于給定索引值的元素
G:$("tr:lt(2)") //小于給定索引值的元素
H:$(":focus") //當前獲取焦點的元素
I:$(":animated") //正在執(zhí)行動畫效果的元素

二鞋仍、內(nèi)容選擇器:####

A:$("div:contains('nick')") //包含nick文本的元素雨饺、
B:$("td:empty") //不包含子元素或者文本的空元素
C:$("div:has(p)") //含有選擇器所匹配的元素
D:$("td:parent") //含有子元素或者文本的元素

表單選擇器####

$(":input") //匹配所有 input, textarea, select 和 button 元素/
$(":text") //所有的單行文本框
$(":password") //所有密碼框
$(":radio") //所有單選按鈕
$(":checkbox") //所有復(fù)選框
$(":submit") //所有提交按鈕
$(":reset") //所有重置按鈕
$(":button") //所有button按鈕
$(":file") //所有文件域
$("input:checked") //所有選中的元素
$("select option:selected") //select中所有選中的option元素

篩選器####

A:過濾

$("p").eq(0) //當前操作中第N個jQuery對象,類似索引
$('li').first() //第一個元素$('li').last() //最后一個元素
$(this).hasClass("test") //元素是否含有某個特定的類,返回布爾值
$('li').has('ul') //包含特定后代的元素

B:查找

$("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() //所有的同輩元素,不包括自己

三、屬性操作####

A:基本屬性操作

$("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屬性

B:CSS類

$("p").addClass("selected");   //為p元素加上 'selected' 類
$("p").removeClass("selected"); //從p元素中刪除 'selected' 類
$("p").toggleClass("selected"); //如果存在就刪除,否則就添加

C:HTML代碼/文本/值

$('p').html();            //返回p元素的html內(nèi)容
$("p").html("Hello <b>nick</b>!"); //設(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操作####

A:**樣式 **

$("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è)置多個屬性要用{}字典形式)

B:位置

$('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

C:尺寸

$("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時包括邊距

五、文檔處理####

A:內(nèi)部插入

$("p").append("<b>nick</b>"); //每個p元素內(nèi)后面追加內(nèi)容
$("p").appendTo("div");     //p元素追加到div內(nèi)后
$("p").prepend("<b>Hello</b>"); //每個p元素內(nèi)前面追加內(nèi)容
$("p").prependTo("div");   //p元素追加到div內(nèi)前

B:外部插入

$("p").after("<b>nick</b>"); //每個p元素同級之后插入內(nèi)容
$("p").before("<b>nick</b>"); //在每個p元素同級之前插入內(nèi)容
$("p").insertAfter("#test"); //所有p元素插入到id為test元素的后面
$("p").insertBefore("#test"); //所有p元素插入到id為test元素的前面

C:替換

$("p").replaceWith("<b>Paragraph. </b>"); //將所有匹配的元素替換成指定的HTML或DOM元素
$("<b>Paragraph. </b>").replaceAll("p"); //用匹配的元素替換掉所有 selector匹配到的元素

D:刪除

$("p").empty(); //刪除匹配的元素集合中所有的子節(jié)點混巧,不包括本身
$("p").remove(); //刪除所有匹配的元素,包括本身
$("p").detach(); //刪除所有匹配的元素(和remove()不同的是:所有綁定的事件枪向、附加的數(shù)據(jù)會保留下來)

E:復(fù)制

$("p").clone()   //克隆元素并選中克隆的副本
$("p").clone(true) //布爾值指事件處理函數(shù)是否會被復(fù)制

六、事件####

A:頁面載入

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

$(document).ready(function()
{ 
do something...
});//簡寫
$(function($)
 { 
do something...
});

B:頁面處理



//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" )        //解綁一個事件

C:頁面委派


// 與bind 不同的是當時間發(fā)生時才去臨時綁定。
$("p").delegate("click",function(){
  do something...
});

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

D:事件

$("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() //用戶離開頁面時

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

$("p").click(function(event){  
 alert(event.type); //"click"  
}); 

(evnet object)屬性方法:
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() //停止事件向上層元素冒泡

七倦畅、效果####

A:基本

$("p").show()     //顯示隱藏的匹配元素
$("p").show("slow"); //參數(shù)表示速度,("slow","normal","fast"),也可為900毫秒
$("p").hide()     //隱藏顯示的元素
$("p").toggle();    //切換 顯示/隱藏

B:滑動

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

C:淡入淡出

$("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() //判斷瀏覽器是否支持某個特性

九罢洲、插件拓展機制

方式一


jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});

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

方式二

jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },    //三元運算
  max: function(a, b) { return a > b ? a : b; }
});

jQuery.min(2,3);     //2
jQuery.max(4,5);    //5
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市文黎,隨后出現(xiàn)的幾起案子惹苗,更是在濱河造成了極大的恐慌,老刑警劉巖耸峭,帶你破解...
    沈念sama閱讀 216,651評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件桩蓉,死亡現(xiàn)場離奇詭異,居然都是意外死亡抓艳,警方通過查閱死者的電腦和手機触机,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評論 3 392
  • 文/潘曉璐 我一進店門帚戳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來玷或,“玉大人,你說我怎么就攤上這事片任∑眩” “怎么了?”我有些...
    開封第一講書人閱讀 162,931評論 0 353
  • 文/不壞的土叔 我叫張陵对供,是天一觀的道長位他。 經(jīng)常有香客問我氛濒,道長,這世上最難降的妖魔是什么鹅髓? 我笑而不...
    開封第一講書人閱讀 58,218評論 1 292
  • 正文 為了忘掉前任舞竿,我火速辦了婚禮,結(jié)果婚禮上窿冯,老公的妹妹穿的比我還像新娘骗奖。我一直安慰自己,他們只是感情好醒串,可當我...
    茶點故事閱讀 67,234評論 6 388
  • 文/花漫 我一把揭開白布执桌。 她就那樣靜靜地躺著,像睡著了一般芜赌。 火紅的嫁衣襯著肌膚如雪仰挣。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,198評論 1 299
  • 那天缠沈,我揣著相機與錄音膘壶,去河邊找鬼。 笑死博烂,一個胖子當著我的面吹牛香椎,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播禽篱,決...
    沈念sama閱讀 40,084評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼畜伐,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了躺率?” 一聲冷哼從身側(cè)響起玛界,我...
    開封第一講書人閱讀 38,926評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎悼吱,沒想到半個月后慎框,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,341評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡后添,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,563評論 2 333
  • 正文 我和宋清朗相戀三年笨枯,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片遇西。...
    茶點故事閱讀 39,731評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖粱檀,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情茄蚯,我是刑警寧澤压彭,帶...
    沈念sama閱讀 35,430評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站壮不,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏询一。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,036評論 3 326
  • 文/蒙蒙 一家凯、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧绊诲,春花似錦送粱、人聲如沸掂之。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至跟压,卻和暖如春胰蝠,著一層夾襖步出監(jiān)牢的瞬間震蒋,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評論 1 269
  • 我被黑心中介騙來泰國打工查剖, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人笋庄。 一個月前我還...
    沈念sama閱讀 47,743評論 2 368
  • 正文 我出身青樓效扫,卻偏偏與公主長得像直砂,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子哆键,可洞房花燭夜當晚...
    茶點故事閱讀 44,629評論 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
  • 2016-07-26索寧JavaScript 轉(zhuǎn)自:http://www.cnblogs.com/suoning/...
    天明_閱讀 440評論 0 1
  • (續(xù)jQuery基礎(chǔ)(1)) 第5章 DOM節(jié)點的復(fù)制與替換 (1)DOM拷貝clone() 克隆節(jié)點是DOM的常...
    凜0_0閱讀 1,338評論 0 8
  • 這一切都是真的 風(fēng)靡磨著安靜枯萎的桔梗花 雨打擊著緘默暗淡的梔子樹 我錯過了每一種植物的盛放 只在醒來時看見生命枯...
    小米小丸子閱讀 412評論 2 5