11/16
2016
javascript中的document.getElementsByClassName()方法是很实用也很常见的DOM选择器方法，然而IE8及以下版本的IE浏览器并不支持此方法（IE8都支持querySelector()方法了，却不支持getElementsByClassName()方法，实在匪夷所思）。
下面的代码可以在低版本IE浏览器中实现一个document.getElementsByClassName()方法。
if (!document.getElementsByClassName) {
document.getElementsByClassName = function(className, element) {
var children = (element || document).getElementsByTagName('*');
var elements = new Array();
for (var i = 0; i < children.length; i++) {
var child = children[i];
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
};
}
加入这份代码之后，就可以正常使用document.getElementsByClassName()方法了。
（也许遍历所有HTML标签开销比较大←_← 只要求兼容到IE8的话尽情的使用querySelector()方法和querySelectorAll()方法吧)
在低版本IE浏览器上实现getElementsByClassName()方法
11/14
2016
如图，网站排版时做了分享按钮（图片、样式都是已经写好了的），之后需要加上功能，那我们使用百度分享的话应该怎么做呢？
首先可以参考百度的官方说明文档。这个文档也很好理解，只是在“自定义设置”部分容易让人迷糊。
其实像上图这样最简单、最常用的分享方式，不需要去管那么多设置项。以下是最小化的实现代码：
<div class="bdsharebuttonbox" data-tag="share_1">
<a class="tsina" data-cmd="tsina"></a>
<a class="tqq" data-cmd="tqq"></a>
<a class="sqq" data-cmd="sqq"></a>
<a class="renren" data-cmd="renren"></a>
</div>
<script>
// 百度分享按钮设置
window._bd_share_config = {
"share": {} //如果样式已经自己写好了，那么只需要这一句即可
}
//加载百度分享js文件
with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
</script>
html部分，外层容器的class="bdsharebuttonbox"是必须的。如果你页面上只有这一个分享区域，那么可以去掉data-tag="share_1"。
分享按钮必须是a标签，不然功能不会生效。
a标签的class属性不是必须的，可以不加或者设置成不同的。如果设置成百度分享允许的class的话，这个按钮会被自动加上一些样式。
a标签的data-cmd属性是必须的，它表示点击这个按钮后是要分享到哪里去。另外有了data-cmd属性后，这个a标签还会被自动加上title属性，如 title="分享到新浪微博" 。
剩下的是JavaScript部分，分享按钮设置里面只用写一句就行了（当然也可以按需要增加更多的设置）。底下“加载百度分享js文件”无需改动。
做完之后，分享按钮的功能就已经加上了。
ps：如果想知道自己分享的目标的代号是什么（a标签的data-cmd属性部分），可以查看分享媒体和标识对应表。
在网页上添加百度分享功能
11/9
2016
在网页上，当按键被按下时，我们可以使用JavaScript来捕获到这个事件。
在JavaScript里，每个键都会有一个数字代码，我们可以使用JavaScript来查看按键对应的代码是什么。
document.onkeydown=function(event){
var e = event || window.event;
console.log(e.keyCode);
}
JavaScript捕获按键
11/8
2016
这个banner带指示器和左右切换按钮，通屏不通屏皆可使用，有自动播放功能，可以设置是否循环展示。当鼠标放在banner区域时，也可以使用左右方向键来控制banner的切换。兼容IE8及以上浏览器。
Read More →
JavaScript制作的带控制按钮的banner
10/29
2016
在百度贴吧里，有时候关注你的人里会有些无意义的小号或机器人账号（我就经常被机器人账号关注），通常他们的粉丝数很低（0或1），本工具可以通过这个条件来删除这些粉丝。
你可修改setNum变量的值来修改设定数字。
本脚本自动执行，自动翻页，一直删除到最后一页为止。
删除完毕后请记得停用此脚本哦~
真正的粉丝……
自动删除百度贴吧里的低粉丝数的粉丝
10/24
2016
新版界面，pid=68972163
本工具可以在pixiv上筛选你需要的图片，并且下载下来。下载到的图片都是原图尺寸。
你可以在greasyfork.org安装此UserScript。
本工具是一个用户脚本（UserScript），你需要先在浏览器里安装用户脚本管理器扩展，再通过上面的链接把本脚本安装到用户脚本管理器里。
推荐使用chrome浏览器+Tampermonkey来安装。不要把本脚本直接作为浏览器的扩展安装。
github页面：https://github.com/xuejianxianzun/XZPixivDownloader
---------------
本工具现已推出 Chrome 扩展：
在 Chrome webstore 上安装 （扩展版的更新比较慢，我是先更新脚本版的）
-------------
QQ交流群：675174717
Read More →
仙尊pixiv图片下载器 Xianzun Pixiv Downloader
10/19
2016
原生JavaScript写法附带兼容性处理：
if (!!window.attachEvent) { //区分浏览器指派事件
document.getElementById("a").attachEvent("onclick",fun,false);
}else{
document.querySelector("#a").addEventListener("click",fun,false);
}
function fun (event) {
//处理event对象的兼容性
var e=event||window.event; //firefox里的event是临时的，不是window下的全局变量
//停止事件冒泡
e.stopPropagation?e.stopPropagation():e.cancelBubble=true; //低版本ie使用cancelBubble属性，其他浏览器使用stopPropagation方法
//阻止浏览器默认行为
e.preventDefault?e.preventDefault():e.returnValue = false; //低版本ie设置returnValue属性，其他浏览器使用preventDefault方法
}
IE8及更低版本的IE，添加事件要使用私有的attachEvent()，也不支持stopPropagation()和preventDefault()，真是毒瘤啊。
如果使用jQuery的话，写起来更加方便，因为jQuery已经做了兼容性处理，我们用w3c标准方法就行了：
$("a").click(function (e) {
e.stopPropagation(); //停止事件冒泡
e.preventDefault(); //阻止浏览器默认行为
return false; //同时停止冒泡和阻止默认行为。
});
注意，jQuery中的return false和原生JavaScript里的return false是有区别的：
原生JavaScript中的return false不会停止冒泡，只会阻止默认行为。但jQuery中的return false会同时停止冒泡和阻止默认行为。
JavaScript停止事件冒泡以及阻止浏览器默认行为
10/14
2016
刚才我给评论区头像添加了鼠标经过旋转的效果，是使用css3动画做的。
在css样式表里先定义一个旋转的动画，然后在鼠标经过头像时触发动画：
@keyframes rotate_once{
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
.comment-meta .avatar:hover{
animation: rotate_once .5s;
}
有时候必须结合JavaScript事件播放动画的时候，可以先把animation那句放到一个单独的class名里，然后通过JavaScript来动态添加、删除改动画的className，来达到播放动画或去除动画的效果。
示例：
element.addEventListener("mouseover",function(){
element.className=nowClassName+" rotate_once";
element.addEventListener("animationend",function(){
element.className=nowClassName;
})
});
鼠标经过元素时添加rotate_once这个className，播放动画。动画播放完毕之后再去掉这个className。
这里有个知识点，就是JavaScript里有三个能监听动画播放的事件：
animationStart 动画开始执行 animationEnd 动画执行结束 animationIteration 重复动画开始执行（只有重复动画才会触发）
使用css3动画给评论头像增加旋转效果
10/1
2016
在微信公众号管理后台→群发功能→已发送 页面中，我们可以看到这个公众号发过的所有群发消息（文章）。有时候不想要这个公众号了，需要把文章全部删除，但如果文章很多（几页十几页），一个个点击删除按钮无疑是很蛋疼的。微信没有提供批量操作的功能，所以我写了个工具，自动执行删除操作。
你可以在greasyfork.org安装本UserScript。
效果：
当你处于“已发送”页面时，脚本就会开始执行，自动执行删除操作，自动翻页，直到全部删除干净为止。
删除速度很快，每秒大约可以删除两条，删除一页基本上用不了半分钟。删除完毕后会显示一个弹窗提醒。
注意：
1.本工具仅适用于你想【删除全部文章】的情况，否则请不要使用，以免造成不必要的损失。本人不对因使用不当造成的损失负责。
2.用完本工具后，最好在脚本管理器里手动将其关闭，以免以后造成误删。需要使用的时候再启用就行。
代码如下：
// ==UserScript==
// @name 删除微信公众号所有的已发消息/文章
// @namespace http://www.saber.love/?p=3049
// @version 0.1
// @description 在微信公众号管理后台→群发功能→已发送 页面中，删除所有已发送的消息。全自动删除，自动翻页，直到删完为止。
// @author 雪见仙尊
// @match https://mp.weixin.qq.com/cgi-bin/masssendpage?t=mass/lis*
// @grant none
// ==/UserScript==
var delT=window.setInterval(function(){
var delButton=$(".js_del");
if (delButton.length==0) { //本页的消息已经删除完了
if ($(".btn.page_next").eq(0).is(':visible')) { //如果下一页按钮是显示的，说明不是最后一页，则翻页
$(".btn.page_next")[0].click();
}else{ //否则说明到最后一页了，则任务结束
alert("删除完毕！");
clearInterval(delT);
return false;
}
}
for (var i = delButton.length - 1; i >= 0; i--) {
if($(delButton[i]).is(':visible')){ //点击显示的删除按钮
delButton[i].click();
setTimeout(function(){
$(".btn.btn_primary.jsPopoverBt")[0].click(); //点击确认按钮
},200)
}
}
},400)
使用JavaScript删除微信公众号发过的所有消息（文章）
09/24
2016
设想网页上有四个按钮：
<input type="button" value="0"> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3">
我们用for循环处理它们时，如果要用到它们对应的序号，则可能出现问题。如下JavaScript代码：
var bts=document.querySelectorAll("input");
for (var i = 0; i <= bts.length - 1; i++) {
bts[i].addEventListener("click",function(){
alert(i);
})
}
按照设想，当我们点击按钮时，它们会从左到右分别弹出0/1/2/3，但实际上，全部弹出的是4。这里显而易见有两个问题：
1.为什么弹出的数字都一样；
2.为什么弹出的是4。
其实原因是同一个，那就是for循环里的i是贯穿其整个作用域的。我们给4个按钮分配的i是同一个变量，当这个变量变了的时候，4个按钮上绑定的i都变了。for循环从开始运行到结束，i的值依次是0/1/2/3/4（到4的时候停止运行），最后定格在了4。当我们在for循环执行完之后去点击按钮，i已经是4了，所以全部弹出的是4。
我们可以利用立即执行函数（匿名函数）来创建独立作用域，把每个按钮的事件都在独立作用域里绑定。并且我们绑定时不直接使用i，而是把i的值传递进去进行绑定。这样就可以解决上面的问题。代码如下：
var bts=document.querySelectorAll("input");
for (var i = 0; i <= bts.length - 1; i++) {
!function(ii){
bts[i].addEventListener("click",function(){
alert(ii);
})
}(i)
}
这里面除了用立即执行函数包裹了绑定过程，还有个地方要注意，就是这个立即执行函数要有个参数，然后在执行它时把i作为参数传递进去。这样，绑定事件时所使用的ii是具体值，而非变量i。
之后，我们点击按钮，发现依次弹出0/1/2/3，问题得以解决。
