iT邦幫忙

2023 iThome 鐵人賽

DAY 13
0
自我挑戰組

新手工程師第一份專案會遇到的職場大小事系列 第 13

day13. jQuery選擇器selector筆記

  • 分享至 

  • xImage
  •  

這邊就不介紹啥是jQuery了
詳細可以上網查哈哈

來備份筆記一下我常用到的selector連動大集合
(可以去對照下面的類別看是哪一種~)

$("#createForm :input).prop('readonly',false);
$("[name='btnIsTrue']").attr('disabled','disabled');
$(".btnAdd").show();
$("textarea[name='CaseChoose']").hide();
$("input[name='IsChoose']:checked).val() == 'true');
$("#txtArea").addClass("validate-required");

$("#btnCancel").Click(function (e) {
    e.preventDefault();
    $.abcdAlert({
        msg:"hello",
        CanCancel:true,
        Callback:function(){
        $.AjaxPost("mainForm","@Url.Action(nameof(aaaController.CancelDetail)), 
        function(){windows.close();});
    }
  });
 });

$("#queryFormID select").each(function (index,item) {
    if(notselect.includes(item.id) === false){
    $(item).val("").change()
   }
});
 
 
 $("#queryFormID").find(":text,textarea,select").each(function () {
     $(this).val().change();
 });

比較特別的是^= 表示 "以某個特定字串開始"
$("[id^='areaCreate']").show();
$("[attribute^='value']")
attribute:要選擇的屬性的名稱。
value:屬性值的前綴字符串。
$("[class^='example']")表示來選擇所有class屬性值以"example"開頭的元素


選擇器是jQuery的強大功能之一 可以輕鬆選取HTML元素,並對它們執行操作 以上。

元素選擇器(Element Selector):
語法:$("element")
描述:通過HTML元素名稱選擇元素。例如,$("p")選擇所有元素。
ID選擇器(ID Selector):
語法:$("#id")
描述:通過元素的ID屬性選擇唯一的元素。例如,$("#myElement")選擇ID為"myElement"的元素。

類別選擇器(Class Selector):
語法:$(".class")
描述:通過元素的class屬性選擇具有相同類別的元素。例如,$(".myClass")選擇所有擁有"class"為"myClass"的元素。

屬性選擇器(Attribute Selector):
語法:$("[attribute]")或$("[attribute=value]")
描述:通過元素的屬性選擇元素。例如,$("[data-type]")選擇所有具有"data-type"屬性的元素,$("[data-type='button']")選擇"data-type"屬性值為"button"的元素。

後代選擇器(Descendant Selector):
語法:$("ancestor descendant")
描述:選擇所有在祖先元素下的後代元素。例如,$("ul li")選擇所有在元素下的元素。

子元素選擇器(Child Selector):
語法:$("parent > child")
描述:選擇所有作為父元素子元素的元素。例如,$("ul > li")選擇所有直接作為子元素的元素。

篩選器(Filter Selector):
語法:$("selector:filter")
描述:通過特定的篩選條件來選擇元素。例如,$("p:first")選擇第一個元素,$("li:even")選擇所有偶數位置的元素。

表單元素選擇器(Form Element Selector):
語法:$(":input")
描述:選擇所有的表單元素,如input、textarea、select等。

可見性選擇器(Visibility Selector):
語法:$("selector:visible")或$("selector:hidden")
描述:選擇可見或隱藏的元素,可用於處理元素的顯示和隱藏。

自定義選擇器(Custom Selector):
語法:自定義選擇器函數
描述:您可以創建自己的自定義選擇器函數,以根據特定條件選擇元素。

參考來源:
ChatGPT


上一篇
day12. 淺談SQL與NoSQL
下一篇
day14. 介紹Azure雲端服務平台
系列文
新手工程師第一份專案會遇到的職場大小事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言