jquery图片延迟加载 及 serializeArray、serialize用法记录

    1 请达成,鼠标点击页面中的任意标签,alert该标签的名称.(注意包容性)

1.利用jquery达成 图片延迟加载

  2 请提议一下代码的质量难点,并经行优化。

由于用户访问页面需求加载很多的图样,延迟加载技术在电子商务网站领域越来越普及,Tmall商城,京东商城,凡客等访问量巨大的电子商务站点为了扩大用户用户体验,访问速度以及减弱对笔者服务器的压力,纷繁研究开发或应用延缓加载技术。当然借使没有前端开发的刻画入微切磋很难写出自个儿的js特效包。

  var info=”腾讯拍拍网(www.paipai.com)是腾讯旗下有名电子商务网站。”;

   
jquery.lazyload.js正是贰个基于jquery框架库的特效应用。它能让用户访问页面包车型客车时候,只加载当前显示器所见内容的图样。

  info +=”拍拍网于二〇〇七年11月25日上线发表,”;

   
jquery.lazyload.js使用情势:首先页面需导入jquery.js。那几个是先决条件,毕竟jquery.lazyload.js特效包是依据jquery框架库的!然后需到如Jquery.Lazyload.js。还需在本地服务器上传一张用来占位的图纸grey.gif(能够是张十分的小的图形恐怕loading.gif之类表示正在加载的图样)。

  info +=”2006年十月1二十二日公布正式运维,”;

<script type="text/javascript" src="http://www.wumeiwang.com/js/lazyload/jquery.js"></script><script type="text/javascript" src="http://www.wumeiwang.com/js

  info +=”是当前国内第贰大电子商务平台。”;

