Ajax经典dome

Turbo12138

浏览: 41911 次
性别:
来自: 北京

最近访客更多访客>>

Sdky

小高你好

qw232144

宋劲冲

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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>

分享到：