Ajax经典dome (这是牛人写的)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery dome</title> <style>.display-none{display:none;}</style> </head> <body> <ul class=""> <li><a href="#" data="1">shanchu</a><b>xiugai</b></li> <li><a href="#" data="2">bbb</a></li> <li><a href="#" data="3">ccc</a></li> <li><a href="#" data="4">ddd</a></li> <li><a href="#" data="5">eee</a></li> <li><a href="#" data="6">fff</a></li> </ul> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function () { //添加 $("添加按钮").click(function () { //获取urlname //获取url $.ajax({ data:{}, success: function (data) { if(添加成功){ 输出html到列表中 $("列表的父级").append("HTML"); }else{ alert("提交失败"); } } }); }); //显示要修改的数据 $("ul li b").click(function () { //获取该被点击元素ID //声明被点击元素的ID赋值给变量id var id = $(this).attr("ID属性"); //声明被点击元素的urlname var urlname = $(this).closest(".list-style").find("a").text(); //声明被点击元素的url var url = $(this).closest(".list-style").find("a").attr("href"); //将修改前的数据显示在文本框中 $("urlname的文本框").val(urlname); $("url的文本框").val(url); $("id的隐藏文本框").val(id); //显示模拟弹出框 //声明模拟弹出框对象 var box = $("已存在的模拟弹出框"); if(box.has("display-none")) { //显示BOX,删除这个样式 box.removeClass("display-none"); } }); //执行修改 $("执行修改的按钮").click(function () { //获取要提交的数据 $.ajax({ //提交数据到数据库 success:function (data) { if(提交修改成功) { //提示成功 if(!box.has("display-none")) { // box.addClass("display-none"); } } } }) }); //删除 $("执行要删除的按钮").click(function (){ var id = $(this).attr(id); var urlname = $(this).attr(urlname); var url = $(this).attr(url); //提交数据到数据库 //执行删除 $(this).closest(".list-style").remove(); }); //绑定事件 $("ul li a").bind("click", function() { //添加HTML元素 //$("ul").append("<li><a href='#'>fuck</a></li>"); //获取属性 //alert($(this).attr("data")); //声明data id 的变量 var data_id = $(this).attr("data"); //输出点击元素的属性 $("ul").append("<li><a href='#'>"+data_id+"</a></li>"); }); //绑定事件 $("ul li b").bind("click", function () { alert(); }); }); </script> </body> </html>