### JQuery 1.3 笔记知识点总结
#### 属性操作 (Attribute)
1. **添加样式**
- `$("p").addClass("css类名")`: 给指定的`<p>`元素添加一个CSS类名定义的样式。
2. **添加属性/值**
- `$("img").attr({"属性名": "属性值"})`: 给`<img>`元素添加多个属性及对应的值，参数是以键值对形式存在的对象。
- `$("img").attr("属性名", "属性值")`: 给`<img>`元素添加单个属性及对应的值。
- `$("img").attr("title", function() { return this.src })`: 给`<img>`元素动态添加一个`title`属性，其值为当前元素的`src`属性值。
3. **获取内容**
- `$("元素名称").html()`: 获取指定元素的内部HTML内容。
- `$("元素名称").text()`: 获取指定元素的文本内容。
4. **设置内容**
- `$("元素名称").html("<b>new stuff</b>")`: 设置指定元素的内部HTML内容。
- `$("元素名称").text("新的文本")`: 设置指定元素的文本内容。
5. **移除属性/样式**
- `$("元素名称").removeAttr("属性名")`: 移除指定元素的某个属性及其值。
- `$("元素名称").removeClass("类名")`: 移除指定元素的某个CSS类。
6. **切换样式**
- `$("元素名称").toggleClass("类名")`: 如果元素已经包含类名，则移除；如果未包含，则添加。
7. **操作表单值**
- `$("input元素名称").val()`: 获取指定`<input>`元素的值。
- `$("input元素名称").val("新值")`: 设置指定`<input>`元素的新值。
#### 操作元素 (Manipulation)
1. **插入元素**
- `$("元素名称").after("新的内容")`: 在指定元素后插入新的内容。
- `$("元素名称").before("新的内容")`: 在指定元素前插入新的内容。
- `$("元素名称").prependTo("目标元素")`: 将指定元素移动到另一个元素的开头。
- `$("元素名称").appendTo("目标元素")`: 将指定元素移动到另一个元素的结尾。
2. **复制元素**
- `$("元素名称").clone(true)`: 复制指定元素及其子元素，如果传入参数为`true`则同时复制事件绑定。
3. **清空内容**
- `$("元素名称").empty()`: 清空指定元素的所有内容。
4. **移除元素**
- `$("元素名称").remove()` 或 `$("元素名称").remove("选择器")`: 移除指定的元素或符合特定条件的元素。
5. **包裹元素**
- `$("元素").wrap("html")`: 使用指定的HTML结构包裹元素。
- `$("元素").wrap("元素")`: 使用指定的元素结构包裹元素。
#### 遍历 (Traversing)
1. **添加元素**
- `add(expr)`, `add(html)`, `add(elements)`: 向当前集合添加更多的元素。
2. **子元素**
- `children(expr)`: 获取当前元素的所有直接子元素，可以指定过滤条件。
3. **判断包含**
- `contains(str)`: 判断当前元素是否包含指定的字符串。
4. **结束遍历**
- `end()`: 结束当前的遍历操作并返回之前的元素集。
5. **筛选元素**
- `filter(expression)`: 根据提供的表达式来筛选元素。
- `filter(filter)`: 根据提供的函数来筛选元素。
6. **查找后代元素**
- `find(expr)`: 查找所有后代元素，并返回一个新元素集。
7. **判断元素**
- `is(expr)`: 判断当前元素集是否满足给定的选择器或表达式。
8. **查找相邻元素**
- `next(expr)`, `prev(expr)`, `siblings(expr)`: 分别查找下一个、上一个或同级元素。
9. **父元素**
- `parent(expr)`, `parents(expr)`: 查找当前元素的父元素或祖先元素。
#### 核心功能 (Core)
1. **创建元素**
- `$(html).appendTo("body")`: 创建一个新的HTML元素并将其追加到`<body>`标签内。
2. **操作DOM元素**
- `$(elems)`: 将DOM元素转换成JQuery对象进行操作。
- `$(function(){...})`: 页面加载完成后执行的函数。
3. **设置样式**
- `$("div>p").css("border","1px solid gray")`: 设置`<p>`标签的边框样式。
4. **扩展jQuery功能**
- `$.extend(prop)`: 扩展jQuery的功能，可以添加自定义的方法。
- 示例代码:
```javascript
$.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
```
5. **遍历元素**
- `each(callback)`: 对每个元素执行回调函数。
- 示例代码:
```javascript
$(document).ready(function(){
$("li").each(function(){
$(this).toggleClass("example");
});
});
```
```javascript
$("button").click(function(){
$("div").each(function(index, domEle){
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if($(this).is("#stop")) {
$("span").text("Stopped at div index#" + index);
return false;
}
});
});
```
#### 事件处理 (Events)
1. **页面加载完成**
- `$(document).ready(function() { ... })` 或 `jQuery(document).ready(function() { ... })`: 当文档完全加载完毕后执行指定的函数。
2. **绑定事件**
- `bind(type, [data], fn)`: 为元素绑定一个事件处理器函数。
- 示例代码:
```javascript
$("按钮").bind("click", function(event) {
alert("按钮被点击!");
});
```
- 可绑定事件包括但不限于：`click`, `dblclick`, `mousedown`, `mouseup`, `mouseover`, `mouseout`, `mousemove`, `keydown`, `keyup`, `keypress`, `change`, `submit`, `focus`, `blur`, `load`, `unload`, `resize`, `scroll`等。
通过以上知识点的介绍，我们可以看出JQuery 1.3版本提供了丰富的API，方便开发者进行DOM操作、事件绑定以及其他各种交互效果的设计。无论是对于初学者还是有经验的开发人员来说，这些知识点都是非常实用且必要的。
zfj9999992013-03-12还行吧，比较清楚
