jQuery

出自ProgWiki

跳轉到: 導航, 搜尋
jQuery
Jquerylogo.png

作者
研發者 jQuery Team
最初正式版
最新穩定版 1.7.1 / 2011年11月21日
最新測試版 /
作業系統 跨平台
系统平台
可用語言
類型 Web application framework
授權協議 GPL / MIT
網站 jquery.com

jQuery，參照：『維基百科～JQuery』

目錄

官方網站

  • 技術文件 - 下載 - Demo
  • 完整下載JQuery UI 1.8.15，使用SVN用戶端的方法，將下列URL內的檔案全部下載 
http://jquery-ui.googlecode.com/svn/tags/1.8.15/

技術文件

應用

Accordion(手風琴效果)

Animation Effects（動畫效果）

AutoComplete(自動完成)

Banners(廣告橫幅)

Charts(圖表)

CSS

DOM

Files

Grid

Hotkeys

KeyPad

Menu

ContextMenu Plugin
Image Menu
其他

Modal Dialog Boxes

Tabs(頁籤)

Timer

Time, Date and Color Picker

Time, Date Picker
Color Picker

Tooltip(提示)

TreeView(樹狀檢視)

Scrolling(卷軸效果)

Sort（排序）

String(字串)

Validation(表單驗證)

訊息顯示用

遠端資料掘取與顯示

圖檔顯示

WYSIWYG HTML Editor

URL

拖曳校果

Highlighting

其他

尚未分類

討論區

FAQ

jQuery與prototype.js共用

如何提高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() );
}
(function(_jQueryInit){
     jQuery.fn.init = function(selector, context) {
        return (jQuery._this = new _jQueryInit(selector, context));
    };
})(jQuery.fn.init);

JQuery的使用限制

  1. 跨frame的HTML Element應該都無法直接抓到，除了網頁遊覽器本身的安全性設定以外，最主要是jQuery的Selectors在實作上，是基於frame裡的document：
    • document.getElementById
    • document.getElementsByTagName
  2. 但是，跨frame的HTML Element應該可以用其他方式先抓到，再傳入jQuery，但此時會受限於網頁遊覽器本身的安全性設定

UI效果（jQuery UI或自訂CSS）

$(document).ready(function () {
    $("button,input:submit,input:reset,input:button").button();
});
出處：Enhance your input fields with simple CSS tricks
相關圖檔下載：blue_bg.png 
.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");
    });
});

圖片顯示置換

$(document).ready(function () {
    $('img[src="/image/1a.jpg"]').attr('src', '/image/1b.jpg');
});
取自"http://www.player.idv.tw/prog/index.php/JQuery"
個人工具
名字空間
變換
動作
導航
分類
其他
技術類News或部落格
工具箱