檢視 JQuery 的原始碼

{{DISPLAYTITLE:jQuery}}
{{Infobox Software
|name = jQuery
|logo = [[File:Jquerylogo.png|120px]]
|screenshot =
|caption =
|author =
|developer = jQuery Team
|released =
|latest release template =
|latest release version = 3.6.0
|latest release date = {{Start date and age|2021|3|2}}
|latest preview version = 
|latest preview date = 
|operating system = 跨平台
|platform =
|language =
|genre = Web application framework
|license = {{GPL}} / {{MIT}}
|website = [http://jquery.com/ jquery.com]
}}
'''jQuery'''，{{Wikipedia|JQuery|lang=en}}
*[https://jquery.com/ jQuery]

==技術文件==
*[https://api.jquery.com/ jQuery API Documentation]

;其他
*[https://www.w3schools.com/jquery/ jQuery Tutorial | w3schools]

<!--
==官方網站==
*jQuery 官網 [http://jquery.com/ 英文] - [http://www.jquery.com.tw/ 繁體中文]
:*[http://docs.jquery.com/Main_Page 技術文件] - [http://docs.jquery.com/Downloading_jQuery 下載] - [http://plugins.jquery.com/ 相關外掛]
:*[http://api.jquery.com/ jQuery API Documentation]
:*jQuery API棄用於[https://api.jquery.com/category/deprecated/deprecated-1.3/ 1.3]、[https://api.jquery.com/category/deprecated/deprecated-1.7/ 1.7]、[https://api.jquery.com/category/deprecated/deprecated-1.8/ 1.8]、[https://api.jquery.com/category/deprecated/deprecated-1.10/ 1.10]
:*[http://try.jquery.com/ Code School - Try jQuery]
:*[http://visualjquery.com/1.1.2.html 技術文件(Visual jQuery版)]（已過時）

*jQuery UI
:*[http://api.jqueryui.com/ 技術文件] - [http://jqueryui.com/download/ 下載] - [http://jqueryui.com/demos/ Demo]
:*完整下載JQuery UI 1.9.0 以後版本 [http://jqueryui.com/download/all/ All jQuery UI Downloads]
:*完整下載JQuery UI 1.8.24以前版本，使用[[Subversion|SVN]]用戶端的方法，將下列URL內的檔案全部下載
 http://jquery-ui.googlecode.com/svn/tags/1.8.24/

==技術文件==
*[http://blog.darkthread.net/post-2013-01-28-jquery-1-9-migrate.aspx jQuery 1.9升級指南]

* MSDN
*[http://msdn.microsoft.com/zh-tw/scriptjunkie/ee730275.aspx JQuery 開發者都該知道的六件事]
*[http://msdn.microsoft.com/zh-tw/scriptjunkie/ff608209.aspx 如何建立你自己的 jQuery 外掛]
:*[http://msdn.microsoft.com/zh-tw/asp.net/dd310332.aspx#jQuery jQuery - 「邊做邊學」系列影片]

* 相關教學
:*[http://jquery14.com/ The 14 Days of jQuery!]
:*[http://15daysofjquery.com/ 15 Days Of jQuery]
:*[http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/ jQuery Tutorials for Designers]
:*[http://jsgears.com/tag.php?name=jQuery jQuery - jsGears.com 技術論壇]
:*[http://jsgears.com/thread-63-1-1.html jQuery 教學 - 基礎篇]

*其他版本的jQuery
:*[http://www.dotblogs.com.tw/topcat/2008/08/21/4968 jQuery在VS2008 SP1中文版中可以使用Intellisense了]
:*[http://www.mustafaozcan.net/en/post/2008/06/15/JQuery-1-2-6-Intellisense-for-Visual-Studio-2008.aspx JQuery 1.2.6 Intellisense for Visual Studio 2008]（配合Visual Studio 2008 SP1使用）
:*[http://www.cnblogs.com/wuchang/archive/2008/02/18/1072797.html 让VS2008对JQuery语法的智能感知更完美一点]

*其他
:*[http://www.cnblogs.com/Files/Liaoyizhi/jQuery1.2API.rar jQuery 1.2 API CHM檔(簡体中文)]
:*[https://ithelp.ithome.com.tw/questions/10021702 10個超好用的撰寫jQuery技巧]
:*[http://www.w3.org/TR/css3-selectors/ Selectors Level 3 - W3C]（類似jQuery的Selectors）
:*[http://www.google.com/codesearch/p?hl=zh-TW&sa=N&cd=1&ct=rc#PSg8XFiA2K0/jquery/src/core.js git://github.com/JackDanger/jquery.git]
//--->
==應用==
===多功能套件===
*[http://interface.eyecon.ro/download Interface elements for jQuery]……擴充JQuery的功能

===Accordion(手風琴效果)===
*[http://bassistance.de/jquery-plugins/jquery-plugin-accordion/ jQuery plugin: Accordion]
*[http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm Accordion Content script]

===Animation Effects（動畫效果）===
*[http://gsgd.co.uk/sandbox/jquery/easing/ jQuery Easing Plugin]

;翻頁效果
*[http://www.turnjs.com turn.js - The page flip effect for HTML5]

===AutoComplete(自動完成)===
*[http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ jQuery plugin: Autocomplete]
*[http://code.google.com/p/js-autocomplete/ Javascript jQuery Autocomplete Plugin]
*[http://wyf.javaeye.com/blog/393359 jQuery AutoComplete]
*[http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/ jQuery Plugin: Tokenizing Autocomplete Text Entry]（似乎是功能最完整的）
*[https://github.com/twitter/typeahead.js/ typeahead.js]
*[[jQuery Autocomplete Mod]]

===Cascading Dropdown（連動式下拉選單）===
*[https://github.com/dnasir/jquery-cascading-dropdown jQuery Cascading Dropdown Plugin]

===Charts(圖表)===
*[http://www.maxb.net/scripts/jgcharts/include/demo/#1 jQuery Google Charts 1.0]
*[http://jsgt.org/lib/jquery/plugin/jqchart/sample/v003/test-use-gradient.html jQchart + CanvasGradient]
*[http://www.jqplot.com/ jqPlot]
*[http://bernii.github.io/gauge.js/ gauge.js]（指針圖）

===CSS===
*[http://code.google.com/p/css-template-layout/ css-template-layout]
*[https://github.com/brandonaaron/jquery-cssHooks jquery-cssHooks]

===DOM===
*[http://dohpaz.com/flydom/ FlyDOM] - Create DOM on the Fly

===Files===
*[http://www.uploadify.com/ Uploadify] - JQuery File Upload Plugin

===Grid===
*[[jqGrid]]
*[http://www.datatables.net/ jQuery DataTables]
*[http://smashinghub.com/best-jquery-pagination-plugins.htm 21 Best jQuery Pagination Plugins]（分頁顯示用的按鈕條）
*[https://www.jqueryscript.net/table/jQuery-Plugin-For-Fixed-Table-Header-Footer-Columns-TableHeadFixer.html jQuery Plugin For Fixed Table Header, Footer and Columns - TableHeadFixer]

===Hotkeys===
*[http://code.google.com/p/js-hotkeys/ Javascript jQuery Hotkeys Plugin]

===KeyPad===
*[http://keith-wood.name/keypad.html jQuery Keypad]
**[http://www.dotblogs.com.tw/joysdw12/2010/10/28/18647 jquery-keypad 虛擬鍵盤使用方式]
{{HideH|FAQ}}
*如果應用在[[AJAX Control Toolkit]]的ModalPopupExtender所觸發的彈出式區塊內，會因為jquery.keypad.css裡的.keypad-popup 所定義的 z-index: 10; 而被彈出式區塊蓋在底下，而無法使用Keypad，因此要把該z-index改為100002，方可正常使用
{{HideF}}

===Menu===
*[http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/ Creating a Floating HTML Menu Using jQuery and CSS]
*[http://www.dynamicdrive.com/dynamicindex1/gooeymenu.htm jQuery Gooey Menu]
*[http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/ jQuery Multi Level CSS Menu 2]
*[http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm Accordion Menu script]
*[http://www.barandis.com/dev/jquery/ddmenu/classes.html BDC DrillDown Menu CSS Class Reference]
*[http://www.givainc.com/labs/mcdropdown_jquery_plugin.htm mcDropdown]（用於多層式功能選單）
*[http://www.i-marco.nl/weblog/jquery-accordion-menu/ Simple JQuery Accordion menu]
*[http://p.sohei.org/jquery-plugins/menu/ jQuery menu plugin]
*[http://qrayg.com/experiment/cssmenus/ CSS Menus (with some help from jQuery) › qrayg.com]
*[http://apycom.com/ jQuery Drop Down Menu, Web Buttons, Animated jQuery Menu, Navigation Bar, Java Menus for your Website!]
*[http://www.noupe.com/inspiration/tutorials-inspiration/drop-down-menu-jquery-css.html?hc_location=ufi Sexy Drop Down Menu w/ jQuery & CSS - noupe]

;ContextMenu Plugin
*[http://medialize.github.io/jQuery-contextMenu/ jQuery ContextMenu Plugin]
*[http://www.javascripttoolbox.com/lib/contextmenu/ jQuery ContextMenu Plugin]（與多個jQuery Plugin互沖，待查）
<!-- 倒了?
 *[http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/#download jQuery Context Menu Plugin]
-->

;Image Menu
*[http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.html Image Menu with Jquery]
*[http://snook.ca/archives/javascript/jquery-bg-image-animations/ Using jQuery for Background Image Animations]
*[http://www.tyssendesign.com.au/articles/animated-navigation-items-using-jquery/ Animated navigation items using jQuery — Tyssen Design]

;其他
*[http://www.iansuttle.com/blog/page/jQuery-FishEye-Plugin.aspx jQuery FishEye Plugin]

===Modal Dialog Boxes===
<!-- *[http://famspam.com/facebox Facebox]-->
*[http://www.ericmmartin.com/simplemodal/ SimpleModal]
*[http://jquery.com/demo/thickbox/ ThickBox]
*[http://dev.iceburg.net/jquery/jqModal/ jqModal]
*[http://abeautifulsite.net/2008/12/jquery-alert-dialogs/ jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements)]

===Tabs(頁籤)===
*[http://abgne.tw/jquery/apply-jquery/jquery-web-tabs.html 利用 jQuery 來製作網頁頁籤(Tab)]
*[https://jqueryui.com/tabs/ Tabs | jQuery UI]

===Textbox Watermark（文字框的浮水印文字）===
*[http://www.amitpatil.me/input-textbox-watermark-effect-using-jquery/ Input textbox watermark effect using jQuery]
*[http://www.davidjrush.com/blog/2012/09/simple-jquery-textbox-watermark-plugin/ JQuery Plugin: Simple Textbox Watermark]

===Timer===
*[http://plugins.jquery.com/project/timers jQuery.timers.js]

===Time, Date and Color Picker===
;Time, Date Picker
*[http://trentrichardson.com/examples/timepicker/ Adding a Timepicker to jQuery UI Datepicker]
*[http://marcgrabanski.com/pages/code/jquery-ui-datepicker jQuery UI Datepicker Project]
*[http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/ jQuery date picker plugin v2]
*[http://code.google.com/p/jquery-timepicker/ jquery-timepicker]
*[http://www.texotela.co.uk/code/jquery/timepicker/ jQuery - time picker (list version)]
*[http://www.oakcitygraphics.com/jquery/clockpick/trunk/ClockPick.cfm ClockPick]
*[http://labs.perifer.se/timedatepicker/ Timedate Picker]
;Color Picker
*[http://acko.net/dev/farbtastic Farbtastic]
*[http://www.intelliance.fr/jquery/color_picker/ Color Picker by intelliance.fr.]
*[http://eyecon.ro/colorpicker/ Color Picker by eyecon.ro]（調色盤，此網站需用IE開啟）

===Tooltip(提示)===
*[http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ jQuery plugin: Tooltip]

===TreeView(樹狀檢視)===
*[http://bassistance.de/jquery-plugins/jquery-plugin-treeview/ jQuery plugin: Treeview]

===Scrolling(卷軸效果)===
*[http://flesler.blogspot.com/2008/02/jqueryserialscroll.html jQuery.SerialScroll]
*[http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html liScroll (a jQuery News Ticker made easy) ]
*[http://n.efario.us/category/jquery/spinner/ Spinner]

===Sort（排序）===
*[http://www.si-les-idees-suffisaient.net/jquery/selsotest.html SelSo 1.0 - a Selection Sorter]
*[http://tablesorter.com/docs/ tablesorter] - Flexible client-side table sorting

===String(字串)===
*[http://plugins.jquery.com/project/printf printf]

===Validation(表單驗證)===
*[[jQuery Validation]]
*[http://bassistance.de/jquery-plugins/jquery-plugin-validation/ jQuery plugin: Validation]
*[http://www.benjaminkeen.com/software/rsv/jquery/demo.php?page=1 Really Simple Validation (RSV) Demos - jQuery plugin]
*[http://demo.tc/Post/617 如何限制 Input 只能輸入 數字]

===訊息顯示用===
*[http://jquery.malsup.com/block BlockUI]
:* [http://blog.blueshop.com.tw/jeff377/archive/2008/04/19/54822.aspx 在 ASP.NET 使用 jQuery BlockUI 插件]
:*相關：[http://www.ajaxload.info/ Ajaxload - Ajax loading gif generator]
*[http://jqueryfordesigners.com/demo/coda-bubble.html Coda Style Popup Bubble Tooltips with jQuery]
*[http://stanlemon.net/projects/jgrowl.html jGrowl]
*[http://codeseven.github.io/toastr/ toastr]

===動態表單===
*[http://malsup.com/jquery/form/ jQuery Form Plugin]
===遠端資料掘取===
*[http://www.dotblogs.com.tw/topcat/2008/08/08/4846 jQuery透過ajax取得yahoo新聞Rss範例]
*[https://github.com/AnalogJ/zRSSFeed zRSSFeed]
*[https://davidjuth.com/rest-demo-jquery-rss.aspx jQuery REST RSS Demo in ASP.NET and C#]

===圖檔顯示===
*[http://www.dfc-e.com/metiers/multimedia/opensource/jquery-fancyzoom jQuery plugin : Fancy Zoom]
*[http://fancy.klade.lv/ FancyBox]（圖檔放大顯示用）
*jQuery Lightbox （版本似乎眾多？）
**[http://leandrovieira.com/projects/jquery/lightbox/ jQuery lightBox plugin]
**[http://www.balupton.com/sandbox/jquery_lightbox/ jQuery Lightbox Plugin (balupton edition)]
**[http://warren.mesozen.com/jquery-lightbox/ jQuery Lightbox]
**[http://css-basis.blogspot.com/2008/04/jquery-lightbox-plugin.html jQuery lightBox plugin]
**[http://nio127.blogspot.com/2008/11/blog-lightbox.html 在Blog顯示圖片的工具 – jQuery.Lightbox]
*[http://www.appelsiini.net/projects/lazyload Lazy Load Plugin for jQuery]

===WYSIWYG HTML Editor===
*[http://www.fyneworks.com/jquery/FCKEditor/ jQuery FCKEditor Plugin]
*[http://code.google.com/p/jwysiwyg/ jwysiwyg] - WYSIWYG jQuery Plugin 
*[http://markitup.jaysalvat.com/home/ markItUp!] - Universal markup editor

===URL===
*[http://www.mathias-bank.de/2007/04/21/jquery-plugin-geturlparam-version-2/ getUrlParam]

===拖曳校果===
*[http://nettuts.com/tutorials/javascript-ajax/inettuts/ iNettuts]（How to Mimic the iGoogle Interface）

===Highlighting===
*[http://noteslog.com/chili/ chili]

===表格內容匯出成檔案===
*[http://ngiriraj.com/pages/htmltable_export/demo.php HTML Table Export]

===Barcode===
*[http://www.skptricks.com/2017/12/simple-jquery-based-barcode-generator.html Simple jQuery Based Barcode Generator - Barcode]
===翻頁效果===
*[http://www.turnjs.com Turn.js]: The page flip effect in HTML5
**[https://github.com/blasten/turn.js GitHub - blasten/turn.js: The page flip effect for HTML5]
*[https://www.jqueryscript.net/animation/book-page-flip-effect.html Touch-enabled Book/Page Flip Effect In jQuery | Free jQuery Plugins]

===其他===
*[https://github.com/berkerpeksag/jquery-jgrow jGrow]
*[http://www.noupe.com/ajax/45-fresh-out-of-the-oven-jquery-plugins.html 45+ Fresh Out of the oven jQuery Plugins]
*[http://www.sastgroup.com/jquery/240-plugins-jquery 240 plugins jquery]
*[http://www.hotajax.org/jquery jQuery plugins | Hot!Ajax]
*[http://www.oschina.net/project/tag/151/jquery-plugins jQuery插件 - 开源软件库 - 开源中国社区]
*[http://www.jquery.wisdomplug.com/ jQuery Wisdom]

;尚未分類
*[https://github.com/dreamerslab/jquery.center/blob/master/jquery.center.js jquery.center.js]
*[http://abeautifulsite.net/notebook.php?article=58 jQuery File Tree] - [http://abeautifulsite.net/notebook_files/58/demo/ Demo]
*[http://visitmix.com/labs/glimmer/ glimmer]（JQuery相關應用的程式碼產生器？）
*[http://smashinghub.com/30-best-ui-framework-of-jquery-plugins.htm 30 Best UI Framework of jQuery Plugins]
*[http://jquerytools.org/ jQuery Tools] （第三方的UI套件）

==討論區==
*[http://groups.google.com/group/jquery- jQuery 台灣]

==FAQ==
===jQuery與prototype.js共用===
*需使用  jQuery.noConflict();
*出處：[http://docs.jquery.com/Using_jQuery_with_Other_Libraries Using jQuery with Other Libraries]

===如何提高JQuery串接效率===
*出處：[http://james.padolsey.com/javascript/retaining-a-reference-the-simple-way/ Retaining a reference, the simple way]
*參照：[http://blog.darkthread.net/blogs/darkthreadtw/archive/2009/06/30/jquery-this.aspx 神乎奇技的jQuery Hacking]
<source lang="javascript">
// 1. 使用2次$() , 效能較差
$( '#something' ).width( $('#something').parent().innerWidth() );
 
// 2. 使用1次$(), 但需要拆成2行, 使用變數暫存 $() 的傳回值
var something = $('#something');
something.width( something.parent().innerWidth() );

// 3.使用jQuery._this 自動保存最近一次$() 的傳回值
$( '#something' ).width( $._this.parent().innerWidth() );
/* $('#something') === $._this */

// 4.使用JScript的 with 關鍵字
with($('#something')) {
    width( innerWidth() );
}
</source>
* jQuery Hacking？（上述3的方法, 所必須）
<source lang="javascript">
(function(_jQueryInit){
     jQuery.fn.init = function(selector, context) {
        return (jQuery._this = new _jQueryInit(selector, context));
    };
})(jQuery.fn.init);
</source>

===JQuery的使用限制===
#跨frame的HTML Element應該都無法直接抓到，除了網頁遊覽器本身的安全性設定以外，最主要是jQuery的Selectors在實作上，是基於frame裡的document：
#* document.getElementById
#* document.getElementsByTagName
#但是，跨frame的HTML Element應該可以用其他方式先抓到，再傳入jQuery，但此時會受限於網頁遊覽器本身的安全性設定
#*例如，先取得該frame的document（[[GetIFrameDocument.js]]），再抓裡頭HTML Element

===UI效果（jQuery UI或自訂CSS）===
*頁面上所有按鈕都套用JQuery UI的按鈕效果，需先載入JQuery UI的js與css檔。
<source lang="javascript">
$(document).ready(function () {
    $("button,input:submit,input:reset,input:button").button();
});
</source>
*input透過jQuery套用自訂CSS效果
:出處：[http://www.jankoatwarpspeed.com/post/2008/07/27/Enhance-your-input-fields-with-simple-CSS-tricks.aspx Enhance your input fields with simple CSS tricks]
::相關圖檔下載：[http://www.jankoatwarpspeed.com/examples/enhance-input-fields/blue_bg.png blue_bg.png]
<source lang="css">
.activeField
{
    background-image: none;
    background-color: #ffffff;
    border: solid 1px #33677F;
}

.idle
{
    border: solid 1px #85b1de;
    background-image: url( 'blue_bg.png' );
    background-repeat: repeat-x;
    background-position: top;
}
</source>
<source lang="javascript">
$(document).ready(function(){
    $("input, textarea").addClass("idle");
        $("input, textarea").focus(function(){
            $(this).addClass("activeField").removeClass("idle");
    }).blur(function(){
            $(this).removeClass("activeField").addClass("idle");
    });
});
</source>

===圖片顯示置換===
*將img所顯示的圖由"/image/1a.jpg"置換為"/image/1b.jpg"
<source lang="javascript">
$(document).ready(function () {
    $('img[src="/image/1a.jpg"]').attr('src', '/image/1b.jpg');
});
</source>


===如何在表單中按下Enter鍵時讓下一個TextBox取得輸入焦點===
*[http://jquerybyexample.blogspot.com/2011/05/how-to-set-focus-on-next-textbox-on.html How to set focus on next textbox on Enter Key using jQuery]
<source lang="javascript">
$(document).ready(function() {
    $('input:text:first').focus();

    $('input:text').bind("keydown", function(e) {
        var n = $("input:text").length;
        if (e.which == 13)
        { //Enter key
            e.preventDefault(); //Skip default behavior of the enter key
            var nextIndex = $('input:text').index(this) + 1;
            if(nextIndex < n)
                $('input:text')[nextIndex].focus();
        }
    });
});
</source>
===從CDN載入jQuery===
*使用 [http://jquery.com/download/ jQuery's CDN]
<source lang="html4strict">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.3.2.min.js"></script>
</source>
*使用 [https://developers.google.com/speed/libraries Google's CDN]（不提供jquery-migrate）
<source lang="html4strict">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</source>
*使用 [http://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0 Microsoft's CDN]（不提供jquery-migrate）
<source lang="html4strict">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>
</source>
*使用 [http://cdnjs.com/libraries/jquery/ CDNJS's CDN]（不提供jquery-migrate）
<source lang="html4strict">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</source>

===駁斥「鄙視 jQuery」===
*[https://blog.darkthread.net/blog/jquery-dispise/ 從「鄙視 jQuery」聊起 -技術鄙視從何而來？-黑暗執行緒]
**[https://w3techs.com/technologies/history_overview/javascript_library/ms/y Market share yearly trends for JavaScript libraries] - 截至2021年5月，jQuery仍有95%左右的網站使用

[[Category:AJAX]]
[[Category:JavaScript library]]
[[Category:JQuery]]