"JQuery学习笔记一(JQuery选择器.css样式操作,节点关系)"
这篇学习笔记主要介绍了jQuery的基础知识，包括jQuery的理解、jQuery对象与DOM对象的转换、选择器的使用、CSS样式的操作以及节点关系的处理。以下是详细内容：
一、jQuery了解
1. 原生JavaScript的问题：在JavaScript中，选择元素、处理兼容性等问题较为复杂，jQuery通过封装这些功能，提供了一种更简洁、兼容性更好的API。
2. jQuery简单介绍：jQuery是一个轻量级的JavaScript库，其目标是简化HTML文档遍历、事件处理、动画制作和Ajax交互。
二、jQuery对象和DOM对象
1. DOM（Document Object Model）：DOM是HTML和XML文档的标准表示方式，它将文档解析为一个节点树。
2. DOM节点：包括元素节点、文本节点、属性节点等，用于访问和操作文档结构。
3. DOM对象：JavaScript中表示DOM节点的对象。
4. jQuery对象：jQuery函数（$）返回的对象，提供了丰富的API来操作DOM。
5. jQuery对象和DOM对象的相互转换：
- DOM对象转化成jQuery对象：使用$(DOM对象)
- jQuery对象转化成DOM对象：使用get(index)或[index]方法
三、$()选择器
1. 结果：$()选择器返回一个jQuery对象，包含匹配的元素集合，类似于JavaScript中的类数组对象。
2. 使用方法：可以传入CSS选择器、DOM元素、HTML字符串等多种参数。
3. 文档加载：jQuery提供了$(document).ready()函数在文档加载完成后执行代码，比window.onload()更早执行。
四、选择器
1. 基本选择器：标签选择器、类选择器、ID选择器、并集选择器、交集选择器、全局选择器。
2. 层次选择器：相邻选择器、同辈选择器、后代选择器、子元素选择器。
3. 属性选择器：根据元素的属性进行选择。
4. 过滤选择器：如:first、:last、:even、:odd等，用于进一步筛选元素。
5. 可见性选择器：例如:visible、:hidden。
6. is()函数：判断元素是否匹配特定的选择器。
五、CSS样式操作
1. 读取样式值：使用.css('property')获取元素的样式属性。
2. 设置样式值：
- 设置单个属性：.css('property', 'value')
- 设置多个属性：.css({'property1': 'value1', 'property2': 'value2'})
- 支持多种样式，如颜色、尺寸等。
3. 自定义属性：jQuery支持读写自定义数据属性"data-*"。
4. 类名操作：addClass()、removeClass()、toggleClass()用于管理元素的class属性。
5. 获取和设置节点内容：html()、text()用于获取或设置元素的HTML内容和纯文本内容。
六、节点关系
1. children()：获取元素的所有直接子元素。
2. find()：查找元素的后代元素，支持选择器参数。
3. parent()：获取当前元素的直接父元素。
4. parents()：获取所有祖先元素，直到文档根节点。
5. siblings()：获取所有同级元素。
6. prev()、next()、prevAll()、nextAll()：获取前一个或后一个兄弟元素，或所有前/后兄弟元素。
7. offsetParent()：获取元素的相对定位父元素。
以上内容构成了jQuery学习的第一部分，涵盖了基本操作和常用功能。后续笔记将继续深入探讨节点操作、事件监听和动画相关方法。
我的内容管理
展开
