菜单 搜索
首页 前端知识 jQuery基本操作

jQuery基本操作

2024-01-29 13:01:25 前端知识 前端哥 731 364 我要收藏

目录

DOM操作分类

 样式操作

设置和获取样式值 

追加和移除样式 

追加样式

移除样式

切换样式

判断是否含指定的样式

内容及Value值操作

HTML代码操作

标签内容操作

属性值操作

节点操作

创建节点元素

插入节点

删除节点

替换节点

复制节点

属性操作

获取与设置元素属性

删除元素属性

节点遍历

遍历子元素

遍历同辈元素

遍历前辈元素 

CSS-DOM操作

DOM操作分类

DOM操作分为三类：

DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()

HTML-DOM：用于处理HTML文档，如document.forms

CSS-DOM：用于操作CSS，如element.style.color="green"

JavaScript用于对html/xhtml文档进行操作，它对这三类DOM操作都提供了支持

jQuery中的DOM操作 

jQuery对JavaScript中的DOM操作进行了封装

jQuery中的DOM操作

        样式操作

        内容及Value值操作

        节点及节点属性操作

        节点遍历

 样式操作

设置和获取样式值 

使用css()为指定的元素设置样式值或获取样式值

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.1.min.js"></script>
		<style>
			p{
				color: #f00;
				font-size: 32px;
			}
		</style>
	</head>
	<body>
		<p>我是段落标签</p>
		<script>
			$(function(){
				//获取样式
				var result1 = $('p:first').css('color');
				console.log(result1);
				
				var result2 = $('p:first').css('font-size');
				console.log(result2);
				
				//设置样式
				//设置一个样式
				$('p:first').css('background-color','#ccc');
				//设置多个样式
				$('p:first').css({
					'text-align':'center',
					'width':'300px',
					'height':'48px',
					'line-height':'48px'
					
				});
				
				
			});
		</script>
	</body>
</html>

 

追加和移除样式 

追加样式

移除样式

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.1.min.js"></script>
		<style>
			.demo{
				color: #f00;
			}
			.test{
				font-size: 36px;
			}
			
		</style>
	</head>
	<body>
		<p class="demo">我是段落标签</p>
		<button>添加类样式</button>
	</body>
	<script>
		$(function(){
			//addClass('class样式名'):给元素添加类样式，可以添加一个或多个样式，添加的类样式不会覆盖之前已经存在的样式
			// $('p').addClass('test');
			
			// $('button').click(function(){
			// 	$('p').addClass('test');
			// });
			
			removeClass('class样式名'):移除元素上的class样式，可以移除一个或多个
			$('p').removeClass('demo test');
		});
	</script>
</html>

切换样式

toggleClass()

模拟了addClass()与removeClass()实现样式切换的过程

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.1.min.js"></script>
		<style>
			div{
				width: 300px;
				height: 200px;
				border: 1px solid #f00;
				margin-bottom: 20px;
			}
			
			.demo{
				background-color: #ccc;
				border-radius: 30px;
			}
		</style>
	</head>
	<body>
		<div></div>
		<button>添加样式或删除样式</button>
	</body>
	<script>
		//需求：点击按钮，如果div具备.demo的样式，就移除改样式，如果不具备，就添加改样式
		//原生JS实现
		//获取button元素并添加点击事件
		// var btnEle = document.querySelector('button');
		// var result = true;
		// btnEle.onclick =  function(){
			//获取div元素
		// 	var divEle = document.querySelector('div');
		// 	if(result){
		// 		divEle.className = 'demo';
		// 		result = false;
		// 	}else {
		// 		divEle.className = '';
		// 		result = true;
		// 	}
		// }
		
		
		//使用jQuery来实现
		$(function(){
			//使用addClass()和removeClass()来实现
			// var result = true;
			// $('button').click(function(){
			// 	if(result){
			// 		$('div').addClass('demo');
			// 		result = false;
			// 	}else {
			// 		$('div').removeClass('demo');
			// 		result = true;
			// 	}
				
			// });
			
			$('button').click(function(){
				$('div').toggleClass('demo');
			});
	
		});
		
	
	</script>
