jQuery 常用語法

By / ,

Selectors(選擇器)

//基本選擇器
$("*")                  //查詢全部
$("input")              //查詢所有Element(元素)為input
$("#flystudiox")        //查詢ID為"flystudiox"
$(".form-label")        //查詢所有Class(類別)為"form-label"
$("[id='fly']")         //查詢所有Attribute(屬性)為ID，值為"fly"
$("[id^='fly']")        //查詢所有Attribute(屬性)為ID，值以"fly"開頭
$("[id$='fly']")        //查詢所有Attribute(屬性)為ID，值以"fly"結尾
$("[id*='fly']")        //查詢所有Attribute(屬性)為ID，值包含"fly"

//Element(元素) + Filter(過濾)
$("input:even")         //查詢所有input元素，且只看偶數項目
$("input:odd")          //查詢所有input元素，且只看奇數項目
$("input:first")        //查詢所有input元素，且只看第一個項目
$("input:last")         //查詢所有input元素，且只看最後一個項目
$("input:visible")      //查詢所有input元素，且未隱藏的項目
$("input:hidden")       //查詢所有input元素，且隱藏的項目
$("input:checked")      //查詢所有input元素，且被勾選的項目
$("input:enabled")      //查詢所有input元素，且未禁用的項目
$("input:disabled")     //查詢所有input元素，且禁用的項目

//Element(元素) + Attribute(屬性)
$("div[id='flystudiox']")     //查詢所有div元素，且ID名稱為"flystudiox"

//ID + Attribute(屬性)
$("#flystudiox[class='row']") //查詢ID為"flystudiox"，且Class(類別)為"row"

//Class(類別) + Attribute(屬性)
$(".form-label[id='fly']")    //查詢所有Class(類別)為"form-label"，且ID名稱為"fly"

//Class(類別) + Element(元素) + Attribute(屬性)
$(".col-2 label[id='fly']")   //查詢所有Class(類別)為"col-2"，其底下的子元素label，且ID名稱為"fly"

//Class(類別) + Element(元素) + Attribute(屬性) + Filter(過濾)
$(".row input[id^='fly']:checked")  //查詢所有Class(類別)為"row"，其底下的子元素input，且ID名稱為"fly"開頭，且被勾選的項目

Method(方法)

$().jquery                              //查詢目前使用的jQuery版本

$("#flystudiox").val()                  //查詢ID為flystudiox的元素，並取得value(值)
$("#flystudiox").val("翔太工坊")        //查詢ID為flystudiox的元素，並賦予value(值)
$("#flystudiox").attr("checked")        //查詢ID為flystudiox的元素，並取得屬性
$("#flystudiox").attr("checked", true)  //查詢ID為flystudiox的元素，並賦予屬性
$("#flystudiox").removeAttr("checked")  //查詢ID為flystudiox的元素，並移除屬性
$("#flystudiox").hasClass("row")        //查詢ID為flystudiox的元素，並檢查是否含有row類別
$("#flystudiox").addClass("row")        //查詢ID為flystudiox的元素，並賦予類別
$("#flystudiox").removeClass("row")     //查詢ID為flystudiox的元素，並移除類別
$("#flystudiox").css("display","none")  //查詢ID為flystudiox的元素，並賦予CSS屬性
$("#flystudiox").css("display","")      //查詢ID為flystudiox的元素，並移除CSS屬性
$("#flystudiox").hide()                 //查詢ID為flystudiox的元素，並隱藏該元素
$("#flystudiox").show()                 //查詢ID為flystudiox的元素，並顯示該元素
$("#flystudiox").html()                 //查詢ID為flystudiox的元素，並取得HTML內容
$("#flystudiox").html("<div></div>")    //查詢ID為flystudiox的元素，並覆寫HTML
$("#flystudiox").append("<div></div>")  //查詢ID為flystudiox的元素，並附加HTML在後
$("#flystudiox").prepend("<div></div>") //查詢ID為flystudiox的元素，並附加HTML在前
$("#flystudiox").each(function(){  })   //查詢ID為flystudiox的元素，並對查到的所有元素執行指定事件

$("#flystudiox").first()                //查詢ID為flystudiox的元素，再選出第一個元素
$("#flystudiox").last()                 //查詢ID為flystudiox的元素，再選出最後一個元素
$("#flystudiox").prev()                 //查詢ID為flystudiox的元素，再往前查詢一個元素(單筆)
$("#flystudiox").next()                 //查詢ID為flystudiox的元素，再往後查詢一個元素(單筆)
$("#flystudiox").parent()               //查詢ID為flystudiox的元素，再往上一層查詢元素(單筆)
$("#flystudiox").children()             //查詢ID為flystudiox的元素，再往下一層查詢元素(多筆)
$("#flystudiox").find("div")            //查詢ID為flystudiox的元素，並查詢為div的元素

$("#flystudiox").on("click", function(){  })    //查詢ID為flystudiox的元素，當他被點擊時觸發事件
$("#flystudiox").on("change",function(){  })    //查詢ID為flystudiox的元素，當他值改變時觸發事件
$("#flystudiox").on("focus", function(){  })    //查詢ID為flystudiox的元素，當他取得焦點時觸發事件
$("#flystudiox").on("blur",  function(){  })    //查詢ID為flystudiox的元素，當他移開焦點時觸發事件

$("#flystudiox").off("blur",  function(){  })   //查詢ID為flystudiox的元素，並移除blur觸發

var cloneElement = $("#flystudiox").clone()     //查詢ID為flystudiox的元素，並複製

Ajax

$.ajax({
    type: "GET",
    url: "WebAPI.php",
    data: { name: "翔太", type: "工坊" },
    dataType : "json",
    async: false,
    contentType: "application/json; charset=utf-8",
    success: function(data){  },
    error: function(){  },
	complete: function(){  }
});

$.ajax({
    type: "POST",
    url: "WebAPI.php",
    data: JSON.stringify({ name: "翔太", type: "工坊" }),
    dataType : "json",
    async: false,
    contentType: "application/json; charset=utf-8",
    success: function(data){  },
    error: function(){  },
	complete: function(){  }
});

HTML參考

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <style>
            .form-label {
                background-color: black;
                color: gold;
            }
        </style>
    </head>
    <body>
        <div class="row" id="flystudiox">
            <div class="col-2">
                <input type="checkbox" id="flystudiox1" value="option1">
                <label class="form-label" class="form-label">選項一</label>
            </div>
            <div class="col-2">
                <input type="checkbox" id="flystudiox2" value="option2" checked>
                <label class="form-label">選項二</label>
            </div>
            <div class="col-2">
                <input type="checkbox" id="flystudiox3" value="option3" checked>
                <label class="form-label">選項三</label>
            </div>
            <div class="col-2" style="display:none;">
                <input type="checkbox" id="flystudiox4" value="option4">
                <label class="form-label">選項四</label>
            </div>
            <div class="col-2">
                <input type="checkbox" id="flystudiox5" value="option5" disabled>
                <label class="form-label">選項五</label>
            </div>
            <div class="col-2">
                <input type="checkbox" id="flystudiox6" value="option6">
                <label class="form-label" id="fly">選項六</label>
            </div>
        </div>
    </body>
</html>

Scroll to Top