使用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 相关文章推荐
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
js图片预加载示例
Apr 30 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
js实现div在页面拖动效果
May 04 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
vue组件之间的数据传递方法详解
Apr 19 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 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
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
传递参数的标准方法(jQuery.ajax)
2008/11/19 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
Python getopt模块处理命令行选项实例
2014/05/13 Python
python连接mysql实例分享
2016/10/09 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
python中re模块知识点总结
2021/01/17 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
华为慧通面试题
2012/09/11 面试题
求职推荐信
2013/10/28 职场文书
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
幼儿园春游活动方案
2014/01/19 职场文书
敬老月活动总结
2014/08/28 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python