最近一段时间打了一个大仗，现在总算消停点，才有时间来做个总结吧算是： 移动端遇到一个项目，是一个列表的侧滑栏，在我这里用jq写的交互事件。自测各方面都挺好的，美滋滋的给了研发。...后来就找共同点，发现有个类名控制的交互都不能实现，最后去问研发，你是不是没加上我的类名？ 回：加着呢啊！我一看模拟器，确实加着呢。但是看源码，没有，因为他使用ajax后期加的。。...写了点击事件，是通过获取元素的类名被点击后执行对应方法，但是研发套完模板，他会把所有的结构先清空，导致jq根本找不到那个元素，所以事件就不得执行了。...正规点的说：JS异步加载,JQ事件不被执行解决方法（百度的标题，hah） jquery中动态新增的元素节点无法触发事件问题（同上） 解决方法： ? ?...值得注意的是：亲测此方法无效，可能是我用的jq的版本太高了，1.9多，已经不支持这个方法了 第二个方法： ? 但是缺点是：给一个元素添加多个事件委托机制时，他就挂了。 王者方法：on ?
在js中有时也会对底层结构兼容性做统一的封装来简化用户的使用。 备注：本文的案例以es5为主，部分会涉及jq的代码，大家理解思想就好。如果你有es6以及目前三大框架的实例应用案例，欢迎分享。...从点击事件说起—-兼容方式&&底层向上封装 相信古老的程序员都用过jq,还有jq的click事件，一般的写法是这样的对吧。...$(target).on(eventType,fn) 也相信大家都用过或者多少知道一点js的原生语法，绑定事件是如何写的。...我们找到jq的事件源码看一下吧 ：源码文件位置(要到比较老的1.x的版本才会找到这部分针对事件写的兼容代码哦)：https://github.com/jquery/jquery/blob/1.12.4/...src/event.js // event.add 方法中，183行开始 // Init the event handler queue if we're the first if ( !
答：写前端用的，完成各种各样的交互，挺流行的，别人都用，我也要用！找工作也好找！ 2.vue难不难？ 答：什么技术都是难者不会，会者不难！只要勤练，自然能学会！...答案就是在script里写，这个就是专门存放js/jq/vue.js等语言的地方，死记硬背吧，这个script里就是俗称的 bom区域，就是browser的首字母。...（这个#实际上是借用了jq的选择器写法，代表用id定位，等价于js中的getElementById,不过我们没必要理解这么深刻，浪费我们精力，死记硬背，这个el的值就是要#+id即可。）...注意之后都是这样的一大堆属性的作用和使用，都学完，你的vue水平就已经超过很多人了，是不是很简单，每天跟我学一个属性即可。不用额外去学习其他架构上的复杂知识了。...好了本节课就到这里，怎么样，是不是感觉很简单？？？
在很久以前我可以说，你会做静态页面html就可以啦，那年月都用table表格做页面。后来就是再会点js就行啦，写点什么小特效就ok了。再后来我可以说只要会jQuery就可以搞前端啦。...只会js吧，肯定不行，得会框架；只会jq吧，肯定不行，不够用；那ng,vue,Rn这三个都学肯定不现实，选哪个呢？还有那个nodejs，现在目前阶段要不要学呢？。。。...用什么学什么 大概的讲，目前就是以jq为日常开发语言，因为它对于新人是最友好的，最易于从业务的角度进行说明为什么要这么写，而不是把时间更多的花费在如何讲js语言本身是如何。...我的思想就是，不管三七二十一先用起来再说，你能用jq把这个东西做出来，你就能用Rn把它再做出来。有思路了，无非就是重写一遍代码而已。...先用jq写最烂的代码，做完首页几个模块之后，直接教他们function，然后就是从划分业务的角度，教他们拆分js代码拆成几个函数，分别写在几个不同的js文件里，理解前端模块化思想，然后就是prototype
js对象和jq对象互相转换:(js对象和jq对象不是一个东西,不能互相调用彼此的方法,有些时候只能的js对象但是需要用到jq框架里面的方法这时候就需要使用以下方式将js对象转成jq,同理有时只能得到jq...对象但是需要调用js对象里面的方法,所以需要使用以下方法把jq对象转成js对象) //js获取对象的方式 var js = document.getElementById(“d1”); //jq获取对象的方式...var jq = $("#d1"); js转jq: var jq = $(js); jq转js: var js = jq[0]; ###选择器 基础选择器 用法和css中一样 id选择器 $(...-- 引入jq框架 script标签如果引入了文件就不能在标签体内继续写代码否则不执行 --> <script src=".....("i1"); //js对象转成jq对象 var jq = $(js); //jq.val() 获取文本框的值 alert(jq.val()); }); $(
2： html页面中id重复 如果你使用jq选中一个id进行操作，忽然发现失灵了，怎么操作都不起作用，你就应该检查下你的页面中是否存在重复的id。 3：前端数据传到后台时掺杂前端的数据。...有时我们为了体验更好，都习惯在输入框里面使用placehoder，殊不知，在IE8下，placehoder里面的值会直接传到后台，这时就应该加上判断，再比如js一直报错‘缺少右括号’，检查一下你的代码是不是有空格...还有如果你的前端代码写的不标准，因为浏览器解析的原因，很可能把一些/等等前端符号传到后端，最后造成一些莫名其妙的错误。...4：使用数学中的逻辑运算符 乍看起来没有问题，我这样用都用了几十年了，思维定势啊,找了半天，恍然大悟，计算机中比较运算符是不能这样使用的 。...如果插入2个不同的值当做key，但是数据库就是抛出duplicated key，这时你需要仔细看一下你的两个值区别是不是在大小写上面不同，在默认情况下mysql字段内容是不区分大小写的，至于怎么设置，方法很多
这个方法可能不是很常见，这个是jQuer提供的一个方法，说一下应用场景，比如说，我们使用jQuery的时候，需要引入别的框架，那么刚好这个框架也是$开头的，那是不是很悲催，因为jQuery也是$开头的，...下面简单的写几个例子看一下怎么使用的！...我们写jQuery的时候一般写法是这样的： $("div").append("jquery运行中..."); 那么如果引入别的js框架的时候，也是$开始的，我们怎么写呢？...直接写全名就可以其实 $.noConflict(); jQuery("p").append("this is p"); 或者这样写也是可以的：将其赋予一个变量来使用 var jq = $.noConflict...(); jq("span").append("this is span"); 有的人说我就想用$开头，但是还要引入别的框架怎么办呢？
数据生效 别嫌麻烦，想肆意的设计，想做出各种各样随心所欲的ui 就是要经历这些麻烦，否则都用现成框架比如element，bootstrap，那么做出的东西永远的千篇一律，毫无新意，甚至复杂点的交互就完全不知道怎么做了...每个扇形图都用了bootstrap3的 固定样式 col-md-3，这个太大了，我们改成2号 ：col-md-2。4个图全都改好如下： 4....位置调整，直接在他们的母体div 内增加style属性，外上边距50px 好的，调整到了这里，我们来看效果图： 怎么样，是不是觉得还可以。...这四个扇形图的角度效果 也大概率试试写死在顶部的css样式中了。所以要怎么去控制这些，就需要我们自己去动手改造，这个对js的要求水平极高。...然后通过jq/js ，强行更改这个loading-的样式内容数据，即可达到效果。
注意这里的具体函数内，写的代码依然是传统的js，或者jq。所以大家还是要掌握一定的js/jq基础才可以。 好了本节课就到这里，怎么样，是不是感觉很简单？？？
那么接下来说 JQ 优秀在何处， JQ 不是框架胜似框架，而且我希望每个产品经理都学习一下 JQ ， JQ 的使用量绝对不是偶然，首先 JQ 的 api 设计非常优秀(用$代替所有选择器是太牛逼的设计，...兼容性就不提了， jq2 完美兼容 jq1 ，只是舍弃了一些浏览器。...但是这不代表 react 没有问题，有很多人说 react 牛就牛在 jsx 上，是的，我最近在写， jsx 的却很灵活，内嵌函数的写法可以让你做到几乎无所不能。...没办法， js 的特性，无论混淆成什么样都裸的跟不穿底裤一样，这绝对比不上 lua 这种除了传统混淆还可以魔改解析器的脚本语言。...因此， java 这种十年不变的风格，沉淀了不知道多少的精髓，除了虚拟机的调优外，还有大量的跑车，这可不是轮子，包括演化了多少代的 lucene （现在都用 elasticsearch 了），还有一系列
说起 jq 应该很多同学都用过，但应该大部分同学跟我类似，可能就是 curl xxx | jq . 就这样用过，大概就是请求一个返回 Json 的接口，通过 jq 把他打印得更好看。...jq 的 man 文档！...只要不记得了，就查一下文档，因为 jq 的文档里，有非常多典型的例子，照着例子写，肯定没问题的。 ?...jq '.foo' 这里要注意一下，如果 jq 后面的表达式有空格，就需要用单引号包起来。...最后举个我自己用的一个例子，其实我用的也并不高级，只是通过 jq '.name, .clientOnRoles'，拿到两个 key 对应的值。jq 还有非常多的选项 option ?
body> 1 <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.<em>js</em>...); flag=1; } }); 效果图如下： （1）这是没点击之前的： （2）这是点击之后的： 但是现在如果出现了多了li，总不能每个li<em>都用</em>不同的变量去标记...，那如果有100个li，岂不是<em>写</em>累死，所以这时候就想到了<em>jq</em>的第一个方法：each()： 1 2 34 5 <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js...this.index; }) } 他也是忽然忘了onclick怎么写，然后用了addEventListener方法，够我笑一阵了，哈哈哈。
body> 1 <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.<em>js</em>...但是现在如果出现了多了li，总不能每个li<em>都用</em>不同的变量去标记，那如果有100个li，岂不是<em>写</em>累死，所以这时候就想到了<em>jq</em>的第一个方法：each()： ...4 5 <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js...this.index; }) } 他也是忽然忘了onclick怎么写，然后用了addEventListener方法，够我笑一阵了，哈哈哈。
对比js和jq： <!...控制css css()----和prop()完全相同 rgb颜色：三个0为黑色 小驼峰fontSize和font-size都对 在字典中，如果是有字符和数字混合的形式，那么必须写引号。...字典中如果属性key只是单纯的width，可以不写引号。 在前端中100px可以写成100，字典中属性key的value值100可以不加引号，但是100px必须写引号。 <!...---$(this) 会自动检索事件发生的目标 链式编程（链式调用）的好处：简化代码量，执行的时候提高效率， 导航标签都用ul套li jq中使用onclick、onmouseover等都取消on <!...，运动曲线，回调函数三个参数，但这三个参数可以可以不写 fadeTo() 设置透明度，参数一是时间，参数2是透明度0-1的数值。
本章主要来了解一下新的标签，就是表格标签，我们可以先来认识一下什么是表格，当你写excle的时候，大家都会看到一个格子一个格子的形式的，那么它们组合成的就是表格。...接下来，我就写一个最基本的表格，先看下面完整的代码： 前端技术栈 ... 写一个表格...，你不管怎么去写，所有内容都要包在table标签里面，所以写完标题，我们直接就一个table标签扔在上面。...我们是不是只要给每个单元格设置一样的长度就可以了，我们可以试一下： 前端技术栈 <tr
---- theme: channing-cyan 前言 最近接手了一个前后端没分离的项目，java作为后端，使用jsp当做模板来书写前端代码，并且用jq做各种操作，各种离奇写法和jq的辣眼睛操作以及臃肿的写法...然后由于页面填充数据都是依靠jq去操作DOM，所以导致表格从渲染出来到填充数据至少会有一秒的延迟。...（其实我只是不想写jq而已） 在jsp中引入Vue 前面也说了，由于实际地址只有首页和登录页，首页作为主入口的jsp，我们可以在这里通过cdn引入vue相关的资源，由于老项目又要兼顾IE，只好引进Vue2...是不是看上去还不错？接下来你可能想问那我要复用一些自己封装的组件怎么搞呢？...我也想写，我们在页面中引入时需要通过vue-loader编译成相应的js文件，但是vue-loader通过cdn方式引入并使用时会报错（这个我没有深入去看）。
这个功能是在最百度语音合成的时候涉及到的，这个功能我也是第一次写，毕竟前端的东西不是很擅长。特此记录一下。 需求 页面中加载两个音频文件，通过两个按钮进行播放，一个暂停开关。...audio> JS...otherAuto.pause(); } myAuto.play(); $("#PauseSound").html("暂停"); }); 代码说明： 1、这里面涉及到了一个open-this的类，主要是方便后期在进行暂停操作的时候...，区分是男声、女声播放源； 2、获取audio的元素需要使用js来操作，在使用jQ时无法获取到； 3、播放状态使用元素 .paused，注意和pause区分开； 女声播放的控制代码就不做展示了，原理都是相同的
进度条主要应用于大文件的上传，在于告诉用户上传情况，不至于让用户无状态等待，增加了用户的体验，如果没有进度条，在上传过程中，用户不知道是不是卡死了，这种体验就很差了，下面我们来说一下如何在异步上传时显示进度条...其实无论是原生js写xhr，还是jq的ajax，还是axios的异步都提供了一个获取上传进度的API，首先我们来看一下原生js如何获取上传进度。...原生js获取上传进度 var fd = new FormData(); fd.append("file", document.getElementById('testFile').files[0]);...JQ获取上传进度 jq并没有直接提供uploadProgress方法，但是他提供了一个xhr参数,使用方法如下： var fd = new FormData(); fd.append("file", document.getElementById...; } }); axios获取上传进度 在axios中提供了一个参数onUploadProgress，有了这个参数就可以很方便的获取上传进度了，其方法实现还是和原生js的一样，这个参数其实就是注册一个监听事件
原因2：安装源是国外 解决： 1.基于nrm切换安装源「或者使用cnpm{淘宝镜像}」 $ npm i nrm -g 安装nrm $ nrm ls 查看有哪些源 $ nrm use xxx 使用某个源 后期还是基于...插件 把业务中某个常用的功能进行封装（一般只是对于JS的封装） 轮播图插件、日历插件......，已经不咋使用JQ了） JQ提供的方法在两部分 jQuery.prototype ($.fn) JQ是一个构造函数，在它原型对象上提供了大量的方法，供其实例使用 实例.xxx() 样式类操作：...addClass 增加样式类 removeClass 移除样式类 hasClass 检测样式类 toggleClass 之前有删除，没有就新增 实现JS动画： animate stop...选择器，获取元素集合（类数组集合 JQ对象）-> 获取的是JQ这个类的一个实例 JQ实例对象.get(索引) --> DOM对象 $(DOM对象) ——> JQ实例对象 若有收获，就点个赞吧我正在参与
而其中的name是固定的，所有都用的一个。所以我们后续的js代码中可以用getElementsByName 方法来一次性拿到所有框。...首先来完成第一件事： 该端代码中 判断一个字符串是否在一个数组列表中运用了jq的 $.inArray方法，这种简单的判断如果在js中还是很麻烦的。...用例3:当前项目中是正常的选中了第一个变量组： 我们得首先去后台给该项目手动写一个global_datas来方便测试。...首先我们先来给所有的这个check_input增加一个 点击更改内容就触发js函数的 属性：onchange,顾名思义，和onclick都差不多哦。...name="check_names"]:checked').each(function(){ chk_value.push($(this).val()); }); //依然是jq
领取专属 10元无门槛券
手把手带您无忧上云
