![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Jquery
申申あ
只想学好前端但必须发小论文的程序媛
展开
-
Jquery-todolist案例
5.注意点2获取本地存储数据,需要把里面的字符串转换为对象格式JSON.parse(),我们才能使用里面的数据。6.load加载函数里面,新增一个条件,如果当前数据的done为true就是已经完成,就把列表渲染到ul里面。1.页面中的数据都要从本地存储里面获取,这样刷新页面就不会丢失数据,所以要先把数据保存到本地存储里面。2.核心原理先获取本地存储数据,删除对应的数据,保存给本地存储,重新渲染列表li。1.点击里面的a链接,不是删除的li,而是删除本地存储对应的数据。...原创 2022-07-20 15:21:17 · 491 阅读 · 0 评论 -
Jquery-微博发布案例
功能一实现思路首先创造一个li,然后把文本框的内容给li,再创建一个删除链接,把内容和删除链接追加到ul中,最后让li滑动出来(只是为了效果好看),之后清空textarea里面的内容。最外层是一个div包裹,然后是横着依次是span标签,textarea标签以及button按钮,下面是ul。这个布局比较简单就不多说了。1.点击发布按钮,动态创建一个li,放入文本框的内容和删除按钮,并添加到ul中。2.点击删除按钮可以删除当前微博留言。...原创 2022-07-17 20:01:16 · 566 阅读 · 0 评论 -
Jquery电梯导航案例
但是如果不加节流阀就会出现如果由第三个内容部分点击第二个内容部分,那么首先会执行把第二个内容部分添加slidered类,然后再调用一次页面滚动事件又会给三和二分别添加slidered类,所以当点击电梯导航的时候不能执行滚动页面的操作,所以需要添加一个节流阀来控制是否执行页面滚动操作,首先把节流阀设置为true这样本来滚动页面添加类的功能就可以实现,然后当点击的时候就把节流阀设置成false,当页面滚动完之后再把节流阀打开不然滚动添加类的功能在点击之后就失效了。(3)点击当前li添加slidered类。...原创 2022-07-15 20:51:29 · 683 阅读 · 0 评论 -
Jquery-带有动画的返回顶部
4.返回顶部的动画不能采用$(doucument).animate()因为只有元素能添加动画,只能采用$('body,html').animate({scrollTop0})2.页面滚动事件$(window).scroll(function(){})3.元素的淡入和淡出采用fadeIn()和fadeOut()方法。1.得到元素距离页面顶部的距离采用scrollTop()方法。最后需要实现点击返回顶部返回到刚开始的状态。...原创 2022-07-15 16:29:45 · 657 阅读 · 0 评论 -
Jquery购物车模块-清理购物车和选中商品添加背景颜色
3.删除选中的商品先判断小的复选框和按钮是否选中状态,如果是选中则删除对应的商品。1.有三个地方需要删除①商品后面的删除按钮②删除选中的商品③清理购物车。1.全选按钮点击如果全选是选中的则所有商品添加背景否则移除背景。2.小的复选框点击如果是选中状态则当前商品添加背景否则移除背景。4.每次删除事件中都要重新调用计算总价格和总数量的函数。2.商品后面的删除按钮点击之后一定是删除当前的商品。3.这个背景可以通过添加和移除类名来实现。2.选中商品添加背景颜色模块。二、选中商品添加背景颜色模块。...原创 2022-07-14 20:48:21 · 771 阅读 · 2 评论 -
Jquery购物车模块-计算总件数和总额
首先来看布局: 布局非常简单,这里就不多说了,直接来看功能实现部分,首先因为每次每个模块点+或者-都会更改下面的总件数和总价,所以直接写一个函数来获取总件数和总价,然后当点击+或者-号的时候就调用这个函数即可。那么这个函数的思路如下:1.循环每一个模块的件数,然后进行遍历,将每一个模块的件数加起来就是总件数2.循环每一个模块的总结个,然后进行遍历,将每一个模块的总价格加起来就是最终的总价格3.把总件数和总价格赋值给下面对应的元素即可这里要注意获取到的件数和价格都是字符串类型的需要进行数值转换再相加。最终原创 2022-07-12 20:51:35 · 1339 阅读 · 0 评论 -
Jquery遍历元素
在讲这个之前,建议先看一下jquery的隐式迭代,这个就不多说了,隐式迭代的缺点在于它只能集体进行操作不能只针对某个元素进行操作,可以看下面的代码:如果想要依次对遍历的元素进行操作需要用each方法,语法是:$('div').each(function(index,domEle){})1.each()方法遍历匹配每一个元素。2.里面的回调函数有两个参数分别是index和domEle,index是每个元素的索引号,domEle是每个DOM元素对象,不是jquery对象,所以如果要用jquery的方法必须原创 2022-07-12 19:18:17 · 4981 阅读 · 0 评论 -
Jquery购物车修改商品小计
首先来看布局: 解释:左边部分是商品的单价,右边是根据中间商品数量算出来的总价格。核心思路:主要可以看这个博客:(1条消息) Jquery购物车增减商品数量模块_setTimeout()的博客-CSDN博客然后根据商品数量乘以左边的单价来给右边的总价格重新赋值,这里要注意,得到左边的值的时候需要把¥符号给去掉再乘以数量,以及最后右边的值需要保留两位小数,采用toFixed(2)方法。在这个之上还需要完善一个功能就是当用户修改商品数量的时候, 采用表单change事件即可。然后根据更改的值来改变总价格,最后原创 2022-07-12 17:08:22 · 449 阅读 · 0 评论 -
Jquery购物车增减商品数量模块
首先看布局:需要实现的功能:点击右边+的时候文本框中数量+1,点击左边-的时候文本框中数量-1,当减到0的时候就不能再减了,以免显示负数。 实现思路:1.需要声明一个变量,这个变量的值为文本框中的值,作为初始值,点击+就让这个值++,点击-就让这个值--,然后赋值给文本框。2.注意1:只能增加本商品的数量,原因是因为如果不止上面一个模块,而是很多个这个模块获取文本框中的值可能会获取到其他模块中文本框的值,所以取的值是当前+(-)号的兄弟文本框(itxt)的值。3.修改表单的值是采用val()方法。完整代码原创 2022-07-12 16:44:57 · 981 阅读 · 0 评论 -
Jquery购物车全选模块
首先来看一下页面布局: 由于这个布局比较简单这里就不说具体的布局思路了,数量加减模块的布局如果不知道怎么布局,可以看这个博客:购物车数量加减模块布局_setTimeout()的博客-CSDN博客。那么我们就直接来看功能实现。功能实现主要是两个部分:1.全选和全不选:当选中上面或者下面部分的全选复选框的时候三个小的复选框都被选中,当没选中上面或者下面部分的全选复选框的时候三个小的复选框都不被选中。2.如果三个小的复选框都被选中则上面和下面部分的全选复选框都被选中,否则都不被选中。注意:这里有一个知识点就是:c原创 2022-07-12 15:01:55 · 547 阅读 · 0 评论 -
王者荣耀手风琴案例
先来看看效果图: 需要实现的功能是,当鼠标移动到小图片的时候大图片显示出来,其余的都变成小图片。首先是布局布局的思路是:1.外面是一个大的div,里面ul包含7个li,li里面有一个a标签,a标签里面有两张图片,一个是大图片一个是小图片。2.ul里面的li都用float:left在一排显示。3.每个li都采用相对定位,里面的小图片采用绝对定位定在左上角,也就是下面这种效果: 4.小图片的大小为66x66,大图片大小为224x66,首先第一张图片的小图片隐藏大图片显示,并且只有第一个li的宽度为224px,原创 2022-07-11 16:24:54 · 424 阅读 · 1 评论 -
Jquery实现下拉菜单滑动效果
关于下拉菜单的布局以及原始采用jquery的写法详见这篇博客:(1条消息) Jquery案例-下拉菜单_setTimeout()的博客-CSDN博客_jquery下拉菜单案例上面这篇博客的下拉菜单案例虽然可以实现下拉效果但是效果并不好,如果想要下拉的时候有滑动效果可以采用jquery里面自带的方法slideUp(),slideDown(),slideToggle()即可。同时完成简易的滑动效果还需要一个事件切换函数hover,这个函数需要两个参数,参数就是两个函数,格式为:$(element).hover(原创 2022-07-04 21:16:14 · 1211 阅读 · 0 评论 -
Jquery实现淘宝服饰精品案例
需要的效果如下:布局分析:1.整个结构由一个div进行包裹,左边放一个ul,ul里面有九个li,每个li里面包含一个a标签;右边放一个div,div里面又包含九个div,每个div里面包含一个a标签,a标签里面包含一个img标签。2.左边的ul和右边的div都进行浮动。保证两个结构在一行显示。3.左边的li的背景需要实现渐变效果,采用background-image: linear-gradient(方向, 颜色1, 颜色2)进行实现。功能分析:1.点击左边的列表右边div对应的图片显示出来,需要对每个li原创 2022-06-21 21:04:57 · 1983 阅读 · 4 评论 -
Jquery排他思想实现
我们先来温习一下js里面的排他思想的写法,给五个按钮,点击某一个按钮这个按钮就变成粉红色,其余按钮都是白色,若采用js实现这个案例需要采用循环判断来写,代码如下:如果采用jquery的话就不需要循环注册事件,因为jquery具有隐式循环,不需要循环注册事件,若采用jquery实现排他思想的话,代码如下:...原创 2022-06-19 17:31:15 · 513 阅读 · 0 评论 -
Jquery案例-下拉菜单
需要实现的结构如下图: 关于布局:布局采用ul里面包含4个li,li里面包含a标签(微博)以及ul(下面的下拉菜单),采用hover改变移动到下拉菜单后背景变色。关于功能:首先利用jquery获取元素,然后给li添加mouseenter方法显示下面的下拉菜单,然后给li添加mouseleave方法离开后又隐藏下拉菜单。最终代码如下:...原创 2022-06-08 20:46:07 · 3134 阅读 · 1 评论