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

posted @ 2019-07-18 10:57  Stars-one  阅读(249)  评论(0编辑  收藏