jQuery基础元素操作

最新推荐文章于 2024-07-06 16:47:02 发布

别喝我的旺仔牛奶

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量92

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_63502124/article/details/127862266

版权

操作文本内容 html（）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery操作 </title>
	</head>
	<body>
		<div> 
		hello 
		<p>你好</p>
		world
		</div>
	</body>
	<!-- 需要先引入js'文件 -->
	<script src="jquery.js"></script>
	<script>
		console.log('-------------------操作文本内容 html（）-------------------');
		// 等价于原生js 的innerHTML
			// 1.1 获取html()			
			console.log($('div').html()) 
			// 1.2 设置htm（）
			// 语法 ： 元素集合.html(要设置的内容)
			// 注意 可以识别并解析 html 结构字符串
			$('div').html('<h1>我是后来设置的内容</h1>');
	</script>
</html>

text （）和 val（）

<body>
		<div>
			hello
			<p>你好</p>
			world
		</div>
		<input type="text" value="hello world">
	</body>

js

console.log('-------------------2.操作文本内容 text（）-------------------');
		// 等价于原生js 的innerText
		// 2.1 获取text()			
		console.log($('div').text())
		// 2.2 设置text（）
		// 语法 ： 元素集合.text(要设置的内容)
		// 注意  不可以  识别并解析 html 结构字符串
		$('div').text('我是后来设置的内容');
		console.log('-------------------3.操作文本内容 val（）-------------------');
		//等价于  原生js 的  value  表单元素
			//3.1 获取 val（）
			console.log($('input').val());
			//3.2设置val（）
			$('input').val('你好')

操作类名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作元素类名</title>
	</head>

	<body>
		<div class="a b c d"></div>

		<script src="jquery.js"></script>
		<script>
			console.log('---------------操作元素类名-----------------');
			// console('addClass(需要添加的类名)');
			$('div').addClass('e')
			
			// removeClass(需要删除的类名)
			$('div').removeClass('a')
			
			// toggleClass(需要切换的类名)
			// 如果本身有就删除,没有就添加
		</script>
	</body>


</html>

操作元素样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作元素样式</title>
		<style>
			div{
				height: 200px;
				width: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		
		<div></div>
		
		<script src="../jquery.js"></script>
		<script>
			console.log('------------操作样式-----------');
			//1. 获取样式 css
			// 语法 : 元素集合.css(需要获取的样式名称)
			console.log($('div').css('width'));
			console.log($('div').css('height'));
			
			
			//设置样式css
			// 语法 : 元素集合.css(样式名,样式值)
			$('div').css('width','300px')
			
			//批量设置样式
			// 语法 ; 元素集合.css({})
			$('div').css({
				width:'500px',
				height:'500px',
				background:'blue'
			})
		</script>
	</body>
</html>

操作元素属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作元素属性</title>
	</head>
	<body>
		<div id="box" hello="world">
			我是一个 div 标签
		</div>

		<script src="../jquery.js"></script>
		<script>
			console.log('---------------操作元素属性-------------')
			console.log('----1. attr(可以设置和获取元素属性)-----')
			// 1.1 可以设置和获取元素属性
			// 1.2 一般用于自定义属性
			// 1.3 attr（）操作的所有属性都会直接出现在元素标签身上
			//获取 元素.attr(要获取的属性名)
			//返回值 ； 该属性名对应的属性值
			console.log($('div').attr('hello'))
			// 设置
			// 语法 : 元素.attr(属性名.属性值);
			$('div').attr('index', '20')


			console.log('-----2.removeAttr(对元素的属性进行删除)-----')
			$('div').removeAttr('hello');


			// 第二套
			//1.prop（）
			console.log('------prop（可以获取和设置元素属性）--------')
			// 注意 : 当 prop 设置元素的原生属性，会 直接响应在元素标签身上
			// 注意 : 当 prop 设置元素的自定义属性，不会 直接响应在元素标签身上  会响应在元素对象身上
			// 注意 ： prop方法不能获取元素标签身上的自定义属性，只能获取到prop方法自己设置的自定义属性
			
			// prop设置
			// 语法: 元素集合.prop(属性名,属性值)
			
			console.log('------removeProp（用来删除元素）---')
			// 注意 : 不能删除原生属性
			// 只能删除又prop方法设置的自定义属性
		</script>
	</body>
</html>