web常用小技术集合

来源：互联网发布：2017年播的网络腐剧编辑：程序博客网时间：2024/05/29 15:15

1，回到顶部效果

$("body").animate({ scrollTop: "0px" }, 700);

2，获取屏幕滚动值

   //获得滚动的像素，这个方法一滚动就会被执行   window.onscroll=function(){      var top = document.documentElement.scrollTop||document.body.scrollTop;     }

3，获取子元素离顶端的距离

var value = $(".child").offset().top;

4，在html文件里导入html文件

$(".box2").load("index2.html");

<iframe src="index2.html" class="child"></iframe>

5，json字符串数组转换为数组对象，data = [{},{}]。

//jsonArray string transformation arrayObjectvar arrayValue = eval(data);

6，<iframe>的用法：

<iframe src="main.html" marginwidth="0" frameborder="no" scrolling="no"></iframe>

7，使文本左右对齐，一个要加上这个属性display: inline-block;

text-align: justify;text-justify: distribute; display: inline-block; text-justify:distribute-all-lines;/*ie6-8*/      text-align-last:justify;/* ie9*/      -moz-text-align-last:justify;/*ff*/      -webkit-text-align-last:justify;/*chrome 20+*/

8，compatible ie浏览器使输入框显示提示文本

 var placeholderfriend = {     focus: function(s) {       s = $(s).hide().prev().show().focus();       var idValue = s.attr("id");       if (idValue) {         s.attr("id", idValue.replace("placeholderfriend", ""));       }       var clsValue = s.attr("class");    if (clsValue) {         s.attr("class", clsValue.replace("placeholderfriend", ""));       }     }   }  //判断是否支持placeholder   function isPlaceholer() {     var input = document.createElement('input');     return "placeholder" in input;   }   //不支持的代码  if (!isPlaceholer()) {     $(function() {      var form = $(this);      //遍历所有文本框，添加placeholder模拟事件      var elements = form.find("input[type='text'][placeholder]");       elements.each(function() {         var s = $(this);         s.addClass('com_gray');         var pValue = s.attr("placeholder");   var sValue = s.val();         if (pValue) {           if (sValue == '') {             s.val(pValue);           }         }       });      elements.focus(function() {         var s = $(this);         var pValue = s.attr("placeholder");         s.removeClass('com_gray');   var sValue = s.val();         if (sValue && pValue) {           if (sValue == pValue) {             s.val('');           }         }       });      elements.blur(function() {         var s = $(this);         var pValue = s.attr("placeholder");          if(s.val().length == 0){         s.addClass('com_gray');         }   var sValue = s.val();         if (!sValue) {           s.val(pValue);         }       });      //遍历所有密码框，添加placeholder模拟事件      var elementsPass = form.find("input[type='password'][placeholder]");       elementsPass.each(function(i) {         var s = $(this);         var pValue = s.attr("placeholder");         s.addClass('com_gray');   var sValue = s.val();         if (pValue) {           if (sValue == '') {             //DOM不支持type的修改，需要复制密码框属性，生成新的DOM             var html = this.outerHTML || "";             html = html.replace(/\s*type=(['"])?password\1/gi, " type=text placeholderfriend")               .replace(/\s*(?:value|on[a-z]+|name)(=(['"])?\S*\1)?/gi, " ")               .replace(/\s*placeholderfriend/, " placeholderfriend value='" + pValue               + "' " + "onfocus='placeholderfriendfocus(this);' ");             var idValue = s.attr("id");             if (idValue) {               s.attr("id", idValue + "placeholderfriend");             }             var clsValue = s.attr("class");    if (clsValue) {               s.attr("class", clsValue + "placeholderfriend");             }             s.hide();             s.after(html);           }         }       });      elementsPass.focus(function(){      $(this).removeClass('com_gray');      }).blur(function() {         var s = $(this);         var sValue = s.val();          if(sValue.length == 0){         s.addClass('com_gray');         }         if (sValue == '') {           var idValue = s.attr("id");           if (idValue) {             s.attr("id", idValue + "placeholderfriend");           }           var clsValue = s.attr("class");     if (clsValue) {             s.attr("class", clsValue + "placeholderfriend");           }           s.hide().next().show();         }       });    });   }   window.placeholderfriendfocus = placeholderfriend.focus;css代码.com_gray{color: #999999;}

1 0