《jQuery权威指南》学习笔记之第1章 jQuery开发入门-优快云博客

本文详细介绍了jQuery的基础概念，包括其简洁的代码风格、基本功能、开发环境搭建及实例应用，并展示了如何利用jQuery访问和操作DOM元素、控制页面样式、处理事件以及与Ajax技术结合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.1jQuery概述

1.1.1认识jQuery

主旨:以更少的代码，实现更多的功能(Write less, do more)

1.1.2jQuery基本功能

1. 访问和操作DOM元素
2. 控制页面样式
3. 对页面事件的处理
4. 大量插件在页面中的应用
5. 与Ajax技术的完美结合

1.1.3搭建jQuery开发环境

1. 下载jQuery文件库
2. 引入jQuery文件库

1.1.4编写第一个简单的jQuery应用

示例1-1 编写第一个简单的jQuery程序

<!DOCTYPE html>
<html>
	<head>
		<title>第一个简单的jQuery程序</title>
		<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
		<script type="text/javascript">
		
			$(document).ready(function() {
				alert("您好,欢迎来到jQuery世界");
				})

			$(function(){
				alert("您好,欢迎来到jQuery世界");
				})
			
		</script>
	</head>
	<body>
	</body>
</html>

1.1.5 jQuery程序的代码风格

1. "$"美元符的实用
2. 事件操作链接式书写
示例1-2 jQuery事件的链式写法

<html>
	<head>
		<title>jQuery事件的链式写法</title>
		<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
		<style type="text/css">
			.divFrame {
				width: 500px;
				border: solid 2px #666;
				font-size:20pt
			}

			.divTitle {
				background-color: #eee;
				padding: 10px
			}

			.divContent {
				padding: 5px;
				display: none
			}

			.divCurrColor {
				background-color: Red
			}
		</style>
		<script type="text/javascript">

			$(function() {
				$(".divTitle").click(function() {
					$(this).addClass("divCurrColor")
					.next(".divContent").css("display", "block");
					});
				});
		
		</script>
	</head>
	<body>	
		<div class="divFrame">
			<div class="divTitle">主题</div>
			<div class="divContent">
				<a href="#">链接一</a> <br />
				<a href="#">链接二</a> <br />
				<a href="#">链接三</a> <br />
			</div>
		</div>
	</body>
</html>

1.2jQuery的简单应用

1.2.1jQuery访问DOM对象

1. 什么是DOM对象
2. 什么是jQuery对象

1.2.2jQuery控制DOM对象

示例1-3 使用传统的jQuery方法访问DOM对象(jQuery)

<html>
	<head>
		<title>控制DOM对象</title>
		<style type="text/css">
			.divFrame {
				width: 260px;
				border: solid 1px #666;
				font-size: 15pt
			}

			.divTitle {
				background-color: #eee;
				padding: 5px
			}

			.divContent {
				padding: 8px;
				font-size: 9pt
			}

			.divTip {
				width: 244px;
				border: solid 1px #666;
				padding: 8px;
				font-size: 9pt;
				margin-top:5px;
				display: none
			}

			.txtCss {
				border: solid 1px #ccc
			}

			.divBtn {
				padding-top: 5px
			}

			.divBtn .btnCss {
				border: solid 1px #535353;
				width: 60px
			}
		</style>
		<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$("#Button1").click(function() {
					//
					var oTxtValue = $("#Text1").val();
					//
					var oRdoValue = $("#Radio1").is(":checked") ? "男" : "女";
					//
					var oChkValue = $("#Checkbox1").is(":checked") ? "已婚" : "未婚";
					//
					$("#divTip").css("display", "block").html(oTxtValue + "<br />" + oRdoValue + "<br />" + oChkValue);
				});
			});
		</script>
	</head>
	<body>
		<div class="divFrame">
			<div class="divTitle">请输入如下信息</div>
			<div class="divContent">
				姓名:
				<input id="Text1" type="text" class="txtCss" /><br />
				性别:
				<input id="Radio1" name="rdoSex" type="radio" value="男" />男
				<input id="Radio2" name="rdoSex" type="radio" value="女" />女 <br />
				婚否:
				<input id="Checkbox1" type="checkbox" />
				<div class="divBtn">
					<input id="Button1" type="button" value="提交" class="btnCss" onclick="btnClick();" />
				</div>
			</div>
		</div>
		<div id="divTip" class="divTip"></div>
	</body>
</html>

示例1-3-1 使用传统的javascript方法访问DOM对象

<html>
	<head>
		<title>控制DOM对象</title>
		<style type="text/css">
			.divFrame {
				width: 260px;
				border: solid 1px #666;
				font-size: 15pt
			}

			.divTitle {
				background-color: #eee;
				padding: 5px
			}

			.divContent {
				padding: 8px;
				font-size: 9pt
			}

			.divTip {
				width: 244px;
				border: solid 1px #666;
				padding: 8px;
				font-size: 9pt;
				margin-top:5px;
				display: none
			}

			.txtCss {
				border: solid 1px #ccc
			}

			.divBtn {
				padding-top: 5px
			}

			.divBtn .btnCss {
				border: solid 1px #535353;
				width: 60px
			}
		</style>

		<script type="text/javascript">
			function btnClick() {
				//获取文本框的值
				var oTxtValue = document.getElementById("Text1").value;
				//获取单选框的值
				var oRdoValue = (Radio1.checked) ? "男" : "女";
				//获取复选框的值
				var oChkValue = (Checkbox1.checked) ? "已婚" : "未婚";
				//显示提示文本元素
				document.getElementById("divTip").style.display = "block";
				//设置文本元素的内容
				document.getElementById("divTip").innerHTML = oTxtValue + "<br />" + oRdoValue + "<br />" + oChkValue;
			}
		</script>
	</head>
	<body>
		<div class="divFrame">
			<div class="divTitle">请输入如下信息</div>
			<div class="divContent">
				姓名:
				<input id="Text1" type="text" class="txtCss" /><br />
				性别:
				<input id="Radio1" name="rdoSex" type="radio" value="男" />男
				<input id="Radio2" name="rdoSex" type="radio" value="女" />女 <br />
				婚否:
				<input id="Checkbox1" type="checkbox" />
				<div class="divBtn">
					<input id="Button1" type="button" value="提交" class="btnCss" onclick="btnClick();" />
				</div>
			</div>
		</div>
		<div id="divTip" class="divTip"></div>
	</body>
</html>

1.2.3 jQuery控制页面CSS

示例1-4 jQuery控制CSS样式

<html>
	<head>
		<title></title>
		<script language="javascript" type="text/javascript" src="script/jquery-2.0.1.min.js"></script>
		<style type="text/css">
			.divDefalut {
				width: 260px;
				font-size: 10pt;
				padding: 5px;
			}

			.divClick {
				width: 260px;
				border: solid 1px #666;
				font-size: 10pt;
				background-color: #eee;
				padding: 5px;
			}
		</style>

		<script type="text/javascript">
			$(function() {
				$(".divDefalut").click(function() {
					$(this).toggleClass("divClick").html("点击后的样式");
				});
			});
		</script>
	</head>
	<body>
		<div class="divDefalut">点击前的样式</div>
	</body>
</html>