#早前2024年笔记收纳整理
目录
一：Jquery 概念
二：快速入门步骤
三：JQuery对象和JS对象区别及转换
四：事件绑定、入口函数、样式控制
五： 选择器
1. 基本选择器
2. 层级选择器
3. 属性选择器
4.过滤选择器
5. 表单过滤选择器
六：DOM操作
6.1 内容操作
6.2 属性操作
6.3 CRUD操作
1 内部插入（在元素内部添加子元素）
2 外部插入（在元素旁边添加兄弟元素）
3. 移除与清空操作
4. 替换操作
5. 包裹操作
6. 克隆操作
七：案例
一：Jquery 概念
JQuery是一个JavaScript框架，用来简化JS开发。
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已。
二：快速入门步骤
1. 下载JQuery * 目前JQuery有三大版本，注意它们之间的一些区别,另外不同后缀的区别： * jquery-xxx.js:开发版本。给程序员看的，有良好的缩进和注释。体积大一些。 * jquery-xxx.min.js:生产版本。程序中使用，没有缩进。体积小些。程序加载更快 2. 导入JQuery的js文件：选择导入后缀为min.js的文件 3. 使用
三：JQuery对象和JS对象区别及转换
– JQuery对象在操作时更加方便 – JQuery对象和js对象方法时不通用的 – 两者之间的相互转换 jq –> js: jq对象[索引] 或者 jq对象.get(索引) js –> jq: $(js对象)
四：事件绑定、入口函数、样式控制
– 事件绑定：$("#b1").click(function(){…}); – 入口函数：$(function(){});
！ window.onload 和 $(function)区别： window.onload只能定义一次，如果定义多次，后边的会将前边的覆盖掉 $(function)可以定义多次
– 样式控制：css方法 $(function(){ $("#div1").css("background-color","red"); $("#div2").css("backgroundColor","pink"); });
五： 选择器
1. 基本选择器
|
标签选择器 （元素选择器） |
$("html标签名") | 获得所有匹配标签名的元素 |
| id选择器 | $("#id的属性值") | 获得与指定id属性值匹配的元素 |
| 类选择器 | $(".class的属性值") | 获取与指定的class属性值匹配的元素 |
| 并集选择器 | $("选择器1，选择器2…") | 获取多个选择器选中的所有元素 |
2. 层级选择器
| 后代选择器 | $("A B") |
选择A元素内的所有B元素 （包括孙子辈的B ） |
| 子选择器 | $("A > B") | 选择A元素内的所有B子元素 |
3. 属性选择器
| 属性名称选择器 | $("A[属性名]") | 包含指定属性的选择器 |
| 属性选择器 | $("A[属性名='值']") | 包含指定属性等于指定值的选择器 |
| 复合属性选择器 | $("A[属性名='值'][]…") | 包含多个属性条件的选择器 |
4.过滤选择器
| 首元素选择器 | :first | 获得选择元素中的第一个元素 |
| 尾元素选择器 | :last | 获得选择元素中的最后一个元素 |
| 非元素选择器 | :not(selecter) | 不选择指定的元素 |
| 偶数选择器 | :even | 偶数，从0开始计数 |
| 奇数选择器 | :odd | 奇数，从0开始计数 |
| 等于索引选择器 | :eq(index) | 指定索引元素 |
| 大于索引选择器 | :gt(index) | 大于指定索引元素 |
| 小于索引选择器 | :lt(index) | 小于指定索引元素 |
| 标题选择器 | :header | 获得标题元素，固定写法 |
5. 表单过滤选择器
| 可用元素选择器 | :enabled | 获得可用元素 |
| 不可用元素选择器 | :disabled | 获得不可用元素 |
| 选中选择器 | :checked | 获得单选/复选框中的元素 |
| 选中选择器 | :selected | 获得下拉框中的元素 |
六：DOM操作
6.1 内容操作
- html(): 获取/设置元素的标签体内容 <a><font>内容</font></a> –> <font>内容</font>
- text(): 获取/设置元素的标签体纯文本内容 <font>内容</font> –> 内容
- val(): 获取/设置元素的value属性值
- clone():克隆匹配的DOM元素并且选中这些克隆的副本
6.2 属性操作
– 通用属性操作 1. attr(): 获取/设置元素的属性 2. removeAttr(): 删除属性 3. prop(): 获取/设置元素的属性 4. removeProp(): 删除属性 ！注意attr和prop的区别： 如果操作的是元素的固有属性，则建议使用prop 如果操作的是元素自定义属性，则建议使用attr
– 对class属性操作 1. addClass(): 添加class属性值 2. removeClass(): 删除class属性 3. toggleClass(): 切换class属性 4. css():设置样式
！注意 toggleClass("one"): 判断如果元素对象上存在class="one",则将属性值one删掉 如果不存在，则添加
6.3 CRUD操作
1 内部插入（在元素内部添加子元素）
| append() | 父元素.append(子元素) | 将子元素追加到父元素内部的末尾 |
| prepend() | 父元素.prepend(子元素) | 将子元素追加到父元素内部的开头 |
| appendTo() | 子元素.appendTo(父元素) | 将子元素追加到父元素内部的末尾（与 append() 操作对象相反） |
| prependTo() | 子元素.prependTo(父元素) | 将子元素追加到父元素内部的开头（与 prepend() 操作对象相反） |
2 外部插入（在元素旁边添加兄弟元素）
| after() | 目标元素.after(新元素) | 将新元素添加到目标元素的后面，二者为兄弟关系 |
| before() | 目标元素.before(新元素) | 将新元素添加到目标元素的前面，二者为兄弟关系 |
| insertAfter() | 新元素.insertAfter(目标元素) | 将新元素添加到目标元素的后面（与 after() 操作对象相反） |
| insertBefore() | 新元素.insertBefore(目标元素) | 将新元素添加到目标元素的前面（与 before() 操作对象相反） |
3. 移除与清空操作
| remove() | 元素.remove() | 彻底移除该元素及其所有子元素和绑定的事件 |
| empty() | 元素.empty() | 清空该元素的所有子元素，但保留元素本身及其属性和事件 |
| detach() | 元素.detach() | 移除元素，但保留其数据和事件，可重新插入 |
4. 替换操作
| replaceWith() | 旧元素.replaceWith(新元素) | 用新元素替换旧元素 |
| replaceAll() | 新元素.replaceAll(旧元素) | 用新元素替换所有匹配的旧元素（操作对象相反） |
5. 包裹操作
| wrap() | 元素.wrap(包裹元素) | 用包裹元素将每个匹配元素单独包裹起来 |
| wrapAll() | 元素.wrapAll(包裹元素) | 用包裹元素将所有匹配元素作为一个整体包裹起来 |
| wrapInner() | 元素.wrapInner(包裹元素) | 用包裹元素将每个匹配元素的内部内容包裹起来 |
6. 克隆操作
| clone() | 元素.clone([withDataAndEvents]) | 创建元素的副本，参数为 true 时会复制数据和事件 |
七：案例
- 隔行换色
- 全选和全不选
- QQ表情选择
- 多选框下拉框左右移动
