jQuery 中的 DOM 操作

最新推荐文章于 2024-05-16 04:04:41 发布

aimartt

最新推荐文章于 2024-05-16 04:04:41 发布

阅读量774

点赞数

分类专栏： jQuery 文章标签： jquery div function input html solaris

本文链接：https://blog.csdn.net/aimartt/article/details/7859350

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

jQuery 中的 DOM 操作

参考资料：
《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	    <base href="<%=basePath%>">
	    <title></title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">    
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
	  	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function() {
				//jQuery 中的 DOM 操作
				
				//**************1、创建节点
				//创建<li>元素并设置title属性和文本
				var $newli1 = $("<li></li>").html("HESS").attr("title", "HESS");
				var $newli2 = $("<li title='IrisBus'>IrisBus</li>");
				var $newli3 = $("<li title='Ikarus'></li>").text("Ikarus");
				var $newli4 = $("<li title='Scania'>Scania</li>");
				var $newli5 = $("<li title='Volvo'>Volvo</li>");
				var $newli6 = $("<li title='Škoda'>Škoda</li>");
				var $newli7 = $("<li title='Iveco'>Iveco</li>");
				var $newli8 = $("<li title='Neoplan'>Neoplan</li>");
				var $newli9 = $("<li title='Van Hool'><b>Van Hool</b></li>");
				
				
				//**************2、插入节点
				//append() 方法
				$("ul").append($newli1).append($newli2);	//将 $newli1 和 $newli2 附加到<ul>中
				
				//appendTo() 方法
				$($newli3).appendTo("ul");	//将 $newli3 附加到<ul>中
				
				//prepend() 方法
				$("ul").prepend($newli4);	//将 $newli4 前置到<ul>中
				
				//prependTo() 方法
				$($newli5).prependTo("ul");	//将 $newli5 前置到<ul>中
				
				//after() 方法
				$("ul li:nth-child(2)").after($newli6);	//在<ul>的第二个<li>子元素后插入 $newli6
				
				//insertAfter() 方法
				$($newli7).insertAfter("li[title = Volvo]");	//在指定的<li>后插入 $newli7
				
				//before() 方法
				$("ul li:last-child").before($newli8);	//在<ul>的最后一个<li>子元素前插入 $newli8
				
				//insertBefore() 方法
				$($newli9).insertBefore("ul li:first-child");	//在<ul>的第一个<li>子元素之前插入 $newli9
				
				
				//**************3、删除节点
				//remove() 方法
				var $IrisBus = $("ul li[title = IrisBus]").remove();	//删除指定的<li>元素，并返回其引用
				$("ul").append($IrisBus); //将被删除的<li>元素附加回<ul>，起到移动元素的效果
				$("ul li").remove("li[title = IrisBus]");	//也可以用传参的方式删除元素
				
				//empt() 方法：清空元素的所有后代元素，包括文本元素
				$("ul :eq(2)").empty();	//清空<ul>元素的第三个子元素的文本
				
				
				//**************4、复制节点
				//clone() 方法：V1.5以上默认参数为 false，ture表示复制元素时同时复制绑定的事件
				$("ul li").click(function() {
					//点击<li>元素时，复制元素并在自身之后插入克隆的副本
					$(this).clone(true).insertAfter(this);
				});
				
				
				//**************5、替换节点（被替换元素所绑定的事件会随着被替换而消失）
				//replaceWith() 方法：用参数中的元素替换匹配的元素
				//新创建<p>元素替换原来的<p>元素
				$("p").replaceWith("<p title='你最不喜欢的汽车品牌'>你最不喜欢的汽车品牌是？</p>");
				
				//replaceAll() 方法：创建或匹配的元素替换参数中匹配的元素
				//新创建<p>元素替换原来的<p>元素
				$("<p title='你最不喜欢的汽车品牌'>你最不喜欢的汽车品牌是？</p>").replaceAll("p");
				
				
				//**************6、包裹节点
				//wrap() 方法：对每个匹配的元素单独包裹
				$("ul li").wrap("<div style='color: #b17af5'></div>"); //创建<div>元素并单独包裹每个匹配的<li>元素
				
				//wrapAll() 方法：对全部匹配的元素用一个元素进行包裹
				$("ul li").wrapAll("<div style='color: #b17af5'></div>");	//创建<div>元素并用其包裹全部匹配的<li>元素
				
				//wrapInner() 方法：将匹配元素的全部子元素用参数中的元素进行包裹
				$("p").wrapInner("<div style='color: #b17af5'></div>"); //创建<div>元素并用其包裹<p>元素的全部子元素
				
				
				//**************7、属性操作
				//jQuery中，用attr()方法来获取和设置元素的属性，removeAttr()方法来移除元素的属性
				alert($("p").attr("name", "title").attr("name"));	 //设置<p>元素的name属性值为title，再弹出其name属性值
				$("p").removeAttr("name");	//移除<p>元素的 name 属性
				$("p").attr({title : "新标题", name : "newName"});	//为<p>元素同时设置多个属性
				
				
				//**************8、样式操作
				//addClass() 方法：追加样式（如与既有样式冲突，则覆盖原样式）
				$("#div1").click(function() {
					$(this).addClass("second");	//点击 Id 为 div1 的元素时，为其追加一个样式
				});
				
				//removeClass() 方法：移除样式
				$("#div2").click(function() {
					$(this).removeClass("second");	//点击 Id 为 div2 的元素时，移除 second 样式
				});
				
				//toggleClass() 方法：切换样式
				//hasClass(class) 方法：判断是否含有样式
				$("#div3").click(function() {
					$(this).toggleClass("second");	//点击 Id 为 div3 的元素时，切换 second 样式
					alert($(this).hasClass("second"));	//弹出其是否含有 second 样式
					alert($(this).is(".second"));	//等效上一行代码（上一行代码就是调用了本行代码）	
				});
				
				
				//**************9、设置和获取HTML、文本和值
				//html() 方法：获取第一个匹配元素的HTML内容或设置匹配元素的HTML内容。
				//注：该方法不能用于XML文档，但可以用于XHTML文档。
				alert($("li").html());		//获取第一个 <li> 元素的 HTML 内容
				
				//text() 方法：获取或设置所有匹配元素的文本内容
				alert($("li:first").text());	//获取第一个 <li> 元素的文本内容
				alert($("li").text());	//获取全部 <li> 元素的文本内容
				
				//val() 方法：获取或设置匹配元素的值
				$("#single").val("Solaris");	//设置单选下拉框选中值为"Solaris"的项
				$("#multiple").val("Mercedes-Benz");	//设置多选框选中值为"Mercedes-Benz"的项
				$("#multiple").val(["HESS", "Neoplan"]);	//设置多选框选中值为"HESS"和"Neoplan"的项
				$(":checkbox").val(["复选1"]);	//设置复选框勾选值为"复选1"的项
				$(":checkbox").val(["复选3", "复选4"]);	//设置复选框勾选值为"复选3"和"复选4"的项
				$(":radio").val(["单选2"]);	//选中值为"单选2"的单选框
				
				
				//**************10、遍历节点
				//children() 方法：获取匹配元素的子元素集合（非后代元素）
				alert("<body>的子元素数分别为：");
				$("body").children().each(function() {
					alert($(this)[0].tagName);	//弹出每个<body>的子元素的标签名
				});
				
				//next() 方法：获取匹配元素后面紧邻的同辈元素
				alert($("li:eq(1)").next().text()); //弹出第二个<li>元素后的同辈元素的文本
				
				//prev() 方法：获取匹配元素前面紧邻的同辈元素
				alert($("li:eq(1)").prev().text()); //弹出第二个<li>元素前的同辈元素的文本
				
				//siblings() 方法：获取匹配元素前后的所有同辈元素
				$("li:eq(1)").siblings().each(function() {
					alert($(this).text());	//弹出第二个<li>元素的所有同辈元素的文本
				});
			});
		</script>  	
		
		<!-- CSS -->
		<style type="text/css">
			.first {
				font-size: 45px;
				color: green;
			}
			
			.second {
				font-style: italic;
				color: orange; 
			}
		</style>
  	</head>
  
  	<!-- HTML -->
  	<body>
  		<p title="你最喜欢的汽车品牌">你最喜欢的汽车品牌是？</p>
  		<ul>
  			<li title="Mercedes-Benz">Mercedes-Benz</li>
  			<li title="MAN">MAN</li>
  			<li title="Solaris">Solaris</li>
  		</ul>
  		<div id="div1" class="first">div1</div>
  		<div id="div2" class="second">div2</div>
  		<div id="div3" class="first second">div3</div>
  		
  		<!-- val() 方法示例 HTML -->
  		<select id="single">
  			<option>MAN</option>
  			<option>Solaris</option>
  			<option>HESS</option>
  		</select>
  		<select id="multiple" multiple="multiple" style="height: 120px;">
  			<option selected="selected">Škoda</option>
  			<option>Mercedes-Benz</option>
  			<option>HESS</option>
  			<option>Neoplan</option>
  			<option selected="selected">Ikarus</option>
  		</select><br />
  		<input type="checkbox" value="复选1" />复选1
  		<input type="checkbox" value="复选2" />复选2
  		<input type="checkbox" value="复选3" />复选3
  		<input type="checkbox" value="复选4" />复选4<br />
  		<input type="radio" name="r" value="单选1" />单选1
  		<input type="radio" name="r" value="单选2" />单选2
  		<input type="radio" name="r" value="单选3" />单选3
  	</body>
</html>

aimartt

关注

0
点赞
踩
2

收藏

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

jQuery 中的 DOM 操作参考资料：《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getSe
复制链接

扫一扫

专栏目录