jQuery_03 dom对象和jQuery对象的互相转换

news2024/9/24 13:25:27

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对象的变量名前面都会加上$符号 例如$obj

    function 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>