jQuery 基础
1、jQuery 基本使用
- jQuery 概述
jQuery 是一个快速、简洁的 JavaScript 库;jQuery 封装了常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互
- jQuery官网:https://jquery.com/
- jQuery 入口函数
等待 DOM 结构渲染完毕即可执行内部代码,不必等待所有外部资源加载完成
$(function() {
... // 此处为页面 DOM 加载完成的入口
});
$(document).ready(function) {
... // 此处为页面 DOM 加载完成的入口
});
- jQuery 顶级对象 $
$ 是 jQuery 的别称,同时也是 jQuery 的顶级对象
$ 顶级对象:相当于原生 JavaScript 中的 window,把元素利用 $ 包装成 jQuery 对象,就可以调用 jQuery 方法
- DOM 对象与 jQuery 对象
区别:
DOM 对象 | jQuery 对象 |
---|---|
用原生 js 获取过来的对象 | 用 jQuery 方式获取过来的对象,本质:利用 $ 对 DOM 对象包装后产生的对象 |
转换:
// DOM 对象转换为 jQuery 对象
$('div')
// jQuery 对象转换 DOM 对象
1、$('div')[index] // index 是索引号
2、$('div').get(index)
2、jQuery 常用 API
2.1 jQuery 选择器
2.1.1 jQuery 基础选择器
- 使用
$("选择器") // 里面选择器写 CSS 选择器
- 分类
名称 | 用法 | 说明 |
---|---|---|
ID 选择器 | $(‘#id’) | 获取指定 ID 的元素 |
全选选择器 | $(‘*’) | 匹配所有元素 |
类选择器 | $(‘.class’) | 获取同一类 class 的元素 |
标签选择器 | $(‘div’) | 获取同一类标签的元素 |
并集选择器 | $(‘div,p,li’) | 选取多个元素 |
交集选择器 | $(‘li.current’) | 交集元素 |
层级选择器
名称 | 用法 | 说明 |
---|---|---|
子代选择器 | $(“ul>li”) | 使用 > 号,获取亲儿子层级的元素 |
后代选择器 | $(“ul li”) | 获取 ul 下所有的 li 元素 |
- jQuery 设置样式
$('div').css('属性','值')
- jQuery 隐式迭代
遍历内部 DOM 元素(伪数组形势存储)的过程叫做隐式迭代
- show() 显示元素,hide() 隐藏元素
2.1.2 jQuery 筛选选择器
语法 | 用法 | 描述 |
---|---|---|
:first | $(‘li:first’) | 选取第一个元素 |
:last | $(‘li:last’) | 选取最后一个元素 |
:eq(index) | $(‘li:eq(2)’) | 获取到的 li 元素中,选择索引号为 2 的元素,索引号 index 从 0 开始 |
:odd | $(‘li:odd’) | 获取到的 li 元素中,选择索引号为奇数的元素 |
:even | $(‘li:even’) | 获取到的 li 元素中,选择索引号为偶数的元素 |
2.1.3 jQuery 筛选方法
语法 | 用法 | 说明 |
---|---|---|
parent() | $(“li”).parent() | 查找父级 |
children(selector) | $(“ul”).children(“li”) | 相当于 $(“ul > li”),最近一级(亲儿子) |
find(selector) | $(“ul”).find(“li”) | 相当于 $(“ul li”),后代选择器 |
siblings(selector) | $(“.first”).siblings(“li”) | 查找兄弟节点,不包括本身 |
nextAll([expr]) | $(“.first”).nextAll() | 查找当前元素之后的所有同辈元素 |
prevtAll([expr]) | $(“.first”).prevtAll() | 查找当前元素之前的所有同辈元素 |
hasClass(class) | $(‘div’).hasClass(“protected”) | 检查当前的元素是否含有某个特定的类,如果有,则返回 true |
eq(index) | $(“li”).eq(2) | 相当于 $(“li:eq(2)”),index 从 0 开始 |
- jQuery 链式编程
$(this).css('color','red').siblings().css('color',''); // 当前元素变红色,其他兄弟元素不变色
2.2 jQuery 样式选择
- 操作 CSS 方法
jQuery 可以使用 css 方法来修改简单样式,也可以操作类,修改多个样式
- 参数只写属性名,则返回属性值