您的位置：首页 > Web前端 > JQuery
11.21课堂作业-实现jQuery,DOM的增删查改

2017-11-21 22:44 369 查看
<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="jquery_.js"></script>
<script type="text/javascript">
$(function(){
attract();
var $seldel = undefined;
var seldel = undefined;
function attract(){
//获取到li，给他赋一个点击的事件
$('li').click(function(){
$('li').css('background','pink');
this.style.backgroundColor = "green";
$seldel = $(this);
seldel = this;
});
}
//jq添加数据
$('#btnAdd1').click(function(){
//弹窗
var input = window.prompt('输入数据');
var $newli = $('<li>'+input+'</li>');
$newli.appendTo('#ol');
attract();
});
//DOM添加数据
document.getElementById('btnAdd2').onclick = function(){
var input = window.prompt('输入数据');
//通过createElement创建一个空li；
var newli = document.createElement('li');
newli.innerHTML = input;
//通过appendChild把newli赋给ol
document.getElementById('ol').appendChild(newli);
attract();
}
//jq删除数据
$('#btnDel1').click(function(){
$seldel.remove();
});
//DOM删除数据
document.getElementById('btnDel2').onclick = function(){
//父节点，删除
seldel.parentNode.removeChild(seldel);
}
//jq插入
$('#btnInsert1').click(function(){
var input = window.prompt('输入数据');
var $newli = $('<li>'+input+'</li>');
//用insertBefore在选中seldel,前插入newli
$newli.insertBefore($seldel);
attract();
});
//DOM插入
document.getElementById('btnInsert2').onclick = function(){
var input = window.prompt('输入数据');
var newli = document.createElement('li');
newli.innerHTML=input;
var ol = document.getElementById('ol');
//新的，旧的
ol.insertBefore(newli,seldel);
attract();
}
//jq编辑
$('#btnEdit1').click(function(){
//获取选中的东西
var oldText = $seldel.html();

var $edit = $("<input id='btnE' type='text' value='"+oldText+"' />")
//把老的seldel换掉，把$edit设进去
$seldel.html($edit);
//聚焦 事件
$edit.focus();
//把新的值设进去
$edit.blur(function(){
//获取新的值，用户输入的值
var newTxt = $(this).val();
//在设置到$seldel里面去
$seldel.html(newTxt);
});
});
//DOM编辑
document.getElementById('btnEdit2').onclick = function(){
var oldTxt = seldel.firstChild.nodeValue;
var input = '<input id="num" text="text" value="'+oldTxt+'">';
input.innerHTML = oldTxt;
seldel.innerHTML=input;
seldel.firstChild.focus();
seldel.firstChild.onblur = function(){
var number = document.getElementById('num').value;
seldel.innerHTML = number;
}

}

});

</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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航