</html>

 

判断是否含指定的样式

hasClass( )方法来判断是否包含指定的样式

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.1.min.js"></script>
		<style>
		div{
			width: 300px;
			height: 200px;
			border: 1px solid #f00;
			margin-bottom: 20px;
		}
		
		.demo{
			background-color: #ccc;
			border-radius: 30px;
		}
		</style>
	</head>
	<body>
		<div class="demo"></div>
		<button>添加样式或删除样式</button>
	</body>
	<script>
		$(document).ready(function(){
			$('button').click(function(){
				if(!$('div').hasClass('demo')){
					$('div').addClass('demo');
				}else{
					$('div').removeClass('demo');
				}
			});
							
		});
			
		
	</script>
</html>

 

内容及Value值操作

HTML代码操作

html()可以对HTML代码进行操作，类似于JS中的innerHTML

语法：

$("div.left").html();  //获取元素中的html代码
或
$("div.left").html("<div class='content'>…</div>");//设置元素中的html代码

标签内容操作

text()可以获取或设置元素的文本内容

语法：

$("div.left").text();//获取元素中的文本内容
或
$("div.left").text("<div class='content'>…</div>");//设置元素中的文本内容

html( ) 和text( )方法的区别

语法格式

参数说明

                        功能描述

html( )

无参数

用于获取第一个匹配元素的HTML内容

或文本内容

html(content)

content为元素的HTML内容

用于设置所有匹配元素的HTML内容

或文本内容

text( )

无参数

用于获取所有匹配元素的文本内容

text (content)

content为元素的文本内容

用于设置所有匹配元素的文本内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.1.min.js" type="text/javascript">
			
		</script>
	</head>
	<body>
		<div >
			<ul>
				<li>111</li>
				<li>222</li>
				<li>333</li>
			</ul>
			
		</div>
		<h2></h2>
		<h2></h2>
	</body>
	<script>
		$(function(){
			//获取div中的内容
			var result1 = $('div').html();
			console.log(result1);
			var result2 = $('div').html();
			console.log(result2);
			
			
			//获取h2标签，并向里面插入内容
			$('h2:first').html('<a href = "#">qwert</a>');
			$('h2:last').text('<a href = "#">qwert</a>');			
		});		
	</script>
</html>

属性值操作

val()可以获取或设置元素的value属性的值

语法：

$(this).val();//获取元素的value属性值
或
$(this).val(value);//设置元素的value属性值


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.1.min.js"></script>
	</head>
	<body>
		<input type="radio" value="tttt"/>选我
	</body>
	<script>
		$(function(){
			var val1 = $('input').val();
			console.log(val1);
			
			$('input').val('helljs');
			var val2 = $('input').val();
			console.log(val2);
		
		});
	</script>
</html>

节点操作

创建节点元素

工厂函数$()用于获取或创建节点

        $(selector)：通过选择器获取节点

        $(element)：把DOM节点转化成jQuery节点

        $(html)：使用HTML字符串创建jQuery节点

插入节点

元素内部插入子节点

语法

                                        功能

append(content)

$(A).append(B)表示将B追加到A中

如：$("ul").append($newNode1);

appendTo(content)

$(A).appendTo(B)表示把A追加到B中

如：$newNode1.appendTo("ul");

prepend(content)

$(A). prepend (B)表示将B前置插入到A中

如：$("ul"). prepend ($newNode1);

prependTo(content)

$(A). prependTo (B)表示将A前置插入到B中

如：$newNode1. prependTo ("ul");

 元素外部插入同辈节点

语法

                                        功能

after(content)

$(A).after (B)表示将B插入到A之后

如：$("ul").after($newNode1);

insertAfter(content)

$(A). insertAfter (B)表示将A插入到B之后

如：$newNode1.insertAfter("ul");

before(content)

$(A). before (B)表示将B插入至A之前

如：$("ul").before($newNode1);

insertBefore(content)

$(A). insertBefore (B)表示将A插入到B之前

