一、簡介

定義

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

　　jQuery是一個輕量級、快速簡潔的javaScript庫。源碼戳這

jQuery對象

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

書寫規(guī)則

　　支持鏈式操作；

　　在變量前加"$"符號(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ù)事件

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

頁面處理

//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ū)ο?#xff0c;for循環(huán) $.inArray() //返回一個值在數(shù)組中的索引位置，不存在返回-1 $.grep() 　 //返回數(shù)組中符合某種標(biāo)準的元素 $.extend() //將多個對象，合并到第一個對象 $.makeArray() //將對象轉(zhuǎn)化為數(shù)組 $.type() //判斷對象的類別(函數(shù)對象、日期對象、數(shù)組對象、正則對象等等 $.isArray() //判斷某個參數(shù)是否為數(shù)組 $.isEmptyObject() //判斷某個對象是否為空(不含有任何屬性) $.isFunction() //判斷某個參數(shù)是否為函數(shù) $.isPlainObject() //判斷某個參數(shù)是否為用"{}"或"new Object"建立的對象 $.support() //判斷瀏覽器是否支持某個特性 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><script src="../../jquery-1.12.4.js"></script><script>li = [11,22,33];$.each(li,function (k,v) {console.log(this);console.log(k,v);if (k == 1){return false;}})</script><script>function myEach(obj,func) {for (var i=0;i<obj.length;i++){var current = obj[i];var ret = func(i,current);if (ret == false){break;}}}var li = [10,20,30];myEach(li,function (k,v) {console.log(k,v);return false;})</script> </body> </html>

九、插件拓展機制?

//方式一 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 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div class="title">111</div><div class="title">222</div><script src="../../jquery-1.12.4.js"></script><script>jQuery.fn.extend({show1: function () {var val = this.text();val = val + "sb";return val;},show2: function () {}});var ret = $(".title").show1();console.log(ret);jQuery.extend({s1: function (arg) {var val = $(arg).text();return val + "sb";},s2: function () {}});var ret2 = $.s1(".title");console.log(ret2);</script> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的十分钟玩转 jQuery、实例大全的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。