使用js dom和jquery分别实现简单增删改


Posted in Javascript onSeptember 11, 2014

软件开发实际就是数据的增删改查,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>
Javascript 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
详解Node全局变量global模块
Sep 28 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
layui 上传图片 返回图片地址的方法
Sep 26 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
sogou地图API用法实例教程
Sep 11 #Javascript
当前流行的JavaScript代码风格指南
Sep 10 #Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 #Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 #Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 #Javascript
javascipt:filter过滤介绍及使用
Sep 10 #Javascript
用javascript将数据导入Excel示例代码
Sep 10 #Javascript
You might like
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
Javascript 刷新全集常用代码
2009/11/22 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
深入了解javascript 数组的sort方法
2018/06/01 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
python k-近邻算法实例分享
2014/06/11 Python
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
Python实现微信好友的数据分析
2019/12/16 Python
利用python画出AUC曲线的实例
2020/02/28 Python
python numpy库np.percentile用法说明
2020/06/08 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
金融专业个人求职信
2013/09/22 职场文书
电子商务专业个人的自我评价
2013/11/19 职场文书
留学生求职信
2014/06/03 职场文书
校外活动方案
2014/08/28 职场文书
会计工作总结范文2014
2014/12/23 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python
Java Spring读取和存储详细操作
2022/08/05 Java/Android