使用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 相关文章推荐
js 数组的for循环到底应该怎么写?
May 31 Javascript
jquery控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
Nov 13 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
js轮播图之旋转木马效果
Oct 13 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
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
JS 继承实例分析
2008/11/04 Javascript
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
python 排列组合之itertools
2013/03/20 Python
基于python历史天气采集的分析
2019/02/14 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
Python tkinter实现日期选择器
2021/02/22 Python
Wallis官网:英国女装零售商
2020/01/21 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
机电一体化大学生求职信
2013/11/08 职场文书
房屋改造计划书
2014/01/10 职场文书
装修五一活动策划案
2014/01/23 职场文书
妇产医师自荐信
2014/01/29 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
财产保全担保书
2015/01/20 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python