/jquery.lazyload.js”></script>

  info=info.split(“,”);

 

  for(var i=0; i{

图片 1图片 2

  alert(info[i]);

<script type="text/javascript" src="http://pic.imtimmy.com/wp-content/js/lazyload/jquery.lazyload.js"></script>
<script type="text/javascript">
jQuery(document).ready(
function($){
$("img").lazyload({
     placeholder : http://ommon/grey.gif,
     effect      : "fadeIn"
});
});
</script>

  }

View Code

  3 请给出异步加载js方案,不少于二种。

只是假如接纳httpwatch等网页测试工具检查和测试页面加载你会发觉,图片其实是总体加载完了。因为执行js是在页面包车型大巴page_load之后。全体,jquery.lazyload.js加载出来的只是图片的缓存文件。那样不就2回做客服务器加载图片了?固然jquery.lazyload.js加载的只是缓存图片…

  4 请写出jQuery绑定事件的点子,不少于三种。

消除办法:在jquery.lazyload.js的62行将 $(self).attr(“original”,
$(self).attr(“img”));  修改成 $(self).attr(“original”,
$(self).attr(“original”));   然后读图图片的时候将img= 
替换来    original=即可。凡客,天猫商城都以这般的作法。那样才促成真正意义上的推迟加载。

  5 请设计一套方案,用于确定保障页面中JS加载完全。

2.serializeArray、serialize用法

  6 请优化某网页的加载速度。

应用那多个函数 注意
form里边的 input必须要有name属性 不然不可能体系化

  7 对string对象经行扩充,使其持有删除前后空格的法门。

表单参数类别化提交

  8 完毕1个正则表明式,验证用户输入是不是身份证号码。

  假定没有借助jQuery,表单能够直接交给,那样带来五个难点正是高枕无忧(get提交)或表单参数验证障碍,嗯~,大概很难懂,这样啊,小编先放张图,那图是原生get提交的->

  意志是每一人的精神力量,是要创立或是破坏某种东西的随意的憧憬,是能从无中创立神跡的创制力。――莱蒙托夫

图片 3

  Web前端开发笔试题集锦:

 

  1,截取字符串abcdefg的efg

  那下清楚了呢,全部的参数都在浏览器里面显示,稍稍别有用心的人就能自由利用,那是其一;

  var str = “abcdefg”;

  要是是post提交,或许没有上述那个难点,可是。。。,如若参数值提交前要求在js中做拍卖(表单参数验证或参数拼接等等),那样直白把数据扔给后台的童鞋,肯定不太好~

  if (/efg/.test(str)) {

  额,还足以依赖前两章中的方法。。。大概会疲劳啊~,毕竟每三个表单都要独自取值。。。同理可得,那样麻烦;哈哈~ヽ(●´ω`●)ノ,既然麻烦,jQuery给我们提供了多个好用的格局serializeArray()和serialize()

  var efg = str.substr(str.indexOf(“efg”), 3);

  前者能够将表单的参数值系列化成二个Array的样式(用于post提交),后者会将表单参数值连串化成键值字符串的格局(用于get提交),二话不说,先放出源码以及功用图–>

  alert(efg);

图片 4图片 5

  }

function submitForm(val){
        if(1==val){
            //serializeArray
             var serializeArray=$("#forms").serializeArray();
             console.log("serializeArray:");
             console.log(serializeArray);
             for(var i in serializeArray){

             }
         }else{
             var serialize=$("#forms").serialize();
             console.log("serialize:");
            console.log(serialize);
         }
     }

  2,
判断字符串是或不是是那样组合的,第贰个必须是字母,前边能够是字母、数字、下划线,总长度为5-20

View Code

  var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;

图片 6

  reg.test(“a1a__a1a__a1a__a1a__”);

图片 7

  3,判断三个字符串中冒出次数最多的字符,计算这几个次数

后任已经相比较健全了,能够向来拼接到提交路径前边就好了,但~对于前者,那么些serializeArray只是援助做了一有些,要是是post提交应该是{key1:value1,key2:value2}的花样,此时就算对于菜鸟也很简单写二个通用的主意处理成靶子键值对的款型,在此就贡献一个啊

  //将字符串的字符保存在一个hash
table中,key是字符,value是以此字符出现的次数

额,嗯~,其实有五个没有极度态,假若表单有一项尚未填的话参数会不设有,还有二个难题是
多选框永远只会体系化第③个值,切记 切记。。。

  var str = “abcdefgaddda”;

哦~~~,还设有2个难点是,假使表单外层的form标签若不存在,则不可能系列化参数,若是table标签里面嵌3个form的也不可能,至于这么些缘故
个人推断可能是与html规范争辩呢~,这些是自家在其实开发中遇见的题材,希望各位不要踩坑啊!

  var obj = {};

 

  for (var i = 0, l = str.length; i < l; i++) {

两篇文章转载出处如下:

  var key = str[i];

http://www.cnblogs.com/198933ABC/archive/2011/02/13/1953147.html

  if (!obj[key]) {

http://www.cnblogs.com/funnyzpc/p/7571998.html

  obj[key] = 1;

灵魂转发!!!

  } else {

  obj[key]++;

  }

  }

  /*遍历那个hash table,获取value最大的key和value*/

  var max = -1;

  var max_key = “”;

  var key;

  for (key in obj) {

  if (max < obj[key]) {

  max = obj[key];

  max_key = key;

  }

  }

  alert(“max:”+max+” max_key:”+max_key);

  4,IE与FF脚本包容性难点

  (1) window.event:

  代表近日的事件目的,IE有那个指标,FF没有,FF通过给事件处理函数字传送递事件目的

  (2) 获取事件源

  IE用srcElement获取事件源,而FF用target获取事件源

  (3) 添加,去除事件

  IE:element.attachEvent(“onclick”, function)
element.detachEvent(“onclick”, function)

  FF:element.addEventListener(“click”, function, true)
element.removeEventListener(“click”, function, true)

  (4) 获取标签的自定义属性

  IE:div1.value或div1[“value”]

  FF:可用div1.getAttribute(“value”)

  (5) document.getElementByName()和document.all[name]

  IE;document.getElementByName()和document.all[name]均不可能获得div成分

  FF:可以

  (6) input.type的属性

  IE:input.type只读

  FF:input.type可读写

  (7) 是还是不是可用id代替HTML成分

  IE:可以用id来代替HTML元素

  FF:不可以

  (8) innerText textContent outerHTML

  IE:支持innerText, outerHTML

  FF:支持textContent

Leave a Comment.