html基础开发-jQuery框架基础语法攻略(攻略一)


1 jquery框架 ready方法使用

使用方法:$(document).ready()   当document中的所有节点全部加载完成后ready中的方法


例如下面的使用案例中,访问页面,当整个页面加载完成后,再向页面中的指定标签写入内容

<!DOCTYPE html>
<html>
<head>
<title>synthesize.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
	.content {
		width: 300px;
		height: 100px;
		background-color: #e8e9e6;
		border: 2px solid red;
	}
	
	.contentMain {
		width: 400px;
		height: 200px;
		background-color: #e8e9e6;
		border: 2px solid blue;
	}
</style>
	
	<script type="text/javascript">
		$(document).ready(function() {
			$("#p_main_show_des").html("这是一个神奇的体验");
		});
	</script>
</head>

<body>
	<div class="content">
		<p>主要内容</p>
	</div>
	<br>
	<div class="contentMain">
		<p >显示内容域</p>
		<p id="p_main_show_des" style="background-color: blue"></p>
	</div>
</body>
</html>

效果图 1-1

我们可以看到,在id为p_main_show_des的p标签中原来是没有内容的,但是我们在ready方法中向这个标签中写入了相关内容,当页面加载完成后就会执行写入的方法,页面加载完成后,这个p标签中就有了相关的内容

注: script标签中使用的的相关方法(例($(document))下面会一一解说



2 jQuery对象与DOM对象

2-1 DOM对象说明

通过原生DOM模型提供的document.getElementById(“id”) 方法获取的DOM元素就是DOM对象,通过DOM方法将自己的innerHTML与style属性处理文本与颜色。


2-2 jQuery对象说明

通过jQuery方法获取的对象


例如:


<!DOCTYPE html>
<html>
<head>
<title>synthesize.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
	.content {
		width: 300px;
		height: 100px;
		background-color: #e8e9e6;
		border: 2px solid red;
	}
	
	.contentMain {
		width: 400px;
		height: 200px;
		background-color: #e8e9e6;
		border: 2px solid blue;
	}
</style>

<script type="text/javascript">
	
</script>
</head>

<body>
	<div class="content">
		<p>主要内容</p>
	</div>
	<br>
	<div class="contentMain">
		<p>显示内容域</p>
		<p id="p_main_show_des" style="background-color: #ffffff">孤独的路,我在这里想你</p>
		<p id="p_main_write_des" style="background-color: #e9e9e9">孤独的路,我在这里想你</p>

	</div>
</body>

<script type="text/javascript">
	window.onload = function() {
		//通过js原生的方法来获取ID为p_main_show_des的标签
		var p = document.getElementById("p_main_show_des");
		//设置P标签中的内容
		p.innerHTML = "通过js原生的方法来获取ID为p_main_show_des的标签";
		//将显示元素的内容改为红色
		p.style.color = "red";

	}
</script>
<script type="text/javascript">
	$(document).ready(function(){
		//通过jQuery方法获取ID为 p_main_write_des的P标签
		var p = $("#p_main_write_des");
		//向这个标签中写入内容
		p.html("通过jQuery方法获取ID为 p_main_write_des的P标签");
	
	});
</script>
</html>

效果图:

html基础开发-jQuery框架基础语法攻略(攻略一)_第1张图片










你可能感兴趣的:(html基础开发-jQuery框架基础语法攻略(攻略一))