Jquery（三）——Jquery操作DOM结点（上）

最新推荐文章于 2022-11-25 16:58:41 发布
最新推荐文章于 2022-11-25 16:58:41 发布
阅读量523 收藏 1
点赞数
分类专栏： ● 富客户端技术 ------【jQuery】 文章标签： Jquery DOM结点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37084904/article/details/99288090
版权

目录

 

1.Jquery操作DOM结点；

1.1 查找结点；

1.2 创建结点；

1.3 删除结点；

2. Jquery操作DOM结点属性；

2.1 查找属性；

2.2 设置属性；

2.3 删除属性；

3. Jquery操作DOM结点样式；

3.1 获取样式；

3.2 设置样式；

3.3 追加样式；

3.4 移除样式；

​​​​​​​

1.Jquery操作DOM结点；

先写一个初始界面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		
	});
</script>
<style type="text/css">
	.lc{
		background-color: red;
	}
	
	.lc2{
		background-color: blue;
	}
	
	.lc3{
		font-weight: bold;
	}
</style>
</head>
<body>
<p>你最喜欢的名人是？</p>
<ul>
	<li title="这是乔布斯"><font color="green">乔布斯</font></li>
	<li title="这是比尔盖茨" class="lc">比尔盖茨</li>
	<li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
</ul>
</body>
</html>

 

1.1 查找结点；

<script type="text/javascript">
	$(document).ready(function(){
		//操作DOM结点
		//1，查找结点
		var li2=$("ul li:eq(1)");//取li列表下的第二个数据
		var li2_txt=li2.text();
		alert(li2_txt);
	});
</script>

 

1.2 创建结点；

<script type="text/javascript">
	$(document).ready(function(){
		// 2，创建节点
		var li1=$("<li title='这是马化腾'>马化腾</li>");
		var li2=$("<li title='这是李彦宏'>李彦宏</li>");
		var li22=$("ul li:eq(1)");//取第二个结点
		$("ul").append(li1);//在列表的末尾添加数据
		li2.insertAfter(li22);//在第二个结点之后添加结点
	});
</script>

 

1.3 删除结点；

<script type="text/javascript">
	$(document).ready(function(){
		//3.删除结点
		$("ul li:eq(1)").remove();
	});
</script>

 

 

2. Jquery操作DOM结点属性；

2.1 查找属性；

<script type="text/javascript">
	$(document).ready(function(){
		//操作DOM属性
		//1，查找属性
		var li2=$("ul li:eq(1)");
		var li2_title=li2.attr("title");
		alert(li2_title);
	});
</script>

2.2 设置属性；

<script type="text/javascript">
	$(document).ready(function(){
		//2，设置属性
		$("ul li:eq(1)").attr("title","设置后的属性");//将第二个结点是title属性修改
	});
</script>

2.3 删除属性；

<script type="text/javascript">
	$(document).ready(function(){
		//3，删除属性
		$("ul li:eq(1)").removeAttr("title");
	});
</script>

 

3. Jquery操作DOM结点样式；

3.1 获取样式；

<script type="text/javascript">
	$(document).ready(function(){
		//操作DOM结点样式
		//1. 获取样式
		var li2=$("ul li:eq(1)");
		var li2_class=li2.attr("class");
		alert(li2_class);
	});
</script>

3.2 设置样式；

<script type="text/javascript">
	$(document).ready(function(){
		//2. 设置样式
		$("ul li:eq(1)").attr("class","lc2");
	});
</script>

3.3 追加样式；

<script type="text/javascript">
	$(document).ready(function(){
		//3. 追加样式
		$("ul li:eq(1)").addClass("lc3");
	});
</script>

3.4 移除样式；

<script type="text/javascript">
	$(document).ready(function(){
		//4. 移除样式
		$("ul li:eq(1)").removeClass("lc");
	});
</script>

 

 

 

 

