jQuery
文章平均质量分 68
前端OnTheRun
这个作者很懒,什么都没留下…
展开
-
2021-11-23 使用jQuery实现一个翻翻乐小游戏
1.项目需求翻翻乐游戏:在若干张显示背面的图片中,连续点击其中两张,若翻过来发现是一样的,那么会固定住,不会再回翻,若翻过来发现是不一样的,那么两张图片会自动会回翻游戏结束:所有的图片配对成功时则视为游戏结束2.核心思路玩家点击鼠标左键可以翻牌==>点击div实现3d翻转玩家连续点击两张牌两张牌一样==>取消这两个div的翻转两张牌不一样==>自动再次翻转回去结束游戏==>所有div都没有背景图原创 2021-11-23 20:47:35 · 174 阅读 · 0 评论 -
2022-03-21 工具文件:reset.css去除默认样式,在线jQuery链接,在线flexible.js链接,在线引入vue
1.reset.css2.在线jQuery链接3.在线flexible.js链接4.在线引入vue.js原创 2022-03-21 21:17:16 · 255 阅读 · 0 评论 -
2022-02-15 jQuery的on方法中的多个参数分别代表的含义
childSelector,data,function);参数说明:event 必须 事件的名称(可以自定义) 支持绑定多个事件 多个事件用空格分开 也可以是map参数和数组childSelector 可选 添加事件程序的子元素而且不是父选择器本身data 可选 传递到事件对象 event的额外的参数-function 必选 规定事件发生时运行的函数主要是childSelector和data两个可选参数不常见使用场景在大div里绑定点击事件,on参数中写其子元素,可以触发针对子元素的原创 2022-02-15 21:33:45 · 314 阅读 · 0 评论 -
2022-06-07 jQuery笔记(一) jq基本使用,引入,选择器,事件,显隐滑动淡进淡出效果,动画和停止动画,回调,链式操作
1.第一个jQuery例子2.jQuery库功能3.script标签的简化4.引入jQuery5.jQuery语法6.文档就绪事件7.jQuery选择器8.jQuery事件事件:页面对不同访问者的响应事件处理程序:当html发生某些事件时调用的方法事件语法:与DOM事件等效的方法9.jQuery效果9.1.显示与隐藏9.2.淡入淡出9.3.滑动10.jQuery效果:动画10.1.animate()可操作多个属性10.2.animate()可操作相对属性值10.3.ani原创 2022-06-07 21:51:43 · 382 阅读 · 1 评论 -
2022-06-23 轮播库swiper.js的引入和使用
复习:引入和使用一个外部插件的流程2022-06-22 jQuery如何引入和使用外部插件(以轮拨图插件OwlCarousel2为例)swiper.js介绍和下载swiper是一款免费以及轻量级轮播滑动的js框架,是非常常用的轮播库官网地址:swiper中文网下载:swiper-8.3.0.zip在线演示和使用导航(必看)在线演示使用方法引入文件和DOM结构需要引入的css文件和js文件 ...原创 2022-06-23 20:06:45 · 549 阅读 · 0 评论 -
2022-06-22 jQuery如何引入和使用外部插件(以轮拨图插件OwlCarousel2为例)
文章目录1.下载2.打开readme.md文件3.引入外部css文件和js文件3.1.引入两个css文件3.2.引入一个js文件(放在引入jQuery的script标签之后)4.引入HTML结构并改成自己的img标签5.调用插件6.引入相关参数6.1.同时显示图片数6.2.自动回到第一张/最后一张6.3.自动轮拨7.完整代码8.效果原创 2022-06-22 21:37:49 · 173 阅读 · 0 评论 -
2022-06-21 jQuery自定义插件的定义和使用(以选项卡为例)
文章目录jQuery插件的概念插件引入时必须遵守的规定自定义选项卡插件tabs引入样式和js改进:改进默认选中的方式和获取节点的方式改进:将js和css放到单独文件中并在新的html中引入结果改进:html只保留框架,里面的li节点通过动态获取并初始化vue组件:把css,js都组装在一起的插件,只需输入标签名原创 2022-06-21 20:05:35 · 434 阅读 · 0 评论 -
2022-06-20 jQuery案例:全选
要求1.勾选全选复选框,商品列表的复选框也跟着被选中2.每个商品复选框也有单独的点击事件,当每一个商品复选框都被选中时,全选复选框也自动被选中原创 2022-06-20 22:00:20 · 64 阅读 · 0 评论 -
2022-06-15 jQuery事件委托解决绑定事件无法响应后续加入的节点的bug
问题描述代码 var arr = [111, 2222, 33333]; for (var i = 0; i < arr.length; i++) { $(`${arr[i]}删除`).appendTo("#box"); } $("#box button").click(function() { // console.log($原创 2022-06-15 19:58:11 · 137 阅读 · 0 评论 -
2022-06-14 jQuery笔记(三) 节点操作:创建,插入,删除,克隆
文章目录1.创建节点代码结果2.插入节点2.1.父子节点代码结果2.2.兄弟节点代码结果3.替换节点代码结果4.删除节点代码结果5.克隆节点5.1.不传参代码结果5.2.传参代码结果原创 2022-06-14 22:45:16 · 540 阅读 · 0 评论 -
2022-06-13 jQuery案例:滑动选项卡
思路设置一个单独的选中框,通过在animate中设置其left值,造成其从当前选项往目标选项移动的动画效果,设置其层级,确保其处于选项内容的下方底部内容随顶部选项卡改变原创 2022-06-13 22:30:32 · 228 阅读 · 0 评论 -
2022-06-12 jQuery案例:手风琴效果的实现
思路鼠标移入:当前所在li对应的宽度增加,其表兄弟宽度减小鼠标移出:宽度恢复在animate()动画前加stop(),是为了防止鼠标快速移动时,animate动画要全部执行,造成不好的类似幻灯片的效果原创 2022-06-12 22:23:50 · 126 阅读 · 0 评论 -
2022-06-11 jQuery案例:树状菜单(以树状结构展开和折叠的菜单和其子菜单)
思路1.ul>li前的"+“,”-"号使用伪元素选择器::before{}添加,如在正式网页中,可以用iconfont图标,达到更好的视觉效果2.点击展开和折叠不用display:block和none,而是用slideToggle(),效果更好3.为ul>li绑定点击事件后,点击一个li就让其子元素ol展开和折叠,若只允许展开一个li,则让当前li的所有表兄弟都向上折叠即可原创 2022-06-11 07:58:06 · 565 阅读 · 0 评论 -
2022-06-10 jQuery案例:鼠标跟随显示悬浮信息
思路鼠标移入 悬停信息显示鼠标移出 悬停信息隐藏鼠标移动 悬停信息随鼠标移动代码 div { margin: 100px; width: 150px; height: 50px; background: pink; /*穿透*/ /* pointer-events: none; */ } p { position: relative;原创 2022-06-10 22:43:39 · 735 阅读 · 0 评论 -
2022-06-09 jQuery案例:选项卡(顶部选项和底部内容的同步切换)
思路在鼠标点击事件中,为当前鼠标选中的li添加active类(含有选中的样式),获取此li的索引利用此索引,显示对应的第index个底部box li内容原创 2022-06-09 20:39:03 · 92 阅读 · 0 评论 -
2022-06-08 jQuery笔记(二) jq操作class,操作属性,操作偏移量
1.jQuery操作class1.1.为节点添加和删除一个class代码结果1.2.添加删除class的使用场景:选项卡的快速切换代码(思路:链式操作+隐式操作)1.3.节点是否存在该class以及切换toggleClass代码2.jQuery操作属性attr()设置获取和删除元素属性代码prop()只能操作原生属性代码结论3.jQuery操作偏移量offset():获取距屏幕左上角的left和top值,若传参就是设置获取和设置没有定位的元素的偏移量设置和获取带有定位的元素原创 2022-06-08 00:13:46 · 199 阅读 · 0 评论