jQuery的基础操作

目录

一、jQuery的基本介绍

1.1 概念

1.2 网站

1.3 文件名

1.4 jQuery的函数方法

二、jQuery选择器

2.1  语法

2.2  支持的条件

2.3  jQuery特有的条件

三、jQuery筛选器

3.1  原理

3.2  语法

四、jQuery操作标签属性

4.1  操作布尔属性

4.2  操作其他属性

五、jQuery操作class选择器

六、jQuery操作标签内容

七、jQuery操作标签css样式

八、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.3  jQuery特有的条件

'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的隐式迭代

1. 针对jQuery伪数组的设定操作，自动循环遍历伪数组中的每一个标签对象，对每一个标签对象 执行 需要的设定操作。

2. 针对jQuery伪数组的获取操作，只获取第一个标签的数据数值，不会获取每一个标签的数据数值。

十、 jQuery的循环遍历

$().each(function(参数1,参数2){})

    参数1 索引下标

    参数2 数组的数据数值

参数2 以 js标签对象形式 存储的标签对象

不支持 jQuery的操作函数

支持 js的DOM操作语法

可以 $(参数2) 转化为 jQuery伪数组

再使用 jQuery函数执行操作

写在 each 中 的 return 只会终止 each 的程序执行

不会终止 函数中 所有程序的执行

也就是 each() 之后 函数中程序的执行 不会终止