当前位置: 首页 > 前端笔记 > JQUERY > 几个非常有用的jQuery代码,懂的肯定收藏
2014年23五月

几个非常有用的jQuery代码,懂的肯定收藏

1.绑定jQuery函数到$(window).load事件
大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件。虽 然$(document).ready事件在大多数情况下都OK,但是它的解析顺序是在文档准备就绪,单文档中的图片等对象正在下载的时候开始运行的。所 以在某些时候使用$(document).ready事件并不一定能达到我们预期的效果,比如一些视觉效果和动画、拖拽、预读取隐藏图片等…通过使 用$(window).load事件便可以安全的在整个文档都准备就绪之后再开始运行你期望的代码。

$(window).load(function(){
	//将你希望在页面完全就绪之后运行的代码放在这里
});

2.几个高度和宽度的获取

$(document).ready(function(){
    alert($(window).height()); //浏览器当前窗口可视区域高度
    alert($(document).height()); //浏览器当前窗口文档的高度
    alert($(document.body).height());//浏览器当前窗口文档body的高度
    alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
    alert($(window).width()); //浏览器当前窗口可视区域宽度
    alert($(document).width());//浏览器当前窗口文档对象宽度
    alert($(document.body).width());//浏览器当前窗口文档body的宽度
    alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
})

3.jQuery返回某个元素的位置

$('html,body').animate({scrollTop:$('#foot').offset.top},1000); //定位到ID为foot的对象位置

返回顶部的实例,请查看“jQuery回到顶部效果详解

4.jQuery判断获得的对象是否存在的方法
因为jQuery在获得对象的时候,无论要获得的对象是否存在,都会返回jQuery对象。所以,以往的 js 判断是否存在在jQuery是行不通的。假设有如下代码。 var target_obj = jQuery('#target_obj_id');
则,若需要判断id为target_obj_id是否存在的话,可以实现的方法有一下两种:

if (target_obj.length > 0) { //如果大于0 标识 id 为target_obj_id的对象存在,否则不存在
	//对象存在的处理逻辑
} else {
	//对象不存在的处理逻辑
}
if (target_obj[0]) {
	//对象存在的处理逻辑
} else {
	//对象不存在的处理逻辑
}

5.jQuery 让出$符号

jQuery.noConflict(); //让出$符号
(function($) { 
    $(function() {
        只能在此域中使用$
        // 使用 $ 作为 jQuery 别名的代码
    });
})(jQuery);

文章信息

  • 发布日期:2014年05月23日 13:58:07
  • 固定地址:http://www.estorm.cn/notes/jquery/2014-05-23/some-useful-jquery-code.html