先声明下这个方法的使用场合以免误导大家
比如在博客园我们没法修改他的源代码
那么只能想办法监视元素的出现了
所以下面方法是在修改不了源码的情况下使用而非写自己的项目
今天在改博客几个样式的时候以为很自然的加上js就可以实现了
没想到那个是ajax加载的数据而非页面首次加载的
比如下面的 “提交评论” 按钮右侧的 搜索按钮 等
我很自然的写了
复制代码 代码如下:
$("#btn_comment_submit")
removeClass("comment_btn")
addClass("btn"); //提交按钮
$("
div_my_zzk")
addClass("input
append"); //搜索框
$("
btn_my_zzk")
removeClass("btn_my_zzk")
addClass("btn"); //搜索按钮
可是刷新页面后发现有点不对看了 network 后发现是 ajax 过来的
无奈除了自己写模版之外只能自己想办法修改代码了
那么下面就是我想到的等待元素出现方法
虽然是基于 jQuery 的但是代码很简洁可以修改成纯js版的
复制代码 代码如下:
jQuery
fn
wait = function (func
times
interval) {
var _times = times ||
//
次
_interval = interval ||
//
毫秒每次
_self = this
_selector = this
selector
//选择器
_iIntervalID; //定时器id
if( this
length ){ //如果已经获取到了
就直接执行函数
func && func
call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是
就退出
clearInterval(_iIntervalID);
}
_times <=
|| _times
; //如果是正数就
_self = $(_selector); //再次选择
if( _self
length ) { //判断是否取到
func && func
call(_self);
clearInterval(_iIntervalID);
}
}
_interval);
}
return this;
}
使用方法当然也很简单只有个参数
func 是回调函数就是当指定元素出现后就执行的函数
times 是检测次数默认是一直检测直到出现为止
interval 是检测间隔默认 毫秒一次
我们修改下之前的代码
复制代码 代码如下:
$("#btn_comment_submit")
wait(function() { //等待#btn_comment_submit元素的加载
this
removeClass("comment_btn")
addClass("btn"); //提交按钮
//这里的 this 就是 $("#btn_comment_submit")
});
$("#widget_my_zzk")
wait(function() { //等待#widget_my_zzk元素的加载
$("
div_my_zzk")
addClass("input
append"); //搜索框
$("
btn_my_zzk")
removeClass("btn_my_zzk")
addClass("btn"); //搜索按钮
});
是不是很简单
当然依然不破坏jQuery的链式结构你依然可以 $("#id")wait(function(){})hide();
但是后来想想元素都没加载继续链下去也没意义不过算了不改了就这样吧呵呵 :)
最后说点我经验尚浅如果那里写的不对还请各位大侠指点
