jQuery对象和DOM对象的相互转换
jQuery对象-> DOM对象：$(selector)[0]
DOM对象-> jQuery对象：$(domObject)
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="jquery-1.11.1.js"></script> 7 <script> 8 // jQuery入口函数 9 $(document).ready(function () { 10 /*什么是jQuery 对象，什么是dom 对象..*/ 11 $("#btnShow").click(function(){ 12 13 /* 14 我们在之前操作dom 使用document ，但是里面的一些属性何方法感觉不够用。 15 * 还会有兼容性。 16 * 17 * */ 18 19 /*什么是dom 对象，通过dom 获取页面上面的元素得到的对象*/ 20 /* var username=document.getElementById("username");*/ 21 22 /*dom 对象只能调用dom 的属性以及方法 23 * 24 * 25 * */ 26 /* alert(username.value) ;*/ 27 28 /*我想使用jQuery 里面的属性以及方法.*/ 29 30 31 /* username.val(); dom 不能调用JQuery 的方法.*/ 32 33 /*把dom 包装城jQuery*/ 34 /*var $username=$(username); 35 36 alert( $username.val()); 37 38 39 */ 40 41 42 /*jQuery 对象是一个数组对象*/ 43 var $input=$("input"); 44 45 46 /* 47 * jQuery 不能调用dom 的属性以及方法，但是jQuery 是可以转换成dom 对象的. 48 * 49 * */ 50 alert($input[1].value); 51 /*get 第二种转换方式.*/ 52 53 /* 54 $input.get(0) 55 * 使用jQuery 提供的方式来进行转换 56 * */ 57 58 59 60 }) 61 }); 62 </script> 63 64 <style> 65 div{ 66 width: 400px; 67 height: 400px; 68 background: pink; 69 display: none; 70 } 71 72 73 </style> 74 </head> 75 <body> 76 <input type="button" value="按钮" id="btnShow"/> 77 78 79 <div id="bdqn"> 80 81 </div> 82 83 <input type="text" id="username" name="username"> 84 </body> 85 </html>
