jQuery操作DOM

最新推荐文章于 2024-05-18 16:42:38 发布

年少有为✘

最新推荐文章于 2024-05-18 16:42:38 发布

阅读量91

点赞数

文章标签： java jquery

本文链接：https://blog.csdn.net/qq_46454139/article/details/116955187

版权

文章目录

一、jQuery操作DOM

一、jQuery操作DOM

jQuery添加节点

jQuery可以像DOM那样直接在JS里直接创建HTML元素、添加节点等

var $jq = $('<h2>hello world</h2>');//jquery创建一个标签
$('body').append($jq);//jquery添加一个节点
$('body').append('<p>我是p标签</p>');//直接传入HTML代码
$('body').append($h1,$h2);//一次性添加多个标签

append()	向元素内部末尾添加内容	$(“ul”).append("<li>new</li>")
prepend()	向元素内部开头添加内容	$(“ul”).prepend("<li>new</li>")
after()	在指定元素之后添加内容	$(“ul li”).after("<li>new</li>")
before()	在指定元素之前添加内容	$(“ul li”).before("<li>new</li>")

所列方法的返回值均为原jQuery对象
如$(“ul”).append("<li>new</li>")
的返回值为$(“ul”)

appendTo()	将内容添加到元素内部末尾	$("<li>new</li>").appendTo(“ul”)
prependTo()	向元素内部开头添加内容	$(“ul”).prepend("<li>new</li>")
after()	将内容添加到元素内部开头	$("<li>new</li>").prependTo(“ul”)
insertBefore()	将内容添加到指定元素之前	$("<li>new</li>").insertBefore(“ul li”)

jQuery删除节点

<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>测试</title>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<body>
	<div id="content">
		<ul id="list">
			<li id="li1">1</li>
			<li id="li2">2</li>
			<li id="li3">3</li>
		</ul>
	</div>
	<script type="text/javascript">
		$('#list').remove(); //删除ul标签和其子元素
	</script>
</body>
</html>

jQuery获取节点

源码：
在这里插入图片描述

parent()	直接父元素	$("#item-2").parent() 返回：ul元素
parents()	所有祖先元素	$("#item-2").parents() 返回：ul元素、#container元素、body元素、html元素
children()	所有直接子元素	$KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲container").chi\dots$ ("#list").children() 返回：所有li元素
find()	所有指定后代元素	$("#container").find(“li”) 返回：所有li元素$("#container").find("*") 返回：所有li元素、ul元素

siblings()	所有兄弟元素	$("#item-3").siblings()	返回：li1、li2、li4、li5
next()	下一个兄弟元素	$("#item-3").next()	返回：li4
nextAll()	之后的所有兄弟元素	$("#item-3").nextAll()	返回：li4、li5
nextUntil()	给定范围内的兄弟元素	$("#item-3").nextUntil("#item-5")	返回：li4
prev()	上一个兄弟元素	$("#item-3").prev()	返回：li2
prevAll()	之前的所有兄弟元素	$("#item-3").prevAll()	返回：li1、li2
prevUntil()	给定范围内的兄弟元素	$("#item-3").prevUntil("#item-1")	返回：li2

年少有为✘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery操作DOM

文章目录一、jQuery操作DOMjQuery添加节点jQuery删除节点jQuery获取节点一、jQuery操作DOMjQuery添加节点jQuery可以像DOM那样直接在JS里直接创建HTML元素、添加节点等var $jq = $('<h2>hello world</h2>');//jquery创建一个标签$('body').append($jq);//jquery添加一个节点$('body').append('<p>我是p标签</p>');
复制链接

扫一扫