JQuery常见节点操作实例分析
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要介绍了JQuery常见节点操作,结合实例形式分析了jQuery针对元素节点的添加、删除常见操作函数使用技巧与相关注意事项,需要的朋友可以参考下
本文实例讲述了JQuery常见节点操作。分享给大家供大家参考，具体如下：
插入节点
append()和appengTo()：在现存元素内部，从后面插入
prepend()和prependTo()：在现存元素外部，从前面插入
after()和insertAfter()：在现存元素外部，从后面插入
before()和insertBefore():在现存元素外部，从前面插入
新建节点的插入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
// $('#div1').html('')这种用字符串的方式塞进去的性能是最高的，
// 但是有点时候不方便用，因为这样会重写div1里面的元素
$a=$('<a href="#" rel="external nofollow" >链接</a>>');
$('#div1').append($a);/*在最后加入字符串，append从现成的元素的后面插入元素*/
$a.appendTo($('#div1'));/*和append效果相同*/
$p=$('<p>这是一个p标签</p>');
$("#div1").prepend($p);
$h2=$('<h2>这是一个h2</h2>');
$('#div1').after($h2);
$h3=$('<h3>这是一个h3</h3>');
$('#div1').before($h3);
})
</script>
</head>
<body>
<div id="div1">
<h1> 这是一个h1元素</h1>
</div>
</body>
</html>
已有节点的插入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#p1').insertBefore($("#title01"));/*换两个节点顺序*/
})
</script>
</head>
<body>
<h1 id="title01">这是一个h1元素</h1>
<p id="p1">这是一个p元素</p>
<span id="span01">这是一个span元素</span>
</body>
</html>
删除节点
remove()：删除节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#p1').insertBefore($("#title01"));/*换两个节点顺序*/
$('#p1').remove();
})
</script>
</head>
<body>
<h1 id="title01">这是一个h1元素</h1>
<p id="p1">这是一个p元素</p>
<span id="span01">这是一个span元素</span>
</body>
</html>
关于a标签的问题
<a href="javascript:alert('ok?');" rel="external nofollow" >链接</a>
如果这样写就是插入JavaScript语句，弹出ok，如果是写#就是连接到页面顶部。
todolist网页
实现一个用户自己列计划的网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style type="text/css">
.list_con {
width: 400px;
margin: 50px auto 0;
}
.inputtxt {
width: 350px;
height: 30px;
border: 1px solid #ccc;
padding: 0px;
text-indent: 10px;
}
.inputbtn {
width: 40px;
height: 32px;
padding: 0px;
border: 1px solid #ccc;
}
.list {
margin: 0;
padding: 0;
list-style: none;
margin-top: 20px;
}
.list li {
height: 30px;
line-height: 30px;
border-bottom: 1px solid #ccc;
}
.list li span {
float: left;
}
.list li a {
float: right;
text-decoration: none;
margin: 0 10px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var $inputtxt = $('#txt1');
var $btn = $('#btn1');
var $ul = $('#list');
$btn.click(function () {
var $val = $inputtxt.val();
/*获取input框的值*/
if ($val == "") {
alert("请输入内容");
return;
}
else {
alert(1);
var $li=$('<li><span>'+$val+'</span><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="up"> ↑ </a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="down"> ↓ </a><a\n' +
' href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">删除</a></li>');
$li.appendTo($ul);
$inputtxt.val("");/*获取到值之后，清空*/
var $a=$li.find('.del');
$a.click(function () {
$(this).parent().remove();
});
$li.find('.up').click(function () {
$(this).parent().insertBefore($(this).parent().prev());
});
$li.find('.down').click(function () {
$(this).parent().insertAfter($(this).parent().next());
});
}
});
$del=$(".del");
$del.click(function () {
$(this).parent().remove();
});
$('.up').click(function () {
$(this).parent().insertBefore($(this).parent().prev());
});
$('.down').click(function () {
$(this).parent().insertAfter($(this).parent().next());
});
})
</script>
</head>
<body>
<div class="list_con">
<h2>To do list</h2>
<input type="text" name="" id="txt1" class="inputtxt">
<input type="button" name="" value="增加" id="btn1" class="inputbtn">
<ul id="list" class="list">
<li><span>学习html</span><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="up"> ↑ </a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="down"> ↓ </a><a
href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">删除</a></li>
<li><span>学习css</span><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="up"> ↑ </a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="down"> ↓ </a><a
href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">删除</a></li>
<li><span>学习javascript</span><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="up"> ↑ </a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="down">
↓ </a><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="del">删除</a></li>
</ul>
</div>
</body>
</html>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具： 测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。