JavaScript

jQuery之$(document)

微信扫一扫,分享到朋友圈

jQuery之$(document)
收藏 0 0

$(document)是一个选择器,选中的是整个html所有元素的集合。

$(document).ready()里面的元素或事件都将会在DOM完成加载之后立即加载,并且在页面内容加载之前。

使用 $(document).ready(),你能让你的事件在window加载之前加载或触发。

jquery中用on来绑定事件,经常的写法有

on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间,如”click”或”keydown.myPlugin” 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

$(document).on('click', '.classname', function() {});

$('.classname').on('click', function() {});

替换bind()

当第二个参数’selector’为null时,on()和bind()其实在用法上基本上没有任何区别了,所以我们可以认为on()只是比bind()多了一个可选的’selector’参数,所以on()可以非常方便的换掉bind();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="static/utils/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.classname{
				width: 100px;
				height: 40px;
				line-height: 40px;
				background-color: #01AAED;
				border-radius: 10px;
				color: #FFFFFF;
				font-size: 12px;
				text-align: center;
			}
			.classimg{
				width: 100px;
				height: 40px;
				line-height: 40px;
				background-color: #ff557f;
				border-radius: 10px;
				color: #FFFFFF;
				font-size: 12px;
				text-align: center;
				margin-top: 10px;
			}
			.bgimg{
				background-color: #007DDB!important;
			}
			#list{
				width: 100%;
				height: auto;
			}
			#list li{
				width: 50px;
				height: 20px;
				background-color: #009688;
				margin-top: 5px;
				color: white;
				font-size: 12px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="body">
			
			<div class='classimg'>点击我</div>
			<div id="list">
				<ul>
					<li>
						123
					</li>
					<li>
						678
					</li>
				</ul>
			</div>
		</div>

		<script type="text/javascript">
			$(document).ready(function() {
				console.log("123")

			});
			window.onload = function() {
				console.log("456");
			}

			$(function() {
				console.log("789");
				$(".body").prepend("<div class='classname'>点击我</div>")
			})

			$(document).on('click', '.classname', function() {
				alert("被点击了")
			});
			
			$('.classname').on('click', function() {
				alert("又被点击了")
			});
			
			$(".classimg").bind("click",function(){
			  $(".classimg").addClass("bgimg")
			});
			
			$(document).on('click', '#list li', function() {
			    alert("又被点击了")
			});
		</script>
	</body>
</html>
展开阅读全文
干一件事情,用心干就完了

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片

分类目录

微信扫一扫

微信扫一扫