jQuery常用API（吐血！！！超全整理）

最新推荐文章于 2024-08-09 02:16:38 发布
最新推荐文章于 2024-08-09 02:16:38 发布
阅读量1.2k 收藏 10
点赞数 33
分类专栏： 前端知识点 文章标签： jquery 前端 javascript html5 css3 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaoshangd1209/article/details/139884087
版权

jQuery选择器

1. jQuery基础选择器
  • 原生JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery 给我们做了封装，使获取元素统一标准。
$( “选择器” ) // 里面选择器直接写CSS 选择器即可，但是要加引号
名称用法描述
ID选择器$("#id")获取指定ID的元素
全选选择器$('*')匹配所有元素
类选择器$(".class")获取同一类class的元素
标签选择器$("div")获取同一类标签的所有元素
并集选择器$("div,p,li")选取多个元素
交集选择器$("li.current")交集元素
2. jQuery层级选择器
名称用法描述
子代选择器$("ul>li");使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器$("ul li");使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
3. 隐式迭代‼️‼️‼️
  • 遍历内部DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
  • 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
4. jQuery筛选选择器
语法用法描述
:first$('li:first')获取第一个li元素
:last$('li:last')获取最后一个li元素
:eq(index)$("li:eq(2)")获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd$("li:odd")获取到的li元素中，选择索引号为奇数的元素
:even$("li:even")获取到的li元素中，选择索引号为偶数的元素
5. jQuery筛选方法‼️‼️‼️
语法用法说明
parent()$("li").parent();查找父级
children(selector)$("ul").children("li")相对于$("ul>li"),最近一级（亲儿子）
find(selector)$("ul").find("li");相对于$("ul li"),后代选择器
siblings(selector)$(".first").siblings("li");查找兄弟节点，不包括自己本身
nextAll([expr])$(".first").nextAll()查找当前元素之后所有的同辈元素
prevtAll([expr])$(".last").prevAll()查找当前元素之前所有的同辈元素
hasClass(class)$('div').hasClass("protected")检查当前的元素是否含有某个特定的泪，如果有，则返回true
eq(index)$("li").eq(2);相对于$("li:eq(2)"),index从0开始

6. jQuery里面的排他思想
  • 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css( “color”,”red”);
$(this).siblings().css(“color”,””);
7. 链式编程
  • 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');

jQuery样式操作

jQuery 可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式。

1. 操作css方法
  • 参数只写属性名，则是返回属性值
$(this).css(''color'');
  • 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');
  • 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});
2.设置类样式方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。

  • 添加类
$(“div”).addClass(''current'');
  • 移除类
$(“div”).removeClass(''current'');
  • 切换类
$(“div”).toggleClass(''current'');
3. 类操作与className区别
  • 原生JS 中className 会覆盖元素原先里面的类名。
  • jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

jQuery效果

jQuery 给我们封装了很多动画效果，最为常见的如下：

1. 显示隐藏效果
  • 显示语法规范
show([speed,[easing],[fn]])
  • 显示参数
    • 参数都可以省略，无动画直接显示。
    • speed：三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如：1000)。
    • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
    • fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
  • 隐藏语法规范
hide([speed,[easing],[fn]])
  • 隐藏参数
    • 参数都可以省略，无动画直接显示。
    • speed：三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如：1000)。
    • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
    • fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
  • 切换语法规范
toggle([speed,[easing],[fn]])
  • 切换参数
    • 参数都可以省略，无动画直接显示。
    • speed：三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如：1000)。
    • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
    • fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
    • ⚠️：平时一般不带参数，直接显示隐藏即可。
2. 滑动效果
  • 下滑效果语法规范
slideDown([speed,[easing],[fn]])
  • 下滑效果参数
    • 参数都可以省略。
    • speed:三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如：1000)。
    • easing:(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
    • fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
  • 上滑效果语法规范
slideUp([speed,[easing],[fn]])
  • 上滑效果参数
    • 参数都可以省略。
    • speed：三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如：1000)。
    • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
    • fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
  • 滑动切换效果语法规范
slideToggle([speed,[easing],[fn]])
  • 滑动切换效果参数
    • 参数都可以省略。
    • speed：三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如：1000)。
    • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
    • fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
3. 事件切换
hover([over,]out)
  • over:鼠标移到元素上要触发的函数（相当于mouseenter）
  • out:鼠标移出元素要触发的函数（相当于mouseleave）
  • 如果只写一个函数，则鼠标经过和离开都会触发它
4. 动画队列及其停止排队方法
  • 动画或效果队列：动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
  • 停止排队
  • stop()
    • stop() 方法用于停止动画或效果。
    • ⚠️：stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。
5. 淡入淡出效果
  • 淡入效果语法规范
fadeIn([speed,[easing],[fn]])
  • 淡入效果参数
    • 参数都可以省略。
    • speed：三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如：1000)。
    • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
    • fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
  • 淡出效果语法规范
fadeOut([speed,[easing],[fn]])
  • 淡出效果参数
    • 参数都可以省略。
    • speed：三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如：1000)。
    • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
    • fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
  • 淡入淡出切换效果语法规范
