主页/ 电商学院/网站开发/JQuery几个比较实用小知识

JQuery几个比较实用小知识

归类:网站开发
jQuery网站前端制作

JQUERY是一个很常用的js框架,也非常实现。由于现在浏览器对flash,css3支持还不全面,对falsh更是越来越差,而jquery使用简单,容易上手,对浏览器支持全面,在web领域使用非常广泛。而且现在网上有各种各样基于jqery开发的插件,使用非常快捷方便。下面推荐几个干货小知识:
预加载图片这个功能适于网站应用了很多不可见的图片(如:鼠标经过显示等),如果预先加载完成,对网站效果会有比较好的体现
Code:
$('div').click(function(){
    $(document.body).animate({scrollTop:0},800);returnfalse
});
检查图片是否加载完成如果你的效果需要在图片加载完成后执行(如:一些滤镜特效等),效果看起来更加流畅。
Code
$('img').load(function(){
   //执行代码
});
 
批量修复错误图片这个功能应该是非常常见且实用,在网站是上传图片是难免会碰到了图片损坏或丢失,图片会显示不正常,会影响网站美观,这时就要用预先准备好的图片显示
Code
$('img').on('error',function(){
  $(this).prop('src','图片路径');
});
超出文本部分显示省略号在有限空间内显示元素的要素是,一般都采用简短方式显示,当我们无法控制达到完美显示呈现,这样我们需要用到这个功能,多出部分自动隐藏且显示省略号
Code:
$.fn.limit=function(){
var self = $("*[limit]");
   self.each(
function(){
var objString = $.trim($(this).text());
var objLength = $.trim($(this).text()).length;
var num = $(this).attr("limit");
if(objLength > num){
$(this).attr("title",objString);
               objString = $(this).text(objString.substring(0,num) + "...");
            }
         }
   )
};
使用方式:
$("span[limit]").limit();
Ajax跨域访问Ajax跨域使用场景特殊,何为跨域?是指不同域名之间互相访问,网上有多种的解决方案,我也用过几种,但方便也最便捷的方法是我推荐的这种。在服务端加上一下代码即可,非常方便
Code
header("Access-Control-Allow-Origin: *");
返回顶部现在很多基于jquery开发的插件都可以拿来直接使用。其实使用jQuery自身函数就可以轻松达到目的。
Code
$('a.top').click(function(){
    $(document.body).animate({scrollTop:0},800);returnfalse
});

作者:优加网络吴国美
 
0 喜欢
374 浏览数

优加商学院

APP开发微信小程序开发网站开发
您好,直接联系技术沟通需求
扫码添加我的微信,直谈需求
非工作时间技术回复慢请谅解
咨询更详细需求
提交信息后我们会第一时间与你取得联系,请大致把需求填写在"咨询内容"里。
姓名
手机
咨询内容
立即提交