程序员的时光
关注
专栏目录
JQuery创建DOM节点的方法
10-24
尤其在DOM操作方面，jQuery提供了强大的方法来简化元素的创建、插入和修改。本文将详细介绍jQuery创建DOM节点的方法，包括创建元素节点、文本节点和属性节点的技巧。 首先，我们来理解DOM节点的概念。在HTML文档中...
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
10-21
在jQuery中，DOM元素的遍历是一个核心功能，允许开发者对页面上的元素进行搜索和操作。通过这些遍历方法，我们可以轻松地在DOM树中导航，实现元素的选取和样式、属性等的修改。本文将详细解读jQuery中的向上遍历、向...
jQuery DOM节点操作
sult812的博客
05-05 172
jQuery DOM节点操作 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：Adobe Dreamweaver JavaScript 作者：陈钰桃 撰写时间：2020年5月2日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
Jquery（三）——Jquery操作DOM结点（下）
程序员的时光
08-12 498
目录 4. 设置和获取HTML，文本和值； 4.1 获取html，设置html； 4.2 获取文本，设置文本； 4.3 获取值，设置值； 5.遍历结点操作； 5.1 获取所有子节点； 5.2 获取邻近的下一个兄弟结点next()； 5.3 获取邻近的上一个兄弟结点prev()； 6. Jquery操作DOM结点CSS； 6.1 获取DOM结点CSS样式； 6.2 设置...
jQuery DOM操作
qq_36194388的博客
07-29 1408
jQuery中DOM基本操作 jQuery中的DOM操作主要对包括：建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操作】。下面的DOM操作将围绕上面的DOM树进行学习jQueryDOM操作。 【查】查找结点 查找节点非常容易，使用选择器就能轻松完成各种查找工作。 就是利用我们前面学习的选择器来查找节点的。 例：查找元素节点p返回p内的文本内容。 $("p").text(); 例：查找元素节点p的属性返回属性名称对应的属性值 $("p").attr("title"); //.
jquery之DOM操作（一）
The_upside_of_down的博客
10-11 1762
一般来说，DOM操作分为：DOM core（核心）、HTML-DOM和CSS-DOM。 1、DOM Core DOM Core并不专属于javascript，任何一种支持dom操作的程序都可以使用它。 利用DOM Core来获取表单对象的方法： document.getElementsByTagName("form"); 2、HTML-DOM 它主要是提供一些更简明的符号来描述各种ht...
jQuery_T2_DOM操作
最新发布
红目香薰
11-25 650
jQuery 什么是DOM？ DOM操作的内容 jQuery的DOM DOM转jQuery对象 DOM样式添加 jQuery元素属性设置 toggle切换 ​编辑html()与text()区别 DOM添加图片 纯dom添加元素 克隆元素
DOM操作的简化——JQuery （jQuery实现手风琴案例）
WYF857446152的博客
06-06 877
今天来给大家介绍一下jquery，jquery使得我们在dom操作有了更简单更高效率的代码执行。jquery的用法基本上是在dom操作上进行的简单语法。大家先看一下思维导图，大致了解一下jquery的操作，然后我再给大家具体的介绍一下用法。...
jQuery中操作DOM节点的方法
MPFLY的博客
09-27 1466
jQuery.parent(expr) //找父元素jQuery.parents(expr) //找到所有祖先元素，不限于父元素jQuery.children(expr) //查找所有子元素，只会找到直接的孩子节点，不会返回所有子孙jQuery.contents() //查找下面的所有内容，包括节点和文本。jQuery.pre
JQuery中DOM节点的操作
theVicTory的博客
01-27 512
Jquery中DOM节点的操作 已有对象.append(要添加的对象) 作为最后一个子元素添加 要添加的对象.appendTo(已有对象) prepend（）/prependTo() 作为第一个子元素添加 已有元素.before(要添加的元素)/after() 在...
JQuery中的DOM操作
LXYDSF的博客
03-29 1137
一、获取节点(元素节点、属性节点) (1) 获取元素节点: 通过 jQuery 选择器完成。 如:alert($(“ul li:eq(2)”).text()); (2) 获取属性节点: 获取 到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值。 如:alert($(“p”).attr(“title”)); 二、创建节点 $(“html 代码”) 方法将HTML 代码转换成DOM 对象，并将这 个 个DOM 对象包装成一个jQuery //创建元素节点 var
JQuery元素快速查找与操作
12-09
首先，我们来看看jquery中如何查找到想要的结点。 第一步：sizzle选择器 基于元素的id、类、类型、属性、属性值等”查找”（或选择）HTML元素，简单的说是基于css选择器，除此之外还有一些特定的选择器。 第二步：...
jquery ztree实现模糊查询功能,给树上的结点添加过滤器
01-06
本篇文章将深入探讨如何利用jQuery ZTree实现模糊查询功能，并对树上的节点添加过滤器。 首先，我们要理解jQuery ZTree的核心特性之一是其强大的数据管理能力。通过配置数据参数，我们可以定制树的展示方式，包括...
Jquery 表单取值赋值的一些基本操作
12-11
在jQuery中，对表单进行取值和赋值是常见的操作，这涉及到一系列的选择器和方法。首先，我们要了解jQuery的选择器系统，它是基于CSS选择器的，但提供了更多的功能和便利。 限定子节点选择器如`$(“mix1[mix2]”)`，...
Ajax读音，了解一下？
程序员的时光
07-22 3311
听一听老外发音： https://www.dictionary.com/browse/ajax?x=31&y=17 中文谐音就是： A 贾克斯
jQuery（五）——jQuery动画效果
程序员的时光
08-13 724
目录 1. jQuery显示与隐藏DOM； 2. jQuery淡入和淡出DOM； 3. jQuery滑动DOM； 4. jQuery动画； 5. jQuery callBack回调方法； 6. jQuery暂停动画； ​​​​​​​ 1. jQuery显示与隐藏DOM； <script type="text/javascript"> $(document)...
Jquery（二）——Jquery选择器
程序员的时光
08-11 551
目录 1. Jquery选择器介绍； 2. 基本选择器； 2.1 id选择器； 2.2 类别选择器； 2.3 便标签元素选择器； 3. 属性选择器； 3.1 元素包含某个属性； 3.2 属性等于某个值； 3.3 以某个属性结尾的； 4. 其他选择器； 4.1 连接选择器； 4.2 首尾选择器； ​​​​​​​ 1. Jquery选择器介绍； 我们能通过Jq...
Ajax和Json（二）——Ajax核心知识
程序员的时光
08-09 428
目录 1. XMLHttpRequest对象的创建； 2. XMLHttpRequest对象请求后台； 3. XMLHttpRequest对象响应服务器； 4. 完整代码； 这一节我们来说一下ajax的核心知识； 1. XMLHttpRequest对象的创建； 所有现代浏览器均支持XMLHttpRequest对象，（IE5和IE6使用的是ActiveXObject）。...
jQuery基础：入门教程——强大选择器与DOM操作
本篇教程是关于jQuery的基础入门，它涵盖了从jQuery的起源和简介，到核心概念如jQuery对象与DOM对象的理解，再到实际操作中的选择器应用、DOM操作和创建动画效果。jQuery作为轻量级的JavaScript库，以其强大的功能和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值