Jquery操作DOM基本知识

最新推荐文章于 2024-05-16 04:04:41 发布
最新推荐文章于 2024-05-16 04:04:41 发布
阅读量457 收藏
点赞数
分类专栏： JQuery DOM javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shehun11/article/details/45022449
版权
javascript 同时被 3 个专栏收录
49 篇文章 0 订阅
订阅专栏
JQuery
14 篇文章 0 订阅
订阅专栏
DOM
1 篇文章 0 订阅
订阅专栏

jQuery 中的 DOM 操作

1.查找节点

1.1查找元素节点

var $usernameElement = $("#username");
alert("jquery "+$usernameElement.val());

1.2查找属性节点

jQuery查找到需要的元素节点后，使用attr()方法来获取它的各种属性的值。
$usernameElement.attr("value");

1.3查找文本节点

jQuery查找到需要的元素节点后，使用text()方法来获取它的文本内容。
$usernameElement.text();

2.创建节点

2.1创建元素节点

使用 jQuery 的工厂函数 $(HTML) 。该工厂函数会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回。
当创建单个元素时, 需注意闭合标签。
var $option = $("<option></option>");

2.2创建文本节点

创建元素节点后，使用text()方法来设置其节点的文本内容。
$option.text("北京");
创建元素节点时，直接将其节点的文本内容插入其中。
var $option = $("<option>北京</option>");

2.3创建属性节点

创建元素节点后，使用attr()方法来设置其节点的属性。
$option.attr("value","北京");
创建元素节点时，直接将其节点的属性插入其中。
var $option = $("<option value="北京">北京</option>");

3.插入节点

3.1内部插入节点

append(content) :向每个匹配的元素的内部的结尾处追加内容
appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
prepend(content):向每个匹配的元素的内部的开始处插入内容
prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处

3.2外部插入节点

after(content) :在每个匹配的元素之后插入内容
before(content):在每个匹配的元素之前插入内容
insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面

4.删除节点

remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后,该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用。
empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点)。

5.复制节点

clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
clone(true): 复制元素的同时也复制元素中的的事件 
 
<span style="white-space:pre">	</span><button>保存</button>
<span style="white-space:pre">	</span><p>段落</p>

 <span style="white-space:pre">	</span>$("button").click(function(){
   <span style="white-space:pre">		</span>alert("点击按钮");
 <span style="white-space:pre">	</span>});
  
  <span style="white-space:pre">	</span>//克隆节点，不克隆事件
  <span style="white-space:pre">	</span>$("button").clone().appendTo("p");
  
 <span style="white-space:pre">	</span> //克隆节点，克隆事件
  <span style="white-space:pre">	</span>$("button").clone(true).appendTo("p");

6.替换节点

replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素
replaceAll(): 颠倒了的 replaceWith() 方法.
注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失
 
<span style="white-space:pre">	</span>//<p>段落</p>
<span style="white-space:pre">	</span>//方式一
<span style="white-space:pre">	</span>$("p").replaceWith("<button>登陆</button>");
<span style="white-space:pre">	</span>//方式二
<span style="white-space:pre">	</span>$("<button>登陆</button>").replaceAll("p");

7.属性操作

attr(): 获取属性和设置属性。
当为该方法传递一个参数时, 即为某元素的获取指定属性。
当为该方法传递两个参数时, 即为某元素设置指定属性的值。
jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等。
removeAttr(“属性名”): 删除指定元素的指定属性

8.样式操作

获取 class 和设置 class ：class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成。
追加样式：addClass()
移除样式：removeClass() --- 从匹配的元素中删除全部或指定的 class
切换样式：toggleClass()  --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它。
判断是否含有某个样式：hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false。

9.遍历节点

取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.
取得匹配元素后面紧邻的同辈元素下一个元素:next();
取得匹配元素前面紧邻的同辈元素上一个元素:prev()
取得匹配元素前后所有的同辈元素: siblings()
在jQuery中还有很多遍历节点的方法，具体参看API帮助文档。

10.包裹节点

wrap() 
<span style="white-space:pre">	</span><strong title="jQuery">jQuery</strong>
<span style="white-space:pre">	</span><strong title="jQuery">jQuery</strong>
<span style="white-space:pre">	</span>//jQuery代码如下：
<span style="white-space:pre">	</span>$("strong").wrap("<b></b>");
	
<span style="white-space:pre">	</span>//得到的结果如下
<span style="white-space:pre">	</span><b><strong title="jQuery">jQuery</strong></b>
<span style="white-space:pre">	</span><b><strong title="jQuery">jQuery</strong></b>


