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

转载于:https://www.cnblogs.com/chaoyang123/p/11549761.html

相关资源：JAVA上百实例源码以及开源项目