一、簡介定義 jQuery創(chuàng)始人是美國John Resig,是優(yōu)秀的Javascript框架; jQuery是一個輕量級、快速簡潔的javaScript庫。源碼戳這 jQuery對象jQuery產(chǎn)生的對象時jQuery獨有的,只能自己調(diào)用 書寫規(guī)則支持鏈?zhǔn)讲僮鳎?/p> 在變量前加"$"符號(var $variable = 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") //當(dāng)前獲取焦點的元素 $(":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) //當(dāng)前操作中第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 <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操作樣式$("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() //元素在當(dāng)前視口的相對偏移,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("<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)前 外部插入$("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元素的前面 替換$("p").replaceWith("<b>Paragraph. </b>"); //將所有匹配的元素替換成指定的HTML或DOM元素 $("<b>Paragraph. </b>").replaceAll("p"); //用匹配的元素替換掉所有 selector匹配到的元素 刪除$("p").empty(); //刪除匹配的元素集合中所有的子節(jié)點,不包括本身 $("p").remove(); //刪除所有匹配的元素,包括本身 $("p").detach(); //刪除所有匹配的元素(和remove()不同的是:所有綁定的事件、附加的數(shù)據(jù)會保留下來) 復(fù)制$("p").clone() //克隆元素并選中克隆的副本 $("p").clone(true) //布爾值指事件處理函數(shù)是否會被復(fù)制
六、事件頁面載入當(dāng)頁面載入成功后再運行的函數(shù)事件 頁面處理//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 不同的是當(dāng)時間發(fā)生時才去臨時綁定。 $("p").delegate("click",function(){ do something... }); $("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()//當(dāng)按下鼠標(biāo)時觸發(fā)事件 $("button").mouseup() //元素上放松鼠標(biāo)按鈕時觸發(fā)事件 $("p").mousemove() //當(dāng)鼠標(biāo)指針在指定的元素中移動時觸發(fā)事件 $("p").mouseover() //當(dāng)鼠標(biāo)指針位于元素上方時觸發(fā)事件 $("p").mouseout() //當(dāng)鼠標(biāo)指針從元素上移開時觸發(fā)事件 $(window).keydown() //當(dāng)鍵盤或按鈕被按下時觸發(fā)事件 $(window).keypress() //當(dāng)鍵盤或按鈕被按下時觸發(fā)事件,每輸入一個字符都觸發(fā)一次 $("input").keyup() //當(dāng)按鈕被松開時觸發(fā)事件 $(window).scroll() //當(dāng)用戶滾動時觸發(fā)事件 $(window).resize() //當(dāng)調(diào)整瀏覽器窗口的大小時觸發(fā)事件 $("input[type='text']").change() //當(dāng)元素的值發(fā)生改變時觸發(fā)事件 $("input").select() //當(dāng)input 元素中的文本被選擇時觸發(fā)事件 $("form").submit() //當(dāng)提交表單時觸發(fā)事件 $(window).unload() //用戶離開頁面時 (event object) 對象所有的事件函數(shù)都可以傳入event參數(shù)方便處理事件 $("p").click(function(event){ alert(event.type); //"click" }); (evnet object)屬性方法: event.pageX //事件發(fā)生時,鼠標(biāo)距離網(wǎng)頁左上角的水平距離 event.pageY //事件發(fā)生時,鼠標(biāo)距離網(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ū)ο?,for循環(huán) $.inArray() //返回一個值在數(shù)組中的索引位置,不存在返回-1 $.grep() //返回數(shù)組中符合某種標(biāo)準(zhǔn)的元素 $.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 ![]()
十、實例![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
|