
jQuery
文章平均质量分 52
jQuery个人笔记
Southern Wind
前端开发
个人博客:https://nanchen042.github.io/docs/
稀土掘金: https://juejin.cn/user/1588130256005415/posts
展开
-
JQuery——BreakingNews.js新闻滚动效果
BreakingNews.js新闻列表滚动效果原创 2023-03-28 11:22:56 · 910 阅读 · 0 评论 -
jQuery——手风琴完美实现效果(不会出现重复点击动画还没加载完成)
注意:这类效果解决了用户连续点击父元素展开会出现动画未结束一直执行的效果,只有动画结束之后才会继续执行点击事件。原创 2022-07-14 12:01:42 · 3209 阅读 · 4 评论 -
jQuery——td中添加input并求和
很简单,自行尝试即可原创 2022-07-08 17:00:18 · 946 阅读 · 0 评论 -
jQuery——Tab栏切换
简单tab栏切换实现效果如下: 完整代码:原创 2022-06-27 16:12:46 · 5775 阅读 · 0 评论 -
JQuery—— 过滤
过滤:可以允许在一组元素中的位置来选择一个特定的元素最基本的三个过滤方法分别是first(), last() 和 eq()一、first()方法:返回首个元素看下面例子:如果我想获取div中的第一个元素或者是p标签的第一个元素就可以使用此方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa原创 2021-09-15 09:57:22 · 291 阅读 · 0 评论 -
jQuery-同胞
一、siblings()方法返回被选元素的所有同胞(不包含自己)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia原创 2021-09-09 09:50:06 · 262 阅读 · 0 评论 -
jQuery-后代
后代指的是子,孙,子孙 有两种方法,方法如下:children()方法:返回被选元素的所有直接子元素,(父亲找儿子)例如我想选取ul的儿子(li):<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v原创 2021-09-08 19:42:08 · 359 阅读 · 0 评论 -
jQuery- 遍历-祖先
直接看图:遍历-祖先parent():返回被选元素的父级parents():返回被选元素的所有祖先元素parentsUntil():返回介于两个给定元素之间的所有元素祖先 = 父亲、祖父、曾祖父这些方法用于向上遍历DOMparent():以p元素为中心,向上取父元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...原创 2021-09-08 10:58:50 · 206 阅读 · 0 评论 -
jQuery-css方法
一、返回css属性语法:css("propertyname");可以获取css的某个属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=dev.原创 2021-09-07 11:49:10 · 215 阅读 · 0 评论 -
jQuery-删除元素
删除元素有两种方法remove():删除被选元素(及其子元素)empty():从被选元素中删除子元素remove()代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"原创 2021-09-06 10:13:30 · 697 阅读 · 0 评论 -
jQuery-添加元素
添加新内容有四种方法:append():选中的元素的末尾插入prepend():选定元素的开头插入after():在被选元素之后插入before():在被选元素之前插入<body> <p>1</p> <button>点击添加元素</button> <script src="../jquery-3.6.0.js"></script> <script>原创 2021-09-06 09:40:42 · 288 阅读 · 0 评论 -
jQuery 设置
设置内容 - text()、html() 以及 val()<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca原创 2021-09-05 15:22:13 · 232 阅读 · 0 评论 -
jQuery-获取内容
获取内容的三种方法:text():设置或者返回元素文本内容html():设置或者返回所选的元素内容(包含html标记)val():返回表单值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie原创 2021-09-05 14:49:34 · 905 阅读 · 0 评论 -
jQuery效果-动画
animate()方法用于创建自定义动画。 语法:$(selector).animate({params},speed,callback);<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="..原创 2021-09-04 16:32:07 · 160 阅读 · 1 评论 -
jQuery 效果 - 滑动
效果如下(图一):使用jQuery 的滑动方法可以上下滑动元素。jQuery slideDown()向下滑动元素。语法:$(selector).slideDown(speed,callback);speed 显示效果的时长。它可以取以下值:slow、fast或者毫秒数。callback 滑动完成后所执行的函数名称。(图二)<!DOCTYPE html><html lang="en"><head> <meta...原创 2021-09-03 13:24:55 · 557 阅读 · 0 评论 -
常用的jQuery事件方法
在jQuery中,大多数DOM事件都有一个等效的jQuery方法。如果想在页面中指定一个点击事件,语法格式如下:$('p').click();下一步就是点击后所触发的事件。可以通过一个函数实现$("p").click(function(){ // 触发事件过后所执行的代码});下面说一下常用的事件方法$(document).ready()$(document).ready()方法允许在文档完全加载完毕后执行函数。clickclick()方法是当用户点击htm原创 2021-09-01 16:31:17 · 950 阅读 · 0 评论 -
jQuery 效果- 隐藏和显示
隐藏和显示如图所示:jQuery hide() 和 show()可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,它的语法为$(selector).hide(speed,callback);$(selector).show(speed,callback);speed :显示元素出现的速度,通常以毫秒表示,也可以使用fast和slow。callback :(可选) 参数是隐藏或显示完成后所执行的函数名称。下面写出...原创 2021-09-02 11:26:50 · 630 阅读 · 1 评论 -
jQuery 效果 - 淡入淡出
效果附上:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-09-02 17:53:02 · 471 阅读 · 1 评论