推荐文章_JavaScript/Ajax开发技巧_Web前端开发教程_Web前端开发

javascript树数据源嵌套结构和扁平结构互转

2017-3-22评论(0)浏览(436)分类：JavaScript/Ajax开发技巧

　　javascript树，嵌套结构数据源和扁平结构数据源相互转换示例titlejavascript树数据源嵌套结构和扁平结构互转示例/titlescript type=text/javascript function FlatToNested(data, opt) {//树数据源扁平结构转嵌套 opt = opt || {}; var idFiled = opt.idFiled || 'id'; var textFiled = opt.textFiled || &..

JavaScript如何检查网站是否可以访问

2015-12-10评论(0)浏览(772)分类：JavaScript/Ajax开发技巧

　　JavaScript如何检查网站是否出现问题，无法访问。由于安全性问题，不可以跨域执行ajax代码，可以使用Image对象来加载对方服务器的一张图片(一般网站都会有网站图标，这个图标放在根目录下)，所以可以加载网站图标来判断是否可用。注意：Image加载的需要是图片，其他非图片文件无法检查网站是否可以访问，即使网站没有问题。titleJavaScript如..

jquery全年日期选择器日历插件

2016-8-26评论(13)浏览(816)分类：JavaScript/Ajax开发技巧

2017-8-2更新1)：新增setColors设置单元格颜色，param格式为{defaultColor:'#f00',dc:[{d:'2017-8-2',c:'blue'}..]}，dc数组c缺省会用defaultColor代替，defaultColor也缺省默认红色2)将2016-9-28更新整合到yearScale配置里面，配置这个年份变为下拉框，格式如{min:2000,max:2020}2016-9-28更新：如果需要年份选择可以下..

百度地图搜索当前用户位置附近停车场示例

2017-3-30评论(0)浏览(286)分类：JavaScript/Ajax开发技巧

　　百度地图搜索当前用户位置附近停车场，公园，餐馆示例思路就是用BMap.Geolocation类获取经纬度http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html#a7b34然后使用BMap.LocalSearch进行搜索停车场http://lbsyun.baidu.com/index.php?title=jspopular/guide/service#.E6.9C.AC.E5.9C.B0.E6.90.9C.E7.B4.A2经测试使用BMap.Geolo..

JavaScript调用百度地图显示驾车，步行导航示例

2017-3-30评论(0)浏览(288)分类：JavaScript/Ajax开发技巧