如：$newNode1.insertBefore("ul");

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li>11111</li>
			<li>22222</li>
		</ul>
		
	</body>
	<script>
		$(function(){
			//获取ul元素
			var ulEle = $('ul');
			//创建一个li元素，li元素中的内容为"33333"
			var $creatLiEle = $('<li>33333</li>');
			//将创建的li的元素添加到ul元素中
			ulEle.append($creatLiEle);
			
			var $creatLiEle2 = $('<li>44444</li>');
			$creatLiEle2.appendTo(ulEle);
			
			ulEle.prepend($creatLiEle);
			$creatLiEle2.prependTo(ulEle);
			
			var $creatLiEle3 = $('<li>33333</li>');
			$('li:eq(3)').after($creatLiEle3);
			
			var $creatLiEle4 = $('<li>44444</li>');
			$creatLiEle4.insertAfter($('li:eq(4)'));


			//jQuery remove() 方法删除被选元素及其子元素。
			$('li:eq(5)').remove();
			
			// jQuery empty() 方法删除被选元素的子元素。
			// $('ul').empty();
			
		});	
	</script>
</html>

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.1.min.js">
		</script>
		<style>
			img{
				width: 300px;
				
			}
		</style>

	</head>

	<body>
		<img src="img/car2.jpg">
		<br><br>
		<button id="btn1">之前插入</button>
		<button id="btn2">之后插入</button>
	</body>
	<script>
		$(document).ready(function() {
			$("#btn1").click(function() {
				$("img").before("<b>之前</b>");
			});

			$("#btn2").click(function() {
				$("img").after("<i>之后</i>");
			});
		});
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.6.1.min.js"></script>
	</head>
	<body>
		<p id="demo">我是段落标签</p>
	</body>
	
	<script>
		$(function(){
			//创建一个h2标签
			var $h2Ele = $('<h2>我是2级标题标签</h2>');
			
			//将创建的h2元素插入到p元素的后面
			// $('#demo').after($h2Ele);
			// $h2Ele.insertAfter($('#demo'));
			
			
			//将创建的h2元素插入到p元素的前面
			// $('#demo').before($h2Ele);
			// $h2Ele.insertBefore($('#demo'));
	
		});
	</script>
</html>

 

删除节点

jQuery提供了三种删除节点的方法(这里只说第一种)

        remove()：删除整个节点

$(selector).remove([expr]);

        empty()：清空节点内容

$(selector).empty();

        detach()：删除整个节点，保留元素的绑定事件、附加的数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li>
				<p>列表项第一项</p>
			</li>
			<li>
				<p>列表项第一项</p>
			</li>
			
		</ul>
	</body>
	<script>
		$(function(){
			//获取li元素并删除
			$('li').remove();
		});
	</script>
</html>

替换节点

replaceWith()和replaceAll()用于替换某个节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.1.min.js"></script>
	</head>
	<body>
		<ul></ul>
		<li>
			<p>我是段落标签1</p>
		</li>
		<li>
			<p>我是段落标签2</p>
		</li>
		<li>
			<p>我是段落标签3</p>
		</li>
		<li>
			<p>我是段落标签4</p>
		</li>
	</body>
	<script>
		$(function(){
			//创建一个元素
		var $newPEle = $('<p>我是第3个段落标签</p>');
		
		//学习jQuery中的函数，除了要注意函数的功能和需要的参数之外，还需要注意这个函数由谁来调用
		// $('p').eq(2).replaceWith($newPEle);
		
		$newPEle.replaceAll($('p'));
			
		});
		
	</script>
</html>

复制节点

clone()用于复制某个节点

语法：

