當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jquery 总结

發布時間：2025/3/16 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 jquery 总结小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

jQuery知識總結

jQuery一直都在用，但都是在用時查查手冊，并沒有系統的學過，最近組內做jQuery交流，花了幾天時間系統了學習了下，做了個PPT，本文是根據PPT總結而來，有些地方做了些補充。希望對jQuery初學者有些幫助。

jQuery簡介

簡介

jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫的更少,做的更多)。 jQuery在2006年1月由美國人John?Resig在紐約的barcamp發布，吸引了來自世界各地的眾多javascript高手加入，現在由Dave Methvin率領團隊進行開發。如今， jQuery已經成為最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery 。【摘自百度百科】

下載地址

http://jquery.com/

源碼地址

https://github.com/jquery/jquery

可以通過 git clone git://github.com/jquery/jquery.git 來獲取源碼。

在線文檔

http://www.ostools.net/apidocs/apidoc?api=jquery

http://www.ostools.net/上有各種在線工具，在此推薦下。

使用jQuery

使用jQuery首先需要在頁面中進行引用，如下：

使用的代碼如下：

$(document).ready(function () {$("#div1").html("hello world"); });$(function () {$("#btnOK").bind("click", function () { }); });

上面的代碼相當于window.onload，不過跟window.onload還是有一些區別，后面會以表格的形式來展現他們的區別。在jQuery中到處可以見到$符號，這是jQuery里的一種簡寫，$("#btnOK")和jQuery("#btnOK")是等價的。

window.onload和$(document).ready()的區別

?	window.onload	$(document).ready()
執行時間	網頁所有內容加載完后執行	DOM結構加載完后就執行，效率更高
編寫個數	1個	多個，多個的執行順序取決于函數的順序以及引用文件的順序
是否支持簡寫	不支持	簡寫形式為：$(function(){});

DOM對象和jQuery對象轉換

獲取DOM對象代碼如下：

//獲取DOM對象 var div1 = document.getElementById("div1"); div1.innerHTML = "oec2003";

獲取jQuery對象代碼如下:

//獲取jQuery對象 var div1 = $("#div1"); div1.html("oec2003");

jQuery對象轉DOM對象

//因為ajQuery對象是一個數組對象，所以轉換為DOM對象時要用索引的形式 var $div1 = $("#div1"); //jQuery對象 var div1 = $div1[0]; //轉換為了DOM對象 var div2 = $div1.get(0); //和上面一行效果一樣 div1.innerHTML = "oec2003";

DOM對象轉jQuery對象

//DOM對象轉jQuery只需用$包裝即可 var div1 = document.getElementById("div1"); var $div1 = $(div1); //轉換為了jQuery對象 $div1.html("oec2003");

解決沖突

有時會有jQuery和其他的庫或自己寫的一些公共腳本文件一起使用的場景，就有可能會出現$沖突的問題，沖突的解決分兩種情況：

1、jQuery庫在其他庫之后引用，如下所示：

在common.js中有對$重新定義，代碼如下：

function $(id) {return document.getElementById(id); }

下面是在jQuery中解決沖突的代碼，有四種方式：

//方式1 jQuery.noConflict(); //將$控制權移交出去，以前使用$的地方都改用jQuery jQuery(document).ready(function () {alert(jQuery("#span1").html()); }); window.onload = function () {$("span1").innerHTML = "oec2003"; }//方式2 var $j=jQuery.noConflict(); //定義快捷方式 $j(document).ready(function () {alert($j("#span1").html()); });window.onload = function () {$("span1").innerHTML = "oec2003"; }//方式3 jQuery.noConflict(); //在函數內部繼續使用$ jQuery(function ($) {alert($("#span1").html()); }); window.onload = function () {$("span1").innerHTML = "oec2003"; }//方式4 jQuery.noConflict(); //在函數內部繼續使用$另一種方式 (function ($) {$(function(){alert($("#span1").html());}); })(jQuery); window.onload = function () {$("span1").innerHTML = "oec2003"; }

2、jQuery庫在其他庫之前使用

//如果先引用jQuery腳本，可以不使用noConflict //jQuery.noConflict(); jQuery(document).ready(function () {alert(jQuery("#span1").html()); }); window.onload = function () {$("span1").innerHTML = "oec2003"; }

選擇器

基本選擇器