<strong><span style="white-space:pre">	</span><span style="font-size:14px;">wrapAll()</span></strong>
<span style="white-space:pre">	</span><strong title="jQuery">jQuery</strong>
<span style="white-space:pre">	</span><strong title="jQuery">jQuery</strong>
<span style="white-space:pre">	</span>//jQuery代码如下：
<span style="white-space:pre">	</span>$("strong").wrapAll("<b></b>");
	
<span style="white-space:pre">	</span>//得到的结果如下
<span style="white-space:pre">	</span><b>
<span style="white-space:pre">	</span><strong title="jQuery">jQuery</strong>
<span style="white-space:pre">	</span><strong title="jQuery">jQuery</strong>
<span style="white-space:pre">	</span></b>

<span style="white-space:pre">	</span><strong><span style="font-size:14px;">wrapInner()</span></strong>

<span style="white-space:pre">	</span><strong title="jQuery">jQuery</strong>
<span style="white-space:pre">	</span>//jQuery代码如下：
<span style="white-space:pre">	</span>$("strong"). wrapInner("<b></b>");
	
<span style="white-space:pre">	</span>//得到的结果如下
<span style="white-space:pre">	</span><strong title="jQuery"><b>jQuery</b></strong>

操作DOM例子

1.查找节点

<span style="white-space:pre">	</span><body>
		 <ul>
		 	 <li id="hn">海南</li>
			 <li id="tj" name="tianjin">天津</li>
		 </ul>
	</body>
   <span style="white-space:pre">	</span><script type="text/javascript">
			/**
			 * 1: 元素节点 //选择器
			 * 2： 属性节点
			 * 3：文本节点.
			 */
			 //属性节点的查找
			 //alert($("#tj").attr("name"));<span style="white-space:pre">	查找id为tj的属性为name的值</span>
			// alert($("#tj").text());<span style="white-space:pre">		查找id为tj的文本值，也就是那些div、area中等后面的值</span>
			//$("#tj").html("cstd");<span style="white-space:pre">		将原来的文本值，修改为设置的值</span>
			//修改属性节点:
			//$("#tj").attr("name","nanjin")
			//alert($("#tj").attr("name"));
    <span style="white-space:pre">	</span></script>
执行修改文本值之前 

执行修改文本值之后$("#tj").html("cstd");


修改节点的属性值：第一个参数为节点属性，第二个参数为value值 
$("#tj").attr("name","nanjin")
<img src="https://img-blog.csdn.net/20150413105759778?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc2hlaHVuMTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
 

2.创建节点

<span style="white-space:pre">	</span><body>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
		 </ul>
	</body>
	<script type="text/javascript">
			//通过jquery dom 创建<li id="tj" name="tianjin">天津</li>		
			
			var $li=$("<li></li>"); //元素节点 创建
				$li.attr("id","tj"); //属性节点  创建
				$li.attr("name","tianjin"); //文本节点创建
				$li.text("天津");
			//往city 节点的末尾添加元素
			$("#city").append($li);
	</script>
创建节点前
创建节点后

3.内部插入节点

<span style="white-space:pre">	</span><body>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京
			 </li>
			 <li id="cq" name="chongqing">
			 	重庆
			 </li>
		 </ul>
		  <ul id="love">
		 	 <li id="fk" name="fankong">
				反恐
				</li>
			 <li id="xj" name="xingji">
				星际
			 </li>
		 </ul>
		<div id="foo1">
			Hello1
		</div> 
	</body>
	<script type="text/javascript">	
			/**
			 * 四种添加方式：向每个匹配的元素的内部的结尾处追加内容
			 */
			var $li=$("<li id='zhumadian'>驻马店</li>")
			//append  向每个匹配的元素的内部的结尾处追加内容
	//		$("#xj").append($li);
	
			//appendTo 将每个匹配的元素追加到指定的元素中的内部结尾处
	//		 $("#xj").appendTo($("#cq"))
	
	
			//向每个匹配的元素的内部的开始处插入内容 prepend
	//			$("#foo1").prepend($li);
			//将每个匹配的元素插入到指定的元素内部的开始处
	//		$("#foo1").prependTo($("#xj"));
	</script>

append  向每个匹配的元素的内部的结尾处追加内容
追加前

追加后

appendTo 将每个匹配的元素追加到指定的元素中的内部结尾处
追加前

追加后

向每个匹配的元素的内部的开始处插入内容 prepend
插入前

插入后

将每个匹配的元素插入到指定的元素内部的开始处prependTo
插入前

插入后

4.外部插入节点

