jquery.offset()使用方法总结

今天是9月30号,明天就迎来国庆七天小长假了,哈哈哈~~~~提前祝大家国庆节快乐!

前几天写过一篇文章,jquery toggle()设置从上往下滑动,jquery toggle()方向,在文章的后面,介绍了一些jquery动画效果的使用方法,让大家温故而知新。今天主要讲一下jquery.offset()使用方法

jquery.offset()应用背景

很多时候需要对某个div进行定位,或者获取某个元素相对于document的位置,那么我们会用到jquery.offset()。

获得元素相对于document的位置

获得位置是元素相对于document的位置信息,通常可以说是这个元素的坐标值。

// 元素相对于document的左位移
$("#haorooms-id").offset().left
// 元素相对于document的上位移
$("#haorooms-id").offset().top

设置元素相对于document的位置

$(".haorooms").click(function(){
  x=$("p").offset();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

这个案例是我们在点击haorooms标签的时候,在id=span1和id=span2上面显示p标签的left值和top值。

也可以用数组方式设置haorooms-id的位置,如下

// 设置元素相对于document的位移,该元素的position必须为非static值
$("#haorooms-id").offset({left:123,top:99});

注意:

需要注意的是,offset的设置值,必须成对出现,否则会报错的哦!

offset不仅可以设置单个元素,也可以设置多个元素不同的坐标值,而不需要jQuery.each操作了,如:

$(".haorooms-class").offset(function(index,haorooms)
{
    // index为元素索引
    // haorooms为元素的坐标:top、left
    // 函数必须返回坐标值
    return {top:haorooms.top+index,left:haorooms.left+index};
});

javascript时间格式format函数,js日期格式化函数

我在之前有一篇文章,写的是“javascript时间戳函数”,大家可以看一下,记录了js时间戳的转换,今天主要写的函数式日期格式化函数,我们有时候调用的new Date()不是格式化的时间,可能显示不是很正常,今天这里分享一个js写的foramt()函数,希望能对大家有所帮助!

javascript Date format(js日期格式化)

方法一

Date.prototype.pattern=function(fmt) {         
    var o = {         
    "M+" : this.getMonth()+1, //月份         
    "d+" : this.getDate(), //日         
    "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时         
    "H+" : this.getHours(), //小时         
    "m+" : this.getMinutes(), //分         
    "s+" : this.getSeconds(), //秒         
    "q+" : Math.floor((this.getMonth()+3)/3), //季度         
    "S" : this.getMilliseconds() //毫秒         
    };         
    var week = {         
    "0" : "/u65e5",         
    "1" : "/u4e00",         
    "2" : "/u4e8c",         
    "3" : "/u4e09",         
    "4" : "/u56db",         
    "5" : "/u4e94",         
    "6" : "/u516d"        
    };         
    if(/(y+)/.test(fmt)){         
        fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));         
    }         
    if(/(E+)/.test(fmt)){         
        fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);         
    }         
    for(var k in o){         
        if(new RegExp("("+ k +")").test(fmt)){         
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));         
        }         
    }         
    return fmt;         
}       

网页防止黑客跨框架攻击,及浏览器安全性想到的

前面,我的有一篇防止用户XSS注入的文章,是一个php函数,地址是:http://www.haorooms.com/post/php_xss ,对于各种攻击,首先你的代码要有严密的逻辑性,不要有漏洞。还有,你用的一些框架或者源码,本身有什么漏洞等,可以对这些漏洞做一些修复等等。

今天首先是讲讲防止网页跨框架的方法,其次讲讲IE浏览器和谷歌浏览器。

防止网页垮框架

很简单,在你的网页中添加如下代码就可以了

<style> html{ visibility:hidden; }</style>
<script>
if( self == top){
        document.documentElement.style.visibility='visible';
}else{
        top.location = self.location;
}
</script>

上面的这个办法可以帮助我们解决网站扫描出来的垮框架漏洞。

谈谈IE和谷歌

在做web前端之前,我对浏览器没有什么概念,不知道什么内核了等等。在做web前端开发之后,我一步一步开始学习,渐渐的喜欢上了谷歌浏览器,因为谷歌浏览器强大的调试功能,可以让我的开发更加便捷,而且谷歌对css样式更加友好,即使你书写有些小的不规范,谷歌浏览器也能容忍你。在后来,随着css3和html5的发展和流行,IE渐渐失去了主导的地位,自IE9和IE10以后,渐渐的支持CSS3和html5但是对css3的一些特殊的属性,整个IE就不支持(例如css3弹性盒子等),所以,我一度对IE比较憎恨。

但是,你想想,为什么一些老的程序员还在用IE调试,为什么一些财务的系统统统用IE,一些国家的(像劳动保障部网站,证书查询的时候,必须用IE,谷歌会报错),铁道部网站近年来才支持谷歌浏览器,刚刚出来的时候,买票都不能用谷歌浏览器!

所以,看来,IE对安全性方面还是有一定的优势的,反观一些IE的老的不能再老的属性,只有IE浏览器才能支持,我之前写个一篇js导出excel的文章,也只有在IE浏览器下面才可以,文章地址:http://www.haorooms.com/post/js_excel ,说到这里,你应该对IE浏览器没有那么憎恨了吧。

