一、簡介

定義

　　jQuery創始人是美國John Resig，是優秀的Javascript框架；

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

jQuery對象

　　jQuery產生的對象時jQuery獨有的，只能自己調用

書寫規則

　　支持鏈式操作；

　　在變量前加"$"符號(var $variable = jQuery?對象)；

　　注：此規定并不是強制要求。

二、尋找元素

選擇器

基本選擇器、層級選擇器、屬性選擇器 ?與CSS類似，這里不再細說，詳細猛戳這里。

基本篩選器

$('li:first') //第一個元素 $('li:last') //最后一個元素$("tr:even") //索引為偶數的元素，從 0 開始 $("tr:odd") //索引為奇數的元素，從 0 開始$("tr:eq(1)") //給定索引值的元素 $("tr:gt(0)") //大于給定索引值的元素 $("tr:lt(2)") //小于給定索引值的元素$(":focus") //當前獲取焦點的元素 $(":animated") //正在執行動畫效果的元素

內容選擇器

$("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' 類 $("p").toggleClass("selected"); //如果存在就刪除,否則就添加

HTML代碼/文本/值

$('p').html(); 　　　　　　　　　　 //返回p元素的html內容 $("p").html("Hello <b>nick</b>!"); //設置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() //獲取第一個匹配元素內部區域高度(包括補白、不包括邊框) $("p:first").innerWidth() //獲取第一個匹配元素內部區域寬度(包括補白、不包括邊框)$("p:first").outerHeight() //匹配元素外部高度(默認包括補白和邊框) $("p:first").outerWidth() //匹配元素外部寬度(默認包括補白和邊框) $("p:first").outerHeight(true) //為true時包括邊距

?五、文檔處理

?內部插入

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

?外部插入

$("p").after("<b>nick</b>"); //每個p元素同級之后插入內容 $("p").before("<b>nick</b>"); //在每個p元素同級之前插入內容 $("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(); //刪除匹配的元素集合中所有的子節點，不包括本身 $("p").remove(); //刪除所有匹配的元素,包括本身 $("p").detach(); //刪除所有匹配的元素(和remove()不同的是:所有綁定的事件、附加的數據會保留下來)

復制

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

六、事件

頁面載入

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

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

頁面處理

//bind 為每個匹配元素綁定事件處理函數，綁定多個用{}。 $("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 綁定一個一次性的事件處理函數 $("p").unbind( "click" ) //解綁一個事件

頁面委派

// 與bind 不同的是當時間發生時才去臨時綁定。 $("p").delegate("click",function(){do something... });$("p").undelegate(); 　　　//p元素刪除由 delegate() 方法添加的所有事件 $("p").undelegate("click") //從p元素刪除由 delegate() 方法添加的所有click事件

事件

$("p").click(); 　　//單擊事件 $("p").dblclick(); //雙擊事件 $("input[type=text]").focus() //元素獲得焦點時,觸發 focus 事件 $("input[type=text]").blur() //元素失去焦點時,觸發 blur事件 $("button").mousedown()//當按下鼠標時觸發事件 $("button").mouseup() //元素上放松鼠標按鈕時觸發事件 $("p").mousemove() //當鼠標指針在指定的元素中移動時觸發事件 $("p").mouseover() //當鼠標指針位于元素上方時觸發事件 $("p").mouseout() 　//當鼠標指針從元素上移開時觸發事件 $(window).keydown() //當鍵盤或按鈕被按下時觸發事件 $(window).keypress() //當鍵盤或按鈕被按下時觸發事件,每輸入一個字符都觸發一次 $("input").keyup() //當按鈕被松開時觸發事件 $(window).scroll() //當用戶滾動時觸發事件 $(window).resize() //當調整瀏覽器窗口的大小時觸發事件 $("input[type='text']").change() //當元素的值發生改變時觸發事件 $("input").select() //當input 元素中的文本被選擇時觸發事件 $("form").submit() //當提交表單時觸發事件 $(window).unload() //用戶離開頁面時

(event object)?對象

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

$("p").click(function(event){ alert(event.type); //"click" }); (evnet object)屬性方法： event.pageX 　 //事件發生時，鼠標距離網頁左上角的水平距離 event.pageY 　 //事件發生時，鼠標距離網頁左上角的垂直距離 event.type 　　//事件的類型 event.which 　 //按下了哪一個鍵 event.data 　　//在事件對象上綁定數據，然后傳入事件處理函數 event.target 　//事件針對的網頁元素 event.preventDefault() 　//阻止事件的默認行為(比如點擊鏈接，會自動打開新頁面) event.stopPropagation() //停止事件向上層元素冒泡

?七、效果

?基本

$("p").show() 　　　　//顯示隱藏的匹配元素 $("p").show("slow"); //參數表示速度,("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() 　　//遍歷一個數組或對象，for循環 $.inArray() //返回一個值在數組中的索引位置，不存在返回-1 $.grep() 　 //返回數組中符合某種標準的元素 $.extend() //將多個對象，合并到第一個對象 $.makeArray() //將對象轉化為數組 $.type() //判斷對象的類別(函數對象、日期對象、數組對象、正則對象等等 $.isArray() //判斷某個參數是否為數組 $.isEmptyObject() //判斷某個對象是否為空(不含有任何屬性) $.isFunction() //判斷某個參數是否為函數 $.isPlainObject() //判斷某個參數是否為用"{}"或"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>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。