fadeToggle([speed,[easing],[fn]])
  • 淡入淡出切换效果参数
    • 参数都可以省略。
    • speed：三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如：1000)。
    • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
    • fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
  • 渐进方式调整到指定的不透明度
fadeTO([[speed],opacity,[easing],[fn]])
  • 效果参数
    • opacity 透明度必须写，取值0~1 之间。
    • speed：三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如：1000)。必须写
    • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
    • fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
6. 自定义动画animate
  • 语法
animate(params,[speed],[easing],[fn])
  • 参数
    • params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
    • speed：三种预定速度之一的字符串(“slow”,“normal”, or“fast”)或表示动画时长的毫秒数值(如：1000)。
    • easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
    • fn:回调函数，在动画完成时执行的函数，每个元素执行一次。

jQuery属性操作

1. 设置或获取元素固有属性值prop()

所谓元素固有属性就是元素本身自带的属性，比如<a> 元素里面的href ，比如<input> 元素里面的type。

  • 获取属性语法
prop(''属性'')
  • 设置属性语法
prop(''属性'', ''属性值'')
2. 设置或获取元素自定义属性值attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给div 添加index =“1”。

  • 获取属性语法
attr(''属性'') // 类似原生 getAttribute()
  • 设置属性语法
attr(''属性'', ''属性值'') // 类似原生 setAttribute()
3. 数据缓存data()

data() 方法可以在指定的元素上存取数据，并不会修改DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

  • 附加数据语法
data(''name'',''value'') // 向被选元素附加数据
  • 获取数据语法
date(''name'') // 向被选元素获取数据
  • 同时，还可以读取HTML5 自定义属性data-index ，得到的是数字型

jQuery文本属性值

1. 普通元素内容html()(相当于原生inner HTML)
html() // 获取元素的内容
html(''内容'') // 设置元素的内容
2. 普通元素文本内容text()(相当与原生innerText)
text() // 获取元素的文本内容
text(''文本内容'') // 设置元素的文本内容
3. 表单的值val()(相当于原生value)
val() // 获取表单的值
val(''内容'') // 设置表单的值

jQuery元素操作

主要是遍历、创建、添加、删除元素操作。

1. 遍历元素
  • jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。
  • 语法1:
    • each() 方法遍历匹配的每一个元素。主要用DOM处理。each 每一个
    • 里面的回调函数有2个参数：index 是每个元素的索引号;demEle 是每个DOM元素对象，不是jquery对象
    • 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象$(domEle)
