首页 前端知识 jQuery基本操作

jQuery基本操作

2024-01-29 13:01:25 前端知识 前端哥 722 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操作 

jQueryJavaScript中的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])

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

offsetParent( )

返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relativeabsolutefixed的元素

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
标签
开发语言
评论
发布的文章

RapidJSON介绍

2024-08-14 00:08:38

jQuery 4 beta 震撼发布

2024-08-14 00:08:36

cJSON的使用

2024-08-14 00:08:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!