# jQuery
## ajax
```javascript
// 範例
$.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 = 預期伺服器返回的資料型別。
介紹
success and error
另一種post寫法 (尚未與ajax比較)
```javascript
$.post('superman', { field1: "hello", field2 : "hello2"},
function(returnedData){
console.log(returnedData);
}).fail(function(){
console.log("error");
});
```
傳送json資料 (400)
用enter送出
## json物件處理
使用ajax post時可用JSON.stringify()轉換型態後再傳送
使用ajax get接收回傳結果時可用JSON.parse()轉換型態
```javascript
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]);
}
```
遍歷方法
替換特殊字元(換行、雙引號)
日期選擇器
取得check box值
常用語法
```javascript
// 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 全選
cdn介紹
[https://blog.csdn.net/zyz1985/article/details/6828790](http://newaurora.pixnet.net/blog/post/128995999-cdn)
## string 格式化
```javascript
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, "苹果","香蕉","香梨"));
// 结果:我喜欢吃苹果，也喜欢吃香蕉，但是最喜欢的还是苹果,偶尔再买点香梨
```
## radio
```javascript
// 隨著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']);
});
```
## select
```javascript
```
取值
```javascript
var s= $("#sfs").val();
```
## onload vs ready
ready，表示文件結構已經載入完成（不包含圖片等非文字媒體檔案）
onload，指示頁 麵包含圖片等檔案在內的所有元素都載入完成。
ready 在onload 前載入！！！
## function
```javascript
// 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程式碼
});
```
button事件觸發
```javascript
$("button#demo").click(function(){$("img").hide()})
```
## window\.onload vs $(document).ready
ready：DOM下載完成就觸發function，啟動時機較早，前一次跟後一次所設定的函式都會被執行。
onload：除了DOM，連同其中的圖片影音的內容都下載完才會觸發function，啟動時機較晚，後一次所設定的函式會複寫上一次的。
```javascript
$( 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](https://blog.xuite.net/coke750101/networkprogramming/31375424-\[jQuery]%24\(document\).ready%E5%92%8Conload%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%B7%AE%E7%95%B0)
```javascript
window.onload=function() {
alert('alert1');
};
window.onload=function() {
alert('alert2');
};
```
## setInterval
## .html() .text() .val()
jQuery equivalent to “getElementsByName”
```javascript
$('[name="somenamehere"]');
```
## 更新CSS
```javascript
$("#td_id").addClass('newClass') //會累加，越來越長
$("#myParagraph").css({"backgroundColor": "black", "color": "white"}); //新增屬性
```
全域變數 vs 區域變數
1.變數宣告在function外面，不管有沒有加上var都是全域變數
2.變數宣告在function之內，沒有加上var就會成為全域變數
## settimeout
```javascript
setTimeout(
function()
{
//do something special
}, 5000);
)
```
## confirm
```javascript
var txt;
var r = confirm("Press a button!");
if (r == true) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
```
## textarea 的取值和給值
```javascript
var html=$("#desc").val();
$("#desc").val("write content");
if( $("#desc").val()==""){
$("#desc").focus();
alert("請務必填入回應內容");return false;
}
// 移除空格確定是否空值
if (!$.trim($("#desc").val())) {
..
}
```
## onchange event for input type=“number”
```javascript
$(":input").bind('keyup mouseup', function () {
alert("changed");
});
```
## 四捨五入
```javascript
function formatFloat(num, pos)
{
var size = Math.pow(10, pos);
return Math.round(num * size) / size;
}
alert(formatFloat("1109.1893", 2));
```
## preventDefault
防止url直接開啟，如：download
```javascript
$("a").click(function(event){
event.preventDefault();
});
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://stb11816.gitbook.io/python_note/web-framework/jquery.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.