首页 > 其他分享 >在页面中给元素添加事件语法

在页面中给元素添加事件语法

时间:2022-11-05 22:35:26浏览次数:43  
标签:checkbox 元素 语法 添加 事件 htmlStr 选择器 页面

1,在页面中给元素添加事件语法:
1)使用元素的事件属性:onxxxx="f()"
2)使用jquery对象:选择器.xxxx(function(){
//js代码
//this
});
*只能给固有元素添加事件
固有元素:当调用事件函数给元素添加事件时,如果元素已经生成,则这些元素叫做固有元素;
动态生成的元素:当调用事件函数给元素添加事件时,如果元素还没有生成,后来生成的元素叫做动态生成的元素。
3)使用jquery的on函数:父选择器.on("事件类型",子选择器,function(){
//js代码
//this
});

​ 父元素:必须是固有元素,可以直接父元素,也可以是间接父元素.
​ 原则固有父元素范围越小越好.
​ 事件类型:跟事件属性和事件函数一一对应。
​ 子选择器:目标元素,跟父选择器构成一个父子选择器
​ *不但能给固有元素添加事件,还能够给动态生成的元素添加事件。

第三种代码演示:

$("#tBody").on("click","input[type='checkbox']",function () {//表示每个单选框被选中的时候都会触发这个事件.
			//如果列表中的所有checkbox都选中,则"全选"按钮也选中
			if($("#tBody input[type='checkbox']").size()==$("#tBody input[type='checkbox']:checked").size()){
				$("#chckAll").prop("checked",true);
			}else{//如果列表中的所有checkbox至少有一个没选中,则"全选"按钮也取消
				$("#chckAll").prop("checked",false);
			}
		});

input标签

//显示总条数
//$("#totalRowsB").text(data.totalRows);
	//显示市场活动的列表
	//遍历activityList,拼接所有行数据
	var htmlStr="";
	$.each(data.activityList,function (index,obj) {
		htmlStr+="<tr class=\"active\">";
		htmlStr+="<td><input type=\"checkbox\" value=\""+obj.id+"\"/></td>";
		htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='workbench/activity/detailActivity.do?id="+obj.id+"'\">"+obj.name+"</a></td>";
		htmlStr+="<td>"+obj.owner+"</td>";
		htmlStr+="<td>"+obj.startDate+"</td>";
		htmlStr+="<td>"+obj.endDate+"</td>";
		htmlStr+="</tr>";
	});
	$("#tBody").html(htmlStr);	

标签:checkbox,元素,语法,添加,事件,htmlStr,选择器,页面
From: https://www.cnblogs.com/javaxubo/p/16861532.html

相关文章