随笔分类 -  jQuery

案例：电梯导航功能
摘要：实现功能： 1. 点击左边的小li，会滚动到右边对应的内容区（电梯导航 -> 内容区） ① 当滚动到某一位置时，就让电梯导航显示出来 ② 点击电梯导航页面可以滚动到相应内容区域 ③ 核心算法：因为电梯导航模块和内容区模块是一一对应的，所以对应的索引号是一样的 ④ 当点击电梯导航某个小模块时，就可以拿 阅读全文
posted @ 2020-05-31 23:39 浮华夕颜 阅读(3080) 评论(0) 推荐(0)
案例：带有动画的返回顶部
摘要：① 核心原理：使用animate动画返回顶部。 ② animate动画函数里面有个scrollTop属性，可以设置位置。 ③ 但是是元素做动画，因此使用 $("body, html").animate({scrollTop: 0}); <script> // 页面打开时就到一个固定的位置 $(doc 阅读全文
posted @ 2020-05-31 22:37 浮华夕颜 阅读(443) 评论(0) 推荐(0)
案例：toDoList
摘要：具体功能可参考网站：http://www.todolist.cn/ 实现功能如下： 1. 文本框里面输入内容，按下回车，就可以生成待办事项。 2. 点击待办事项的复选框，就可以把当前数据添加到已完成事项里面。 3. 点击已完成事项的复选框，就可以把当前数据添加到待办事项里面。 4. 但是本页面内容刷 阅读全文
posted @ 2020-05-31 22:19 浮华夕颜 阅读(357) 评论(0) 推荐(0)
jQuery事件
摘要：下面从6个方面介绍jQuery事件： jQuery事件注册 jQuery事件处理 jQuery事件对象 jQuery拷贝对象 多库共存 jQuery插件 1. jQuery事件注册 单个事件注册： 语法： element.事件(function() {}) // 例如 $("div").click( 阅读全文
posted @ 2020-05-31 19:41 浮华夕颜 阅读(197) 评论(0) 推荐(0)
案例：发布微博功能
摘要：<!-- 页面布局 --> <div class="box" id="weibo"> <span>微博发布</span> <textarea class="txt" col="30" row="10"></textarea> <button class="btn">发布</button> <ul>< 阅读全文
posted @ 2020-05-31 17:34 浮华夕颜 阅读(258) 评论(0) 推荐(0)
案例：购物车功能模块
摘要：购物车页面如下： 实现的主要功能有6点： 1. 全选功能 ① 全选思路：里面3个小得复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。 ② 因为checked是复选框得固有属性，此时需要利用prop()方法获取和设置该属性。 ③ 把全选按钮状态赋值给3个 阅读全文
posted @ 2020-05-31 16:35 浮华夕颜 阅读(2176) 评论(1) 推荐(0)
jQuery常用的API
摘要：从下面7个方面介绍jQuery常用的API： jQuery选择器 jQuery样式操作 jQuery效果 jQuery属性操作 jQuery文本属性值 jQuery元素操作 jQuery尺寸、位置操作 1. jQuery选择器 ① jQuery基础选择器 原生JS获取元素方式很多，很杂，而且兼容性情 阅读全文
posted @ 2020-05-31 15:27 浮华夕颜 阅读(756) 评论(0) 推荐(0)
案例：王者荣耀手风琴效果
摘要：实现功能： ① 鼠标经过某个小li有两步操作： ② 当前小li宽度变为224px，同时里面的小图片淡出，大图片淡入 ③ 其余兄弟小li宽度变为69px，小图片淡入，大图片淡出 <!-- 页面布局 --> <div class="king"> <ul> <li class="current"> <a 阅读全文
posted @ 2020-05-30 01:02 浮华夕颜 阅读(1079) 评论(0) 推荐(0)
案例：jQuery实现tab栏切换功能
摘要：实现功能： ① 点击上部的li，当前li添加current类，其余兄弟移除类 ② 点击的同时，得到当前li的索引号 ③ 让下面内容区里面相应索引号的item显示，其余的item隐藏 <div class="tab_list"> <ul> <li class="current">商品介绍</li> < 阅读全文
posted @ 2020-05-30 00:13 浮华夕颜 阅读(1155) 评论(0) 推荐(0)
案例：淘宝服饰精品案例：（左右型tab栏切换功能）
摘要：① 核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏 ② 需要得到当前小li的索引号，就可以显示对应索引号的图片 ③ jQuery得到当前元素索引号$(this).index() ④ 中间对应的图片，可以通过eq(index)方法去选择 ⑤ 显示元素show()，隐 阅读全文
posted @ 2020-05-29 01:02 浮华夕颜 阅读(325) 评论(0) 推荐(0)
案例：新浪下拉菜单功能
摘要：<!-- 页面布局 --> <ul class="nav"> <li> <a href="#">微博</a> <ul> <li> <a href="#">私信</a> </li> <li> <a href="#">评论/a> </li> <li> <a href="#">@我</a> </li& 阅读全文
posted @ 2020-05-29 00:39 浮华夕颜 阅读(387) 评论(0) 推荐(0)
jQuery的基本使用
摘要：1. jQuery概述 ① JavaScript库 仓库：可以把很多东西放到这个仓库里面，东西只需要到仓库里面查找到就可以了。 JavaScript库：即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画a 阅读全文
posted @ 2020-05-29 00:09 浮华夕颜 阅读(164) 评论(1) 推荐(0)