JQuery学习笔记-JQuery的DOM操作

发布时间：2020-08-01 23:09:07 作者：umgsai
来源：网络阅读：362

DOM（Document Object Model 文档对象模型）：一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组建

DOM操作的分类

-DOM Core : DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用。它的用途并非仅限于处理网页，也可以用来处理任何一种是用标记语言编写出来的文档，如XML

-HTML DOM：使用JavaScript和DOM为HTML文档编写脚本时，有许多专属于HTML-DOM的属性

-CSS-DOM：针对于CSS操作，在JavaScript中，CSS-DOM主要用于获取和设置style对象的各种属性

参考 http://shamrock.blog.51cto.com/2079212/1564560

http://shamrock.blog.51cto.com/2079212/1564688

查找节点

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//测试JQuery操作文本节点 属性节点
	$(function() {
		//操作文本节点，通过JQuery对象的text()方法
		alert($("#bj").text());
		$("#bj").text("北京天安门");
		
		//操作属性节点 通过JQuery对象的attr()方法
		alert($(":text[name='username']").attr("value"));
		$(":text[name='username']").attr("value", "syd");
	});
</script>
</head>
<body>
	<p>你喜欢哪个城市？</p>
    <ul id="city">
        <li id="bj" name="beijing">北京</li>
        <li id="sh">上海</li>
        <li id="sz">深圳</li>
        <li id="sz2">深圳2</li>
    </ul>
    <p>你喜欢哪本书？</p>
    <ul id="book">
        <li id="xyj" name="xyj">西游记</li>
        <li>三国演义</li>
        <li>水浒传</li>
        <li>水浒传2</li>
    </ul>
    <br/>
    gender:
    <input type="radio" name="gender" value="male"/>Male
    <input type="radio" name="gender" value="female"/>Female
    <br/>
    <input type="text" name="username" value="umgsai"/>
</body>
</html>

创建节点并且添加到指定的位置

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//测试JQuery创建节点并且插入节点到指定位置
	$(function() {
		//创建一个p节点,并添加到city下
		//$("<li id='atguigu'>尚硅谷</li>").appendTo("#city");
		//$("#city").append("<li id='atguigu'>【尚硅谷】</li>");
		//alert($("#atguigu").text());
		
		//接到第一个节点的 前面
		$("<li id='atguigu'>尚硅谷1</li>").prependTo($("#city"));
		//$("#city").prepend("<li id='atguigu'>【尚硅谷】</li>");
		
		//插入到指定位置的后面
		//$("<li id='atguigu'>尚硅谷2</li>").insertAfter($("#bj"));
		$("#bj").after($("<li id='atguigu'>尚硅谷2</li>"));
		
		//插入到指定位置的前面
		//$("<li id='atguigu'>尚硅谷3</li>").insertBefore($("#bj"));
		$("#bj").before($("<li id='atguigu'>尚硅谷4</li>"));
	});
</script>
</head>
<body>
	<p>你喜欢哪个城市？</p>
    <ul id="city">
        <li id="bj" name="beijing">北京</li>
        <li id="sh">上海</li>
        <li id="sz">深圳</li>
        <li id="sz2">深圳2</li>
    </ul>
    <p>你喜欢哪本书？</p>
    <ul id="book">
        <li id="xyj" name="xyj">西游记</li>
        <li>三国演义</li>
        <li>水浒传</li>
        <li>水浒传2</li>
    </ul>
    <br/>
    gender:
    <input type="radio" name="gender" value="male"/>Male
    <input type="radio" name="gender" value="female"/>Female
    <br/>
    <input type="text" name="username" value="umgsai"/>
</body>
</html>

克隆节点

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//复制节点
	$(function() {
		$("li").click(function(){
			alert($(this).text());
		});
		//克隆节点，重新设置id属性。true表示克隆节点的同时克隆节点的事件
		$("#bj").attr("id", "bj2").clone(true).insertAfter($("#xyj"));
	})
</script>
</head>
<body>
	<p>你喜欢哪个城市？</p>
	<ul id="city">
		<li id="bj" name="beijing">北京</li>
		<li>上海</li>
		<li>武汉</li>
		<li>深圳</li>
	</ul>
	<p>你喜欢哪本书？</p>
	<ul id="book">
		<li id="xyj" name="xyj">西游记</li>
		<li>三国演义</li>
		<li>水浒传</li>
	</ul>

	<br />
	<form action="#" name="myForm">
		<input type="radio" name="type" value="city" />城市 <input type="radio"
			name="type" value="book" />BOOK <input type="text" name="myName" /> <input
			type="submit" value="submit" id="submit" />
	</form>
</body>
</html>

克隆和替换

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//替换节点
	$(function() {
		//创建一个<li></li>节点，替换#city最后的一个子节点
		$("<li>wuhan</li>").replaceAll($("#city li:last"));
		
		//创建一个<li></li>节点，替换#city的第二个li子节点
		$("#city li:eq(1)").replaceWith($("<li>yichang</li>"));
		
		//replaceAll  replaceWith 替换的时候会移动节点
		
		//互换#xyj和#bj.需要先克隆节点。
		var $bj2 = $("#bj").clone(true);
		var $xyj = $("#xyj").replaceWith($bj2);//返回被替换的节点。
		$("#bj").replaceWith($xyj);
	})
</script>
</head>
<body>
	<p>你喜欢哪个城市？</p>
	<ul id="city">
		<li id="bj" name="beijing">北京</li>
		<li>上海</li>
		<li>武汉</li>
		<li>深圳</li>
	</ul>
	<p>你喜欢哪本书？</p>
	<ul id="book">
		<li id="xyj" name="xyj">西游记</li>
		<li>三国演义</li>
		<li>水浒传</li>
	</ul>

	<br />
	<form action="#" name="myForm">
		<input type="radio" name="type" value="city" />城市 <input type="radio"
			name="type" value="book" />BOOK <input type="text" name="myName" /> <input
			type="submit" value="submit" id="submit" />
	</form>
</body>
</html>

包裹节点

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//测试JQuery的wrap wrapAll wrapInner
	$(function() {
		//包装li本身
		//$("li").wrap("<font color='red'></font>");
		
		//包装所有的li。将所有匹配元素进行单独包裹。
		$("#city li").wrapAll("<font color='red'></font>");
		
		//包装li里面的文字
		$("#language li").wrapInner("<font color='red'></font>");;
	})
</script>
</head>
<body>
	<p>你喜欢哪个城市？</p>
	<ul id="city">
		<li id="bj" name="beijing">北京</li>
		<li>上海</li>
		<li>武汉</li>
		<li>深圳</li>
	</ul>
	<p>你喜欢哪本书？</p>
	<ul id="book">
		<li id="xyj" name="xyj">西游记</li>
		<li>三国演义</li>
		<li>水浒传</li>
	</ul>
	<p>你喜欢哪种语言？</p>
	<ul id="language">
		<li id="c" name="c">c</li>
		<li>Java</li>
		<li>PHP</li>
	</ul>

	<br />
	<form action="#" name="myForm">
		<input type="radio" name="type" value="city" />城市 <input type="radio"
			name="type" value="book" />BOOK <input type="text" name="myName" /> <input
			type="submit" value="submit" id="submit" />
	</form>
</body>
</html>

JQuery学习笔记-JQuery的DOM操作

相关阅读