使用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 相关文章推荐
不错的asp中显示新闻的功能
Oct 13 Javascript
jQuery插件的写法分享
Jun 12 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
php 修改密码实现代码
May 24 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 Javascript
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中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
php制作简单模版引擎
2016/04/07 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
javascript实现画板功能
2020/04/12 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
Python的pycurl包用法简介
2015/11/13 Python
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
Python实现PS图像调整之对比度调整功能示例
2018/01/26 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
求职者应聘的自我评价
2013/10/16 职场文书
外贸实习生自荐信范文
2013/11/24 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL