jQuery

ajax

// 範例
$.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比較)

$.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()轉換型態

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/

常用語法

// 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 格式化

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

// 隨著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

<select id="sfs" name="sfsname">
  <option value="1">第一項</option>
  <option value="2">第二項</option>
  <option value="3">第三項</option>
</select>

取值

 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

// 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事件觸發

$("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

$( 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

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”

$('[name="somenamehere"]');

https://stackoverflow.com/questions/9711917/jquery-equivalent-to-getelementsbyname

更新CSS

$("#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

setTimeout(
  function() 
  {
    //do something special
  }, 5000);
)

confirm

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 的取值和給值

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”

$(":input").bind('keyup mouseup', function () {
    alert("changed");            
});

https://stackoverflow.com/questions/9609731/onchange-event-for-input-type-number

四捨五入

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

$("a").click(function(event){
  event.preventDefault();
});

https://www.w3school.com.cn/jquery/event_preventdefault.asp