JQuery學習筆記（2）——數組 屬性 事件

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位小數

數組map拼接

數組調用map，會自動拼接成一個字符串

$.getJSON('json_data.html', {name1: '參數值', name2: 'value2'}, function(res) { 
        // 服務器響應，返回的json數據
        // es6 數組的map()
        const trArr = res.map(item => {
            return `
                <tr>
                    <td>${item.empno}</td>
                    <td>${item.ename}</td>
                    <td>${item.sal}</td>
                </tr>
            `
        });
        // console.log(...trArr);
        // join()將數組的元素鏈接成一個字符串
        console.log(trArr.join(''));

       $('#myDiv').html(`
                <table class="table">
                    <tr>
                        <th>編號</th>
                        <th>姓名</th>
                        <th>工資</th>
                    </tr>
                   ${trArr.join('')}
                </table>
            `);
    });
});

得到屬性

得到屬性有兩種方法

• 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(){
    //這裏是鼠標點擊後執行的邏輯操做
});