*前言

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

*HTML代码

                     <table class="table">
                       <thead>
                         <tr>
                             <th id="th1">周三（2018/01/31）</th>
                             <th id="th2">周四（2018/02/01）</th>
                             <th id="th3">周五（2018/02/02）</th>
                             <th id="th4">周六（2018/02/03）</th>
                             <th id="th5">周日（2018/02/04）</th>
                             <th id="th6">周一（2018/02/05）</th>
                             <th id="th7">周二（2018/02/06）</th>
                         </tr>
                       </thead>
                       <tbody>
                            <tr>
                                <td id="td1" class="" "selectCC(this)">9:00-10:00</td>
                                <td id="td2" class="" "selectCC(this)">10:00-11:00</td>
                                <td id="td3" class="" "selectCC(this)">11:00-12:00</td>
                                <td id="td4" class="" "selectCC(this)">13:00-14:00</td>
                                <td id="td5" class="" "selectCC(this)">14:00-15:00</td>
                                <td id="td6" class="" "selectCC(this)">15:00-16:00</td>
                                <td id="td7" class="" "selectCC(this)">16:00-17:00</td>
                            </tr>
                       </tbody>
                     </table>
                  
                   <div class="col-md-3" style="float: right">
                        <a class="yuding-btn" id="test_a_id" "test(this)">测试按钮</a><br>
                       <input  id="test_input_id" value="123456789" style="width: 250px;height: 50px;">
                  </div>
              

*操作（根据上面的HTML代码进行操作）

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');

  

*示例测试

     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);
    }