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)

设置全选例子：

            复制
            
                <formaction="">
                <inputtype="checkbox"id="checkall" >全选 <br><br>
    爱好：<br><inputtype="checkbox"name="hobby">读书<br><br><inputtype="checkbox"name="hobby">电影<br><br><inputtype="checkbox"name="hobby">游戏<br><br><inputtype="checkbox"name="hobby">游泳<br><br><inputtype="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(){
    //这里是鼠标点击后执行的逻辑操作
});