jQuery的基础操作（一）

最新推荐文章于 2022-07-12 19:03:35 发布

大聪明码农徐

最新推荐文章于 2022-07-12 19:03:35 发布

阅读量500

点赞数 2

分类专栏： jQuery基础文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_45799465/article/details/122972889

版权

jQuery基础专栏收录该内容

5 篇文章 1 订阅

订阅专栏

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

针对jQuery伪数组的设定操作，自动循环遍历伪数组中的每一个标签对象，对每一个标签对象执行需要的设定操作。
针对jQuery伪数组的获取操作，只获取第一个标签的数据数值，不会获取每一个标签的数据数值。

十、 jQuery的循环遍历

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

参数1 索引下标

参数2 数组的数据数值

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

不支持 jQuery的操作函数

支持 js的DOM操作语法

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

再使用 jQuery函数执行操作

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

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

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