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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Web阿成

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值