jQuery常用API

最新推荐文章于 2022-05-13 17:23:48 发布

靠谱的小董

最新推荐文章于 2022-05-13 17:23:48 发布

阅读量232

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_43495846/article/details/104772601

版权

jQuery的特点

优质的选择器和筛选器
方便的隐士迭代
强大的链式编程

引入方法

必须下载导入jQuery包
也就是：jquery.js 或者 jquer.min.js

jQuery的选择器

选择器——用来获取DOM元素的方法

匹配id属性的属性值
匹配clss属性的属性值，也就是类名
匹配标签名称
匹配标签结构
匹配属性属性值选择器
匹配组合选择器
匹配结构伪类选择器

jQuery的筛选器

筛选器——对选择器获取到的一组标签对象进行筛选

.first() 匹配第一个
.last() 匹配最后一个
.eq() 匹配下标
.prev() 匹配上一个兄弟
.prevAll() 匹配上面所有的兄弟
.next() 匹配下一个兄弟
.nextAll() 匹配下面所有的兄弟
.siblings() 匹配所有兄弟，不管上下
.parent() 匹配直接父级
.parents() 匹配所有父级
.end() 匹配链式编程的上一级
.find() 匹配指定条件的标签

jQuery的属性操作

.attr()方法

标签对象.attr(属性) 获取指定属性的属性值
标签对象.attr(属性，属性值) 设定属性和属性值
标签对象.attr(自定义属性，属性值) 设定自定义属性和属性值

.removerAttr()方法

标签对象.removeAttribute(属性) 删除指定的属性

jQuery的样式操作

标签对象.css(属性) 获取指定属性的属性值
标签对象.css(属性，属性值) 设定属性以及属性值
标签对象.css({ 属性：属性值 }) 以对象的形式，设定属性以及属性值，也可以同时设定多个属性，且定义方式比较灵活

jQuery标签对象的内容操作

.html()方法

效果类似于JavaScript的innerHTML

标签对象.html() 没有参数是获取内容
标签对象.html(内容) 带有参数是设定内容

.text()方法

效果类似于JavaScript的innerText

标签对象.text() 没有参数是获取标签内容
标签对象.text(内容) 带有参数是设定标签内容

jQuery的事件操作

绑定事件 —— on() 方法

绑定事件

移除事件 —— off() 方法

绑定的和删除的必须是同一个函数
移除事件

只执行一次的one() 方法

one() 方法

直接触发事件 —— trigger() 方法

trigger() 方法

jQuery可以直接使用的事件

click事件

click() 方法

dblclick事件

dblclick() 方法

scroll事件

scroll() 方法

hover事件

hover() 方法

ready事件

ready() 方法

jquery阻止冒泡事件

事件对象.stopPropagation() 或者 return false

阻止事件冒泡

jQuery阻止默认事件

事件对象.preventDefault() 或者 return false

阻止默认事件

jQuery的隐士迭代

常见的操作方式
隐式 — 计算机程序默认自动执行的操作
迭代 — 此处指的是便利操作
总结：jQuery会默认对集合中的所有标签对象循环遍历都执行相应的操作
DEMO
jQuery的Tab切换

jQuery的元素操作

创建元素

在这里插入图片描述

内部插入元素

在这里插入图片描述

外部插入元素

在这里插入图片描述

替换元素

在这里插入图片描述

删除元素

在这里插入图片描述

克隆元素

在这里插入图片描述

jQuery的元素尺寸操作

操作元素的宽和高

在这里插入图片描述

获取元素的内置宽和高

在这里插入图片描述

获取元素的外置宽和高

在这里插入图片描述

jQuery的元素位置

元素相对于页面的位置

在这里插入图片描述

元素相对于父级元素的偏移量

在这里插入图片描述

获取页面卷去的宽度和高度

在这里插入图片描述

jQuery的动画

show() 动画显示动画

在这里插入图片描述

hide() 动画隐藏动画

在这里插入图片描述

toggle() 动画显示隐藏切换动画

在这里插入图片描述

slideDown() 动画下拉显示

在这里插入图片描述

slideUp() 动画上拉隐藏

在这里插入图片描述

slideToogle() 动画上下切换动画

在这里插入图片描述

fadeIn() 动画逐渐显示动画

在这里插入图片描述

fadeOut() 动画逐渐隐藏动画

在这里插入图片描述

fadeToogle() 动画渐隐渐显动画

在这里插入图片描述

fadeTo() 动画变换到指定的透明度

在这里插入图片描述

animate() 动画自定义动画

在这里插入图片描述

stop() 停止动画

当前动画直接停止。动画就停止在当前位置，然后立即执行下一次动画效果

finish() 完成时动画

当前动画直接停止。动画直接执行至终止的状态，然后立即执行下一次动画效果

jQuery的ajax

get请求

在这里插入图片描述

post请求

在这里插入图片描述

综合发送ajax请求

在这里插入图片描述

发送jsonp请求

在这里插入图片描述

ajax的全局函数

全局的ajax函数，也被称作钩子函数
所谓的钩子函数，也就是在整个ajax执行到某个状态时，执行的函数而且每个ajax请求钩子函数都会触发

ajaxStart()

ajax请求，在开始的时候，会触发这个函数，多个请求只会触发一次
在这里插入图片描述

ajaxSend()

任意一个 ajax 请求，在准备 send 之前会触发这个函数
在这里插入图片描述

ajaxSuccess()

任意一个 ajax 请求在成功时会触发这个函数
在这里插入图片描述

ajaxError()

人一个 ajax 请求在失败的时候会发这个函数
在这里插入图片描述

ajaxComplete()

任意一个 ajax 请求在完成时会触发这个函数
在这里插入图片描述

ajaxStop()

所有 ajax 请求都结束时会触发这个函数只会触发一次
在这里插入图片描述

jQuery的多库共存

多库共存是什么

JQuery通过$() 或者 jQuery() 这两个暴露方法来操作，如果有其他类库，暴露的也就是这两个，就会造成使用上的冲突，此时就需要多库共存

操作步骤 —— 完全交出控制权

在这里插入图片描述

操作步骤 —— 更换控制权

在这里插入图片描述

jQuery的插件扩展

jQuery.extend —— 扩展给自己只能通过jQuery来调用

在这里插入图片描述

jQuery.fn.extend —— 扩展给元素集

在这里插入图片描述
详细jQueryAPI方法jQuery官网查看

靠谱的小董

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery常用API

jQuery的特点优质的选择器和筛选器方便的隐士迭代强大的链式编程引入方法必须下载导入jQuery包也就是：jquery.js 或者 jquer.min.jsjQuery的选择器选择器——用来获取DOM元素的方法匹配id属性的属性值匹配clss属性的属性值，也就是类名匹配标签名称匹配标签结构匹配属性属性值选择器匹配组合选择器匹配结构伪类选择器jQuery的筛...
复制链接

扫一扫