3-8 jQuery的Dom事件

啊哈在下

已于 2022-01-20 13:58:00 修改

阅读量479

点赞数 1

文章标签： jquery javascript 前端

于 2022-01-20 11:45:24 首次发布

本文链接：https://blog.csdn.net/siebo/article/details/122596824

版权

1.补充说明

ready:当DOM载入就绪可以查询即操作时绑定一个要执行的函数。极大提高web应用程序的响应速度
onload: 是js中的方法，网页的所有标签元素、图片全部加载完毕之后才执行这个事件处理程序，速度相对较慢
例：

//在dom内容载入就绪之后执行
			$(document).ready(function(){
				// $("#d1").css("width: 50%;");
				console.info("1");
				//绑定事件拿到ready里面
				//on()绑定事件
				$("#b1").on("click",function(){
					$(this).css("color","red");
				});
				$("#b1").click(function(){
					$(this).css({
						"color":"red",
						"font-size":"36px"
					});
				});
			});

# 2.绑定操作

## 2.1绑定

//绑定事件拿到ready里面
//on()绑定事件

```java

$("#b1").on(“click”,function(){
$(this).css(“color”,“red”);
});


## 2.2解绑
off()进行函数解绑
```java
$("#b1").off("click");

3.DOM操作

生成元素

var ele = $("<p>hello world</p>");

插入元素

在内部尾部插入

$("div").append(ele);

在内部头部插入

$("div").prepend(ele);

在外部头部插入

ele.insertBefore("#d1");

在外部尾部插入

ele.insertAfter("#d1");

删除元素

删除全部子元素

$("#d1").empty();

删除指定元素及其子元素

$("#d1").remove();

遍历

var arr = [];
arr = $("input");

index:下标/索引,从0开始
item:数组中的元素对象

arr.each(function(index, item){
			console.info(item.value);
});

arr = ["a","b","c"];
				$.each(arr, function(index, item){
					console.info(index+":"+item);
				});

界面样式

<body>	
		
		<div id="d1" style="border:1px solid red;height: 200px;">
			<h1>过年好！！！</h1>
			<span id="s1">拿红包！！！</span>
		</div>
		
		<input type="text" placeholder="请输入姓名" />
		<input type="text" placeholder="请输入年龄" />
		<input type="password" placeholder="请输入密码" />
		
		
		<button id="b1">按钮</button>
		<button onclick="closeOn();">解绑事件</button>
	</body>