jQuery元素节点操作
1、 创建节点：
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery元素节点操作</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
// 通过html的字符串的方式添加节点，性能最高
// $('#div1').html('')
$('#div1').html($('#div1').html()+'<a href="#">连接</a>');
})
</script>
</head>
<body>
<div id="div1">
<h1>这是一个h1元素</h1>
</div>
</body>
</html>
显示如下所示：
2、append与appendTo（父元素内的后面放入子元素）
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>41_jQuery元素插入节点操作(append与appenTo的操作)</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
// 新建一个a元素节点，将其赋值给$a，
var $a = $('<a href="#">使用append放入元素</a>');
// 使用append
// 新建一个空的a元素
var $a1 = $('<a>');
$('#div1').append($a);
$('#div1').append($a1)
// 还用appendTo添加
var $a2 = $('<a href="$">使用appendTo添加元素</a>');
$a2.appendTo($('#div1'))
})
</script>
</head>
<body>
<div id="div1">
<h1>这是一个h1元素</h1>
</div>
</body>
</html>
显示效果如下所示：
3、prepend()和prependTo()：在现存元素的内部，从前面插入元素
4、after()和insertAfter()：在现存元素的外部，从后面插入元素
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>after()和insertAfter()：在现存元素的外部，从后面插入元素</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
// after()和insertAfter()：在现存元素的外部，从后面插入元素
var $h2 = $('<h2>这是after处理方式</h2>');
$('#div1').after($h2)
var $h = $('<h2>这是insertAfter处理方式</h2>');
$($h).insertAfter($('#div1'))
})
</script>
</head>
<body>
<div id="div1">
<h1>这是一个h1元素</h1>
</div>
</body>
</html>
显示效果如下所示：
5、before()和insertBefore()：在现存元素的外部，从前面插入元素
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>before()和insertBefore()：在现存元素的外部，从前面插入元素</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
// before()和insertBefore()：在现存元素的外部，从前面插入元素
var $h2 = $('<h2>使用的是before方法</h2>');
$('#div1').before($h2)
var $h = $('<h2>使用insertBefore方法</h2>');
$($h).insertBefore($('#div1'))
})
</script>
</head>
<body>
<div id="div1">
<h1>这是一个h1元素</h1>
</div>
</body>
</html>
显示效果如下所示：
6、对已有的节点进行操作
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery已有元素的操作</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
var flag=true
var $one = $('#one');
var $two = $('#two');
$('#do').click(function () {
if (flag){
$($two).after($one)
flag=false;
}else {
$($two).before($one)
flag=true;
}
})
})
</script>
</head>
<body>
<input type="button" value="变换" id="do">
<h2 id="one">jQuery已有已有元素的操作</h2>
<h2 id="two">滴滴滴</h2>
</body>
</html>
显示效果如下所示：
7、实现Todolist功能
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery实现todolist</title>
<style type="text/css">
.list_con{
width: 600px;
margin: 50px auto 0;
background-color: #b3b3b3;
}
.inputtxt{
width: 550px;
height: 30px;
border: 1px solid #CCCCCC;
padding: 0px;
}
.inputbtn{
width: 40px;
height: 30px;
border: 1px solid #CCCCCC;
padding: 0px;
}
.list{
margin: 0;
padding: 0;
list-style: none;
margin-top: 20px;
}
.list li{
height: 40px;
line-height: 40px;
border-bottom: 1px solid black;
}
.list li span{
float: left;
text-indent: 15px;
}
.list li a{
float: right;
margin-right: 15px;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
var $inputtxt = $('.inputtxt');
var $btn = $('.inputbtn');
var $ul = $('.list');
$btn.click(function () {
// 获取input输入框的内容
var $val = $inputtxt.val();
// 如果文本输入框为空。则弹出提示
if ($val==''){
alert("请输入内容")
return;
}
// 拼接li标签内容
var $li=$('<li><span>'+$val+'</span><a href="javascript:;" class="up">↑</a><a href="javascript:;" class="down">↓</a><a href="javascript:;" class="del">删除</a></li>')
/*
// 为刚添加的节点添加删除事件
var $a = $li.find('.del'); // .find()：选择div内的class等于myClass的元素
$a.click(function () {
$(this).parent().remove();
})
* */
$ul.append($li)
// 清空输入框中的内容
$inputtxt.val('');
})
// 使用事件委托给ul中的a标签添加事件
$ul.delegate('a','click',function () {
var $className = $(this).prop('class'); // 获取对应的class名称
// 如果$className为‘del’，则删除父标签（li标签）
if($className=='del'){
$(this).parent().remove();
}
//条目上移操作
if ($className=='up'){
if ($(this).parent().prevAll().length==0){
alert("已经到达顶端");
return
}
// 其父标签li
var parent_li=$(this).parent(); // 得到该标签的父标签
// parent_li前一个对应的标签，然后在交换位置
parent_li.prev().before(parent_li)
}
// 条目下移操作
if ($className=='down'){
if ($(this).parent().nextAll().length==0){
alert("已经到达底端");
return
}
// 其父标签li
var parent_li=$(this).parent(); // 得到该标签的父标签
// parent_li下一个对应的标签，然后在交换位置
parent_li.next().after(parent_li)
}
})
})
</script>
</head>
<body>
<div class="list_con">
<h2>To do list</h2>
<input type="text" name="" id="text1" class="inputtxt">
<input type="button" name="" value="添加" id="btn1" class="inputbtn">
<ul class="list" id="list">
<li><span>学习html</span><a href="javascript:;" class="up">↑</a><a href="javascript:;" class="down">↓</a><a href="javascript:;" class="del">删除</a></li>
<li><span>python</span><a href="javascript:;" class="up">↑</a><a href="javascript:;" class="down">↓</a><a href="javascript:;" class="del">删除</a></li>
<li><span>java</span><a href="javascript:;" class="up">↑</a><a href="javascript:;" class="down">↓</a><a href="javascript:;" class="del">删除</a></li>
</ul>
</div>
</body>
</html>
显示效果如下所示：
448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