　　JavaScript调用百度地图显示驾车，步行导航示例JavaScript调用百度地图显示驾车，步行导航示例源代码如下htmlhead meta http-equiv=Content-Type content=text/html; charset=utf-8 / meta name=viewport content=initial-scale=1.0, user-scalable=no / style type=text/cssbody, html {width: 100%;height: 100%; margin:0;font-f..

select2动态添加选项

2017-3-2评论(0)浏览(1367)分类：JavaScript/Ajax开发技巧

　　select2查找选项时，如果不存在，如何动态添加用户输入的查找内容项目，实现如下效果。select2默认的下拉选项过滤后的选项，select2没有输入的匹配项目，给提示信息添加按钮点击添加选项点击按钮后给select2添加新输入选项并选中，并且下拉出现此自定义项目　　本示例居于Select2 4.0.3修改，其他版本注意修改选择器。第一步，修改查找没有记..

多文件选择上传jquery插件

2016-6-8评论(0)浏览(1435)分类：JavaScript/Ajax开发技巧

　　发一个支持多文件选择，可以过滤文件类型的纯js（非flash来实现）jquery插件jquery.multiFiles.js。多文件选择需要IE10+和其他标准浏览器，如chrome，firefox才支持。IE9-不支持multiple属性，或者移动端不支持multiple多选择文件时，只能一个一个选择，效果如下　　多文件选择上传jquery插件jquery.multiFiles.js有2个方法，reset和setExt。..

JavaScript限制输入框只允许输入数字和符号，小数点

2016-11-3评论(0)浏览(493)分类：JavaScript/Ajax开发技巧

　　JavaScript限制输入框只允许输入数字和符号，小数点，不允许输入其他内容，并且输入符号后不能在前面输入数字，小数点同理。titleJavaScript限制输入框只允许输入数字和符号，小数点/titleinput type=text onkeydown=return checkKeyCode(event,this) style=ime-mode: disabled; /script function getCursorPosition(el) {//获取光标位置..

js七彩泡泡屏保效果

2014-11-19评论(1)浏览(1582)分类：JavaScript/Ajax开发技巧

　　javascript实现的模拟xp七彩泡泡屏保效果，效果图如下js七彩泡泡屏保效果源代码如下!DOCTYPE htmlhtmlheadmeta charset=utf-8 /meta http-equiv=X-UA-Compatible content=IE=EmulateIE7 /titlejs七彩泡泡屏保效果/titlestylehtml, body{border: none;overflow: hidden;height: 100%;}body {background: url(/demo/bubble/BG.jpg) bottom}/st..

jQuery自适应容器焦点图，兼容移动端

2016-3-8评论(0)浏览(704)分类：JavaScript/Ajax开发技巧

　　jQuery自适应容器焦点图，兼容移动端浏览器，支持移动端的touch触碰事件滑动切换图片。效果如下　　兼容移动端的焦点图，只要放到指定的容器中，焦点图会自动水平填满容器宽度，移动端显示只需要控制指定容器的宽度，不需要关心焦点图显示，会自动填满此容器宽度，高度等比计算得出，图片不会变形。　　jQuery自适应容器焦点图，兼容移动端浏..

表格列交换，拖拽改变列宽效果

2016-1-11评论(0)浏览(719)分类：JavaScript/Ajax开发技巧

　　表格可以拖拽更换每列循序，并且可以拖拽修改每列长度jquery插件。使用到了colResizable-1.3.min.js（更改列宽）和colExchange.js（拖拽交换列位置，并且扩展了2个方法removeCol删除列和addCol添加列API方法）这2个插件，效果如下。　　表格列交换，拖拽改变列宽示例，查看效果点击这里：表格列交换，拖拽改变列宽示例!DOCTYPE htmlhtml lan..

javascript实现geohash算法

2016-8-23评论(0)浏览(466)分类：JavaScript/Ajax开发技巧

geohash有以下几个特点：　　首先，geohash用一个字符串表示经度和纬度两个坐标。某些情况下无法在两列上同时应用索引（例如MySQL 4之前的版本，Google App Engine的数据层等），利用geohash，只需在一列上应用索引即可。　　其次，geohash表示的并不是一个点，而是一个矩形区域。比如编码wx4g0ec19，它表示的是一个矩形区域。使用者可以发布地..

网站添加谷歌翻译工具条后自动翻译为指定语言

2016-5-24评论(0)浏览(668)分类：JavaScript/Ajax开发技巧

　　如何给网站添加谷歌工具条可以参考这篇文章：给网站增加google翻译工具条　　现在要实现的是，如何通过谷歌翻译工具条，自动将网站的内容翻译为指定的语言，不需要人工点开语言选择框，然后选择对应的语言后才执行翻译操作。　　通过观察谷歌翻译工具条可以看到语言选择DOM对象在一个iframe里面，样式为.goog-te-menu-frame，还在不是从谷歌..

JavaScript五子棋盘

2016-5-19评论(0)浏览(289)分类：JavaScript/Ajax开发技巧

　　javascript实现的五子棋盘，可以自定义棋盘大小，效果如下　　注意：判断输赢的算法没有写，要用自己扩展。IE8-不支持border-radius样式，所以无法显示圆形的，需要用圆形背景图片模拟，这个没做兼容，所以会显示为正方形的旗子。　　JavaScript五子棋盘源代码如下!doctype htmltitleJavaScript五子棋盘/titlestyle .board{position:rela..

+/-一元运算符计算空字符结果为0分析

2016-5-12评论(0)浏览(280)分类：JavaScript/Ajax开发技巧

　　JavaScript一元运算符对空字符计算时为什么得到0，代码如下scriptalert(+'')//0alert(+[])//0/script　　这是因为对空字符使用一元运算符+/-时，空字符会被强制转为0或者将字符串传入Number构造函数中，而Number('')返回0。scriptalert(Number(''))//0/script　　+[]为什么也是0，是应为+和对象运算，会调用对象的t..

javascript特殊用法解密

2016-3-31评论(0)浏览(129)分类：JavaScript/Ajax开发技巧

　1. Null是个对象　　JavaScript众多类型中有个Null类型，它有个唯一的值null, 即它的字面量，定义为完全没有任何意义的值。其表现得像个对象，如下检测代码：script alert(typeof null); //弹出 'object'/script如下截图：　　尽管typeof值显示是object，但null并不认为是一个对象实例。要知道，JavaScript中的值都是对象实例，每个数..

javascript新历农历联动示例

2015-12-16评论(0)浏览(256)分类：JavaScript/Ajax开发技巧

　　javascript新历农历联动示例lunar.js这个js文件查看这篇文章：JavaScript阳历转阴历源代码，将里面的js代码保存为lunar.js文件，或者点击这里下载　　javascript新历农历联动示例源代码script function toCNNumber(v) { var r = '', cn = 'O一二三四五六七八九十'; v = v.toString(); for (var i =..

JavaScript阳历转阴历源代码

2015-12-15评论(0)浏览(288)分类：JavaScript/Ajax开发技巧

　　JavaScript阳历转阴历源代码，JavaScript阴历转阳历源代码，从百度搞下来的阳历转阴历代码script (function () { var j = [43856, 19416, 19168, 42352, 21717, 53856, 55632, 25940, 22191, 39632, 21970, 19168, 42422, 42192, 53840, 53845, 46415, 54944, 44450, 38320, 18807, 18815, 42160, 46261, 27216, 27968, 43860, 11..

jquery多级下拉菜单插件

2013-12-20评论(0)浏览(315)分类：JavaScript/Ajax开发技巧

　　居于jquery框架的网站多级下拉菜单插件，融合了jquery.color.js，jquery.lavalamp.js，jquery.easing.js 这3个插件，效果如下图link rel=Stylesheet type=text/css href=/menu/menu.css /stylebody{background:#999}/stylediv id=menu ul class=menu li a href=# class=parentspanlevel 1_1/span/a ul ..

javascript判断中为假false的值

2015-12-15评论(0)浏览(495)分类：JavaScript/Ajax开发技巧

　　JavaScript中有 6 个值为假，这六个值是falsenullundefined0'' (空字符串)NaN　　虽然这六个值都为假，它们之间并非都相等console.log( false == null ) // falseconsole.log( false == undefined ) // falseconsole.log( false == 0 ) // trueconsole.log( false == '' ) // trueconsole.log( false =..

keypress,keyup中keyCode不一样

2016-1-14评论(0)浏览(134)分类：JavaScript/Ajax开发技巧

　　keypress,keyup/keydown事件中，事件对象event的keyCode属性值是不一样的。　　onkeypress事件中keyCode属性值为触发键字符代码，keyup/keydown事件为键盘代码。　　字符代码和键盘代码区别字符代码 - 表示 ASCII 字符的数字键盘代码 - 表示键盘上真实键的数字　　这两种类型的值不是都相等的（主要针对字母），例如小写字符 w 和大写字符 W..

JavaScript Keyboard Events

2016-1-14评论(0)浏览(71)分类：JavaScript/Ajax开发技巧

Jan WolterNote: I have stopped updating this page. At this point nearly all popular browsers are have achieved a good level of compatibility on most of these features, and their behavior with respect to them just isn't changing much anymore. The only thing web designers really need to still watch out for is IE8, wh..

flipsnap.js模仿手机滑动效果

2016-1-7评论(0)浏览(1206)分类：JavaScript/Ajax开发技巧

　　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..

jquery attr prop 区别

2014-1-27评论(0)浏览(562)分类：JavaScript/Ajax开发技巧

　　prop是jquery1.6新增的方法，其与attr的用法极为相似。由于不理解他们的根本区别，难免产生离奇的BUG。　　通过分析attr和prop的源码，得知：　　attr 方法里面，最关键的两行代码，elem.setAttribute( name, value + )和ret = elem.getAttribute( name )，很明显的看出来，使用的DOM的API setAttribute和getAttribute方法操作的属性元素节..

如何检查浏览器支持javascript最高版本

2015-12-10评论(0)浏览(182)分类：JavaScript/Ajax开发技巧

　　如何检查浏览器所支持的javascript的最高版本号。目前浏览器javascript版本号最高为1.8.5（对应ECMAScript标准5）。　　检查浏览器支持javascript最高版本源代码如下，通过动态创建script标签，然后指定language属性为不同版本的javascript版本来实现。firefox39 javascript版本号chrome38 javascript版本号script type=text/javascript ..

javascript，JScript和ECMAScript版本

2015-12-10评论(0)浏览(106)分类：JavaScript/Ajax开发技巧

　　下表列出了JavaScript，JScript和ECMAScript版本号对应关系，及浏览器版本所使用的JavaScript版本号。JavaScriptJScriptECMAScriptRelease dateNetscape NavigatorMozilla FirefoxInternet ExplorerOperaSafariGoogle Chrome1.01.0March 19962.03.0- early versions, August 19961.12.0August 19963.03.0- later versions, January 19971.2J..

CSS表格固定表头示例

2015-12-10评论(0)浏览(1134)分类：HTML/CSS兼容/XML

　　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..