jQuery

出自ProgWiki
於 2021年12月21日 (二) 13:27 由 Player（討論 | 貢獻） 所做的修訂
跳至導覽 跳至搜尋
jQuery
Jquerylogo.png

作者
研發者 jQuery Team
最初正式版
最新穩定版 3.6.0 / 2021年3月2日，14個月前（2021-03-02）
最新測試版 /
作業系統 跨平台
系统平台
可用語言
類型 Web application framework
授權協議 GPL / MIT
網站 jquery.com

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

官方網站

  • jQuery UI
http://jquery-ui.googlecode.com/svn/tags/1.8.24/

技術文件

  • 相關教學
  • 其他版本的jQuery
  • 其他

應用

多功能套件

Accordion(手風琴效果)

Animation Effects（動畫效果）

翻頁效果

AutoComplete(自動完成)

Cascading Dropdown（連動式下拉選單）

Charts(圖表)

CSS

DOM

  • FlyDOM - Create DOM on the Fly

Files

Grid

Hotkeys

KeyPad

FAQ
  • 如果應用在AJAX Control Toolkit的ModalPopupExtender所觸發的彈出式區塊內，會因為jquery.keypad.css裡的.keypad-popup 所定義的 z-index: 10; 而被彈出式區塊蓋在底下，而無法使用Keypad，因此要把該z-index改為100002，方可正常使用

Menu

ContextMenu Plugin
Image Menu
其他

Modal Dialog Boxes

Tabs(頁籤)

Textbox Watermark（文字框的浮水印文字）

Timer

Time, Date and Color Picker

Time, Date Picker
Color Picker

Tooltip(提示)

TreeView(樹狀檢視)

Scrolling(卷軸效果)

Sort（排序）

String(字串)

Validation(表單驗證)

訊息顯示用

動態表單

遠端資料掘取

圖檔顯示

WYSIWYG HTML Editor

URL

拖曳校果

  • iNettuts（How to Mimic the iGoogle Interface）

Highlighting

表格內容匯出成檔案

Barcode

翻頁效果

其他

尚未分類

討論區

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() );
}
  • jQuery Hacking？（上述3的方法, 所必須）
(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）

  • 頁面上所有按鈕都套用JQuery UI的按鈕效果，需先載入JQuery UI的js與css檔。
$(document).ready(function () {
    $("button,input:submit,input:reset,input:button").button();
});
  • input透過jQuery套用自訂CSS效果
出處：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");
    });
});

圖片顯示置換

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


如何在表單中按下Enter鍵時讓下一個TextBox取得輸入焦點

$(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();
        }
    });
});

從CDN載入jQuery

<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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

駁斥「鄙視 jQuery」

取自「https://www.player.idv.tw/prog/index.php?title=JQuery&oldid=16224」