jQuery对象与DOM对象之用户协议验证

我们经常在安装一个软件或者进行用户注册时不可避免地会提示阅读并同意用户协议等文件。在这里，我们通过这样一个小例子来对DOM对象和jQuery对象以及他们之间的相互转换进行学习。

一、约定俗成的变量定义风格

var $variable =jQuery对象；//获取jQuery对象

var   variable = DOM对象  ；//获取DOM对象

 

二、jQuery对象和DOM对象

1、DOM(Document Object Model,文档对象模型)对象：每一个DOM都可以表示为一棵树。即可以由页面中元素的嵌套关系来表示成一颗DOM树。

 DOM对象的获取可以通过JavaScript中的getElementByTagName或getElementById来获取元素节点(DOM对象)。

var domobj   = document.getElementById("id"); //获取DOM对象

 

2、jQuery对象是通过jQuery包装DOM对象后产生的对性爱那个，是jQuery独有的。jQuery对象可以使用jQuery对象对应的方法。例：

$("#idname").html(); //获取id为idname的元素内的html代码。.html()是jQuery对象的一个方法。

  这段代码用DOM实现：

document.getElementById("idname").innerHTML ; //innerHTML为DOM对象的一个方法

3、jQuery对象不可以使用DOM对象的任何方法，同理，DOM对象也不可以使用任何jQuery对象的方法。

例：上面中的innerHTML 方法是DOM对象的。

 $(#id).innerHTML 是错误的。

   同理、对于DOM对象：

document.getElementById("idname").html() 也是错误的。

这里用#id选择符(即$("#id"))取得的是jQuery对象。

用document.getElementById("id')取得的是DOM对象。

4、jQuery对象和DOM对象的相互转换

var domobj   = document.getElementById("id"); //获取DOM对象
var objHTML  =domobj.innerHTMl; //innerHTML为JavaScript的方法，从DOM对象获取HTML元素。

  

var $variable = $("#id");  //jQuery对象   
var variable   = $variable.get(0); //DOM对象，获取 $avrialbe[0]，$variable[0]=$variabel.get(0)   

 

三、用户协议验证：

1、用户协议阅读并同意UI

 

<input type="checkbox" id="cr" /><label for="cr">我已阅读并同意以上协议.</label>

 

2、DOM验证：判断复选框是否被选中

 

<!-- 引入 jQuery -->
<script src="../../scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
	var $cr = $("#cr");  //jQuery对象
	var cr = $cr.get(0); //DOM对象，获取 $cr[0]，$cr[0]=$cr.get(0)
	$cr.click(function(){
		if(cr.checked){ //DOM方式判断
			alert("感谢你的支持!你可以继续操作!");
		}
	})
});
</script>

 

3、jQuery验证

<!-- 引入 jQuery -->
<script src="../../scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
	var $cr = $("#cr");  //jQuery对象
	$cr.click(function(){
		if($cr.is(":checked")){ //jQuery方式判断
			alert("感谢你的支持!你可以继续操作！");
		}
	})
});