<span style="white-space:pre">	</span><body>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ul>
		 <p  id="p3">
			I would like to say: p3
		 </p>
		 <p  id="p2">I would like to say: p2</p>
		 <p  id="p1">I would like to say: p1</p>
	</body>
	<script type="text/javascript">
			//外部插入节点
			//after(content) :在每个匹配的元素之后插入内容
			   var  $div=$("<div>屌丝</div>")
		    $("#p2").after($div);
			//before(content):在每个匹配的元素之前插入内容\
			 //var  $div=$("<div>屌丝</div>")
		     //$("#p2").before($div);
			//insertAfter(content):把所有匹配的元素插入到另一个指定的元素元素集合的后面
			
			// $("p").insertAfter($("#tj"));
			
			//insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
			// $("p").insertBefore($("#tj"));
	</script>
after(content) :在每个匹配的元素之后插入内容
插入前

插入后

before(content):在每个匹配的元素之前插入内容

insertAfter(content):把所有匹配的元素插入到另一个指定的元素元素集合的后面

insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面

5.删除节点

<span style="white-space:pre">	</span><body>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京<p>海淀区</p></li>
			 <li id="tj" name="tianjin">天津<p>河西区</p></li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ul>
		<p class="hello">Hello</p> how are <p>you?</p> 
	</body>
	<script type="text/javascript">
				
				//删除节点..
				//$("#cq").remove();
				
				//清空节点..
			//	$("#city").empty();
	</script>

删除节点remove()
删除前

删除后

清空节点



6.复制节点

<span style="white-space:pre">	</span><body>
		<button>保存</button><br>	
	    <p>段落</p>
	</body>
    <span style="white-space:pre">	</span><script type="text/javascript">
		//button增加事件
		/* $("button").click(function(){
			 var $clonep=$("p").clone();
			 $("body").append($clonep);
		}); */
		
		//利用元素选择器进行选择
		$("button").bind("click",function(){
			 var clonep=$("p").clone();
			 $("body").append(clonep);
		});
    <span style="white-space:pre">	</span></script>
复制节点前

复制节点后

7.替换节点

<span style="white-space:pre">	</span><html>
	    <p>段落</p>
		<p>段落</p>
		<p>段落</p>
		<button>保存</button>
	</html>
	<script type="text/javascript">
			// 将所有匹配的元素都替换成指定的 HTML 或 DOM 元素
			var $p=$("<div>itcast</div>")
			//$("button").replaceWith($p);
			//把button 替换 获取到p 元素
			$("button").replaceAll($("p"))
	</script>
把button 替换 获取到p 元素
替换前
替换后

将所有匹配的元素都替换成指定的 HTML 或 DOM 元素


