緩動函數指定動畫效果在執行時的速度,使其看起來更加真實。
現實物體照著一定節奏移動,並不是一開始就移動很快的。當我們打開抽屜時,首先會讓它加速,然後慢下來。當某個東西往下掉時,首先是越掉越快,撞到地上後回彈,最終才又碰觸地板。
本頁可以在每次你需要時,幫助你找到想要的緩動函數。
http://api.jqueryui.com/easings/ 此頁也有相同的範例說明。
緩動函數指定動畫效果在執行時的速度,使其看起來更加真實。
現實物體照著一定節奏移動,並不是一開始就移動很快的。當我們打開抽屜時,首先會讓它加速,然後慢下來。當某個東西往下掉時,首先是越掉越快,撞到地上後回彈,最終才又碰觸地板。
本頁可以在每次你需要時,幫助你找到想要的緩動函數。
http://api.jqueryui.com/easings/ 此頁也有相同的範例說明。
HTML:
<html> <head> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=UTF-8"> <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.js'></script> <script type='text/javascript'> function show_msg(msg){ alert(msg); } $(function(){ $.ajax({ type:'get', async:false, crossDamain:true, cache:false, url:'http://carbonfootprint.toyoink-ct.com.tw/carbonfootprint/login_valid', dataType:'jsonp', jsonCallback:'show_msg', data:{account:'jerry',passwd:'justdoit'} }); }); </script> </head> <body> </body> </html>
PHP:
public function login_valid(){ $account=$this->input->get('account'); $passwd=$this->input->get('passwd'); $query=$this->db->query("select * from carbon_passwd where id='{$account}' and passwd='{$passwd}';"); if($query->num_rows()>0){ $this->session->set_userdata($query->row(1)); //print_r($this->session->all_userdata()); echo "show_msg('密碼對了^^');"; } else{ echo "show_msg('你打的帳號:{$account},密碼:{$passwd}不對喔!!');"; } }
範例說明:
$.each(data, function(index, obj){ if (index == 1) { return; // 等於continue } else { return false; // 等於break } });
A delegated-events approach attaches an event handler to only one element, the tbody, and the event only needs to bubble up one level (from the clicked tr to tbody):
$( “#dataTable tbody" ).on( “click", “tr", function() {
alert( $( this ).text() );
});
在 #dataTable tbody 元素下的 tr 元素,傳來的click事件都將會顯示以 tr 內容的訊息。
重點在 bubble up ,像上述範例一樣:tbody 一直都存在,只有它底下的tr可能會移除或新增。所以把tbody做個on的method,針對它下面指定元素與指定事件。對符合條件所傳來的氣泡事件,執行設定好的事件方法。
# jQuery Plugin Code
$.fn.description_inside_input_field = function(){ return this.each(function(){ $(this).val($(this).prop('title')); $(this).focus(function(){ if($(this).val()==$(this).prop('title')){ $(this).val(''); } }).focusout(function(){ if($(this).val()==''){ $(this).val($(this).prop('title')); } }); }); }
# Document Ready
$("tr.add_row input[type='text']").description_inside_input_field();
# Html Code
<table id="table_add_data"> <tbody> <tr class="add_row"> <td><input class="year" title="年度" type="text" value="" /></td> <td><input class="electric" title="電力" type="text" value="" /></td> <td><input class="derv" title="柴油" type="text" value="" /></td> <td><input class="natural_gas" title="天然氣" type="text" value="" /></td> <td><input class="gas" title="汽油" type="text" value="" /></td> <td><input class="lpg" title="液化石油氣" type="text" value="" /></td> <td><input class="tap_water" title="自來水" type="text" value="" /></td> <td><input class="add_button" type="button" value="新增" /><input class="cancel_button" type="button" value="取消 " /><input class="submit" type="button" value="送出" /></td> </tr> </tbody> </table>
來源:http://jqueryfordesigners.com/fun-with-overflows/
// when the DOM is ready... $(document).ready(function () { $('#timeline').mousedown(function (event) { // attach 3 pieces of data to the #timeline element $(this) .data('down', true) // a flag indicating the mouse is down .data('x', event.clientX) // the current mouse down X coord .data('scrollLeft', this.scrollLeft); // the current scroll position // return false to avoid selecting text and dragging links within the scroll window return false; }).mouseup(function (event) { // on mouse up, cancel the 'down' flag $(this).data('down', false); }).mousemove(function (event) { // if the mouse is down - start the drag effect if ($(this).data('down') == true) { // this.scrollLeft is the scrollbar caused by the overflowing content // the new position is: original scroll position + original mouse down X - new X // I'd like to see if anyone can give an example of how to speed up the scroll. this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX; } }).mousewheel(function (event, delta) { // now attaching the mouse wheel plugin and scroll by the 'delta' which is the // movement of the wheel - so we multiple by an arbitrary number. this.scrollLeft -= (delta * 30); }).css({ 'overflow' : 'hidden', // change to hidden for JS users 'cursor' : '-moz-grab' // add the grab cursor }); }); // finally, we want to handle the mouse going out of the browser window and // it not triggering the mouse up event (because the mouse is still down) // but it messes up the tracking of the mouse down $(window).mouseout(function (event) { if ($('#timeline').data('down')) { try { // *try* to get the element the mouse left the window by and if // we really did leave the window, then cancel the down flag if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') { $('#timeline').data('down', false); } } catch (e) {} } });
From: http://stackoverflow.com/questions/2240005/convert-a-html-table-data-into-a-json-object-in-jquery
An HTML table? Like, all the <td> contents in a 2-d array?
所有的TD標籤內容全都併在一起
var tbl = $(‘table#whatever tr’).map(function() {
return $(this).find(‘td’).map(function() {
return $(this).html();
}).get();
}).get();
Then just use $.json (or whatever library you want) to turn that into a JSON string.
edit — re-written to use the native (shim here) .map() from the array prototype:
範例將每一列存為一物件
var tbl = $(‘table#whatever tr’).get().map(function(row) {
return $(row).find(‘td’).get().map(function(cell) {
return $(cell).html();
});
});
出至:http://stackoverflow.com/questions/1466103/jquery-escape-characters-square-brackets
jQuery selector 字串中預設是不能使用特殊字元,若要在選擇器中使用特殊字元「必需要在前面加上兩個反斜線 “\\“」。
例如:$(‘#item\\(A\\)’)
如果是藉由變數所代入 selector 中,僅需一個反斜線來脫逸特殊符號字元。
例如:
selector_string="EEP\(A\)";
$(“#"+selector_string)
I’ll put it here for other less fortunate souls.
Escape with TWO (2) backslashes.
or
For <span id="foo[bar]" /> you can select with $(“#foo\\[bar\\]") as discussed, or $(‘[id="foo[bar]"]’)
*********************************************************************
The introduction of jQuery API page gives the above explanation about this:
To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\.
使用正規表示法取代字串 jQuery selector 中的特殊字元「小括號」,將小括號前面加上脫逸字元反斜線兩條。就能夠將它放到 jQuery 的 selector 中使用了。
var selector_string="language(English)";
function jquery_selector_escape(selector_string){
selector_string=selector_string.replace(/(\(|\))/g,"\\$1″);
return selector_string;
}
在 selector_string.replace(/(\(|\))/g,“\\$1″) 說明用小括號包起來的符合字串會將符合結果暫放在「$1」的變數當中,而要找尋的字串是小括號的兩個符號 " ( ) “,而取代字串則是將找到的小括號前面加上兩條反斜線。