<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<ol id="ol">
<li >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>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(function(){
var $other=undefined;
var another=undefined;
attract();
function attract(){
$('li').click(function(){
$('li').css('background','pink');
$(this).css('background','red');
//this.style.background="red";
$other=$(this);
another=this;
});
}
$('#btnAdd1').click(function(){
var input=window.prompt('添加数据');
$nweli=$('<li>'+input+'</li>');
$nweli.appendTo('#ol');
attract();
})
$('#btnDel1').click(function(){
$other.remove();
})
$('#btnInsert1').click(function(){
var input=window.prompt('插入数据');
var $newli=$('<li>'+input+'</li>');
$newli.insertBefore($other);
attract();
})
$('#btnEdit1').click(function(){
var oldvalue=$other.html();
var $str=$('<input type="text" value="'+oldvalue+'" />');
$other.html($str);
$str.focus();
$str.blur(function(){
var newvalue=$str.val();
$other.html(newvalue);
})
attract();
})
document.getElementById("btnAdd2").onclick=function (){
var input=window.prompt('输入数据');
var newli=document.createElement('li');
newli.innerHTML=input;
document.getElementById("ol").append(newli);
attract();
}
document.getElementById("btnDel2").onclick=function (){
var str=another.parentNode;
str.removeChild(another);
}
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,another);
attract();
}
document.getElementById("btnEdit2").onclick=function (){
var oldvalue=another.innerHTML;
var str=document.createElement('input');
str='<input id="dl" type="text" value="'+oldvalue+'" />';
another.innerHTML=str;
document.getElementById("dl").focus();
document.getElementById("dl").onblur=function(){
var newvalue=document.getElementById("dl").value;
another.innerHTML=newvalue;}
}
});
</script>
</html>
11月21日心得及笔记
最新推荐文章于 2024-04-01 09:00:00 发布