Jquery——方法使用②

最新推荐文章于 2021-03-17 17:25:07 发布

Zjaun

最新推荐文章于 2021-03-17 17:25:07 发布

阅读量238

点赞数

CC 4.0 BY-SA版权

分类专栏： JQ 文章标签： JQuery

本文链接：https://blog.youkuaiyun.com/Zjaun/article/details/87193779

JQ 专栏收录该内容

15 篇文章

订阅专栏

事件机制委托

详细解析

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 500px;
height: 500px;
background-color: pink;
}
</style>
</head>
<body>

<!--点击按钮，在div里面创建一个新的p元素-->
<input type="button" value="按钮" id="btn">

<div id="box">
<div>
<span>呵呵</span>
<p>11111</p>
<p>22222</p>
<p>33333</p>
<p>44444</p>
</div>
</div>

<script src="jquery-1.12.4.js"></script>
<script>
//$("div").children("p").click(function(){})
$(function () {
//
//bind方式
// $("p").bind({
// click:function () {
// alert("呵呵")
// },
// mouseenter:function () {
// alert("哈哈")
// }
// });

$("#btn").click(function () {
$("<p>我是新增加的p元素</p>").appendTo("div");
});
//简单事件，给自己注册的事件
// $("div").click(function () {
// alert("哈哈");
// });
//delegate:代理，委托
//1. 给父元素注册委托事件，最终还是有子元素来执行。
//要给div注册一个委托事件,但是最终不是由执行，而是有p执行
//第一个参数：selector:事件最终由谁来执行。
//第二个参数：事件的类型
//第三个参数：函数，要做什么
//1. 动态创建的也能有事件 :缺点：只能注册委托事件
$("#box").delegate("p", "click", function () {
//alert("呵呵");
console.log(this);
});
//注册简单事件，缺点：一次只能注册一个事件
// $("p").click(function () {
// alert("呵呵");
// });
});
</script>

</body>
</html>

注册简单的委托事件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<input type="button" value="增加" id="btn">
<div>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
</div>

<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
// 这个是p自己注册的事件（简单事件）
/*$("p").on("click", function () {
alert("呵呵");
});*/
//注册简单事件
$("div").on("click", "p", function () {
alert("呵呵")
});
//注册委托事件
$("#btn").on("click", function () {
$("<p>我是新建的p元素</p>").appendTo("div");
});
});
</script>

</body>
</html>

获取宽度与长度

<style>
div {
width: 200px;
height: 200px;
background-color: red;
padding: 10px;
border: 10px solid #000;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//获取div的宽度
//console.log($("div").css("width"));
//$("div").css("width", "400px");
//直接获取到的是数字
//就是获取的width的值
console.log($("div").width());//width
//console.log($("div").innerWidth());//padding+width
//console.log($("div").outerWidth());//padding+width+border
//console.log($("div").outerWidth(true));//padding+width+border+margin
//$("div").width(400);
//需要获取页面可视区的宽度和高度
// $(window).resize(function () {
// console.log($(window).width());
// console.log($(window).height());
// });
console.log($(window).scrollTop());//滚动条高度
console.log($(window).scrollLeft());//滚动条宽度
});
</script>

光标聚焦显示

<body>
	<input type="button" value="点击" id="btn">
	<input type="text" value="洋酒" id="txt">
</body>
<script src="jquery-1.12.4.js"></script>
	<script>
	$(function () {
		$("#txt").focus(function () {
			if($(this).val() === "洋酒"){
				$(this).val("");
			}
		})
	$("#txt").blur(function () {
	if($(this).val() === ""){
		$(this).val("洋酒");
			}
	})
})
</script>

在这里插入图片描述

创建节点

<script>
$(function () {
// var box = document.getElementById("box");
//
// var a = document.createElement("a");
// box.appendChild(a);
// a.setAttribute("href", "http://web.itcast.cn");
// a.setAttribute("target", "_blank");
// a.innerHTML = "xxxxxx";
$("#box").append('<a href="http://web.itcast.cn" target="_blank">xxxxxx</a>');
});
</script>

清空节点与删除节点

定义一个边框

<style>
div {
width: 400px;
height: 400px;
background-color: pink;
}
</style>

<div>
<p>1111</p>
<p>2222</p>
</div>

<p class='des'>我是外面的p元素</p>

<script src="jquery-1.12.4.js"></script>
<script>
	$(function () {
		$(".des").click(function () {
			alert("hehe");
		})
//可以清空一个元素的内容
//内存泄露：
//$("div").html("");
//清理门户（）
//$("div").empty();
//$("div").remove();

//false:不传参数也是深度复制,不会复制事件
//true:也是深复制，会复制事件
$(".des").clone(true).appendTo("div");
	});
</script>

在这里插入图片描述