使用js dom和jquery分别实现简单增删改
更新时间:2014年09月11日 15:23:46 投稿:whsnow
今天学了jquery框架的简单使用。于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,两者对比可以看出jquery的强大
软件开发实际就是数据的增删改查,javascript前端开发也不例外。今天学了jquery框架的简单使用。于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquery的强大:
代码如下:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript" src="jq/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function(){ gaoliang(); var $seldel = undefined; var seldel = undefined; //高亮选中 function gaoliang() { $("li").click(function () { $("li").css( "backgroundColor", "red" ); this.style.backgroundColor = "yellow"; $seldel = $(this); seldel = this; }); } //使用jquery添加对象 $("#btnAdd1").click(function () { var input = window.prompt("输入数据"); var $newli = $("<li>" + input + "</li>"); $newli.appendTo("#Ol"); gaoliang(); }); //使用dom元素添加对象 document.getElementById("btnAdd2").onclick = function () { var input = window.prompt("输入数据"); var newli = document.createElement("li"); newli.innerHTML = input; document.getElementById("Ol").appendChild(newli); gaoliang(); } //使用jquery删除对象 $("#btnDel1").click(function () { $seldel.remove(); }); //使用dom元素删除对象 document.getElementById("btnDel2").onclick = function () { seldel.parentNode.removeChild(seldel); } //使用jquery插入数据 $("#btnInsert1").click(function () { var input=window.prompt("输入插入的数据"); var $newli=$("<li>"+ input+"</li>"); $newli.insertBefore($seldel); gaoliang(); }); //使用dom插入数据 document.getElementById("btnInsert2").onclick = function () { var Ol = document.getElementById("Ol"); var input = window.prompt("输入插入的数据"); var newli = document.createElement("li"); newli.innerHTML = input; Ol.insertBefore(newli, seldel); gaoliang(); } //使用jquery编辑选中的数据 $("#btnEdit1").click(function () { var oldtxt = $seldel.html(); var $edit = $("<input id='btnE' type='text' value='" + oldtxt + "'/>"); $seldel.html($edit); $edit.focus(); $edit.blur(function () { var newtxt = $(this).val(); $seldel.html(newtxt); }); }); //使用dom编辑选中的数据 document.getElementById("btnEdit2").onclick = function () { var edittext = document.createElement("input"); edittext.type = "text"; edittext.value = seldel.innerHTML;; seldel.innerHTML = ""; seldel.appendChild(edittext); edittext.focus(); edittext.onblur = function () { seldel.innerHTML = edittext.value; } } } ) </script> </head> <body> <ol id="Ol"> <li id="haha">1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <input id="btnAdd1" type="button" value="jquery添加数据" /> <input id="btnAdd2" type="button" value="dom添加数据" /> <input id="btnDel1" type="button" value="jquery删除数据" /> <input id="btnDel2" type="button" value="dom删除数据" /> <input id="btnInsert1" type="button" value="jquery插入数据" /> <input id="btnInsert2" type="button" value="dom插入数据" /> <input id="btnEdit1" type="button" value="jquery编辑数据" /> <input id="btnEdit2" type="button" value="dom编辑数据" /> </body> </html>
您可能感兴趣的文章:
- 详解JS获取HTML DOM元素的8种方法
- javascript 获取HTML DOM父、子、临近节点
- Js 获取HTML DOM节点元素的方法小结
- 通过JS动态创建一个html DOM元素并显示
- JS添加或删除HTML dom元素的方法实例分析
- JS中使用DOM来控制HTML元素
- JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
- JavaScript操作HTML DOM节点的基础教程
- JavaScript中对DOM节点的访问、创建、修改、删除
- JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
- JavaScript DOM元素常见操作详解【添加、删除、修改等】
- JavaScript 实现HTML DOM增删改查操作的常见方法详解
相关文章
jQuery中的CSS样式属性css()及width()系列大全
本文给大家分享jQuery的CSS样式属性css(),width()系列,offset()与position(),scrollLeft()与scrollTop()的相关知识,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧2021-08-08完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
本文是作者学习jQuery之后练手之作,兼容各大浏览器,非常的精美实用,这里放出来给小伙伴们,有需要的直接拿走,别跟我客气^_^2014-11-11Bookmarklet实现启动jQuery(模仿 云输入法)
最近流行的 sogo云输入法, QQ云输入法,都用到了bookmarklet技术。2010-09-09jQuery.fn和jQuery.prototype区别介绍
jQuery.fn和jQuery.prototype想必大家对它并不陌生吧,那么你们知道它们之间的区别吗?在本文有个不错的示例大家可以参考下2013-10-10jQuery.Validate 使用笔记(jQuery Validation范例 )
学习jQuery Validation,于是手写一公共范例,并收藏以便后用,里面附有测试代码,需要的朋友一起来测试。2010-06-06
最新评论