jquery实现章节目录效果

评论(0)浏览(1569)分类：JavaScript/Ajax开发技巧
jquery实现章节目录效果　　本示例实现文章详细内容如果添加了anchor锚点时，在页面右边生成一个不随页面滚动的固定anchor列表，当那些章节锚点显示在浏览器可见视窗内，增加浮动章节列表的锚点获得焦点的样式。章节的锚点位置注意看示例中的代码，将会取章节容器中的第一个子元素锚点作为章节目录列表内容。jquery实现章节目录效果源代码!DOCTYPE html titlejquery实现..

firefox下reset控件无法清除hidden控件value

评论(0)浏览(1540)分类：JavaScript/Ajax开发技巧
firefox下reset控件无法清除hidden控件value　　今天搞一个表单，发现在w3c浏览器和ie浏览器下的一个问题，w3c浏览器无法使用reset控件或者表单的reset事件来清空通过js设置hidden控件后的值，其他可以显示的控件值是可以还原到原来的状态，但是hidden的话无法还原，郁闷了，(#‵′)靠。　　在IE浏览器下可以清空js设置的hidden控件的值，为什么w3c浏览器无法清除呢？⊙﹏⊙b汗....难道我理..

for循环遍历如何延时执行

评论(0)浏览(1524)分类：JavaScript/Ajax开发技巧
for循环遍历如何延时执行　　如要遍历一个数组，for语句要如何延时输出数组中的项目，一般情况下想当然都会这样写div id=dv/divscript var arr = [1, 2, 3, 4, 5]; for (var i = 0; i arr.length; i++) { setTimeout(function () { document.getElementById('dv').innerHTML += arr[i] + 'br'; }, 3000); }/script　..

jquery仿京东商城三级联动代码插件

评论(0)浏览(1477)分类：JavaScript/Ajax开发技巧
jquery仿京东商城三级联动代码插件　　模仿京东送货地址省市县3级联动，已经做成jQuery插件形式，效果图如下　　jquery仿京东商城三级联动代码插件DEMO!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; chars..

javascript转义字符(\)对JSON.parse和eval的影响

评论(0)浏览(1469)分类：JavaScript/Ajax开发技巧
javascript转义字符(\)对JSON.parse和eval的影响　　一般来说在JSON.parse的参数包含转移字符的时候会遇到两次转义的问题，其实第一次是字符串本身的转义，第二次是将真正转为js对象的转义。　　对于要转为JSON对象的字符串，如果包含\n，\t，\此类转义字符，执行JSON.parse或者eval后，会报错或者丢失掉部分信息（eval）。如eval('{a:\n}')//SyntaxError: unterminated string litera..

http://query.yahooapis.com/v1/public/yql JSONP跨域接口API使用说明

评论(0)浏览(1468)分类：JavaScript/Ajax开发技巧
http://query.yahooapis.com/v1/public/yql JSONP跨域接口API使用说明YQL 介绍SELECT 语句INSERT/UPDATE/DELETE 语句使用开放数据表格调试示例应用总结声明　　目前在 Web 上面已经有很多结构化数据可以供开发人员来使用。但是使用这些数据，要求对数据的请求和响应格式有一定的了解。不同服务提供者所采用的数据格式是不同的。 开发人员需要查阅 Web 服务的文档和相关资料，才知道如何使用这些服务。YQL 是雅虎提供..

js控制移动浏览器输入框获取焦点隐藏不弹出系统软键盘

评论(0)浏览(1466)分类：JavaScript/Ajax开发技巧
js控制移动浏览器输入框获取焦点隐藏不弹出系统软键盘　　使用移动端浏览器看网页时，输入对象获取焦掉后会自动弹出系统的软键盘，导致页面显示区域变小，如何禁止输入对象input获取焦点后的系统软键盘。　　js控制移动浏览器输入框获取焦点隐藏不弹出系统软键盘源代码如下input type=text id=phone-number onfocus=blur(); /　　意思就是获取焦点后马上取消焦点，这样软键盘就会自动隐藏了。下面是..

chrome An invalid form control with name is not focusable.

评论(0)浏览(1463)分类：JavaScript/Ajax开发技巧
chrome An invalid form control with name is not focusable. 　　提交表单时chrome控制台出现错误：An invalid form control with name is not focusable.　　出现这个错误是因为表单中包含了HTML5属性required的控件不可见（如这个控件style display设置为none或者其父容器display为none），被隐藏起来了，导致chrome无法聚焦这个值为空的输入项弹出错误提示窗口而报错：An invalid form control with nam..

console.log在IE8+提示未定义

评论(0)浏览(1458)分类：JavaScript/Ajax开发技巧
console.log在IE8+提示未定义　　console.log方便在浏览器控制台输出对象的信息，非IE浏览器基本都支持console.log调试。　　IE8+浏览器增加了开发人员工具，在开发人员工具下支持console.log语句。　　但是需要注意的是：使用console对象查看对象信息，在IE8+浏览器下未打开过开发人员调试工具的情况下，会报console.log在IE8+提示未定义错误。　　打开过开发人员工具后，再..

document.createAttribute方法

评论(0)浏览(1430)分类：JavaScript/Ajax开发技巧
document.createAttribute方法示例创建一个class属性，属性值为democlass，并且给第一个h1元素设置这个属性。var att=document.createAttribute(class);att.value=democlass;document.getElementsByTagName(H1)[0].setAttributeNode(att);定义和用法document.createAttribute方法通过传递一个指定属性名称创建一个属性对象，返回一个属性对象。属性对象的更多介绍参考这篇文章..

移动端touch事件和事件参数详解

评论(1)浏览(1422)分类：JavaScript/Ajax开发技巧
移动端touch事件和事件参数详解什么是touch事件　　touch事件是移动端触屏设备上的事件，当用户触摸屏幕及进行一系列操作时发生的事件。 包含touchstart, touchmove, touchend事件。touch事件模式　　touch事件同其他dom事件一样（因为本身就属于dom事件，只不过用在触屏设备的新增html5事件），用 addEventListener绑定，在事件处理时使用e.prevantDefault()来阻止默认事件执..

data:image/gif;base64设置图片路径及控件背景

评论(0)浏览(1403)分类：JavaScript/Ajax开发技巧
data:image/gif;base64设置图片路径及控件背景　　　data:image/gif;base64设置图片路径及控件背景，这算是一种图片路径的新写法。将图片进行编码，然后存在文档中。各自含义如下：data: ----获取数据类型名称image/gif; -----指数据类型名称base64 -----指编码模式AAAAA ------指编码以后的结果。background-image: url(data:image/gif;base64,AAAA)这句话的意思总体就是“获取数据类型是im..

IE7+浏览器下XMLHttpRequest跨域请求安全配置

评论(0)浏览(1387)分类：JavaScript/Ajax开发技巧
IE7+浏览器下XMLHttpRequest跨域请求安全配置　　IE7+浏览器已经开始支持XMLHttpRequest对象，当使用XMLHttpRequest请求不同源的文件（不同域名的页面），和浏览器是否启用安全-》internet区域的通过域访问数据源有关系。如果启用了此选项，那么所有跨域的页面都可以访问，即使跨域的页面没有设置过Access-Control-Allow-Origin响应头。如果禁用了通过域访问数据源,跨域页面设置过Access-Co..

jquery1.5+ ajax跨域请求在IE下没反应分析

评论(0)浏览(1386)分类：JavaScript/Ajax开发技巧
jquery1.5+ ajax跨域请求在IE下没反应分析　　jquery1.5+重写过ajax代码，增加了跨域判断（自动判断ajax请求的url地址是否和当前访问的页面同源，jquery1.4-版本没有增加跨域判断，所以直接发送ajax请求，这样就和浏览器的安全设置有关了），jquery1.5+如果跨域访问并且不支持跨域请求（这些都是jquery代码自动判断的），就不会发送ajax请求（所以浏览器安全设置被忽略），导致没有触发任..

获取iframe中鼠标事件在父页的坐标位置

评论(0)浏览(1342)分类：JavaScript/Ajax开发技巧
获取iframe中鼠标事件在父页的坐标位置　　如果在iframe中单击鼠标时，使用event.clientX和event.clientY获取到的是点击的位置相对于iframe的坐标位置，并非是相对于父页的，所以如果要获取相对于父页的坐标位置，就需要加上iframe的绝对位置x和y，这样才是相对于父页的坐标位置。　　换算关系：相对坐标x＝iframe绝对x位置+iframe内触发的鼠标x位置。　　注意事项：由于要使用到父页..

DOM对象旋转插件jquery.rotate.js

评论(0)浏览(1323)分类：JavaScript/Ajax开发技巧
DOM对象旋转插件jquery.rotate.js　　jQuery 插件jquery.rotate.js，可以实现DOM对象旋转效果。jquery.rotate.js支持所有主流浏览器，包括 IE6。如果你想在低版本的 IE 中实现旋转效果，那么jquery.rotate.js是一个很好的选择。jquery.rotate.js参数参数类型说明默认值angle数字旋转一个角度0animateTo数字从当前的角度旋转到多少度0step函数每个动画步骤中执行的回调函数，当前..

IE8-如何获取input光标所在位置（selectionstart）

评论(0)浏览(1316)分类：JavaScript/Ajax开发技巧
IE8-如何获取input光标所在位置（selectionstart）　　IE9+和标准浏览器支持输入对象的selectionStart属性，可以获取到光标所在输入空间中的位置，IE8-要想获取光标所在位置（selectionstart属性），需要使用range对象。　　IE8-如何获取input光标所在位置（selectionstart）源代码如下input type=text id=txt value=1234567 /input type=button value=获取text光标位置 onclick=alert(getCaret(..

jQuery仿excel表格单元格合并插件

评论(2)浏览(1300)分类：JavaScript/Ajax开发技巧
jQuery仿excel表格单元格合并插件2017-8-3更新：修复已经执行过合并操作的table，单元格选择及合并不正确。　　jQuery表格单元格合并插件，将合并后的所有单元格内容到第一个单元格中，支持已经被合并的多单元格的选择合并，功能和excel单元格合并功能一样。　　jQuery防excel表格单元格合并插件源代码如下script type=text/javascript src=https://cdn.bootcss.com/jquery/1.7...

jQuery jsonp跨域原理

评论(0)浏览(1300)分类：JavaScript/Ajax开发技巧
jQuery jsonp跨域原理　　实际上单jQuery还是实现不了跨域加载数据的，由于XMLHttpRequest的安全设置，是不允许直接跨域的。jQuery的jsonp虽然能跨域，但是还得请求的页面支持才行，如果请求的页面不理会jQuery发送的参数，是无法跨域的，实际上来说是获取不到输出的页面内容。　　jQuery jsonp跨域原理实际就是使用script标签加载配置对象中的跨域url，再使用script..

JavaScript本地存储(DOM Storage,Local Storage)

评论(0)浏览(1299)分类：JavaScript/Ajax开发技巧
JavaScript本地存储(DOM Storage,Local Storage)　　DOM Storage是在网络客户端存储键值对数据的一个标准。这使离线的网络应用的开发变得更加实际和简单。　　跟它看起来非常相似的另外一个就是cookies了，但是它在某些方面比cookies有很大的优势。1. 更大的存储空间。cookies的大小大约限制在4KB左右，而DOM Storage则在10MB左右，实用性大大提高。2. 能够真正的持久化到本地。cookies并没有提..

js文件三斜杠注释///reference path用途

评论(0)浏览(1296)分类：JavaScript/Ajax开发技巧
js文件三斜杠注释///reference path用途　　编辑某个js文件时，要想这个js文件出现其他js成员的ide提示，可以再js文件开头使用3个斜杠注释和reference指令的path指向此js文件路径，这样在编写这个js文件时，ide就会自动出现path指向的js文件中的成员。　　如导入jquery框架，在vs2013中编写js文件时，jquery的标志性字符$就会自动出现在ide中，并且其方法也会一起ide提示，大大加快代码..

javascript将html代码绘制为图片

评论(0)浏览(1293)分类：JavaScript/Ajax开发技巧
javascript将html代码绘制为图片　　javascript如何将html代码转为图像，示例使用到了html2canvas这个类库，将html dom对象绘制到canvas中，然后在调用canvas的toDataURL得到图片base64字符串内容，设置img的src为toDataURL返回的内容即可显示html对应的图片。如果需要保存图片，需要自己将base64内容到服务器端进行2进制转换保存为图片后设置content-disposition为attachment进..

ckeditor自动填满容器

评论(0)浏览(1290)分类：JavaScript/Ajax开发技巧
ckeditor自动填满容器　　ckeditor设置了高度为100%百分比时并不会自动将容器填充满，通过firebug查看生成的ckeditor代码结构后，如下图，编辑器的td设置了高度为height:100%的样式，但是并没有实现容器的完整填充。　　ckeditor有自动全屏的功能，如果是想自动填充整个显示窗口，而不是指定的容器，可以通过调用CKEDITOR.instances.content.execCommand('maximi..

简易flv播放器jquery.jflv.js

评论(0)浏览(1284)分类：JavaScript/Ajax开发技巧
简易flv播放器jquery.jflv.js　　简易flv播放器，可用通过js控制flv播放，暂停。具体参考下面的示例说明，已经做成jquery插件形式。注意：要用js控制flv的播放停止，需要将示例发布后，通过http访问，要不会报错：uncaught exception: Error in Actionscript. Use a try/catch block to find error.Line 0　　jquery.jflv.js示例及使用说明文档html xmlns=http://www.w3.org..

flipsnap.js模仿手机滑动效果

评论(0)浏览(1274)分类：JavaScript/Ajax开发技巧
flipsnap.js模仿手机滑动效果　　flipsnap.js是一款模拟手机浏览器滑动效果的类库，支持电脑上鼠标按下滑动和手机浏览器触摸滑动效果flipsnap.js使用指南1，导入flipsnap.js类库（flipsnap.js不依赖其他js类库）script src=flipsnap.js/script2，编写html代码html代码示例如下，外层html样式为.viewport，内层元素样式为.flipsnap。div class=viewport div class=flipsna..

json.js与jquery冲突too much recursion/Stack Overflow

评论(0)浏览(1273)分类：JavaScript/Ajax开发技巧
json.js与jquery冲突too much recursion/Stack Overflow　　json.js文件和jquery序列化JSON对象为键值对的方法param产生冲突，导致json.js文件中的toJSONString方法重复调用自身从而堆栈溢出出现too much recursion【firefox】/Stack Overflow【IE浏览器】错误。　　产生too much recursion/Stack Overflow这个问题主要是jquery调用ajax方法时，如果参数为json对象，jquery会调用param方法序列化json对..

canvas视频处理，添加文字，水印图片

评论(0)浏览(1241)分类：JavaScript/Ajax开发技巧
canvas视频处理，添加文字，水印图片canvas视频处理，给原视频添加文字，水印之类，合成新的视频，效果如下!DOCTYPE htmlhtmlhead meta charset=UTF-8 titlecanvas处理视频/title/headbody canvas id=canvas width=300 height=168/canvas video width=300 height=168 controls src=/demo/2.mp4 id=video muted/video video width=300 height=168 controls id=vr mut..

如何导入使用echarts和切换主题

评论(0)浏览(1235)分类：JavaScript/Ajax开发技巧
如何导入使用echarts和切换主题　　网站如何使用echarts，要使用echarts绘制图形需要哪些js文件。下载的echarts示例里面有很多文件，实际使用到的只有3个文件（esl.js，echarts.js，echarts-map.js），如果不需要地图，那么只需要前面esl.js，echarts.js，其中esl.js是必须的。　　下面以echarts-2.0.4为例，将下载的echarts-2.0.4压缩包解压到任意一个路径下，打开echarts-2...

解决uploadify cancel取消上传再选择文件报超过限制错误

评论(0)浏览(1230)分类：JavaScript/Ajax开发技巧
解决uploadify cancel取消上传再选择文件报超过限制错误　　调用uploadify的cancel方法后，如果再选择文件，超出uploadLimit配置值会报错。看源代码后，uploadify调用cancel方法只有清空队列的情况下（传递*参数,$(xxx).uploadify(cancel,*)）才会重置上传队列的值，对于取消单个文件或者指定了多个要取消的队列id参数，没有重置队列长度，继续包含被取消上传的文件数量。所以继续选择文件就会报超过队..

CSS表格固定表头示例

评论(0)浏览(1229)分类：HTML/CSS兼容/XML
CSS表格固定表头示例　　css+JavaScript实现表格的表头固定效果，页面滚动，表头处于页面最顶端。　　CSS表格固定表头示例代码如下!doctype htmlhtml headtitleCSS表格固定表头/titlemeta http-equiv=Content-type content=text/html; charset=utf-8style type=text/css* html,* html body /* 修正IE7振动/闪动bug */{background-image:url(about:blank);background..