说：/~不了
关注
专栏目录
jQuery知识总结之DOM操作
weixin_34212762的博客
03-22 135
本篇文章主要总结一下jQuery中DOM节点的创建、插入、删除与替换以及jQuery中丰富的遍历节点的方法。jQueryDOM操作之节点创建与属性的处理JavaScript原生接口创建节点，在处理上是非常复杂与繁琐的，jQuery简化了这个过程。创建元素节点：常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理，$("html结构")$("<div...
jQuery基础之Dom篇总结
程什么序员来着
01-08 137
dom小知识点很多，总是过段时间又忘了，这次做个总结吧。 文章目录Dom节点的创建Dom节点的插入内部插入外部插入Dom节点的删除Dom节点的复制与替换遍历 Dom节点的创建 jQuery节点创建常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来。 创建元素节点： $("&lt;div&gt;&lt;/div&gt;") 创建文本节点： $("&lt;div&gt;我是文本节点&l...
简单总结jQuery API中的知识点（上篇）之DOM操作
前端小白
09-06 1644
最近为了学习前端其他新的知识，特意重新复习了一遍jQuery，算是查漏补缺，把之前学习时忽略的知识点补回来顺便也把一些知识点做了总结方便自己理解。 JQ的DOM操作分类 1.遍历 （1）遍历的接口：父级，后代，同胞兄弟（相邻元素），过滤 （2）遍历的结构设计  dir方法   each迭代器 1.1父级遍历（即通过jQuery可以在DOM树中向上遍历） （1）方法：
使用jQuery操作DOM重点总结
妖精小狗的博客
09-14 8048
DOM操作分为三类： DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById() HTML-DOM：用于处理HTML文档，如document.forms CSS-DOM：用于操作CSS，如element.style.color="green" 注：JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持   jQuery对...
三、jQuery 中的 DOM 操作（超详细）
2301_76232361的博客
05-16 1604
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
JQuery的DOM操作+事例
泠泠似水
02-23 2880
1.DOM节点的创建通过JavaScript原生接口创建节点，在处理上是非常复杂与繁琐的。我们可以通过使用jQuery来简化了这个过程创建元素节点：可以有几种方式，后面会慢慢接触。常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理，$("html结构")$("<div></div>")创建为本节点：与创建元素节点类似，可以直接把文本内容一并描述$("<div>我是文本
jQuery操作DOM知识总结
weixin_30537391的博客
09-24 125
jquery操作DOM(节点) 1.创建元素 //$(htmlStr) //htmlStr：html格式的字符串 $("<span>这是一个span元素</span>"); 2.添加元素 2.1.添加新建的元素 //方法一：将jQuery对象添加到调用者内部的最后面。 var $span = $("<span>这是一个span元素</s...
DOM操作标签与jQuery框架
weixin_64178950的博客
04-29 2300
今日内容概要1 > DOM操作标签1.1 > 动态创建一个a 标签1.2 > 默认与自定义属性1.3 > getAttribute和removAttribute 方法1.4 > innerText与innerHTML2 > 获取值操作2.1 > 获取普通值数据2.2 > 获取文件数据3 > 属性操作3.1 > 类属性操作3.2 > 样式操作4 > 事件5 > 事件案例5.1 > 数据校验5.2 > 搜索框案例5.3
jQuery的基本知识
努力学习Java的彬彬的博客
05-11 661
jQuery的基本知识
jquery 操作DOM的基本用法分享
10-28
jQuery 是一个快速、小巧、功能丰富的 JavaScript 库。它通过简化 HTML 文档遍历和操作、事件处理、...通过上述知识点的介绍，我们可以看到 jQuery 在简化 DOM 操作上的强大能力，这也是它被广泛使用的一个重要原因。
jQuery中DOM常见操作实例小结
10-16
以上总结的知识点涵盖了jQuery中DOM操作的基本方法和技巧，通过实例演示了如何使用这些方法来完成具体的DOM操作任务。这些操作对于进行Web前端开发的人员来说至关重要，因为它们可以帮助开发者高效地对网页内容进行...
jquery 操作DOM案例代码分享
10-28
### jQuery操作DOM案例知识点分享 #### 1. jQuery库的引入和使用 在文档开始部分引入jQuery库是使用jQuery进行DOM操作的前提。这通常通过在`<script>`标签中引入jQuery的CDN地址来完成。在这个案例中，使用的是...
JQuery 选择器、DOM节点操作练习实例
10-19
根据所提供的文件内容，我们可以提炼出关于JQuery选择器、DOM节点操作练习实例的相关知识点，下面详细说明： ...通过实例的学习，可以加深对JQuery操作的理解，并能够在自己的项目中灵活应用这些知识。
单选框实现联动一样的效
说：/~不了的专栏
09-30 4638
单选框联动效果 在项目开发的时候，遇到了一个类似联动效果的单选框效果。也就是你点击这个单选框后，另外一个单选框会默认的选中，其他的单选框不可以编辑或者可以编辑。以下是具体的需求： 当收费类型为：     一次性费用 --> 默认选中初始本金 (其他不可选) --> 计算基础都不可选(也就是那个框中没有点)     计提式费用 --> 默认选中存续本金(其他不可选) --> 计算基础可以
JS获取系统时间、计算两个日期天数、比较日期大小
说：/~不了的专栏
10-17 3131
转载来自：http://blog.csdn.net/make_a_difference/article/details/40427189 1：比较两个日期大小。列：2014-10-24 [javascript] view plaincopy //比较两个日期大小   function dateCompare(startDate,endDate
js中的返回
说：/~不了的专栏
09-19 406
返回
基于龙伯格（Luenberger）观测器的无感FOC电机矢量控制MATLAB Simulink仿真模型
最新发布
10-06
基于龙伯格（Luenberger）观测器的无感FOC电机矢量控制MATLAB Simulink仿真模型 通过龙伯格观测器，我们可以在不直接测量转子角度的情况下，通过已知的电机电流、电压来估算转子角度。这种方法在控制理论和实际电机控制中具有广泛的应用，尤其是在无传感器的情况下。
web端实现《别踩白块》小游戏
10-06
通过JS实现web的《别踩白块》小游戏
jQuery与DOM操作：轻松掌握jQuery+easyUI
jQuery封装了大量操作DOM的方法，如`$(element).html()`用于获取或设置元素的HTML内容，`$(element).append()`用于在元素内部添加内容，`$(element).remove()`用于删除元素。这些方法使得DOM操作既简洁又高效。 3....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值