$("div").each(function (index, domEle) { xxx; }）
  • 语法2:
    •  $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
    • 里面的函数有2个参数：index 是每个元素的索引号;element 遍历内容
$.each(object，function (index, element) { xxx; }）
2. 创建元素
  • 语法：
$("<li></li>");
  • 动态的创建了一个<li>
3. 添加元素
  • 内部添加
element.append("内容")
// 把内容放入匹配元素内部最后面，类似原生appendChild。
element.prepend("内容")
// 把内容放入匹配元素内部最前面。
  • 外部添加
element.after("内容") // 把内容放入目标元素后面
element.before("内容") // 把内容放入目标元素前面
  • 内部添加元素，生成之后，它们是父子关系。
  • 外部添加元素，生成之后，他们是兄弟关系。
4. 删除元素
element.remove() // 删除匹配的元素（本身）

element.empty() // 删除匹配的元素集合中所有的子节点
element.html('''') // 清空匹配的元素内容
  • remove 删除元素本身。
  • empt() 和html('''') 作用等价，都可以删除元素里面的内容，只不过html 还可以设置内容。

jQuery尺寸、位置操作

1. jQuery尺寸
语法用法
width() / height()取得匹配元素宽度和高度值  只算width / height
innerWidth() / innerHeight()取得匹配元素宽度和高度值  包含padding
outerWidth() / outerHeight()取得匹配元素宽度和高度值  包含padding、border
outerWidth(true) / outerHeight(true)取得匹配元素宽度和高度值  包含padding、border、margin
  • 以上参数为空，则是获取相应值，返回的是数字型。
  • 如果参数为数字，则是修改相应值。
  • 参数可以不必写单位。
2. jQuery位置

位置主要有三个：offset()、position()、scrollTop()/scrollLeft()

  • offset() 设置或获取元素偏移
    • offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
    • 该方法有2个属性left、top 。offset().top用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。
    • 可以设置元素的偏移：offset({ top: 10, left: 30 });
  • position() 获取元素偏移
    • position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
    • 该方法有2个属性left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。
    • 该方法只能获取。
  • scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
    • scrollTop() 方法设置或返回被选元素被卷去的头部。
    • 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
小董爱敲代码️
关注
专栏目录
jQuery 二 属性操作， 数据缓存data() ，内容文本值，元素遍历、创建、添加和删除操作，尺寸、位置操作，
m0_55170432的博客
03-23 345
1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。 1. 获取属性语法 2. 设置属性语法 element.prop("属性名") 1.获取元素固有的属性值 console.log($("a").prop("href")); element.prop("属性名",
jQuery API 3.3.1 中文手册
06-12
jQuery API 3.3.1 中文手册，jQuery是一个JavaScript框架，自面世以来，以其快速、简洁，能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果等功能使多很多WEB编程者对其非常热爱，本手册旨在帮助广大...
jQuery 1.11.3离线文档！！！
08-28
jQuery 1.11.3离线文档！！！
【jQuery】入门学习篇
最新发布
2201_75503057的博客
08-09 771
【jQuery】入门学习篇
自己总结的常用的JQuery
上班搞IT，下班搞ITF。
08-10 5662
获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item = $("select[@name=items] option[@selected]").text(); select下拉框的第二个元素为当前选中值 $('#select_id')[0].selectedIndex
jqueryApi
weixin_51207199的博客
05-10 319
文章目录什么是jquery？jQuery的DOM操作添加或删除calss中的操作jquery中的事件jquery中的ajax遍历与选择常用的apijQuery 效果 什么是jquery？ jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程 jquery插件里面提供一个全局的对象$和jQuery对象,本质是一个函数， $(document).ready(function(){ //预加载函数; //method }) $(function()
JQuery常用API
王顺的博客
10-26 195
JQuery常用API说明
jQuery常用API
残影的博客
05-06 655
一、 jQuery选择器 1.1 基础选择器 原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。 $(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号 1.2 层级选择器 层级选择器最常用的两个分别为：后代选择器和子代选择器。 案例： <body> <div>我是div</div> <div class="nav">我是nav div</d
jquery_api.rar_jquery a_jquery api
09-24
文档说明 　本文档旨在帮助广大javascript爱好者快速了解jquery库，以及供广大应用jquery进行开发的人员 提供一个速查手册！...本文档大部分内容收集其网络，所以任何涉jQuery的法律及权益的问题与本文档整理者无关！
jQuery API 官方文档 最新版下载
03-04
**jQuery API 官方文档详解** jQuery 是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。jQuery API（应用程序接口）是开发者使用jQuery库进行网页开发的重要...
jQuery EasyUI 1.3.6 离线简体中文API文档
04-12
最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉，由于很多人和我要chm格式的，所以本次API我提供了2种版本的API，一个还是以前的EXE格式，另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接...
Jquery API
12-07
Jquery API里面包含许多使用列子，以及一些常用函数的介绍。适合需要用Jquery的技术人员。
jQuery API 中文手册
03-21
jQuery开发手册，可用于jQuery开发过程中常用函数的查询，并且其中含有常用函数的使用案例介绍。
总结一下JQuery的常用API
kennsand的博客
01-01 1309
jQuery基本语法：$(selector).action() $:相当于jQuery对相关 (selector)：选择符（选择/查询）元素 action：对元素的操作 基本选择器： 标签选择器 $("div")阻止冒泡 event.prevenDefault() event.stopPropagation()//兼容非IE return false --结合了以上两个阻止
jQuery——常用API
@一只躺平的猪@的博客
08-01 915
JavaScript 库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。 简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。 ......
jQuery-常用API
weixin_45846980的博客
05-10 313
1-jQuery选择器 JQA-01：hide() 作用：隐藏 语法：$(‘名’).hide(); JQ-02:$(document).ready() 作用：入口函数，等着页面加载完成运行函数方法，相当于DOMContentLoaded 语法：$(document).ready(function(){ 方法 }) JQA-02S：$() 作用：跟Fun-02作用一致，升级简洁版 语法：$(function(){ 方法 }) JQA-04：$(‘选择器’) 作用：原生js获取元素的方式有很多，很杂，而且兼容性
jQuery常用api
weixin_34034261的博客
10-19 194
本文列举一些常用的jQuery的api。 $('selector').on() <ul> <li id="1">1</li> <li id="2">2</li> <li id="3">3</li> <li id="4">4</li> <l...
jQuery 的常用API整理
weixin_44185579的博客
04-05 252
1.选出来的是类数组在选出来的是类数组 在选出来的是类数组在里可以写css选择器 2.jQuery特有选择器 有点像伪类$(.wrapper ul li :first)第一个li 去字典查 可以自定义属性 (ulli[deat:′duyi′])3.jQuery有容错机制可以填undefined和null4.(ul li[ deat:&#x27;duyi&#x27; ]) 3....
jquery修改css样式!important
06-07
如果要使用jQuery修改CSS样式并强制生效（即添加`!important`），可以使用下面这种方式： ```javascript $(selector).css('cssPropertyName', 'cssPropertyValue !important'); ``` 其中，`selector`表示要修改样式的元素的选择器，`cssPropertyName`表示要修改的CSS属性名，`cssPropertyValue`表示要修改的CSS属性值。在属性值后面加上一个空格和`!important`即可强制生效。 例如，如果要将ID为`example`的元素的`color`属性修改为`red`并强制生效，可以使用以下代码： ```javascript $('#example').css('color', 'red !important'); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值