ajax
Copy // 範例
$ .ajax ({
url : "url" ,
async : false ,
data : {
pid : 123 ,
action : "456"
} ,
dataType : 'json' ,
success : function (data) {
console .log (data)
} ,
error : function (error){
console .log (error)
}
}); 常見參數：
type = 請求方式，預設get
async = true or false，預設為true，所有請求均為非同步請求。改為false則同步請求將鎖住瀏覽器，使用者其它操作必須等待請求完成才可以執行。
contentType = 傳送資訊至伺服器時內容編碼型別。預設：application/x-www-form-urlencoded
data = 發送到伺服器的資料。將自動轉換為請求字串格式。
dataType = 預期伺服器返回的資料型別。
https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/272853/
https://blog.reh.tw/archives/662
介紹
https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/272853/
success and error
http://www.pureexample.com/tw/jquery/ajax-success-and-error.html
另一種post寫法 (尚未與ajax比較)
Copy $ .post ( 'superman' , { field1 : "hello" , field2 : "hello2" } ,
function (returnedData){
console .log (returnedData);
}) .fail ( function (){
console .log ( "error" );
}); https://stackoverflow.com/questions/18697034/how-to-pass-parameters-in-ajax-post/35590754
傳送json資料 (400)
https://stackoverflow.com/questions/21738663/getting-json-in-flask-from-jquery-ajax
用enter送出
https://www.formget.com/submit-your-form-on-pressing-enter-key-using-jquery/
https://stackoverflow.com/questions/699065/submitting-a-form-on-enter-with-jquery
json物件處理
使用ajax post時可用JSON.stringify()轉換型態後再傳送
使用ajax get接收回傳結果時可用JSON.parse()轉換型態
Copy var obj = JSON .parse ( '{ "name":"John", "age":30, "city":"New York"}' );
var obj = { 'name' : "John" , "age" : 30 , "city" : "New York" };
var myJSON = JSON .stringify (obj);
for (key in obj ){
alert (obj[key]);
} https://www.w3schools.com/js/js_json_parse.asp
遍歷方法
https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/258763/
https://t.codebug.vip/questions-342113.htm
替換特殊字元(換行、雙引號)
https://stackoverflow.com/questions/4253367/how-to-escape-a-json-string-containing-newline-characters-using-javascript
日期選擇器
http://www.daterangepicker.com/
https://www.wfublog.com/2017/08/jquery-date-range-picker-bootstrap.html
https://dotblogs.com.tw/shadow/2017/11/28/001719
取得check box值
http://blog.twbryce.com/jquery-get-checkbox-value/
常用語法
Copy // array to string
var array = [ 'a' , 'b' , 'c' ];
array .toString (); // result: a,b,c
// join
array .join ( "+++" )
// 判斷長度
if ( array . length == 0 ){
console .log ( array . length )
}
// 取得check box值，name記得要改
var cbxVehicle = new Array ();
$ ( 'input:checkbox:checked[name="vehicle"]' ) .each ( function (i) { cbxVehicle[i] = this .value; });
// 取得json的key & value
var z = { "123" : "/user/home" , "456" : "test" }
for ( var key in z) {
console .log (key); //获取key值
console .log (z[key]); //获取对应的value值
}
// 判斷key是否存在
if ( json_object .hasOwnProperty ( 'name' )) {
//do struff
}
// 替換特殊字元後在parse 斜線的斜線數量有差
var myJSONString = JSON .stringify (myJSON);
var myEscapedJSONString = myJSONString .replace ( /\\n/ g , "\\n" )
.replace ( /\\'/ g , "\\'" )
.replace ( /\\"/ g , '\\"' )
.replace ( /\\&/ g , "\\&" )
.replace ( /\\r/ g , "\\r" )
.replace ( /\\t/ g , "\\t" )
.replace ( /\\b/ g , "\\b" )
.replace ( /\\f/ g , "\\f" );
// 判斷是否為空字典
jQuery .isEmptyObject ({}); // true
jQuery .isEmptyObject ({ foo : "bar" }); // false checkbox 全選
http://dev.sopili.net/2013/03/bootstrap-css.html
cdn介紹
https://blog.csdn.net/zyz1985/article/details/6828790
https://hkitblog.com/%E4%B8%8D%E5%8F%AF%E4%B8%8D%E7%9F%A5%E7%9A%84-cdn-%E7%A8%AE%E9%A1%9E%EF%BC%81%E7%94%9A%E9%BA%BC%E6%98%AF%E5%8B%95%E6%85%8B%E3%80%81%E9%9D%9C%E6%85%8B-cdn%EF%BC%9Fevent-driven-%E7%AE%97%E6%98%AF/
string 格式化
Copy String . format = function () {
if (arguments. length == 0 )
return null ;
var str = arguments[ 0 ];
for ( var i = 1 ; i < arguments. length ; i ++ ) {
var re = new RegExp ( '\\{' + (i - 1 ) + '\\}' , 'gm' );
str = str .replace (re , arguments[i]);
}
return str;
};
// var a = "我喜欢吃{0}，也喜欢吃{1}，但是最喜欢的还是{0},偶尔再买点{2}";
// alert(String.format(a, "苹果","香蕉","香梨"));
// 结果:我喜欢吃苹果，也喜欢吃香蕉，但是最喜欢的还是苹果,偶尔再买点香梨 https://www.cnblogs.com/taoweiji/p/3260883.html
radio
Copy // 隨著radio變更html
$ ( '#my_radio_box' ) .change ( function () {
var checked_id = $ ( 'input[type=radio][name=inlineDefaultRadiosExample]:checked' ) .attr ( 'id' ) // 選中的radio值
var selected_value = $ ( "input[name='inlineDefaultRadiosExample']:checked" ) .val (); // 選中的radio值
$ ( "#predict_result" ) .html (crf_data[checked_id][ 'html' ]);
}); https://blog.csdn.net/enjoyo/article/details/1700228
https://blog.xuite.net/vv650812/twblog/229550316-jQuery+%E4%B9%8B+checkbox+%E5%8F%8A+radio+%E5%8F%96%E5%80%BC%E5%8F%8A%E8%A8%AD%E5%AE%9A%E5%80%BC%E7%9A%84%E6%AD%A3%E7%A2%BA%E6%96%B9%E6%B3%95
select
Copy < select id = "sfs" name = "sfsname" >
< option value = "1" >第一項</ option >
< option value = "2" >第二項</ option >
< option value = "3" >第三項</ option >
</ select > 取值
Copy var s = $ ( "#sfs" ) .val (); http://n.sfs.tw/content/index/10047
onload vs ready
ready，表示文件結構已經載入完成（不包含圖片等非文字媒體檔案）
onload，指示頁 麵包含圖片等檔案在內的所有元素都載入完成。
ready 在onload 前載入！！！
https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/290536/
function
Copy // 1.匿名函式(因為沒任何名稱,所以其他程式碼並沒有辦法呼叫他,所以要用就要重寫一次)
$ ( ".guess_box" ) .click ( function (){
xxxx;
});
// 2.具名函式(呼叫具名函式有以下兩種方式)
// A.函式宣告
function myFunc1 ()
{
$ ( "div" ) .hide ();
}
// 呼叫方法:
myFunc1 ();
// B.函式表達式
var myFunc2 = function ()
{
$ ( "div" ) .show ();
}
// 呼叫方法(不需要()):
$ ( "myElement" ) .click (myFunc2);
$ ( document ) .ready ( function () {
// 在這撰寫javascript程式碼
}); https://melomelo1988.pixnet.net/blog/post/263934328
https://matthung0807.blogspot.com/2017/11/jquery-document-ready.html
button事件觸發
Copy $ ( "button#demo" ) .click ( function (){ $ ( "img" ) .hide ()}) https://www.w3school.com.cn/jquery/jquery_ref_events.asp
https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/232048/
window.onload vs $(document).ready
ready：DOM下載完成就觸發function，啟動時機較早，前一次跟後一次所設定的函式都會被執行。
onload：除了DOM，連同其中的圖片影音的內容都下載完才會觸發function，啟動時機較晚，後一次所設定的函式會複寫上一次的。
https://ithelp.ithome.com.tw/articles/10092601
https://matthung0807.blogspot.com/2017/11/jquery-document-ready.html
Copy $ ( document ) .ready ( function () {
// 在這撰寫javascript程式碼
});
# 若不放在ready當中則可能無法綁定到該物件，造成此行程式無效
$ ( "#dom_id" ) .html ( "123" ) 複寫
onload只會執行第二個，第一個會被忽略
https://blog.xuite.net/coke750101/networkprogramming/31375424-%5BjQuery%5D%24%28document%29.ready%E5%92%8Conload%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%B7%AE%E7%95%B0
Copy window . onload =function () {
alert ( 'alert1' );
};
window . onload =function () {
alert ( 'alert2' );
}; setInterval
https://neohsuxoops.blogspot.com/2018/04/ajaxfunction.html
https://kuro.tw/posts/2019/02/23/%E8%AB%87%E8%AB%87-JavaScript-%E7%9A%84-setTimeout-%E8%88%87-setInterval/
https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/276882/
.html() .text() .val()
http://androchen.blogspot.com/2013/04/jquery-html-text-val.html
jQuery equivalent to “getElementsByName”
Copy $ ( '[name="somenamehere"]' ); https://stackoverflow.com/questions/9711917/jquery-equivalent-to-getelementsbyname
更新CSS
Copy $ ( "#td_id" ) .addClass ( 'newClass' ) //會累加，越來越長
$ ( "#myParagraph" ) .css ({ "backgroundColor" : "black" , "color" : "white" }); //新增屬性 全域變數 vs 區域變數
1.變數宣告在function外面，不管有沒有加上var都是全域變數
2.變數宣告在function之內，沒有加上var就會成為全域變數
https://engmeter.blogspot.com/2015/03/jqueryjquery.html
settimeout
Copy setTimeout (
function ()
{
//do something special
} , 5000 );
) confirm
Copy var txt;
var r = confirm ( "Press a button!" );
if (r == true ) {
txt = "You pressed OK!" ;
} else {
txt = "You pressed Cancel!" ;
} https://www.w3schools.com/jsref/met_win_confirm.asp
textarea 的取值和給值
Copy var html = $ ( "#desc" ) .val ();
$ ( "#desc" ) .val ( "write content" );
if ( $ ( "#desc" ) .val () == "" ){
$ ( "#desc" ) .focus ();
alert ( "請務必填入回應內容" ); return false ;
}
// 移除空格確定是否空值
if ( ! $ .trim ( $ ( "#desc" ) .val ())) {
..
} http://n.sfs.tw/content/index/10044
https://www.w3schools.com/tags/tag_textarea.asp
onchange event for input type=“number”
Copy $ ( ":input" ) .bind ( 'keyup mouseup' , function () {
alert ( "changed" );
}); https://stackoverflow.com/questions/9609731/onchange-event-for-input-type-number
四捨五入
Copy function formatFloat (num , pos)
{
var size = Math .pow ( 10 , pos);
return Math .round (num * size) / size;
}
alert ( formatFloat ( "1109.1893" , 2 )); https://ching119.pixnet.net/blog/post/59675573
preventDefault
防止url直接開啟，如：download
Copy $ ( "a" ) .click ( function (event){
event .preventDefault ();
}); https://www.w3school.com.cn/jquery/event_preventdefault.asp