手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >Jquery动态添加及删除页面节点元素示例代码
Jquery动态添加及删除页面节点元素示例代码
摘要:通常我们会遇到选中某个条件,然后添加,累计多个后,再进行执行。废话不多说,直接上代码!复制代码代码如下:Jquery动态添加及删除页面节点....

通常我们会遇到选中某个条件,然后添加,累计多个后,再进行执行。

废话不多说,直接上代码!

复制代码 代码如下:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Jquery动态添加及删除页面节点</title>

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><>

<style>

.container{ width:1000px; margin:0 auto;}

.top{ height:25px; line-height:25px;}

.top select{ width:80px; height:22px; line-height:22px;}

.top input{ width:56px; height:22px;}

.add{ line-height:30px;}

li{ list-style:none;}

span{cursor:pointer;}

</style>

<script>

$(function(){//页面加载完毕后执行

$("input").click(function(){//添加操作

var getval=$("select").val();//获取当前选中的select值

$("p").before('<li>'+getval+'<span>X</span></li>');//在p标签前加入所要生成的代码

});

});

$("span").live("click",function(){//通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)

$(this).parent().remove();//移除当前点击元素的父元素

});

</script>

</head>

<body>

<div>

<div>

<select>

<option>我是一号</option>

<option>我是二号</option>

<option>我是三号</option>

<option>我是四号</option>

<option>我是五号</option>

</select>

<input value="添 加" type="button"/>

</div>

<div><p></p></div>

</div>

</body>

</html>

【Jquery动态添加及删除页面节点元素示例代码】相关文章:

JavaScript实现添加、查找、删除元素

JS动态增删表格行的方法

jQuery实现给页面换肤的方法

在页面中输出当前客户端时间javascript实例代码

必须点击广告才能进入的代码

javascript删除元素节点removeChild()用法实例

JQuery实现动态添加删除评论的方法

jQuery插件支持同一页面被多次调用

jQuery实现自动滚动到页面顶端的方法

js动态创建及移除div的方法

精品推荐
分类导航