jQuery_03 dom对象和jQuery对象的互相转换
dom对象和jQuery对象
dom对象 jQuery对象 在一个文件中同时存在两种对象
dom对象: 通过js中的document对象获取的对象 或者创建的对象
jQuery对象: 通过jQuery中的函数获取的对象。
为什么使用dom或jQuery对象呢？
目的是 要使用dom对象的函数或者属性 以及呢 要使用jQuery中提供的函数或者属性。要使用dom中的内容 就需要使用dom对象 要使用jQuery中的函数 就需要使用jQuery对象
dom对象 和 jQuery对象 可以相互转换
dom对象转换为jQuery对象
$(dom对象) 得到一个jQuery对象 可以调用jQuery中提供的函数
<body><input type="button" id="btn" value="我是按钮" onclick="btnClick()" />
</body><script type="text/javascript">// dom对象 jQuery对象 在一个文件中同时存在两种对象// dom对象: 通过js中的document对象获取的对象 或者创建的对象// jQuery对象: 通过jQuery中的函数获取的对象。//为什么要使用 dom对象 或者说 jQuery对象呢？//目的是 要使用dom对象的函数或者属性 以及呢 要使用jQuery中提供的函数或者属性。// 要使用dom中的内容 就需要使用dom对象 要使用jQuery中的函数 就需要使用jQuery对象// dom对象 和 jQuery对象 可以相互转换/* 1.dom对象转换为jquery对象$(dom对象) 得到一个jQuery对象 可以调用jQuery中提供的函数*/// var dom = document.getElementById("t1");// //把dom 转换为jQuery// var jqueryobj = $(dom);// //调用jQuery中的函数 .......// jqueryobj.val() //获取dom对象的值// 提示： 为了区分dom对象和jQuery对象 一般情况下 jQuery对象的变量名前面都会加上$符号 例如$objfunction btnClick() {var obj = document.getElementById("btn");//转成jQuery对象var $jobj = $(obj); //$jobj就是jQuery对象alert($jobj.val()); // 获取按钮的值}</script>
jQuery对象转换为dom对象
语法:jQuery对象是一个数组 数组成员是dom对象 使用[下标] 或者 get(下标) 获取dom对象
<body><!-- <input type="text" id="t1" /> --><!-- <input type="text" id="txt1" /> --><input type="button" id="btn" value="计算平方" onclick="btnClick()" /><br /><input type="text" id="txt1" value="请输入整数" /></body> <script type="text/javascript">/* 语法:jQuery对象是一个数组 数组成员是dom对象 使用[下标] 或者 get(下标) 获取dom对象*/// $("#txt1"):获取id为txt1的对象/* var obj = $("#txt1"); // obj是一个jQuery对象 是一个包含了一个成员的dom数组。 obj[0] 就是dom对象var dom = obj[0]; //dom对象 或者 obj.get(0) 也是dom对象// 使用dom对象的函数 或者 属性alert(dom.value); */function btnClick() {// var obj = $("#txt1"); //obj 是jquery对象var dom = obj.get(0);// var dom = obj[0];var num = dom.value;dom.value = num * num;alert(dom.value);}</script>