学习jQuery——jQuery对象和DOM对象
浏览数：18 /
时间：2015年06月09日
(一) jQuery转换成DOM对象
1.jQuery对象不能使用DOM中的方法，当不得不使用DOM对象的时候可以通过下面两种方法转换,因为jQuery是一个数组对象，所有可以通过索引的方式进行转换。
(1):[index]:
1 var $isagree = $("#isAgree"); 2 var cr = $isagree[0];
(2):jQuery本身的get(index)
1 var $isagree = $("#isAgree"); 2 var isagree = $isagree.get(0);
(二)DOM对象转换成jQuery对象
DOM转jQuery比较简单，只需要用$(DOM对象)即可，就可以使用jQuery中方法。
1 var isagree = document.getElementById("isAgree"); 2 var jq = $(isagree);
只有DOM对象才能调用DOM方法，jQuery对象不能使用DOM中的方法。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>用户注册</title>
<link rel="stylesheet" href="@Url.Content("~/Content/Demo1/common.css")" />
<link rel="stylesheet" href="@Url.Content("~/Content/Demo1/register.css")"/>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
</head>
<body>
<div class="wrap">
<div class="register-mod link0">
<div class="register-hd">
<div class="register-step register-step1">
</div>
</div>
<div class="register-bd">
<form id="registerForm" name="registerForm">
<input id="regType" name="regType" type="hidden">
<input name="c1529834d41ad38d9d1747fe41658de7" value="7e1d0267976a4d658b9969f4c0007bb6" type="hidden">
<input id="lifeStage" name="lifeStage" value="0" type="hidden">
<div class="register-form">
<dl class="input-dl">
<dt><em>用 户 名</em></dt>
<dd>
<input style="display: none;" id="name" name="name" class="txt normal" ttname="reg_username_cnt" placeholder="即昵称,不能修改(必填)" tabindex="1" type="text"><input id="namePlaceholder" class="txt normal namePlaceholder" value="即昵称,不能修改(必填)" autocomplete="off" tabindex="1" />
<span class="tip"> </span>
<span id="nameTip" class="info line">支持汉字、数字、字母和下划线</span>
</dd>
</dl>
<dl class="input-dl">
<dt><em>设置密码</em></dt>
<dd id="pwd_dl">
<input style="display: none;" id="pwd" name="pwd" class="txt normal" placeholder="6位以上(必填)" tabindex="2" type="password"><input id="pwdPlaceholder" class="txt normal pwdPlaceholder" value="6位以上(必填)" autocomplete="off" tabindex="2" />
<span class="tip"> </span>
</dd>
</dl>
<dl class="agree">
<dt> </dt>
<dd class="color6 f12 link6">
<input id="isAgree" name="isAgree" value="1" checked="checked" class="checkbox" tabindex="6" type="checkbox" />
我已经阅读并完全同意<a class="register_protocol">注册协议</a>
</dd>
</dl>
<dl class="register-btns">
<dt> </dt>
<dd>
<a id="emailButton" class="register-btn register-btn1" href="javascript:;" regtype="email" tabindex="8"><span><i></i>邮箱激活</span></a>
</dd>
</dl>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
1 <script type="text/javascript"> 2 //两种不同的方式（1）（2） 3 //（1） 4 $(function () {//Dom元素加载完毕 5 var $isagree = $("#isAgree"); 6 var cr = $isagree[0]; 7 $("#isAgree").click(function () { 8 if (cr.checked) { 9 alert("您同意了注册协议！"); 10 } 11 }); 12 }); 13 //（2） 14 $(function () {//Dom元素加载完毕 15 $("#isAgree").click(function () { 16 if ($("#isAgree").is(":checked")) { 17 alert("您同意了注册协议！"); 18 } 19 }); 20 }); 21 </script>
详细的这里就不做解释了因为代码很少，就几句话，当每次点击同意注册协议前的checkbox时，会判断是否是选中状态，如果是则会弹出一段脚本。小弟在此就不附上截图了。
1 is(":checked") 是jQuery中的方法,根据返回的布尔值判断是否选中。
（三）jQuery和其他库的冲突问题
默认情况下：jQuery用 "$" 符号作为自身的快捷方式。
1 <!-- 引入 prototype --> 2 <script src="prototype-1.6.0.3.js" type="text/javascript"></script> 3 <!-- 引入 jQuery --> 4 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> 5 </head> 6 <body> 7 <p id="pp">test---prototype</p> 8 <p >test---jQuery</p> 9 10 <script type="text/javascript"> 11 jQuery.noConflict(); //将变量$的控制权让渡给prototype.js 12 jQuery(function(){ //使用jQuery 13 jQuery("p").click(function(){ 14 alert( jQuery(this).text() ); 15 }); 16 }); 17 18 $("pp").style.display = ‘none‘; //使用prototype 19 </script>
1 <!-- 引入 prototype --> 2 <script src="prototype-1.6.0.3.js" type="text/javascript"></script> 3 <!-- 引入 jQuery --> 4 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> 5 </head> 6 <body> 7 <p id="pp">test---prototype</p> 8 <p >test---jQuery</p> 9 10 <script type="text/javascript"> 11 var $j = jQuery.noConflict(); //自定义一个比较短快捷方式 12 $j(function(){ //使用jQuery 13 $j("p").click(function(){ 14 alert( $j(this).text() ); 15 }); 16 }); 17 18 $("pp").style.display = ‘none‘; //使用prototype 19 </script>
1 <!-- 引入 prototype --> 2 <script src="prototype-1.6.0.3.js" type="text/javascript"></script> 3 <!-- 引入 jQuery --> 4 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> 5 </head> 6 <body> 7 <p id="pp">test---prototype</p> 8 <p >test---jQuery</p> 9 10 <script type="text/javascript"> 11 jQuery.noConflict(); //将变量$的控制权让渡给prototype.js 12 jQuery(function($){ //使用jQuery 13 $("p").click(function(){ //继续使用 $ 方法 14 alert( $(this).text() ); 15 }); 16 }); 17 18 $("pp").style.display = ‘none‘; //使用prototype 19 </script>
1 <!-- 引入 prototype --> 2 <script src="prototype-1.6.0.3.js" type="text/javascript"></script> 3 <!-- 引入 jQuery --> 4 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> 5 </head> 6 <body> 7 <p id="pp">test---prototype</p> 8 <p >test---jQuery</p> 9 10 <script type="text/javascript"> 11 jQuery.noConflict(); //将变量$的控制权让渡给prototype.js 12 (function($){ //定义匿名函数并设置形参为$ 13 $(function(){ //匿名函数内部的$均为jQuery 14 $("p").click(function(){ //继续使用 $ 方法 15 alert($(this).text()); 16 }); 17 }); 18 })(jQuery); //执行匿名函数且传递实参jQuery 19 20 $("pp").style.display = ‘none‘; //使用prototype
1 <!--先导入jQuery --> 2 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> 3 <!--后导入其他库 --> 4 <script src="prototype-1.6.0.3.js" type="text/javascript"></script> 5 </head> 6 <body> 7 <p id="pp">test---prototype</p> 8 <p >test---jQuery</p> 9 10 <script type="text/javascript"> 11 jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。 12 jQuery("p").click(function(){ 13 alert( jQuery(this).text() ); 14 }); 15 }); 16 17 $("pp").style.display = ‘none‘; //使用prototype
（四）jQuery开发工具有很多，如vs2010,2012，aptana等等。
本文内容完全是我在看《锋利的jQuery》时边看边写下来，不为了别的知识为了加深自己的印象已经方便日后回顾(所谓好记性不如烂笔头)。忘各位大牛清喷。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
