jQuery学习笔记（一）

最新推荐文章于 2023-08-01 23:29:20 发布

SnowUnicorn

最新推荐文章于 2023-08-01 23:29:20 发布

阅读量470

点赞数

分类专栏： jQuery 文章标签： javascript jquery dom 库 html

本文链接：https://blog.csdn.net/shixihaoma/article/details/33429303

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近开始做动态网页前台的开发，要对前台javascript进行操作，所以在此对jQuery、Javascript、AngulaJS进行学习，此时开始对jQuery的学习进行总结。

DOM（Document Object Model，文本对象模型）的每一个页面都是一个DOM对象，通过传统的Javascript方法访问页面中的元素，就是访问DOM对象。

例如：在页面中的2各<div>标记元素，其代码如下：

通过下面的Javascript代码可以访问DOM对象和获取或设置其内容值：

var tDIv = document.getElementById("divTmp");//获取DOM对象

var oDiv = document.getElementById("divOut");//获取DOM对象

var cDiv = tDiv.innerHTML;//获取DOM对象中的内容

oDiv.innerHTML = cDiv;//设置DOM对象中的内容

如果执行上面的Javascript代码，将在ID为“dvOut”的标记中显示ID为“divTmp”的标记内容。

在jQuery库中，通过本身自带的方法获取页面元素的对象，我们称之为jQuery对象：为了同样实现在ID为“divOut”的标记中显示ID为“divTmp”的标记内容，采用jQuery访问页面元素的方法，其实现的代码如下：

var tDiv = $("#divTmp")；//获取jQuery对象

var oDiv = $("#divOut");//获取jQuery对象

var cDiv = tDiv.html();//获取jQuery对象中的内容

oDiv.html(cDiv);//设置jQuery对象中的内容

通过上述代码对比，可以看出jQuery对象访问方法比DOM对象访问方法更简单、高效，他们都实现相同的功能。

下面通过一个实例来简单说明传统JavaScript方法访问DOM对象和jQuery访问DOM对象。

<span style="font-size:18px;"><DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>控制DOM对象</title>
	<style type = "text/css">
		.divFrame{width:260px;border:solid 1px #666;
					font-size:10pt}
		.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 +"<div>" + 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" οnclick="btnClick();"/>
			</div>
		</div>
	</div>
<div id="divTip" class="divTip"></div>
</body>
</html>
</span>

上述代码用传统的Javascript方法获取用户输入的信息，并保存到变量汇总，最后通过document.getElementById("divTip".innerHTML)方法显示所有的数据信息。将下面的实例进行修改，引入jQuery库，通过jQuery中的方法获取元素中的值，并将获取的数据显示出来，修改后的Javascript代码如下表示：

$(function(){

$("#btnSubmit").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>

修改后的Javascript代码中，$("#Text1").val在jQuery库中表示获取ID号为“Text1”的值；$("Radio1").is(":checked")表示ID号为“Radio1”的单选按钮是否被选中，如果选中，则返回"男"，否则返回"女"。

通过jQuery库中的方法访问或控制页面中的元素比使用传统的JavaScript代码要简洁的多，并且还兼容各种浏览器。

jQuery控制页面CSS

在jQuery框架中，通过自带的Javascript编程，提供全部的CSS3下的选择器，开发者以首先定义自己的样式文件，然后通过jQuery中的addClass()方法将该样式轻松地添加到页面指定的元素中，而不用考虑浏览器的兼容性。例如下面例子：在页面中增加一个<div>元素标记，当用户单击该元素时，变化其文本内容和背景色，在此点击时，回复其初始的内容和背景色。

<span style="font-size:18px;"><DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>jQuery控制CSS样式</title>
	<script language="javascript" type="text/javascript" src="jquery-2.1.1.min.js"></script>
	
	<style type = "text/css">
		.divDefault{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(){
			$(".divDefault").click(function(){
				$(this).toggleClass("divClick").html("点击后的样式");
			});
		});
	</script>
</head>
<body>
	<div class="divDefault">点击前的样式</div>
</body>
</html></span>

SnowUnicorn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记（一）

最近开始做动态网页前台的开发，要对前台javascript进行操作，所以在此对jQuery、Javascript、AngulaJS进行学习，此时开始对jQuery的学习进行总结。DOM（Document Object Model，文本对象模型）的每一个页面都是一个DOM对象，通过传统的Javascript方法访问页面中的元素，就是访问DOM对象。例如：在页面中的2各标记元素，其代码如下：
复制链接

扫一扫

专栏目录