📌  相关文章
📜  jquery 按元素选择 - Html (1)

📅  最后修改于: 2023-12-03 15:32:13.484000             🧑  作者: Mango

jQuery按元素选择 - Html

jQuery是一个快速、简洁的JavaScript库，可以简化HTML文档的遍历、事件处理、动画等操作。在jQuery中，按元素选择是其中基本的操作之一。

1. 选择器语法

在jQuery中，选择器使用CSS选择器语法。可以根据元素类型、class、id、属性等选择元素。

基本选择器

  • 选取所有元素: $(' * ')
  • 根据元素类型选择: $('tagname')
  • 根据id选择: $('#id')
  • 根据class选择: $('.class')

属性选择器

属性选择器可以通过元素的属性值来选择元素。

  • 对于属性的值为固定值，直接写在选择器中: $('element[attribute="value"]')
  • 对于属性的值包含某些字符，可以使用*号通配符: $('element[attribute*="value"]')
  • 对于属性的值以某些字符开头，可以使用^符号: $('element[attribute^="value"]')
  • 对于属性的值以某些字符结尾，可以使用$符号: $('element[attribute$="value"]')
2. 实例演示

以下是一个简单的HTML文档。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery按元素选择</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

	<div id="div1">
		<ul>
			<li>列表1</li>
			<li>列表2</li>
		</ul>
		<p>段落1</p>
	</div>

	<div class="container">
		<p>段落2</p>
		<span>span元素</span>
		<a href="#">链接</a>
	</div>

</body>
</html>

根据元素类型选择元素:

$('p') //选择所有p元素

根据id选择元素:

$('#div1') //选择id为div1的元素

根据class选择元素:

$('.container') //选择class为container的元素

根据属性选择元素:

$('a[href="#"]') //选择href属性值为#的元素