jQuery常用API

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() 方法

jQuery常用API_第1张图片

移除事件 —— off() 方法

绑定的和删除的必须是同一个函数
jQuery常用API_第2张图片

只执行一次的one() 方法

jQuery常用API_第3张图片

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

jQuery常用API_第4张图片

jQuery可以直接使用的事件

click事件

jQuery常用API_第5张图片

dblclick事件

jQuery常用API_第6张图片

scroll事件

jQuery常用API_第7张图片

hover事件

jQuery常用API_第8张图片

ready事件

jQuery常用API_第9张图片

jquery阻止冒泡事件

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

jQuery常用API_第10张图片

jQuery阻止默认事件

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

jQuery常用API_第11张图片

jQuery的隐士迭代

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

jQuery的元素操作

创建元素

在这里插入图片描述

内部插入元素

jQuery常用API_第12张图片

外部插入元素

jQuery常用API_第13张图片

替换元素

jQuery常用API_第14张图片

删除元素

jQuery常用API_第15张图片

克隆元素

jQuery常用API_第16张图片

jQuery的元素尺寸操作

操作元素的宽和高

jQuery常用API_第17张图片

获取元素的内置宽和高

jQuery常用API_第18张图片

获取元素的外置宽和高

jQuery常用API_第19张图片

jQuery的元素位置

元素相对于页面的位置

jQuery常用API_第20张图片

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

在这里插入图片描述

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

jQuery常用API_第21张图片

jQuery的动画

show() 动画 显示动画

jQuery常用API_第22张图片

hide() 动画 隐藏动画

jQuery常用API_第23张图片

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

jQuery常用API_第24张图片

slideDown() 动画 下拉显示

jQuery常用API_第25张图片

slideUp() 动画 上拉隐藏

jQuery常用API_第26张图片

slideToogle() 动画 上下切换动画

jQuery常用API_第27张图片

fadeIn() 动画 逐渐显示动画

jQuery常用API_第28张图片

fadeOut() 动画 逐渐隐藏动画

jQuery常用API_第29张图片

fadeToogle() 动画 渐隐渐显动画

jQuery常用API_第30张图片

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

jQuery常用API_第31张图片

animate() 动画 自定义动画

jQuery常用API_第32张图片

stop() 停止动画

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

finish() 完成时动画

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

jQuery的ajax

get请求

jQuery常用API_第33张图片

post请求

jQuery常用API_第34张图片

综合发送ajax请求

jQuery常用API_第35张图片

发送jsonp请求

jQuery常用API_第36张图片

ajax的全局函数

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

ajaxStart()

ajax请求,在开始的时候,会触发这个函数,多个请求只会触发一次
jQuery常用API_第37张图片

ajaxSend()

任意一个 ajax 请求,在准备 send 之前会触发这个函数
jQuery常用API_第38张图片

ajaxSuccess()

任意一个 ajax 请求在成功时会触发这个函数
jQuery常用API_第39张图片

ajaxError()

人一个 ajax 请求在失败的时候会发这个函数
jQuery常用API_第40张图片

ajaxComplete()

任意一个 ajax 请求在完成时会触发这个函数
jQuery常用API_第41张图片

ajaxStop()

所有 ajax 请求都结束时会触发这个函数只会触发一次
jQuery常用API_第42张图片

jQuery的多库共存

多库共存是什么

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

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

jQuery常用API_第43张图片

操作步骤 —— 更换控制权

jQuery常用API_第44张图片

jQuery的插件扩展

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

jQuery常用API_第45张图片

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

jQuery常用API_第46张图片
详细jQueryAPI方法jQuery官网查看

你可能感兴趣的:(jQuery常用API)