JQuery學習筆記（2）——陣列 屬性 事件
阿新 • • 發佈：2019-07-18
each遍歷
JQueryObjectArray.each(function(index,Element))
$(".myTable").each(function(i,ele){
//使用模板函式
//這裡的ele是一個DOM物件，要想使用jQuery物件，可以這樣寫$(this)
//function裡面的i和ele兩個引數，根據實際情況填
console.log(`${i}: ele.innerText`);
});toFixed(2) 保留2位小數
獲得屬性
獲得屬性有兩種方法
- attr(propertyName)
- prop(propertyName)兩者使用區別如下：
- 對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
- 對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法
如果使用prop去獲得自定義的屬性，會返回undefined(未定義)
設定屬性
設定屬性也是兩種方法，方法名與獲得屬性的兩種方法相同，只不過多了個引數
- attr(propertyName,value)
- prop(propertyName,value)
設定全選例子：
<form action=""> <input type="checkbox" id="checkall" >全選 <br> <br> 愛好：<br> <input type="checkbox" name="hobby">讀書<br><br> <input type="checkbox" name="hobby">電影<br><br> <input type="checkbox" name="hobby">遊戲<br><br> <input type="checkbox" name="hobby">游泳<br><br> <input type="checkbox" name="hobby">寫程式碼<br><br> </form> <script> $(function(){ $('#checkall').click(function(){ console.log(this); if(this.checked){ $(":input[name='hobby']").attr("checked",true); }else{ $(":input[name='hobby']").attr("checked",false); } }) }); </script>
刪除屬性
- removeAttr(attrname)
- removeAttr(attrname)
$(':button').removeAttr("name");新增和刪除css類
- addClass()
- removeClass()
addClass無法實現替換，一般通過刪除之後再新增來實現替換class的效果
$("p").removeClass("myClass noClass").addClass("yourClass");顯示和隱藏
- hide()
- show()
$('#mydiv').hide(); $('#mydiv').show();
設定事件監聽器
//滑鼠移入移出
$("#mybutton").hover(function(){
//這裡是滑鼠移入後執行的邏輯操作
}，function(){
//這裡是滑鼠移出後執行的邏輯操作
})；
//滑鼠點選
$("#mybutton").click(function(){
//這裡是滑鼠點選後執行的邏輯操作
});