JavaScript/Ajax开发技巧_Web前端开发教程_Web前端开发

jquery实现章节目录效果

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

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

javascript ==和===如何比较值，类型转换

2021-7-8评论(0)浏览(17)分类：JavaScript/Ajax开发技巧

===运算符判断相等的流程是怎样的如果两个值不是相同类型，它们不相等如果两个值都是null或者都是undefined，它们相等如果两个值都是布尔类型true或者都是false，它们相等如果其中有一个是NaN，它们不相等如果都是数值型并且数值相等，他们相等， -0等于0如果他们都是字符串并且在相同位置包含相同的16位值，他它们相等；如果在长度或者内容上不..

下载谷歌字体woff2放到服务器cancel加载失败provisional headers are shown

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

　　由于谷歌被墙的原因，无法直接引用谷歌的css资源和字体，要想引用谷歌的字体，可以先翻墙，将css文件中的woff2，woff之类的字体文件下载下来放到自己的服务器上。　　最近将谷歌字体Open Sans字体下载下来放到自己服务器后，web服务器已经配置好woff，woff2字体文件的mime类型font/woff2，可以访问woff2字体文件弹出下载框，但是加载css文件..

XMLHttpRequest加载视频并播放

2017-8-15评论(0)浏览(108)分类：JavaScript/Ajax开发技巧

　　XMLHttpRequest加载视频文件2进制数据流到客户端，并使用video控件播放。结合XMLHttpRequest Level 2特性，可以使用XMLHttpRequest对象接受服务器端返回的2进制数据流，然后使用生成blob对象，URL.createObjectURL生成文件引用路径赋值给video标签即可播放。　　XMLHttpRequest加载视频并播放源代码如下%@ Page Language=C# AutoEventWireup..

javascript混淆加密

2017-8-12评论(0)浏览(65)分类：JavaScript/Ajax开发技巧

　　javascript另类混淆加密源代码：textarea id=ta style=width:100%;height:300pxalert('大家好，我是showbo!𠮷双字节测试')/textareainput type=button value=加密 onclick= taEncrypt.value = encrypSource(ta.value); /　input type=button value=执行加密代码 onclick=eval(taEncrypt.value) /br /加密后代码：textarea id=taEn..

隐藏amcharts漏洞图中指定图形

2017-8-11评论(0)浏览(38)分类：JavaScript/Ajax开发技巧

　　隐藏amcharts漏洞图中指定图形　　下面示例通过查找漏斗图中图形对应文字的文字容器，然后通过文字容器定位图像执行隐藏，文字容器的前一个节点为图形。　　源代码如下，直接测试官网示例，https://www.amcharts.com/demos/3d-funnel-chart/，控制台输入下面的代码，效果如下function hideSVGByText(text) { var tspan = document.querySel..

去掉FusionCharts XT Trial试用文字

2017-8-8评论(0)浏览(49)分类：JavaScript/Ajax开发技巧

　　js移除FusionCharts XT Trial试用文字，不试用ie7-FusionCharts XT Trial字样移除FusionCharts XT Trial字样　　移除FusionCharts XT Trial试用文字源代码如下htmlhead meta content=text/html; charset=UTF-8 http-equiv=content-type link href=/css/normalize.css type=text/css rel=stylesheet link href=/css/result-light.cs..

javascipt修改css级联样式表类和伪类样式

2013-6-24评论(0)浏览(436)分类：JavaScript/Ajax开发技巧

　　javascript修改级联样式表文件或者内嵌级联样式表中定义的类样式属性。需要注意的是级联样式中的伪类直接替换属性值无效，需要新增样式进行覆盖，替换值不起作用!doctype htmltitlejavascipt修改css级联样式表类和伪类样式/titlestyle.exampleA{color:Blue}.exampleA:before {content:-;color:red;font-size:20px;font-weight:bold}/style!-..

js对中文进行gb2312/gbk编码解码

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

　　JavaScript使用的是Unicode编码，使用内置的encodeURIComponent，encodeURI，escape都是编码为Unicode的url编码，如果传递这些编码到gb2312或者gbk编码的页面就会乱码。　　下面是用js中实现GBK／gb2312编码。适合使用js进行页面参数传递时，给GBK／gb2312编码页面传递参数，解决乱码。　　点击下载：js对中文进行gb2312/gbk编码类库　　下载..

