GAARA

1.项目需求 翻翻乐游戏: 在若干张显示背面的图片中,连续点击其中两张, 若翻过来发现是一样的,那么会固定住,不会再回翻, 若翻过来发现是不一样的,那么两张图片会自动会回翻 游戏结束:所有的图片配对成功时则视为游戏结束 2.核心思路 玩家点击鼠标左键可以翻牌==>点击div实现3d翻转 玩家连续点击两张牌 两张牌一样==>取消这两个div的翻转 两张牌不一样==>自动再次翻转回去 结束游戏==>所有div都没有背景图

1.reset.css 2.在线jQuery链接 3.在线flexible.js链接 4.在线引入vue.js

childSelector,data,function)； 参数说明： event 必须 事件的名称(可以自定义) 支持绑定多个事件 多个事件用空格分开 也可以是map参数和数组 childSelector 可选 添加事件程序的子元素而且不是父选择器本身 data 可选 传递到事件对象 event的额外的参数 -function 必选 规定事件发生时运行的函数 主要是childSelector和data两个可选参数不常见 使用场景 在大div里绑定点击事件,on参数中写其子元素,可以触发针对子元素的

1.第一个jQuery例子 2.jQuery库功能 3.script标签的简化 4.引入jQuery 5.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-22 jQuery如何引入和使用外部插件(以轮拨图插件OwlCarousel2为例) swiper.js介绍和下载 swiper是一款免费以及轻量级轮播滑动的js框架,是非常常用的轮播库 官网地址:swiper中文网 下载:swiper-8.3.0.zip 在线演示和使用导航(必看) 在线演示 使用方法 引入文件和DOM结构 需要引入的css文件和js文件 ...

文章目录 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.效果

文章目录 jQuery插件的概念 插件引入时必须遵守的规定 自定义选项卡插件tabs 引入样式和js 改进:改进默认选中的方式和获取节点的方式 改进:将js和css放到单独文件中并在新的html中引入 结果 改进:html只保留框架,里面的li节点通过动态获取并初始化 vue组件:把css,js都组装在一起的插件,只需输入标签名

要求 1.勾选全选复选框,商品列表的复选框也跟着被选中 2.每个商品复选框也有单独的点击事件,当每一个商品复选框都被选中时,全选复选框也自动被选中

问题描述 代码 var arr = [111, 2222, 33333]; for (var i = 0; i < arr.length; i++) { $(`${arr[i]}删除`).appendTo("#box"); } $("#box button").click(function() { // console.log($

文章目录 1.创建节点 代码 结果 2.插入节点 2.1.父子节点 代码 结果 2.2.兄弟节点 代码 结果 3.替换节点 代码 结果 4.删除节点 代码 结果 5.克隆节点 5.1.不传参 代码 结果 5.2.传参 代码 结果

思路 设置一个单独的选中框, 通过在animate中设置其left值,造成其从当前选项往目标选项移动的动画效果, 设置其层级,确保其处于选项内容的下方 底部内容随顶部选项卡改变

思路 鼠标移入:当前所在li对应的宽度增加,其表兄弟宽度减小 鼠标移出:宽度恢复 在animate()动画前加stop(),是为了防止鼠标快速移动时,animate动画要全部执行,造成不好的类似幻灯片的效果

思路 1.ul>li前的"+“,”-"号使用伪元素选择器::before{}添加,如在正式网页中,可以用iconfont图标,达到更好的视觉效果 2.点击展开和折叠不用display:block和none,而是用slideToggle(),效果更好 3.为ul>li绑定点击事件后,点击一个li就让其子元素ol展开和折叠,若只允许展开一个li,则让当前li的所有表兄弟都向上折叠即可

思路 鼠标移入 悬停信息显示 鼠标移出 悬停信息隐藏 鼠标移动 悬停信息随鼠标移动 代码 div { margin: 100px; width: 150px; height: 50px; background: pink; /*穿透*/ /* pointer-events: none; */ } p { position: relative;

思路 在鼠标点击事件中,为当前鼠标选中的li添加active类(含有选中的样式), 获取此li的索引 利用此索引,显示对应的第index个底部box li内容

1.jQuery操作class 1.1.为节点添加和删除一个class 代码 结果 1.2.添加删除class的使用场景:选项卡的快速切换 代码(思路:链式操作+隐式操作) 1.3.节点是否存在该class以及切换toggleClass 代码 2.jQuery操作属性 attr()设置获取和删除元素属性 代码 prop()只能操作原生属性 代码 结论 3.jQuery操作偏移量 offset():获取距屏幕左上角的left和top值,若传参就是设置 获取和设置没有定位的元素的偏移量 设置和获取带有定位的元素