js——对DOM对象和JQuery对象的简单操作实例

布满荆棘的人生 2022-02-27 12:06 268阅读 0赞

# <table>   <tbody>    <tr>     <td align="left"><font>*前言</font></td>    </tr>   </tbody>  </table> #

最近两天小菜在做一个类似选课的表格，发现自己对js中的dom对象和JQuery对象有些混淆，就譬如说以前习惯性的总喜欢使用$("\#id).val()获取input框的值，我也知道还可以使用document.getElementById(‘test\_input\_id’).value获取其值，但是我却不知道这两的真正意义上的区别，我也发现自己对像input和th、td这样的标签获取值有点混淆。小菜有查一些资料，下面和大家分享一下。

# <table>   <tbody>    <tr>     <td align="left"><font>*HTML代码</font></td>    </tr>   </tbody>  </table> #

# <table>   <tbody>    <tr>     <td align="left"><font>*操作（根据上面的HTML代码进行操作）</font></td>    </tr>   </tbody>  </table> #

1、获取对象

//获取jQuery对象
    var tdJQId=$("#td1");
    var inputJQId=$("#test_input_id");
    
    //获取dom对象
    var tdDomId=document.getElementById('td1');
    var inputDomId=document.getElementById('test_input_id');

2、DOM对象与jQuery对象之间的转换

//dom转jQuery
     var tdDomToJQ=$(tdDomId);
     //jQuery转dom
     var tdJQToDom=$("#td1")[0];

3、通过对象获取input框的值

var inputJQValue=inputJQId.val();
     var inputDomValue=inputDomId.value;

4、通过对象获取td、th标签的值

var tdJQValue=tdJQId.html();
     var tdDomValue=tdDomId.innerHTML;

5、通过dom对象操作class属性的值

//赋值
     tdDomId.setAttribute('class','bg-blue');
     
     //取值
     var tdClass=tdDomId.getAttribute('class');

# <table>   <tbody>    <tr>     <td align="left"><font>*示例测试</font></td>    </tr>   </tbody>  </table> #

function test(obj) {
            //获取对象
            var tdJQId=$("#td1");
            var tdDomId=document.getElementById('td1');
            var inputJQId=$("#test_input_id");
            var inputDomId=document.getElementById('test_input_id');
    
            //对象转换
            var tdDomToJQ=$(tdDomId);
            var tdJQToDom=$("#td1")[0];
    
            //通过对象获取值
            var inputJQValue=inputJQId.val();
            var inputDomValue=inputDomId.value;
            var tdJQValue=tdJQId.html();
            var tdDomValue=tdDomId.innerHTML;
    
           //通过dom对象给td标签的class属性赋值
            tdDomId.setAttribute('class','bg-blue');
           //通过dom对象获取td标签的class属性的值
            var tdClass=tdDomId.getAttribute('class');
    
            console.log("==============================获取对象===================================");
            console.log("获取jQuery对象-----------------------------"+tdJQId);
            console.log("获取Dom对象-----------------------------"+tdDomId);
            console.log("dom转jQuery对象-----------------------------"+tdDomToJQ);
            console.log("JQ转Dom对象-----------------------------"+tdJQToDom);
            console.log("==============================通过对象获取标签的值===========================================");
            console.log("通过jQuery对象获取input标签的值-----------------------------"+inputJQValue);
            console.log("通过Dom对象获取input标签的值-----------------------------"+inputDomValue);
            console.log("通过jQuery对象获取td标签的值-----------------------------"+tdJQValue);
            console.log("通过Dom对象获取td标签的值-----------------------------"+tdDomValue);
            console.log("==============================通过对象操作class属性===========================================");
            console.log("通过Dom对象获取td标签的class属性值-----------------------------"+tdClass);
            console.log("==============================获取当前点击的标签的id===========================================");
            console.log("获取当前点击的标签的id-----------------------------"+obj.id);
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dobTE4MzIyMzk0NzI0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dobTE4MzIyMzk0NzI0_size_16_color_FFFFFF_t_70]: /images/20220227/90695ed7e5bb433f93af466e880ed3d5.png