$(selector).clone([includeEvents]) ;//参数ture或flase, true复制事件处理，flase时反之


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.1.min.js"></script>
	</head>
	<body>
		<ul></ul>
		<li>
			<p>我是段落标签1</p>
		</li>
		<li>
			<p>我是段落标签2</p>
		</li>
		<li>
			<p>我是段落标签3</p>
		</li>
		<li>
			<p>我是段落标签4</p>
		</li>
	</body>
	<script>
		$(function(){
			$('li:eq(3)').click(function(){
				alert('你好');
			});
			
			
			//需求：将第4个li元素复制并添加到ul中的第一个位置
			//clone():此函数中可以传递一个boolean类型的参数，默认值是false,表示复制元素上的绑定事件不复制，如果为true,则复制元素上的绑定事件也会一起复制
			// $('li').eq(3).clone().prependTo($('ul'));
			
			$('li').eq(3).clone(true).prependTo($('ul'));
		});
	</script>
</html>

属性操作

获取与设置元素属性

attr()用来获取与设置元素属性

$(selector).attr([name]) ;//获取属性值
或
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;//设置多个属性的值

删除元素属性

removeAttr()用来删除元素的属性

语法：

$(selector).removeAttr(name) ;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.1.min.js"></script>
		<style>
			a{
				width: 100px;
				height: 50px;
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com" target="_self">百度一下</a>
	</body>
	<script>
		$(function(){
			//获取a元素并获取其某些属性样式
			var href =$('a').attr('href');
			console.log(href);
			
			//设置一个属性值
			$('a').attr('target','_blank');
			
		//设置多个属性值
		$('a').attr({
			'target':'_blank',
			'href':'https://www.runoob.com/'
		});
		
		/* 
		 注意：attr()是获取和设置元素的属性，css()是获取和设置元素的样式
		 */
		
		$('a').removeAttr('target');

		
		});
	</script>
</html>

节点遍历

遍历子元素

children()方法可以用来获取元素的所有子元素

$(selector).children([expr]);//获取<selector>的子元素，不包含子元素的子元素

遍历同辈元素

jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

语法

                                        功能

next([expr])

用于获取紧邻匹配元素之后的元素

$("li:eq(1)").next().addClass("orange");

prev([expr])

用于获取紧邻匹配元素之前的元素

$("li:eq(1)").prev().addClass("orange");

siblings([expr])

用于获取位于匹配元素前面和后面的所有同辈元素

$("li:eq(1)"). siblings().addClass("orange");

遍历前辈元素 

jQuery中可以遍历前辈元素

        parent()：获取元素的父级元素

        parents()：元素元素的祖先元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li>1111</li>
			<li>2222</li>
			<li id="demo">3333</li>
			<li>4444</li>
			<li>5555</li>
		</ul>
	</body>
	<script>
		$(function(){
			//获取ul的所有子元素
			var ulChildren = $('ul').children();
			console.log(ulChildren);
			
			//获取id名称为demo的元素的前面一个兄弟元素
			console.log($('#demo').prev());
			
			//获取id名称为demo的元素的后面一个兄弟元素
			console.log($('#demo').next());
			
			//获取id名称为demo的元素的前面和后面的所有兄弟元素
			console.log($('#demo').siblings());
			
			//获取id名称为demo的元素的父元素
			console.log($('#demo').parent());
			
			//获取id名称为demo的元素的父辈元素
			console.log($('#demo').parents());

		});
	</script>
</html>

CSS-DOM操作

除css()外，还有获取和设置元素高度、宽度等的样式操作方法

语法

                                                功能

css()

设置或返回匹配元素的样式属性

height([value])

设置或返回匹配元素的高度

width([value])

设置或返回匹配元素的宽度

offset([value])

返回以像素为单位的top和left坐标。仅对可见元素有效

offsetParent( )

返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素

position( )

返回第一个匹配元素相对于父元素的位置

scrollLeft([position])

参数可选。设置或返回匹配元素相对滚动条左侧的偏移

scrollTop([position])

参数可选。设置或返回匹配元素相对滚动条顶

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.1.min.js"></script>
		<style>
			div{
				width: 300px;
				height: 200px;
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
	
	<script>
		$(function(){
			//获取div元素的宽度和高度
			console.log($('div').css('width'));
			console.log($('div').css('height'));
			
			
			console.log($('div').width());
			console.log($('div').height());

			
		});
	</script>
</html>

 

转载请注明出处或者链接地址：https://www.qianduange.cn//article/754.html
标签
开发语言
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！