其实,每个内核的浏览器,都有其存的的价值和优势。谷歌浏览器对一些老的属性和功能都是不支持的,下面我列举一些IE浏览器下面可以执行,但是谷歌浏览器不可以的例子,关于这样的例子有很多很多,不也不一一列举,仅仅列举几个。

一、先从CSS和html开始说起吧

style="ime-mode:disabled "

语法: ime-mode : auto | active | inactive | disabled

ime-mode这个css属性是设置或检索是否允许用户激活输入中文,韩文,日文等的输入法(ime)状态。假如你设置了disabled,那么你就不能切换中文输入法,只能用键盘上面的字母和数字。

二、页面过度效果。

在IE5.5及以上版本的浏览器中,增加了页面过渡效果,经过检查和实验,IE中是可以的,谷歌浏览器是不支持的。

方法:

只需在中添加一个特殊的即可,比如:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=2.0,Transition=12)" /> 

http-equiv 作用很多,这里的值为 Page-Enter 是指在页面进入的时候发生,其他值还有:

Page-Enter : 进入页面

Page-Exit  : 离开页面

Site-Enter : 进入网站

Site-Exit  : 离开网站

content 当然就是内容咯,这里表示页面过渡的效果设置,这里的两个属性表示分别表示

Duration  : 过渡速度
Transition : 可选项。整数值(Integer)。设置或检索转换所使用的方式 

具体数值介绍:

js和jquery获取图片真实的宽度和高度,jquery获取图片高宽

案例背景

记得前几天,我总结过一篇文章,jquery的height()和javascript的height总结,是获得各种高度,主要针对做pc网页或者手机网页,有时候需要用js添加动态高度,而总结的。

今天的这个案例和之前的稍微有点不同,案例背景是“在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图。然后判断过后给予不同的展示方式!”另外一种就是在手机页面上,在新闻页插入的图片往往都是按照图片的原尺寸来展示,如果手机屏幕太小,太大的图就会超出去!

针对这种情况,一般有两种解决方案:

一种是给所有图片加上如下样式

.haorooms img{margin:5px auto; display:block;width:90%; height:auto;}

但是这种方式有另外一个问题就是,如果插入的图片本身就很小的话,也会被直接拉伸成100%显示,显然这是不合理的!那么这里就介绍另外一种方式就是通过js动态展示图片的尺寸!

jquery方式:

var _winwh = parseInt($(window).width());//获取浏览器的宽度
$(".haorooms img").each(function(i){
        var img = $(this);
        var realWidth;//真实的宽度
        var realHeight;//真实的高度
   //这里做下说明,$("<img/>")这里是创建一个临时的img标签,类似js创建一个new Image()对象!
   $("<img/>").attr("src", $(img).attr("src")).load(function() {
                /*
                  如果要获取图片的真实的宽度和高度有三点必须注意
                  1、需要创建一个image对象:如这里的$("<img/>")
                  2、指定图片的src路径
                  3、一定要在图片加载完成后执行如.load()函数里执行
                 */
                realWidth = this.width;
                realHeight = this.height;
               //如果真实的宽度大于浏览器的宽度就按照100%显示
                if(realWidth>=_winwh ){
                       $(img).css("width","100%").css("height","auto");
                    }
                    else{//如果小于浏览器的宽度按照原尺寸显示
                      $(img).css("width",realWidth+'px').css("height",realHeight+'px');
                    }
            });
    });

jquery toggle()设置从上往下滑动,jquery toggle()方向

本文背景

很多朋友对jquery toggle()比较熟练,甚至经常用到,而且对toggle的三个参数也比较了解$(selector).toggle(speed,callback,switch)。但是当你设置$(selector).toggle(200),给一个速度的时候,发现toggle是左右滑动的。但是它的参数中没有设置方向的,如何让toggle()上下滑动呢?

解决方案

假如你对上面的说法比较赞同,那么,说明还对jquery的动画效果不是很熟悉啊!哈哈哈。

其实,你翻阅资料,可以看到,jquery还有一个slideToggle()熟悉,是对toggle()的补充,两个加入不设置时间,效果是一样的,但是设置时间以后。toggle()是左右,从左只有出现和隐藏,但是slideToggle()是垂直方向的显示和隐藏,有了slideToggle(),就可以改变toggle()的方向了啊!你想要淡入和淡出,可以用fadeToggle(),哈哈哈,这么多Toggle(),总可以达到你的要求了吧!

引深

同样的道理,jquery的show()和hide()方向怎么设置呢?同样也可以用slideDown()和slideUp()来解决。达到你想要的效果!

jQuery之相关动画效果操作

哈哈哈,加入你对上面的案例,在我说了之后不熟练,不熟悉的话,可以复习一下jquery的动画效果了!下面我列举一下!

1、show()显示效果

语法:show(speed,callback)  Number/String,Function speend为动画执行时间,单位为毫秒。也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数。

show(speed,[easing],callback)  Number/String  easing默认是swing,可选linear;

$("#div1").show(3000,function(){ alert("动画显示完成!"); });