markdown-it demo

clear permalink

### [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
    
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
    
    <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();
});
```
# json to checkbox
以下範例示範，如何用 jQuery 將一個 JSON 陣列動態產生一組 checkbox 並加到指定的 `<div>` 中。

步驟摘要  
1. 在 HTML 中放一個空的容器 `<div>`。  
2. 準備你的 JSON 陣列（也可以來自 AJAX 呼叫）。  
3. 用 jQuery 迴圈走訪 JSON，動態建立 `<input type="checkbox">` 及對應 `<label>`，再 append 到容器。

範例程式碼

```html
<!DOCTYPE html>
<html lang="zh-tw">
<head>
  <meta charset="UTF-8">
  <title>jQuery JSON 產生 Checkbox 範例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  
  <div id="checkboxContainer"></div>

// 3. 清空容器（如果有必要）
      $('#checkboxContainer').empty();

// 4. 迴圈動態產生 checkbox + label
      $.each(data, function(idx, item){
        // 建 checkbox
        var $chk = $('<input/>', {
          type: 'checkbox',
          id:   'chk_' + item.id,    // 給個唯一 id
          name: 'myCheckbox',        // name 屬性
          value: item.id,
          checked: item.checked      // 預設是否勾選
        });

// 建對應的 label
        var $lbl = $('<label/>', {
          for:  'chk_' + item.id,
          text: item.label
        });

// 把 checkbox + label 加到容器裡，並換行
        $('#checkboxContainer')
          .append($chk)
          .append($lbl)
          .append('<br>');
      });
    });
  </script>
</body>
</html>
```

進階：從遠端 API 拿 JSON
```js
$(function(){
  $.getJSON('/api/options', function(data){
    var $c = $('#checkboxContainer').empty();
    $.each(data, function(i, item){
      $('<input>', {
        type: 'checkbox',
        id:    'chk_' + item.id,
        value: item.id,
        checked: item.checked
      })
      .add( $('<label>', { for: 'chk_' + item.id, text: item.label }) )
      .appendTo($c)
      .last().after('<br>');
    });
  });
});
```

說明  
- $.each(data, ...)：走訪陣列中每個物件  
- $('\<input/\>',{…})：用物件語法快速設定屬性  
- .appendTo() 或 .append()：把元素插入到指定容器  
- .empty()：先清空避免重複

這樣就能自動把 JSON 轉成 checkbox 並放進指定的 div 了。希望對你有幫助！

# 上傳圖片
以下範例示範如何用 jQuery＋AJAX 上傳圖片，並在上傳前做預覽。範例分成兩部分：

1. 前端 (HTML + jQuery)  
2. 後端 (以 PHP 為例)

---

## 1. 前端：HTML + jQuery

```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>jQuery 圖片上傳範例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #preview { max-width: 300px; max-height: 300px; margin-top: 10px; }
  </style>
</head>
<body>
  <h2>圖片上傳＋預覽 Demo</h2>
  <form id="uploadForm">
    <input type="file" id="fileInput" name="image" accept="image/*">
    <br>
    <img id="preview" src="#" alt="預覽" style="display:none;">
    <br>
    <button type="submit">上傳</button>
  </form>

// 2. 表單送出時以 AJAX 上傳
    $('#uploadForm').on('submit', function(e){
      e.preventDefault();
      const fileInput = $('#fileInput')[0];
      if (fileInput.files.length === 0) {
        alert('請先選擇檔案');
        return;
      }

// 建立 FormData 物件，將檔案與其他欄位加入
      const formData = new FormData();
      formData.append('image', fileInput.files[0]);

$.ajax({
        url: 'upload.php',       // 後端上傳處理程式
        type: 'POST',
        data: formData,
        contentType: false,      // 告訴 jQuery 不要去設定 Content-Type
        processData: false,      // 告訴 jQuery 不要去處理 data
        dataType: 'json',        // 預期回傳 JSON
        success: function(res) {
          if (res.success) {
            $('#result').html(
              '<p>上傳成功！檔案位置：<a href="' + res.url + '" target="_blank">' +
              res.url + '</a></p>'
            );
          } else {
            $('#result').text('上傳失敗：' + res.error);
          }
        },
        error: function(xhr, status, err) {
          $('#result').text('AJAX 發生錯誤：' + err);
        }
      });
    });
  });
  </script>
</body>
</html>
```

說明：  
- `FormData` 可讓你在 AJAX 請求裡面傳送檔案。  
- `contentType: false`、`processData: false` 是上傳檔案時必備設定。  
- 用 `FileReader` 讀取檔案後顯示在 `<img>` 做預覽。

---

## 2. 後端（PHP 範例：upload.php）

```php
<?php
header('Content-Type: application/json');

// 確認是否有檔案上傳
if (!isset($_FILES['image']) || $_FILES['image']['error'] !== UPLOAD_ERR_OK) {
    echo json_encode([
        'success' => false,
        'error'   => '沒有收到檔案，或是上傳錯誤。'
    ]);
    exit;
}

$uploadDir = __DIR__ . '/uploads/';
// 建立目錄（若不存在）
if (!is_dir($uploadDir)) {
    mkdir($uploadDir, 0755, true);
}

// 取得原檔名與暫存檔路徑
$tmpName = $_FILES['image']['tmp_name'];
$originalName = basename($_FILES['image']['name']);
// 可以自行改檔名避免衝突
$targetFile = $uploadDir . time() . '_' . $originalName;

// 移動檔案到正式位置
if (move_uploaded_file($tmpName, $targetFile)) {
    // 回傳前端可存取的 URL
    $urlPath = 'uploads/' . basename($targetFile);
    echo json_encode([
        'success' => true,
        'url'     => $urlPath
    ]);
} else {
    echo json_encode([
        'success' => false,
        'error'   => '檔案移動失敗'
    ]);
}
?>
```

注意：  
1. `uploads/` 資料夾需可寫入（chmod 755/775/777 視伺服器設定而定）。  
2. 實務上建議再做檔案類型、大小檢查，或更嚴格的安全驗證。

---

這樣就完成了一個簡單的 jQuery 圖片上傳＋預覽範例！如果你後端是 Node.js、ASP.NET MVC、Java 等，只要路由改成對應後端，並在後端用對應語法處理 `multipart/form-data` 即可。

html source debug