### [How to pass parameters in GET requests with jQuery](https://stackoverflow.com/questions/15576548/how-to-pass-parameters-in-get-requests-with-jquery )
```js
$.ajax({
url: "ajax.aspx",
type: "get", //send it through get method
headers: {
'Authorization': 'Bearer your_token'
},
data: {
ajaxid: 4,
UserID: UserID,
EmailAddress: EmailAddress
},
success: function(response) {
//Do Something
},
error: function(xhr) {
//Do Something to handle error
}
});
```
### How to pass json in POST request with jQuery
```js
var dataJson = {};
dataJson["title"] = $("#title").val();
dataJson["subtitle"] = $("#subtitle").val();
dataJson["value"] = $("#markdowncontent").val();
$.ajax({
url: "ajax.aspx",
type: "post",
data: JSON.stringify(dataJson),
contentType: "application/json;charset=utf-8",
success: function(response) {
//Do Something
},
error: function(xhr) {
//Do Something to handle error
}
});
```
---
將所有 table 新增 display class
```js
$('table').addClass("display");
```
對所有 a tag，若為 https:// 開頭則增加 target _blank 欄位
```js
$('a[href^="https://"]').attr('target','_blank');
```
### [Selectors](https://www.w3schools.com/jquery/jquery_ref_selectors.asp)
[選擇器 (selector)](https://ithelp.ithome.com.tw/articles/10095237)
```js
// jQuery 有三個最重要的選擇器，如下：
$("p") // 選出所有 <p> </p>的節點
$("#divId") // 選出所有 <div id=”divId”></div> 的節點
$(".divClass") // 選出所有 <div class=”divClass”></div> 的節點
$("div[id]"); //選擇所有含有id屬性的div元素
$("input[name='Jack']"); //選擇所有的name屬性等於’Jack’的input元素
$("input[name!='Jack']"); //選擇所有的name屬性不等於’Jack’的input元素
$("input[name^='J']"); //選擇所有的name屬性以’J'開頭的input元素
$("input[name$='K']"); //選擇所有的name屬性以’k'結尾的input元素
$("input[name*='ck']"); //選擇所有的name屬性包含’ck’的input元素
$("input[id][name$='man']"); //可以使用多個屬性進行聯合選擇，該選擇器是得到所有的含有id屬性並且那麼屬性以man結尾的元素
$('input[name="a"][value="3"]').attr('id'); // jquery 選擇 name=a 且 value=3 並找出 id
// 階層屬性有以下四種：
$('#div1 p').addClass('d1'); // 物件中的某一種物件(空白)
$('#div1 *').addClass('d1'); // 物件中的所有物件(*)
$('#div1 + p').addClass('d1'); // 之後符合條件的第一個(+)
$('#div1 ~ p').addClass('d1'); // 之後符合的所有(~)
```
### [DataTables](https://ithelp.ithome.com.tw/articles/10272439)
```html
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<!-- jq -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
```
```js
$(document).ready( function () {
$('#table_id').DataTable();
} );
```
### [How to pass arguments properly to Pass functions](https://cmorinan.medium.com/passing-functions-as-arguments-in-javascript-tips-and-pitfalls-d29bbd4522a9)
```js
function openLinkWhenCtrl(url){
if (!window.event.ctrlKey) {
return;
}
window.open(url, '_blank');
}
var url = $(md).find("thead").find("a").attr("href");
$(md).find("td").click(() => openLinkWhenCtrl(url));
```
### [Add element](https://www.w3schools.com/jquery/jquery_dom_add.asp)
```js
function appendText() {
var txt1 = "<p>Text.</p>"; // Create element with HTML
var txt2 = $("<p></p>").text("Text."); // Create with jQuery
var txt3 = document.createElement("p"); // Create with DOM
txt3.innerHTML = "Text.";
$("body").append(txt1, txt2, txt3); // Append the new elements
}
function afterText() {
var txt1 = "<b>I </b>"; // Create element with HTML
var txt2 = $("<i></i>").text("love "); // Create with jQuery
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3); // Insert new elements after <img>
}
```
### [Set Content and Attributes](https://www.w3schools.com/jquery/jquery_dom_set.asp)
```js
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
$("button").click(function(){
$("#w3s").attr({
"href" : "https://www.w3schools.com/jquery/",
"title" : "W3Schools jQuery Tutorial"
});
});
```
### [Get and Set CSS Classes](https://www.w3schools.com/jquery/jquery_css_classes.asp)
```js
$("button").click(function(){
$("#div1").addClass("important blue");
});
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
$("p").css("background-color");
$("p").css({"background-color": "yellow", "font-size": "200%"});
```
### jquery 元件的隱藏及顯示
使用jQuery來控制元件的隱藏及顯示非常簡單。你可以使用以下的方法來實現：
1. 隱藏元件：
```javascript
$('#elementId').hide();
```
這個方法會將指定的元件隱藏起來。你也可以使用`fadeOut()`方法來實現淡出效果：
```javascript
$('#elementId').fadeOut();
```
2. 顯示元件：
```javascript
$('#elementId').show();
```
這個方法會將指定的元件顯示出來。你也可以使用`fadeIn()`方法來實現淡入效果：
```javascript
$('#elementId').fadeIn();
```
3. 切換元件的顯示狀態：
如果你想要在點擊元素時切換其顯示狀態，你可以使用`toggle()`方法：
```javascript
$('#toggleBtn').click(function(){
$('#elementId').toggle();
});
```
透過以上方法，你可以輕鬆地控制元件的隱藏及顯示效果。