修改kindeditor编辑器默认显示行高

2017-8-4评论(0)浏览(74)分类：JavaScript/Ajax开发技巧

　　如何修改kindeditor编辑器显示框里面内容的默认行高。　　通过上图知道kindeditor编辑器的输入容器（body）有ke-content样式，但是编辑器iframe并没有定义ke-content样式，所以只需要加上ke-content样式定义下line-height就行了。　　记事本打开kindeditor-min.js或者kindeditor-all-min.js，如果导入的未压缩的自己记事本打开对应的js文件即..

javascript保存类实例

2012-12-19评论(0)浏览(22)分类：JavaScript/Ajax开发技巧

　　javascript如何保存创建的所有类实例作为类的静态属性，实例代码如下script function MyObj(name, instancename) { if (MyObj.instances[instancename]) instancename += '_1';//如果重名则重新命名实例名称 MyObj.instances[instancename] = this; this.name = name; this.showwho = function () {..

iframe自适应高度

2017-6-10评论(0)浏览(199)分类：JavaScript/Ajax开发技巧

　　iframe自适应高度，设置iframe的高度为加载内容的高度，不出现滚动条。iframe自适应高度源代码如下test.htmla href=index.html target=myifrindex.html/aiframe src=index.html name=myifr style=width:100% onload=setIfrHeight(this)/iframescript function setIfrHeight(el) { el.style.height = el.contentWindow.document.b..

localStorage,sessionStorage跨域共享解决办法

2017-6-13评论(0)浏览(664)分类：JavaScript/Ajax开发技巧

　　localStorage只有同源的情况下（域名，协议，端口号都一致）才能在不同页面共享。　　sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久就销毁了，不同页面或标签页间无法共享sessionStorage的信息。共享也有条件限制，如果不能操作跨域页面是无法实现共享的。sessionStorage生命周期比较特殊，需要用html5的的postMessage..

jquery模拟marquee滚动

2017-6-14评论(0)浏览(181)分类：JavaScript/Ajax开发技巧

　　jquery模拟marquee滚动效果，可以设置滚动完毕后间隔多少秒再重新滚动。如果是只需要兼容IE浏览器，marquee有个onfinish事件（需要指定loop或者behavior为behavior=slide才会触发onfinish事件），可以使用此事件结合setTimeout重启marquee。测试firefox不支持marquee的stop和start方法，所以要兼容firefox使用js控制效果最佳。　　jquery模拟..

JS使用json数据自动填充表单

2017-7-13评论(0)浏览(156)分类：JavaScript/Ajax开发技巧

　　JS使用json数据自动填充表单titleJS使用json数据自动填充表单示例/titleform name=myformtext:input type=text name=text /br /textarea:textarea name=textarea/textareabr /radio:input type=radio name=radio value=radio1 /radio1　input type=radio name=radio value=radio2 /radio2br /checkbox:input type=checkbox name=checkbox va..

文章评分评级jquery插件

2009-9-10评论(1)浏览(195)分类：JavaScript/Ajax开发技巧

居于jquery框架的文章评分评级插件，效果如下数据库设计很简单，就用一个字段存储score，记录1-5星投票的人数，用|分隔开。循序为5星|4星|3星|2星|1星注意：这个字段的默认值要设置为0|0|0|0|0测试源代码及相关使用说明如下script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js/scriptstyle.codes..

jQuery jsonp跨域原理

2010-7-19评论(0)浏览(1096)分类：JavaScript/Ajax开发技巧

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

javascript通过鼠标拖拽修改图片大小和位置

2012-9-22评论(0)浏览(151)分类：JavaScript/Ajax开发技巧

　　javascript实现图片的拖拽移动，给图片添加锚点，放到锚点上出现resize鼠标形状，按下鼠标拖拽更改图片大小，效果如下　　源代码如下!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 conte..

css hover伪类

2012-9-26评论(0)浏览(64)分类：HTML/CSS兼容/XML

　　:hover伪类应用处于悬停状态的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，在css2的定义中:hover伪类可以应用在全部元素上。　　但是在ie6浏览器下面，只有链接标签a支持:hover伪类，对于ie6需要使用js，而ie7/ff/op/sa直..

C#/vbscript/JS如何加密保护HTML/javascript源代码

2012-10-8评论(1)浏览(755)分类：JavaScript/Ajax开发技巧

　　本文通过将源代码进行unicode转换后进行混淆加密，对HTML或者javascript源代码进行加密，将内容转换为一些看似乱码的内容，然后通过客户端的JS脚本反相解析回来。　　HTML/javascript源代码加密混淆算法1）ASCII编码内可见字符【33~126】，33~79进行+47操作操作，80~126进行-47操作2）ASCII编码内部可见字符【0~32,127】，【128~133】，不操..

javascript实现图片抖动

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

　　javascript实现图片抖动源代码，通过设置marginTop和marginLeft实现htmlheadmeta http-equiv=content-type content=text/html;charset=gb2312 /titlejavascript实现图片抖动源代码/titlestyle type=text/css.shakeimage{position:absolute; left:200px; top:200px;}/style/headbodyinput type=button value=开始抖动 onclick=start(this,10,..

动态更新的内容如何以瀑布流masonry重新布局

2012-11-16评论(0)浏览(2509)分类：JavaScript/Ajax开发技巧

　　页面第一次加载完毕后执行了masonry绘制瀑布流布局后，后续使用javascript或者ajax更新的节点内容要以masonry瀑布流布局添加到容器里面，可以使用2种方法使新增加的内容以瀑布流的形式呈现1）对总容器调用masonry的reload方法将会重绘容器节点内的所有内容2）对新添加的节点执行masonry的appended方法，对新添加的节点计算新新节点的位置后以..

javascript/asp.net转换字符串为16进制编码

2012-12-7评论(0)浏览(425)分类：JavaScript/Ajax开发技巧

　　将字符串编码为１６进制\u（asciis大于256）或者\x（ascii小于等于256）编码的字符串，当原页面和请求页面编码不统一时，可以有效解决中文内容乱码问题。　　javascript将字符串转为16进制编码内容，以\x16进制形式显示在源代码中，实现代码的简单加密。源代码如下script function sToHex(str) { var val = ,charCode,s; f..

javascript获取遮盖层被点击时下面的DOM对象

2012-12-14评论(0)浏览(271)分类：JavaScript/Ajax开发技巧

　　今天在csdn看到一个问题：整个网页用div遮住，鼠标点击上面的div怎么获得鼠标下面遮住的HTML元素　　思路：计算页面内所有的DOM对象的范围存储在一个数组中，在点击遮盖层的时候获取鼠标点击坐标，然后遍历数组判断点击坐标是否在数组对象的范围之内，是则返回这个对象。　　示例代码如下style/stylediv style=width:200px;height:100px;我是..

图片左右滚动效果

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

　　一个图片左右滚动的效果，如果滚动到结尾或者开头时，再点击切换则切换到第一张后缀最后一张，省略中间图片的滚动，直接是首位２张图片滚动的效果。　　源代码如下!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 h..

Asp.Net+flash+jquery.TY.js涂鸦插件，可保存涂鸦图片

2013-2-18评论(2)浏览(460)分类：JavaScript/Ajax开发技巧

　　20132-20更新：增加了加载图片的缩放功能。将缩放后的宽度传到动态页，动态页获取后重新计算坐标位置后绘图。如果涂鸦不和图片合成，当宽度小于默认的650，绘制一条分隔线。　　Asp.Net+flash+jquery实现的在线涂鸦插件，通过将涂鸦数据发送到ashx页面，ashx获取到数据后绘制图片并保存涂鸦图片。　　本示例基于謾軻（Manction），http://ma..

图片手风琴效果jQuery插件

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

　　图片手风琴效果jQuery插件，要使用本插件需奥导入jquery框架。效果和源代码如下!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtmlheadmeta http-equiv=content-type content=text/html; charset=utf-8/script type=text/javascript src=/js/jquery.js/scripttitle..