jQuery原理系列-常用Dom操作详解
1. jQuery是什么
- jQuery是一种JavaScript库，它使编写JavaScript变得更容易。jQuery使在HTML文档中处理文档元素，处理事件以及应用Ajax技术变得更加容易。
2. jQuery的基础（语法与选择器）
- jQuery的基础语法：
$(selector).action()
-
$表示对jquery的查询；selector表示DOM元素的查询条件；action表示对查询结果做的操作。
-
jQuery的基础选择器：
| 选择器 | 描述 |
|---|---|
* |
选择所有元素 |
#id |
根据元素的ID属性选择元素 |
.class |
根据元素的class属性选择元素 |
element |
根据元素名字选择元素，如<p>、<div>等等 |
selector1 , selector2 |
将多个元素做为一个共同选择器，选择所有匹配其中一个选择器的元素 |
ancestor descendant |
基于其后代元素选择元素 |
parent > child |
选择直接作为parent元素子元素的child元素 |
3. 常用DOM操作
- jQuery对于DOM元素的操作主要分为两种：获取元素、修改元素
3.1 获取元素
- 获取单个元素：
$('#id')
$('.class')
$('element')
- 获取多个元素：
$('.class1, .class2')
$('el1, el2, el3')
- 获取父元素或子元素：
$('el').parent()
$('el').children()
- 获取兄弟元素：
$('el').siblings()
3.2 修改元素
- 修改DOM元素的text或html：
$('el').text('new text')
$('el').html('<p>new html</p>')
- 向DOM元素中插入内容：
$('el').append('new content')
$('el').prepend('new content at beginning')
- 修改CSS样式：
$('el').css('property', 'value')
4. 示例说明
4.1 示例1：修改元素
- HTML代码：
<div id='test'>This is a test</div>
- JS代码：
$('#test').text('This is a new test');
$('#test').css('background-color', 'red');
$('#test').append('<p>New content</p>');
- 上述代码先找到id为'test'的div元素，并修改其文本内容为"This is a new test"，再将其背景颜色更改为红色。最后插入一个新的p元素到该元素后。
4.2 示例2：动态生成网页内容
- HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Page</title>
</head>
<body>
<h1>Dynamic Content</h1>
<div id='content'></div>
<button id='btn'>Add Content</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
- JS代码（script.js文件）：
$(document).ready(function() {
$('#btn').click(function() {
var newContent = '<p>New dynamic content</p>';
$('#content').append(newContent);
});
})
- 上述代码创建一个按钮，用于动态添加内容到页面。当按钮被点击时，JS代码会在id为'content'的div元素中添加新的p元素。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery原理系列-常用Dom操作详解 - Python技术站
微信扫一扫 
支付宝扫一扫 