一、什么是jQuery
jQuery其实是一堆普通的js函数(库)
1、为什么会出现jQuery?
- 减少原生js代码对dom操作时大量记忆方法。
- jQuery累积了大量的插件库,极大的简化了项目的开发。
- jQuery已经更新到了3.6.0版本,但是兼容性不太好。(jquery (v3.6.0) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务)
2、$代表什么
$相当于全局函数
$ === jQuery
window.$ = window.jQuery = jQuery
3、$() 获取到的是什么,与原生js代码获取的有什么区别
原生js获取的是dom节点,jQuery获取的是jQuery对象(是一个类数组)。$() 的返回值一定是一个类数组,也就是jQuery对象。
二、参数规则
1、css选择器
例如:$("div") 获取的是div的jQuery对象。
$(".demo")获取的是类名为demo的jQuery对象。
2、特有规则
例如:lt() (小于)、gt()(大于)、eq() (获取某jq对象的下标为多少的某jq对象) 以上的参数都是数字 获取的是下标
3、容错机制
在jQuery有着容错机制,即在$()中传入undefined或者null都不会报错,即使没获取到。
4、dom对象
将原生的dom对象转换为jQuery对象
5、函数
当文档解析完成后,触发事件DOMContentLoaded
$(function(){}) = $(function).ready(function(){})
6、传递两个参数
$('要获取的元素','该元素所属上下文')
三、jQuery特点
- 链式调用
- 循环操作
- 选择元素
DOM操作
1、获取方法
方法 | 说明 | 备注 |
.get('下标') | 获取jQuery对象中对应下标的原生dom节点。 | 如果不传参数,将返回所有的dom的jq对象的真数组。 |
.eq('下标') | 获取某下标的jq对象。可以链式调用。 | 如果不传参数,不获取任何dom的jq对象,获取的是空对象。 注意:选择器:eq() 两者功能相同,但是通过选择器调用的没有链式调用方便。 |
find('选择器') | 在当前调用的对象查找子元素。 | 对子元素进行操作。 |
filter('选择器') | 对调用的对象本身进行筛选 | 对本身进行操作 |
has('') | 筛选有哪些子元素的jq对象 | |
is('') | 做判断 | 返回布尔值 |
2、设置样式
方法 | 说明 | 备注 |
css() | 设置/获取 行内样式 | |
attr(‘属性名’) | 用来获取设置属性值 | 得到该属性名的属性值 |
prop() | 设置dom对象上的属性 |
3、设置内容
方法 | 说明 | 备注 |
html() | 设置元素的内容,获取内容,识别标签 | |
text() | 设置/获取元素的内容 | |
val() | 设置/获取 |
4、设置元素的类
方法 | 说明 |
addClass() | 添加类名 |
removeClass() | 删除类名 |
hasClass() | 判断元素是否包含某个类名 |
toggleClass() | 判断 是否有该类名 自动添加/删除 |