随笔分类 - jQuery
摘要：在JavaScript中，回调函数具体的定义为：函数A作为参数(函数引用)传递到另一个函数B中，并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式)，就叫做匿名回调函数。 callback 不一定用于异步，一般同步(阻塞)的场景下也经常用到回调，比如要求执行某些操作后执行
阅读全文
摘要：工具方法。对函数的统一管理。 jquery2.0.3版本$.Callback()部分的源码如下： // String to Object options format cache var optionsCache = {}; // Convert String-formatted options i
阅读全文
摘要：一、未使用预加载技术前 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>图片预加载之无序加载</title> <style> .box { text-align: center; } .btn { di
阅读全文
摘要：jQuery版本：2.0.3 DOM加载有关的扩展 isReady:DOM是否加载完（内部使用） readyWait:等待多少文件的计数器（内部使用） holdReady():推迟DOM触发 ready():准备DOM触发。 jQuery.ready.promise=function(){}; 监听
阅读全文
摘要：一次面试中面试官问到jQuery和别的库冲突怎么解决？虽然以前看过，但是我已经不记得了。 我的思路就是如果让我来设计，那我就用一个默认值$，不传参数，那就用$，最后就挂载在window.$上，传参数就用传入名字，比如传入jq，那我就挂载在window.jq上。 事实上这肯定不是jquery解决冲突的
阅读全文
摘要：一、对外提供接口 对外提供了jQuery。 jQuery本身是一个构造函数，包括了很多静态方法（工具方法）和实例方法。静态方法更底层。 return new jQuery.fn.init( selector, context, rootjQuery ); $('#casper')跟new $('#c
阅读全文
摘要：html: 一、原生js 取消选中不能用： 二、使用jquery Jquery1.7.2.js 1.7.2中不能用prop属性。 jquery-1.9.1.min.js 三、prop()和attr()区别 .prop()方法和.attr()方法，单从字面上很难区分。在汉语中properties和at
阅读全文
摘要：前置知识：ajax原理，json字符串进行信息传递。 Ajax主要的功能是实现了浏览器端 异步 访问服务器：通过浏览器的XMLHttpRequest对象发出小部分数据，与服务端进行交互， 服务端返回小部分数据，然后更新客户端的部分页面。 json是Ajax发送小部分数据的一种轻量级数据格式，可以简单
阅读全文
摘要：本文主要介绍点击一个按钮处理事件的一些特殊情况和技巧。 一、第一次点击触发一个函数，之后点击都触发另一个函数 1、小白实现 2、大神实现 代码如下： 说明2点： 1、let定义的变量是块级的变量。 2、(func = func2, func1) javascript 逗号表达式，从左到右执行每个子表
阅读全文
摘要：1、for循环中我们使用continue；终止本次循环计入下一个循环，使用break终止整个循环。 2、而在jquery中 $.each则对应的使用return true 进入下一个循环，return false 跳出循环。
阅读全文
摘要：一、需求描述 标题“多尺寸图片左右切换功能”，概括的不知道是否恰当，具体是需求如下。 一次点击按钮，向左或向右移动一个图片。 切换到尽头时不显示按钮 页面有三个尺寸 可以一睹为快，看一下最终效果。 二、切图代码 1、代码 html代码如下： <!DOCTYPE HTML> <html> <head>
阅读全文
摘要：一、切图 1、效果 真实效果如下。 为说明问题只保留有用代码。进度条宽度用百分比来表示，这样适配时不需要重新计算。 2、切图代码 html代码如下： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA
阅读全文
摘要：大部分选择器都是基于下面这个简单的页面： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div,span,p{ width: 140px; height:
阅读全文
摘要：一、预期效果 实现一个效果，如下。 品牌列表默认精简显示，单击“显示全部品牌”按钮显示全部品牌，同时列表将推荐的品牌的名字高亮显示，按钮里的文字变成“精简显示品牌”。再次点击“精简显示品牌”回到初始页面。 二、实现过程 html结构如下： <!DOCTYPE html> <html lang="en
阅读全文
摘要：一、效果如下点击“测试中奖纪录”弹出弹框。弹框中内容超出时显示滚动条。二、代码部分1、html结构 测试中奖纪录 中奖纪录 ...
阅读全文
摘要：一、多个按钮绑定同一事件 二、一个按钮绑定多个事件 三、获取和设置的宽度/高度值 height()/ width()获取第一个匹配元素当前计算的的高度/宽度值。 height(val)/ width(val) 为每个匹配元素设置css高度属性/宽度属性值。 四、设置所有匹配元素css样式 css(p
阅读全文
摘要：一、需求如下图重点是要实现进度条。二、分析html5新增及删除标签一文中提到过html5新增了progress标签。但是肯定有兼容性问题。生成环境不适用，所以要模拟实现。原理：动态设置的子元素的宽度值。1、简单的雏形假设只有一个进度条，如下，我们只需要知道p元素的宽度，span元素的百分比，相乘即得...
阅读全文
摘要：一、生成数字时钟效果：二、将数字转换为图片方法一：图片名称即数字，用最简单的写法。用到图片：写一个函数strToImg(str)将一个字符串str中每一个数字转换为对应图片，然后动态创建标签。注意：每次调用需清空标签中的内容。方法二：【不适用】如果图片名称不是纯数字，就用一个数组保存起来。本方法操作...
阅读全文
摘要：一、用到的图片 二、代码如下，重点是js部分 效果如下： 三、注意事项 1、抽奖过程说明 上面只是前端展示的效果。中奖物品通过一个随机数生成。 真正开发中中奖物品是通过向后端接口发送请求返回的。 2、兼容性说明 .mask开始如下，用的是rgba，但是IE8不兼容，改为使用png图片backgrou
阅读全文