<body><div><div id="div1">aaaaaaaaaaa</div><div class="c1">bbbbbbbbb</div><span>ccccccccc</span></div> </body> $(function () {$("#div1").html("hello world 1"); //根據id匹配元素（a）$(".c1").html("hello world 2"); //根據Yclass匹配元素（b）$("span").html("hello world 3"); //根據元素名稱匹配（c）$("span,div.c1").html("hello world 4"); //匹配頁面所有的span 和class=c1的div（b c）$("*").html("hello world 5"); //匹配頁面所有元素,也包含body});

層級選擇器

<body><span id="span1">aaaaaaaaa</span><span class="c1">bbbbbbbbb</span><div>ccccccccc<span>ddddddddd</span></div><div>eeeeeeeee</div> </body> $(function () {$("body span").html("hello world 1"); //選取body中所有的span（a b d）$("body>span").html("hello world 2"); //選取body元素的子span元素(a b)$("span.c1+div").html("hello world 3"); //選取class為c1的span的下一個div元素，注意是同級元素$("span.c1").next().html("hello world 3"); //跟上行效果相同 (c)$("span.c1~div").html("hello world 4"); //選取class為c1的span的后面的所有div$("span.c1").nextAll().html("hello world 4"); //跟上行效果相同(c e)});

基本過濾選擇器

<body><h1>header1</h1><h2>header2</h2><h3>header3</h3><span id="span1">aaaaaaaaa</span><span class="c1">bbbbbbbbb</span><div>ccccccccc<span>ddddddddd</span></div><div>eeeeeeeee</div> </body> $(function () {$("div:first").html("hello world 1"); //選取所有div中的第一個div$("span:last").html("hello world 2"); //選取所有span中的最后一個$("span:not(.c1)").html("hello world 3"); //選取除class為c1的span外的所有span$("span:even").html("hello world 4"); //選取索引為偶數的span，索引從0開始$("span:odd").html("hello world 5"); //選取索引為奇數的span，索引從0開始$("span:eq(2)").html("hello world 6"); //選取指定索引的span，索引從0開始$("span:gt(0)").html("hello world 7"); //選取大于指定索引的span，不包含指定索引$("span:lt(2)").html("hello world 8"); //選取小于指定索引的span，不包含指定索引$(":header").html("hello world 9"); //選取頁面中所有的標題元素 h1 h2 h3...});

內容過濾選擇器

屬性過濾選擇器

<body><span id="span1">aaaaaaaaa</span><span class="c1">bbbbbbbbb</span><span></span><div>ccccccccc<span id="span2" class="c2">ddddddddd</span></div><div>eeeeeeeee</div> </body> $(function () {$("span[id]").html("hello world 1"); //選取有屬性id的span元素$("span[id=span2]").html("hello world 2"); //選取屬性id等于span2的span元素$("span[id!=span2]").html("hello world 3"); //選取屬性id不等于為span2的span元素$("span[id^=span]").html("hello world 4"); //選取屬性id以span開始的span元素$("span[id$=2]").html("hello world 5"); //選取屬性id以2結尾的span元素$("span[id*=an]").html("hello world 6"); //選取屬性id包含an的span元素$("span[id*=an][class$=2]").html("hello world 6"); //選取屬性id包含an并且class以結尾的span元素});

子元素過濾選擇器

<body><div class="c1"><span>aaaaaaaa</span><span>cccccccc</span><span>dddddddd</span></div><div class="c1"><span>aaaaaaaa</span><span>cccccccc</span><span>dddddddd</span></div><div class="c1"><span>aaaaaaaa</span></div> </body> $(function () {$("div.c1 :nth-child(1)").html("hello world 1"); //選取class等于c1的div的指定索引子元素$("div.c1 :nth-child(even)").html("hello world 2"); //選取class等于c1的div的偶數子元素$("div.c1 :nth-child(odd)").html("hello world 3"); //選取class等于c1的div的奇數子元素$("div.c1 :first-child").html("hello world 4"); //選取class等于c1的div的第一個子元素$("div.c1 :last-child").html("hello world 5"); //選取class等于c1的div的最后一個子元素$("div.c1 :only-child").html("hello world 6"); //選取class等于c1的div只有一個子元素的子元素});

表單選擇器

<body><form id="form1" action="#"><input type="button" value="button1" /><input type="text" value="text1" /><input type="text" value="text2" /><textarea rows="8" cols="40"></textarea><br /><input type="checkbox" name="chk" />籃球<input type="checkbox" name="chk" />足球<input type="password" /><input type="hidden" /><br /><select multiple="multiple"><option selected="selected">武漢</option><option selected="selected">黃岡</option><option >麻城</option></select><input id="n" type="radio" name="s"/>男<input type="radio" name="s"/>女<br /><input type="submit" /><input type="reset" /></form> </body> $(function () {//表單中的表單元素$("#form1 :input").val("hello world 1");//表單中的input元素$("#form1 input").val("hello world 1");$(":text").val("hello world 2");$(":password").val("hello world 3");//男的單選框被選中$(":radio[id=n]").attr("checked", true);$(":checkbox[name=chk]").length;$(":submmit").val("提交");$(":reset").val("重置");$(":button").val("hello world 4");$(":hidden").val("hello world 5"); });

表單對象屬性過濾選擇器

<body><form id="form1" action="#"><input type="text" disabled="disabled" value="禁用1" /><input type="text" value="啟用1" /><input type="text" disabled="disabled" value="禁用2" /><input type="text" value="啟用2" /><input type="checkbox" name="chk" value="籃球" checked="checked"/>籃球<input type="checkbox" name="chk" value="足球" />足球<input type="checkbox" name="chk" value="編程" checked="checked"/>編程<input type="checkbox" name="chk" value="旅游" checked="checked"/>旅游<select multiple="multiple"><option selected="selected">武漢</option><option selected="selected">黃岡</option><option >麻城</option></select></form> $(function () {$("#form1 input:enabled").val("hello world 1"); //選取form表單中沒有禁用的文本框$("#form1 input:disabled").val("hello world 2"); //選取form表單中沒有禁用的文本框$("#form1 input:checked").attr("checked",false); //選取form表單中選的復選框$("select option[selected]").each(function () {alert($(this).val());});});

使用選擇器要注意的地方

<body><div id="div#1">aaaaaaaaaaa</div><div class="c[1]">bbbbbbbbb</div><div class="c1"><div name="div">ccccccccc</div><div name="div">ddddddddd</div><div name="div">eeeeeeeee</div><div class="c1" name="div">fffffffff</div></div><div class="c1" name="div">gggggggg</div><div class="c1" name="div">hhhhhhhh</div> </body> $(function () {//有時在id或是class中有一些特殊字符如 [等，需要用反斜杠進行轉義$("#div\\#1").html("hello world 1");$(".c\\[1\\]").html("hello world 2");//有沒有空格的區別//有空格是選取class等于c1的div里面的name等于div的div（c d e f）$(".c1 [name=div]").html("hello world 3");//沒有空格是選取class等于c1并且name等于div的div (f g h)$(".c1[name=div]").html("hello world 4");});

幾個簡單的示例

折疊效果，很常用的一個功能，在寫博客插入代碼時，有些就支持代碼折疊。實現代碼如下：

<body><div id="div"><h3>jQuery簡ò介é</h3><div id="content">jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫的更少,做的更多)。 jQuery在2006年1月由美國人John Resig在紐約的barcamp發布，吸引了來自世界各地的眾多javascript高手加入，現在由Dave Methvin率領團隊進行開發。如今，jQuery已經成為流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery 。</div></div> </body> $(function () {//方法1$("#div h3").bind("click", function () {if ($("#content").is(":visible")) {$("#content").hide();} else {$("#content").show();}});//方法2$("#div h3").toggle(function () { $("#content").hide(); }, function () { $("#content").show(); });});

斑馬線，這個在列表中非常常見。

<table id="tbl" cellpadding="0" cellspacing="0"><tr><th>第一季度</th><th>第二季度</th><th>第三季度</th><th>第四季度</th></tr><tr><td>5444</td><td>3453</td><td>453</td><td>5656</td></tr><tr><td>5454</td><td>7676</td><td>4454</td><td>333</td></tr><tr><td>333</td><td>556</td><td>44</td><td>55</td></tr> </table> <script type="text/javascript">$(function () {//實現單雙行以不同的顏色間隔$("#tbl tr:odd").addClass("trOdd");//實現點擊行，改變好行的背景色$("#tbl tr").click(function () {$(this).addClass("trOdd").siblings().removeClass("trOdd");});}); </script><style type="text/css">#tbl{width:300px; border:solid 1px #666; background-color:#eee;}#tbl tr{ line-height:25px;}#btl tr th{ background-color:#ccc;color:#fff;}#tbl .trOdd{ background-color:#fff;} </style>

CheckBox全選，列表中很常用的功能。

<table id="tbl" cellpadding="0" cellspacing="0"><tr><th><input id="chkAll" type="checkbox" /></th><th>第一季度</th><th>第二季度</th><th>第三季度</th><th>第四季度</th></tr><tr><td><input name="chk" type="checkbox" /></td><td>5444</td><td>3453</td><td>453</td><td>5656</td></tr><tr><td><input name="chk" type="checkbox" /></td><td>5454</td><td>7676</td><td>4454</td><td>333</td></tr> </table> <script type="text/javascript">$(function () {$("#chkAll").bind("click", function () {$("input[name='chk']").attr("checked", $(this).attr("checked") == undefined ? false : true);});$("input[name=chk]").each(function () {$(this).bind("click", function () {$("#chkAll").attr("checked", $("input[name=chk]:checked").length == $("input[name=chk]").length);});});}); </script><style type="text/css">#tbl{width:300px; border:solid 1px #666; background-color:#eee;}#tbl tr{ line-height:25px;}#btl tr th{ background-color:#ccc;color:#fff;}#tbl .trOdd{ background-color:#fff;} </style>

jQuery-Ajax

傳統的實現方式

$(function () {var xmlHttp = null;$("#btn").bind("click", function () {if (window.ActiveXObject) {xmlHttp = new ActiveXObject("MicroSoft.XMLHTTP");} else if (window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();}xmlHttp.open("GET", "JQueryAjax.ashx?name=oec2003", true);xmlHttp.onreadystatechange = requestCallback;xmlHttp.send(null);});var requestCallback = function () {if (xmlHttp.readyState == 4) {if (xmlHttp.status == 200) {$("#div").html(xmlHttp.responseText);}}} });

$.load

<body><input type="button" id="btn" value="Ajax" /><br /><div id="div"></div> </body> $(function () {//加載AjaxWebForm.aspx頁面的id為adiv1的部分，參數以get形式傳遞$("#div").load("AjaxWebForm.aspx?name=oec2003 #div1", function () { });//加載AjaxWebForm.aspx頁面的id為div2的部分，參數以post形式傳遞$("#div").load("AjaxWebForm.aspx #div2", { name1: "oec2003", age: "30" }, callBack);function callBack(responseText, status, xmlHttpObject) {alert(responseText);alert(status);alert(xmlHttpObject);} });

$.get和$.post

$(function () {//$.get參數以json格式收集，最終在url上進行傳遞$("#btn").bind("click", function () {$.get("JQueryAjax.ashx", { name: "oec2003", age: "30" }, callBack);});//data的格式可以是html xml jsonfunction callBack(data, status) {$("#div").html(data);}//$.post$("#btn").bind("click", function () {$.post("JQueryAjax.ashx", { name: "oec2003", age: "30" }, callBack);});//data的格式可以是html xml jsonfunction callBack(data, status) {$("#div").html(data);}});

$.ajax

<body> <form id="form1" action="#">姓名：<input name="name" type="text" id="txtName" /><br />年齡:<input name="age" type="text" id="txtAge" /><br /><input type="button" id="btn" value="Ajax" /><br /> </form><div id="div"></div> </body> $(function () {$("#btn").bind("click", function () {$.ajax({type: "GET",url: "JQueryAjax.ashx",async:true, //同步還是異步，默認為異步dataType: "html",//使用serialize進行數據收集，根據type類型決定傳遞方式data: $("#form1").serialize(),beforeSend: function () {if ($("#txtName").val() != "oec2003") {alert("姓名必須為aoec2003");return false;}},complete: function () {//請求成功或失敗均調用},success: function (data) {$("#div").html(data);},error: function () {$("#div").html("出錯啦！");},global:true //默認為atrue 表示是否出發Ajax全局事件});}); });

jQuery插件

jQuery有非常豐富的插件，插件可以更高效幫助我們去完成特定的功能，下面列舉的是我用到過的很常用的一些插件：

validate

http://plugins.jquery.com/validate/

form

http://www.malsup.com/jquery/form/

uploadify

http://www.uploadify.com/download/

下面鏈接是我10年寫的一篇關于uploadify的博客，雖然現在已經跟換了很多個版本，但還是有一定的參考價值。

http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html

autocomplete

http://plugins.jquery.com/ui.autocomplete/

jQuery UI

http://jqueryui.com/

jQuery EasyUI

http://www.jeasyui.com/index.php

轉載于:https://www.cnblogs.com/mysunny/p/4565603.html

總結

以上是生活随笔為你收集整理的jquery 总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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

jquery

上一篇：已经是最大股东却还要全资收购！腾讯看上了
下一篇：从崩溃的选课系统，论为什么更安全的 HT