zoukankan      html  css  js  c++  java
  • js行内式遇到的一些问题 DOM对象和jq对象转换的问题

    这两天给后台页面做页面,我的工作比较简单,只需要写结构和样式就行了,写好之后,后端大哥用ajax重写页面加载数据,顺便给标签添加选中事件,做选中后变色的处理,但是却遇到一个问题,一直选不到触发事件这个对象。简单还原代码如下

    <button id='btn' onclick='check()' name='abc' value='123'>类别</button>
    <script>
    function check() {
        console.log($(this).name);
    }
    </script>

    遇到的问题就是,一直取不到这个button对象,打印$(this)得到的结果是【window】,后来发现,要解决要注意3个地方:

    1,、函数里要穿参即function check(obj),注意这里的形参不能写this,其他的都可以。

    2、在html调用的标签里调用方法时,要穿实参,即 <button onclick='check(this)' name='abc'>类别</button>。

    3、如果用jq的$方法,写法要注意,如果想用$()这样的jq对象调用js的value方法,必须在后面加个get(0),即

    $('#btn').get(0).value //123;

    $("#btn")得到的是jquery封装的对象,里面提供了jquery的一些方法,并不是html原生对象,通过get(0)才能取到jquery对象里面关联的html对象,从而操作html对象的属性和方法。

    这里涉及到DOM对象和jq对象的转换问题

     jQuery对象转成DOM对象: 

    两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index); 

    (1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。 

    如:var $v =$("#v") ; //jQuery对象 

    var v=$v[0]; //DOM对象 

    alert(v.checked) //检测这个checkbox是否被选中 

    (2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象 
    如:var $v=$("#v"); //jQuery对象 
    var v=$v.get(0); //DOM对象 
    alert(v.checked) //检测这个checkbox是否被选中

    DOM对象转成jQuery对象: 

    对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象) 

    如:var v=document.getElementById("v"); //DOM对象 

    var $v=$(v); //jQuery对象 

    转换后,就可以任意使用jQuery的方法了。 

    
    
    <button id='btn' onclick='check(this)' name='abc' value='123'>类别</button>

    function check(a) {
        console.log($(a).val());
        
        console.log(a.value);
    }

    可能表述的并不完全准确,如果有错欢迎指正,因为现在写代码很少用行内式,所以这个问题还是蛮有趣的,这里指提供解决方法,原理有待我进一步学习,哪些能做形参哪些能做实参,还需要深入了解。

  • 相关阅读:
    数据结构与算法分析-二叉堆
    数据结构与算法分析-AVL树
    数据结构与算法分析-二叉查找树
    优秀程序员应具备的15个特性
    2016年1月22日 收盘后美加的走势
    2016年1月8日 12月非农数据
    Replace into 与Insert into on duplicate key update的区别
    MYSQL视图的学习笔记
    postgresql创建用户
    连接postgresql数据库
  • 原文地址:https://www.cnblogs.com/wuyuchao/p/6279084.html
Copyright © 2011-2022 走看看