jQuery get url parameters

$.urlParam = function(name){

    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);

    if (results==null){

       return null;

    }

    else{

       return results[1] || 0;

    }

}

 

console.log($.urlParam('param1'));


References :
Get URL parameters using jQuery

jQuery Draggable / Droppable

Draggable :

$( ".selector" ).draggable();

使用選項的說明可參考此作者：
雪兒隨筆記: [jQuery]UI/API/1.8/Draggable



說明一下 helper 這個選項：


helper
傳入形態 : String("original", "clone") 或 Function()
預設值："original"

指定拖曳元素的樣式，original 爲原本的元素；clone 爲復制一個與原本樣式相同的元素；function 回傳爲一個 DOM 元素，可制定拖拉後產生新的樣式的元素




Droppable :

$( ".selector" ).droppable();

使用選項可參考此作者：
雪兒隨筆記: [jQuery]UI/API/1.8/Droppable


列出常用的事件：
activate/ deactivate：在接受的物件拖動時觸發事件，例如可變更可放置區的背景顏色
drop：拖曳物件在此元素內放開後觸發事件
out：物件從此拖曳區移走後觸發事件
over：物件拖曳至此區上時觸發事件




References :
Draggable Widget | jQuery UI API Documentation
Droppable Widget | jQuery UI API Documentation

jQuery check element class exists

$('li.menu').hasClass('active');

References :

Check if a class `active` exist on element with jquery - Stack Overflow

jQuery textarea .val() 保留換行符號

var preserved = $('textarea').val().replace(/\n\r?/g, '%0D%0A');

References :
jQuery - Preserve textarea line breaks for AJAX call

dynamic generate select options

$.each(citys, function(index, value) {
        var option = $('');
        option.attr({ 'value': index }).text(value);
        $('[name=city]').append(option)                                                     
});




References :
javascript - JQuery create new select option - Stack Overflow

jQuery foreach example

var arr = [ "one", "two", "three", "four", "five" ];

jQuery.each(arr, function(index, value) {

       console.log(this);

       return (this != "three"); // will stop running after "three"

});

References :
5 jQuery.each() Function Examples

HTML select 元件事件

select 有三種事件：click, blur, change

$(function()
    $('#some_id').on('change', function() {

        alert( this.value ); // or $(this).val()
    });
});

References :
jQuery get value of select onChange - Stack Overflow

Internet Explorer prevent jQuery Ajax cache

$.ajax({
  cache: false,
  //other options...
});

References : 

How to prevent a jQuery Ajax request from caching in Internet Explorer? - Stack Overflow

JQuery $.ajax access variables outside the function

Probably because Validate.fail(test) occurs immediately after the asynchronous call. Remember it is ASYNCHRONOUS, meaning it executes parallel to javascript running on your page.

use async: false in $.ajax request




References :
javascript - Use variable outside the success function from an ajax/jquery call - Stack Overflow

jQuery prop('checked') vs. is(':checked') 速度比較

$el.prop('checked');

$el.is(':checked');

$el.attr("checked");

$el[0].checked;

 

 

 

 

 

References :

jQuery prop('checked') vs. is(':checked') · jsPerf

Bootstrap Paginator

var options = {
currentPage: 3,
             totalPages: 10,
             pageUrl: function(type, page, current){

                     return "http://example.com/list/page/"+page;

             }
}

$('#example').bootstrapPaginator(options);

Reference :
Bootstrap Paginator - Bootstrap Pagination jQuery plugin

jQuery $.ajax() asynchronous get url content

function showGetResult( name )
{
     var result = null;
     var scriptUrl = "somefile.php?name=" + name;
     $.ajax({
        url: scriptUrl,
        type: 'get',
        dataType: 'html',
        async: false,
        success: function(data) {
            result = data;
        } 
     });
     return result;
}

Reference :
jQuery return $.get data in a function - Stack Overflow
javascript - How can I get jQuery to perform a synchronous, rather than asynchronous, AJAX request? - Stack Overflow

Node.JS jQuery Library

Install :

$ npm install jquery

test.js

require("node-jquery");

a = ['aaa', 'bbb', 'ccc', 'ddd'];

$.each(a, function(key, val) { console.log(key + " => " + val); });

Run :

$ node test.js

0 => aaa
1 => bbb
2 => ccc
3 => ddd

Reference :

jquery

jQuery .die is not a function

$("a.foo").die("click");

改成

$(document).off("click", "a.foo");

Reference :
jQuery Core 1.9 Upgrade Guide | jQuery

jQuery 1.9 .live() removed ...

$("a.foo").live("click", fn)

改成

$(document).on("click", "a.foo", fn)




Reference :
jQuery Core 1.9 Upgrade Guide | jQuery 

階層 select (hierarchical select option)

Sample Code :
http://pastebin.com/xJiaNakq



Reference :
jquery-option-tree - JQuery plugin to dynamically create select elements with hierarchical options - Google Project Hosting

jQuery click() bind() live() delegate() 區別

Reference :
jQuery方法区别(四)click() bind() live() delegate()区别-jQuery学习

網頁 document.ready / window.onload 事件

ready : 在網頁 DOM 結構就緒時

jQuery

$(document).ready(function(){
//do something
});

jQuery 默認參數是 document 

$().ready(function(){
//do something
});

$(function(){
//do something
});

onload : 在網頁所有關聯文件皆載入後

javascript

window.onload = function(){
//do something
};

jQuery

$(window).load(function(){
//do something
});

Reference :
jQuery ready vs load - 黑暗執行緒
jquery中的$(document).ready()方法和window.onload方法区别 | 梦三秋
document.ready和onload的区别——JavaScript文档加载完成事件
Javascript在页面加载时的执行顺序 @ 随网之舞

JQuery AJAX pager

Reference :

Pagination with Jquery, PHP , Ajax and MySQL.
ajaxPager Demo