jQuery選擇器是jQuery中最基礎的一個功能模塊,是我們在使用jQuery提供的各種操作方法時必須掌握的基礎知識。下面我們來詳細講解一下jQuery選擇器。
//選擇器的基本語法 $(selector).action(); //例子 $("p").hide();
上述代碼中,$是一個jQuery對象,我們稱之為“美元符號”,它是一個預定義的函數,用于對象選擇器的初始化,jQuery選擇器通過它返回一個新的jQuery對象。在括號中的selector就是我們要選擇的元素,它可以是標簽名、class、id等等。
//常見的選擇器 $("p") //選擇所有的p元素 $(".class") //選擇所有的class為class的元素 $("#id") //選擇所有的id為id的元素 $("p.intro") //選擇所有的p元素中class為intro的元素 $("p:first") //選擇第一個p元素 $("ul li:eq(2)") //選擇第三個ul中的li元素 $("a[target=_blank]") //選擇target屬性為_blank的a元素
除了常見的選擇器以外,我們還可以使用類似于CSS選擇器的方式選擇元素。
//選擇器的內部機制(CSS選擇器) $("p:odd") //選擇所有的奇數p元素 $("div > p") //選擇所有的div里面的p元素 $("ul li:first-child") //選擇每個ul里面的第一個li元素 $("ul li:last-child") //選擇每個ul里面的最后一個li元素
除了上述常見的選擇器以外,jQuery還可以通過自定義選擇器來滿足各種需求。我們可以通過$.extend()方法來定義自己的選擇器。
// 自定義選擇器 $.extend($.expr[':'], { checked: function(elem) { return elem.checked === true; }, unchecked: function(elem) { return elem.checked !== true; } }); $('input:checked').length; //選擇所有被選中的input元素 $('input:unchecked').length; //選擇所有沒有被選中的input元素
在使用jQuery選擇器時,我們應該選擇最具體的元素,這樣可以提高代碼的性能。當我們選擇到某個元素后,可以對這個元素進行各種操作,如:修改、添加、刪除等等。
總的來說,jQuery選擇器是一個非常強大的工具,不僅可以方便地選擇元素,還可以結合其他操作進行各種處理。在jQuery的世界中,選擇器是我們成功編寫漂亮而高效代碼的基礎之一。