jQuery
出自ProgWiki
| jQuery | |
| |
| 研發者 | jQuery Team |
|---|---|
| 最新穩定版 | 1.7.1 / 2011年11月21日 |
| 作業系統 | 跨平台 |
| 類型 | Web application framework |
| 授權協議 | GPL / MIT |
| 網站 | jquery.com |
jQuery,參照:『維基百科~JQuery』
官方網站
- jQuery UI
http://jquery-ui.googlecode.com/svn/tags/1.8.15/
- jQuery Tools (第三方的UI套件)
技術文件
- 相關教學
- 其他版本的jQuery
- jQuery在VS2008 SP1中文版中可以使用Intellisense了
- JQuery 1.2.6 Intellisense for Visual Studio 2008(配合Visual Studio 2008 SP1使用)
- 让VS2008对JQuery语法的智能感知更完美一点
- 其他
應用
- Interface elements for jQuery……擴充JQuery的功能
Accordion(手風琴效果)
Animation Effects(動畫效果)
AutoComplete(自動完成)
- jQuery plugin: Autocomplete
- Javascript jQuery Autocomplete Plugin
- http://wyf.javaeye.com/blog/393359
- jquery.autocomplete.js运用实例
- jQuery Plugin: Tokenizing Autocomplete Text Entry(似乎是功能最完整的)
- jQuery Autocomplete Mod
Banners(廣告橫幅)
Charts(圖表)
CSS
DOM
- FlyDOM - Create DOM on the Fly
Files
- Uploadify - JQuery File Upload Plugin
Grid
- jQuery Grid Plugin
- jQuery Pagination Plugin(分頁顯示用的按鈕條)
Hotkeys
KeyPad
Menu
- Creating a Floating HTML Menu Using jQuery and CSS
- jQuery Gooey Menu
- jQuery Multi Level CSS Menu 2
- Accordion Menu script
- BDC DrillDown Menu CSS Class Reference
- mcDropdown(用於多層式功能選單)
- Simple JQuery Accordion menu
- jQuery menu plugin
- CSS Menus (with some help from jQuery) › qrayg.com
- jQuery Drop Down Menu, Web Buttons, Animated jQuery Menu, Navigation Bar, Java Menus for your Website!
- ContextMenu Plugin
- jQuery Context Menu Plugin
- jQuery ContextMenu Plugin(與多個jQuery Plugin互沖,待查)
- Image Menu
- Image Menu with Jquery
- Using jQuery for Background Image Animations
- Animated navigation items using jQuery — Tyssen Design
- 其他
Modal Dialog Boxes
Tabs(頁籤)
Timer
Time, Date and Color Picker
- Time, Date Picker
- Adding a Timepicker to jQuery UI Datepicker
- jQuery UI Datepicker Project
- jQuery date picker plugin v2
- jquery-timepicker
- jQuery - time picker (list version)
- ClockPick
- Timedate Picker
- Color Picker
- Farbtastic
- Color Picker by intelliance.fr.
- Color Picker by eyecon.ro(調色盤,此網站需用IE開啟)
Tooltip(提示)
TreeView(樹狀檢視)
Scrolling(卷軸效果)
Sort(排序)
- SelSo 1.0 - a Selection Sorter
- tablesorter - Flexible client-side table sorting
String(字串)
Validation(表單驗證)
- jQuery Validation
- jQuery plugin: Validation
- Really Simple Validation (RSV) Demos - jQuery plugin
- 如何限制 Input 只能輸入 數字
訊息顯示用
遠端資料掘取與顯示
圖檔顯示
- jQuery plugin : Fancy Zoom
- FancyBox(圖檔放大顯示用)
- jQuery Lightbox (版本似乎眾多?)
WYSIWYG HTML Editor
- jQuery FCKEditor Plugin
- jwysiwyg - WYSIWYG jQuery Plugin
- markItUp! - Universal markup editor
URL
拖曳校果
- iNettuts(How to Mimic the iGoogle Interface)
Highlighting
其他
- jGrow
- jQuery Easing Plugin
- 45+ Fresh Out of the oven jQuery Plugins
- 240 plugins jquery
- jQuery plugins | Hot!Ajax
- jQuery插件 - 开源软件库 - 开源中国社区
- jQuery Wisdom
- 尚未分類
- jQuery File Tree - Demo
- jquery.center.js.txt(置中,但是似乎有問題?)
- glimmer(JQuery相關應用的程式碼產生器?)
討論區
FAQ
jQuery與prototype.js共用
- 需使用 jQuery.noConflict();
- 出處:Using jQuery with Other Libraries
如何提高JQuery串接效率
// 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() ); }
- jQuery Hacking?(上述3的方法, 所必須)
(function(_jQueryInit){ jQuery.fn.init = function(selector, context) { return (jQuery._this = new _jQueryInit(selector, context)); }; })(jQuery.fn.init);
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檔。
$(document).ready(function () { $("button,input:submit,input:reset,input:button").button(); });
- input透過jQuery套用自訂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; }
$(document).ready(function(){ $("input, textarea").addClass("idle"); $("input, textarea").focus(function(){ $(this).addClass("activeField").removeClass("idle"); }).blur(function(){ $(this).removeClass("activeField").addClass("idle"); }); });
圖片顯示置換
- 將img所顯示的圖由"/image/1a.jpg"置換為"/image/1b.jpg"
$(document).ready(function () { $('img[src="/image/1a.jpg"]').attr('src', '/image/1b.jpg'); });
