Web前端开发学习笔记12-- 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