目录
一、jQuery的基本介绍
1.1 概念
1.2 网站
1.3 文件名
1.4 jQuery的函数方法
二、jQuery选择器
2.1语法
2.2支持的条件
2.3jQuery特有的条件
三、jQuery筛选器
3.1原理
3.2语法
四、jQuery操作标签属性
4.1操作布尔属性
4.2操作其他属性
五、jQuery操作class选择器
六、jQuery操作标签内容
七、jQuery操作标签css样式
八、jQuery获取标签的占位
【jQuery基础|jQuery的基础操作】九、jQuery的隐式迭代
十、 jQuery的循环遍历
一、jQuery的基本介绍
1.1 概念
jQuery是前端的一个类库，本质上是一个JavaScript文件，其中定义了很多函数方法。通过导入jQuery文件可以调用其中封装定义的函数。jQuery的操作本质好事js操作，只是将js的操作封装定义成函数程序，调用函数程序，本质上执行的仍然是js的操作。
1.2 网站
官网 https://jquery.com/
中文 https://jquery.cuishifeng.cn/
1.3 文件名
jquery.min.js压缩的jQuery文件
jQuery.js原生的jQuery文件
使用时只需要和引入普通js程序一样引入即可。
1.4 jQuery的函数方法
$('条件').函数()
jQuery('条件').函数()操作标签对象伪数组的方法
$.函数方法()
jQuery.函数方法()jQuery本身定义的函数方法
二、jQuery选择器
2.1语法
$('条件')或jQuery('条件')
2.2支持的条件
和JavaScript中的queryselect一样支持HTML，css的语法形式。
例如：
'#id'
'.class'
'[属性="属性值"]'
'ul>li'
'ul>li:first-child'
'ul>li:nth-child(3)'
2.3jQuery特有的条件
| 'ul>li:first' |
获取 li中的 第一个 |
| 'ul>li:last' |
获取 li中的 最后一个 |
| 'ul>li:eq(索引下标)' |
从 0 开始 按照索引下标获取li标签 |
| 'ul>li:odd()' |
按照 奇数索引下标 获取 li标签
获取的是偶数个数的li标签 |
| 'ul>li:even()' |
按照 偶数索引下标 获取 li标签
获取的是奇数个数的li标签 |
三、jQuery筛选器
3.1原理
在 jQuery编程中 有一种 编程方式 称为 链式编程，选择器和筛选器配合可以完成jQuery的链式编程。
3.2语法
jQuery筛选器
| $().first() |
获取 第一个 标签对象 |
| $().first() |
获取 最后一个 标签对象 |
| $().eq(索引下标) |
按照索引下标查询 |
| $().prev() |
获取 上一个 标签对象 |
| $().next() |
获取 下一个 标签对象 |
| $().prevAll() |
获取 上所有 标签对象 |
| $().nextAll() |
获取 下所有 标签对象 |
| $().siblings() |
获取 所有 兄弟标签对象 |
| $().parent() |
获取 直接 父级标签对象 |
| $().parents() |
获取 所有 父级标签对象 |
| $().find(条件) |
按照条件查询 |
| $().index() |
获取 标签对象的索引下标 |
| $().end() |
返回上一个操作对象 |
四、jQuery操作标签属性
4.1操作布尔属性
| $().prop( 属性 , 属性值 );
|
设定 属性值 |
| $().prop( 属性 ) |
获取 属性值 |
| $().removeProp( 属性 ) |
删除 属性 |
4.2操作其他属性
| $().attr( 属性 , 属性值 );
|
设定属性 |
| $().attr( 属性 ) |
获取属性 |
| $().removeAttr( 属性 ) |
删除属性 |
五、jQuery操作class选择器
$().addClass()
|
新增 |
$().removeClass()
|
删除 |
$().hasClass()
|
判断有没有，有返回true，没有返回false |
$().toggleClass()
|
切换 |
六、jQuery操作标签内容
$().html();
|
获取标签内容，解析HTML标签 |
$().text();
|
获取标签内容，不解析HTML标签 |
$().val();
|
配合点击事件获取input的内容 |
七、jQuery操作标签css样式
$().css('属性' , 属性值);
|
一次 只 设定一个css属性和属性值
|
$().css( {属性1:属性值1 , 属性2:属性值2 , 属性3:属性值3...} )
|
一次 设定 多个属性属性值
|
八、jQuery获取标签的占位
$().height()$().width()
|
内容 宽高
|
$().innerHeight()$().innerWidth()
|
内容 + padding
|
$().outerHeight()$().outerWidth()
|
内容 + padding + border
|
$().outerHeight(true)$().outerWidth(true)
|
内容 + padding + border + margin
|
$().offset()
|
获取 标签 和 html页面的间距
执行结果是一个对象
left 属性 存储 左间距
top属性 存储 上间距
|
九、jQuery的隐式迭代
- 针对jQuery伪数组的设定操作，自动循环遍历伪数组中的每一个标签对象，对每一个标签对象 执行 需要的设定操作。
- 针对jQuery伪数组的获取操作，只获取第一个标签的数据数值，不会获取每一个标签的数据数值。
十、 jQuery的循环遍历
$().each(function(参数1,参数2){})
参数1 索引下标
参数2 数组的数据数值
参数2 以 js标签对象形式 存储的标签对象
不支持 jQuery的操作函数
支持 js的DOM操作语法
可以 $(参数2) 转化为 jQuery伪数组
再使用 jQuery函数执行操作
写在 each 中 的 return 只会终止 each 的程序执行
不会终止 函数中 所有程序的执行
也就是 each() 之后 函数中程序的执行 不会终止
推荐阅读
