使用 jQuery() 操作 DOM 对象要注意的小问题
2014-01-16 16:11
615 查看
js 里使用 document.getElementById("theid") 来获得 dom 对象,例如:
document.getElementById("table1") 就可以获取到 id 为 table1 的对象,就可以直接
document.getElementById("table1") .rows.length 来获得行数。
使用 $() 可以简写代码,如:
$("#table1")。但这样获取到的不是 dom 对象,通过 alert 打印出来的 是 object 而不是 Html的Table。
所以$("#table1").rows.length 是错误的。
正确的使用应该是:$("#table1")[0].rows.length;
$("#table1") 会获取到所有的 id 为 table1 的对象。
测试:
----------------------------------------------------------------------------------------------------
前端的东西还是弄得比较少,js 代码写得不多,比较生疏。要找个时间补补。
document.getElementById("table1") 就可以获取到 id 为 table1 的对象,就可以直接
document.getElementById("table1") .rows.length 来获得行数。
使用 $() 可以简写代码,如:
$("#table1")。但这样获取到的不是 dom 对象,通过 alert 打印出来的 是 object 而不是 Html的Table。
所以$("#table1").rows.length 是错误的。
正确的使用应该是:$("#table1")[0].rows.length;
$("#table1") 会获取到所有的 id 为 table1 的对象。
测试:
<body> <div id="div1" class="divpos"> <form id="form1"> id: <input type="text" class="id" name="id" /><br /> name: <input type="text" class="name" name="name"/><br /> number:<input type="text" class="number" name="number"/><br /> <input type="button" value="添加" onclick="AddRow()"/> </form> </div> <div id="div2" class="divpos"> <table border="1" id="table1"> <tr><th>id</th><th>name</th><th>number</th></tr> </table> </div> </body>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> function AddRow() { //var count = document.getElementById("table1").rows.length; //获取table的行数 var count = $("#table1")[0].rows.length; //在指定位置插入一行 var row = $("#table1")[0].insertRow(count); //在行的指定位置插入单元格 var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell1.innerText = $(".id")[0].value; cell2.innerText = $(".name")[0].value; cell3.innerText = $(".number")[0].value; $(".id").val(""); $(".name").val(""); $(".number").val(""); } </script>
----------------------------------------------------------------------------------------------------
前端的东西还是弄得比较少,js 代码写得不多,比较生疏。要找个时间补补。
相关文章推荐
- 使用phantomjs操作DOM并对页面进行截图需要注意的几个问题
- Qt 多线程与数据库操作需要注意的几点问题(QSqlDatabase对象只能在当前线程里使用)
- 使用JQuery Deferred对象的then() 解决多个AJAX操作顺序依赖的问题
- jquery学习第十番 选择器的一些要注意的问题以及DOM操作
- 使用phantomjs操作DOM并对页面进行截图需要注意的几个问题
- 使用JQuery Deferred对象的then() 解决多个AJAX操作顺序依赖的问题
- Delphi 接口使用中,对象生命周期管理,如何释放需要注意的问题
- css3动画和jquery动画使用中要注意的问题
- jquery mobile+iscroll使用时关于页面不能操作input标签问题
- 使用jQuery进行dom操作
- JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
- 使用jQuery操作DOM:10条有用的代码
- jQuery-使用jQuery进行Dom操作
- 用replaceWith()对DOM结点操作时应注意的问题
- jQuery:将文本转化成JSON对象应注意的问题
- 服务器端(NodeJS)使用jQuery选择器操作DOM(HTML/XML)
- 使用MVC框架中要注意的问题(四):ActionLink只是执行Get的操作
- jquery中ajax方法使用json需注意的小问题
- swipe.js工具包实现手机web滑动轮播效果存在jQuery对象不能使用问题并解决(个人项目经验)