JustDoIt - jQuery
type: channel
link: https://www.wangmanyuan.com/category/jQuery/
items: 可视化项目
items: jQuery事件操作
items: jQuery操作
items: jQuery简介

可视化项目
type: item
date: 2022-06-05T05:14:06+00:00
description: 01-项目介绍​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 '立可得' 数据可视化项目。​ 该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 ...02-使用技术完成该项目需要具备以下知识： div + css 布局 flex 布局 css3动画 css3渐变 css3边框图片 原生js + jquery 使用 rem适配 echarts基础 粗略代码统计： css 580行 html 450行 js 400行 (有效) 03-Echarts-介绍ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。大白话： 是一个JS插件 性能好可流畅运行PC与移动设备 兼容主流浏览器 提供很多常用图表，且可定制。 折线图、柱状图、散点图、饼图、K线图 04-Echarts-体验官方教程：[五分钟上手ECharts](https://www.echartsjs.com/zh/tutorial.html#5 分钟上手 ECharts)自己步骤： 下载echarts https://github.com/apache/incubator-echarts/tree/4.5.0 引入echarts dist/echarts.min.js 准备一个具备大小的DOM容器 初始化echarts实例对象 var myChart = echarts.init(document.getElementById('main')); 指定配置项和数据(option) var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; 将配置项设置给echarts实例对象 myChart.setOption(option); 05-Echarts-基础配置需要了解的主要配置：series xAxis yAxis grid tooltip title legend color series 系列列表。每个系列通过 type 决定自己的图表类型 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。 xAxis：直角坐标系 grid 中的 x 轴 boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。 yAxis：直角坐标系 grid 中的 y 轴 grid：直角坐标系内绘图网格。 title：标题组件 tooltip：提示框组件 legend：图例组件 color：调色盘颜色列表数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。 演示代码：var option = { color: ['pink', 'blue', 'green', 'skyblue', 'red'], title: { text: '我的折线图' }, tooltip: { trigger: 'axis' }, legend: { data: ['直播营销', '联盟广告', '视频广告', '直接访问'] }, grid: { left: '3%', right: '3%', bottom: '3%', // 当刻度标签溢出的时候，grid 区域是否包含坐标轴的刻度标签。如果为true，则显示刻度标签 // 如果left right等设置为 0% 刻度标签就溢出了，此时决定是否显示刻度标签 containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', // 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。 boundaryGap: false, data: ['星期一', '星期二', '周三', '周四',…

jQuery事件操作
type: item
date: 2022-06-01T18:38:59+00:00
description: 1.1. jQuery 事件注册​ jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下： 优点: 操作简单，且不用担心事件覆盖等问题。 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。 语法演示代码 1.2. jQuery 事件处理​ 因为普通注册事件方法的不足，jQuery又开发了多个处理方法，重点讲解如下： on(): 用于事件绑定，目前最好用的事件绑定方法 off(): 事件解绑 trigger() / triggerHandler(): 事件触发 1.2.1 事件处理 on() 绑定事件​ 因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on()语法演示代码 我们都是好孩子 我们都是好孩子 我们都是好孩子 1.2.2. 案例：发布微博案例1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中。2.点击的删除按钮，可以删除当前的微博留言。​ 代码实现略。(详情参考源代码)1.2.3. 事件处理 off() 解绑事件​ 当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。jQuery 为我们提供 了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()，在这里我们重点讲解一下 off() ;语法演示代码 我们都是好孩子 我们都是好孩子 我们都是好孩子 我是一个P标签 1.2.4. 事件处理 trigger() 自动触发事件​ 有些时候，在某些特定的条件下，我们希望某些事件能够自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。由此 jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;语法演示代码 1.3. jQuery 事件对象​ jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。语法演示代码 注意：jQuery中的 event 对象使用，可以借鉴 API 和 DOM 中的 event 。1.4. jQuery 拷贝对象​ jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。语法演示代码 1.5. jQuery 多库共存​ 实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为，jQuery 多库共存。语法演示代码 1.6. jQuery 插件​ jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。​ jQuery 插件常用的网站： jQuery 插件库 http://www.jq22.com/ jQuery 之家 http://www.htmleaf.com/ jQuery 插件使用步骤： 引入相关文件。（jQuery 文件 和 插件文件） 复制相关html、css、js (调用插件)。 1.4.1. 瀑布流插件（重点讲解）​ 我们学习的第一个插件是jQuery之家的开源插件，瀑布流。我们将重点详细讲解，从找到插件所在网页，然后点击下载代码，到插件的使用等，后面的插件使用可参考瀑布流插件的使用。下载位置代码演示​ 插件的使用三点： 1. 引入css. 2.引入JS 3.引入html。 （有的简单插件只需引入html和js，甚至有的只需引入js） 1.引入css. 2.引入js. 3.引入html. 我是轮播图片1 里面很精彩哦 我是轮播图片1 里面很精彩哦 我是轮播图片1 里面很精彩哦 我是轮播图片1 里面很精彩哦 总结：jQuery插件就是引入别人写好的：html 、css、js （有时也可以只引入一部分，读懂后也可以修改部分内容）1.4.2. 图片懒加载插件​ 图片的懒加载就是：当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验。（下载略）代码演示​ 懒加载只需引入html 和 js操作 即可，此插件不涉及css。 1.引入js 2.引入html 1.4.3. 全屏滚动插件​ 全屏滚动插件比较大，所以，一般大型插件都会有帮助文档，或者网站。全屏滚动插件介绍比较详细的网站为：h…

jQuery操作
type: item
date: 2022-05-29T00:33:39+00:00
description: 1.1. jQuery 属性操作​ jQuery 常用属性操作有三种：prop() / attr() / data() ;1.1.1 元素固有属性值 prop()​ 所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。语法​ 注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。1.1.2 元素自定义属性值 attr()​ 用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。语法​ 注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）1.1.3 数据缓存 data()​ data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。语法​ 注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。演示代码 都挺好 我是div 123 1.1.4 案例：购物车案例模块-全选1.全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。2.因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。3.把全选按钮状态赋值给3小复选框就可以了。4.当我们每次点击小的复选框按钮，就来判断：5.如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。6.:checked 选择器 :checked 查找被选中的表单元素。​ 代码实现略。(详情参考源代码)1.2. jQuery 文本属性值​ jQuery的文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。1.2.1 jQuery内容文本值​ 常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。语法​ 注意：html() 可识别标签，text() 不识别标签。演示代码 我是内容 1.2.2. 案例：购物车案例模块-增减商品数量1.核心思路：首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。2.注意1： 只能增加本商品的数量， 就是当前+号的兄弟文本框（itxt）的值。3.修改表单的值是val() 方法4.注意2： 这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值5.减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了。​ 代码实现略。(详情参考源代码)1.2.3. 案例：购物车案例模块-修改商品小计1.核心思路：每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格 就是 商品的小计2.注意1： 只能增加本商品的小计， 就是当前商品的小计模块（p-sum）3.修改普通元素的内容是text() 方法4.注意2： 当前商品的价格，要把￥符号去掉再相乘 截取字符串 substr(1)5.parents(‘选择器’) 可以返回指定祖先元素6.最后计算的结果如果想要保留2位小数 通过 toFixed(2) 方法7.用户也可以直接修改表单里面的值，同样要计算小计。 用表单change事件8.用最新的表单内的值 乘以 单价即可 但是还是当前商品小计​ 代码实现略。(详情参考源代码)1.3. jQuery 元素操作​ jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。1.3.1. 遍历元素​ jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。语法1​ 注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。语法2​ 注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。演示代码 1 2 3 1.3.2. 案例：购物车案例模块-计算总计和总额1.把所有文本框中的值相加就是总额数量，总计同理。2.文本框里面的值不同，如果想要相加需要用 each() 遍历，声明一个变量做计数器，累加即可。​ 代码实现略。(详情参考源代码)1.3.3. 创建、添加、删除​ jQuery方法操作元素的创建、添加、删除方法很多，则重点使用部分，如下：语法总和​ 注意：以上只是元素的创建、添加、删除方法的…

jQuery简介
type: item
date: 2022-05-27T02:50:02+00:00
description: 1.1. jQuery 介绍1.1.1 JavaScript 库​ JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。​ 常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。1.1.2 jQuery的概念​ jQuery总体概况如下 : jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。 j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。 jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。 学习jQuery本质： 就是学习调用这些函数（方法）。 jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。 1.1.3 jQuery的优点 轻量级。核心文件才几十kb，不会影响页面加载速度。 跨浏览器兼容，基本兼容了现在主流的浏览器。 链式编程、隐式迭代。 对事件、样式、动画支持，大大简化了DOM操作。 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。 免费、开源。 1.2. jQuery 的基本使用1.2.1 jQuery 的下载​ jQuery的官网地址： https://jquery.com/，官网即可下载最新版本。各个版本的下载：https://code.jquery.com/​ 版本介绍：1x ：兼容 IE 678 等低版本浏览器， 官网不再更新2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本1.2.2. 体验jQuery​ 步骤： 引入jQuery文件。 在文档最末尾插入 script 标签，书写体验代码。 $('div').hide() 可以隐藏盒子。 1.2.3. jQuery的入口函数​ jQuery中常见的两种入口函数：// 第一种: 简单易用。 $(function () { ... // 此处是页面 DOM 加载完成的入口 }) ; // 第二种: 繁琐，但是也可以实现 $(document).ready(function(){ ... // 此处是页面DOM加载完成的入口 }); ​ 总结： 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。 相当于原生 js 中的 DOMContentLoaded。 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。 更推荐使用第一种方式。 1.2.4. jQuery中的顶级对象$ $是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。 $是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。 1.2.5. jQuery 对象和 DOM 对象​ 使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 : 用原生 JS 获取来的对象就是 DOM 对象 jQuery 方法获取的元素就是 jQuery 对象。 jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。 注意：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。1.2.6. jQuery 对象和 DOM 对象转换​ DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。// 1.DOM对象转换成jQuery对象，方法只有一种 var box = docu…