当前位置： 移动技术网 > IT编程>开发语言>Jquery > JQuery学习笔记（2）——数组 属性 事件

JQuery学习笔记（2）——数组 属性 事件

2019年07月19日  | 移动技术网IT编程  | 我要评论

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(){
    //这里是鼠标点击后执行的逻辑操作
});

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网