m.lom599.com_手机版乐白家网址_乐百家手机首页登录

jQuery通过写入cookie实现更换网页背景的方法,更

作者: 手机版乐白家网址  发布:2019-07-12

在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性。但是出于学习的目的,你可以利用闲暇时间,自己动手写写,看一些原生js的东西,根据自己的思路做插件,这样能提高水平。
说到autotemplete,好多人都用过,引用autotemplete.js,然后就可以实现在输入框输入值的时候提示下拉选项,类似于百度搜索框那种提示功能,下面就来说说自己的思路。
为输入框添加input事件
1.input事件兼容性代码如下:

本文实例讲述了jQuery通过写入cookie实现更换网页背景的方法。分享给大家供大家参考,具体如下:

1、DOM遍历是昂贵的,将变量缓存起来。

AddEvt:function(ele, evt, fn) {
      if (document.addEventListener) {
        ele.addEventListener(evt, fn, false);
      } else if (document.attachEvent) {
        ele.attachEvent('on'   (evt == "input" ? "propertychange" : evt), fn);
      } else {
        ele['on'   (evt == "input" ? "propertychange" : evt)] = fn;
      }
    }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery更换网页背景(写入cookie)</title>
<style type="text/css">
 body,p,ul{margin:0;padding:0;}
 ul{float:right;height:40px;margin-top:20px;margin-right:20px;}
 ul li{list-style-type:none;float:left;width:20px;height:20px;margin-left:10px;cursor:pointer;}
 .skin{height:40px;position:fixed;background:#fff;border-bottom:solid 1px #cccc;top:0;left:0;width:100%;}
 .red{background:#F06;}/*红色*/
 .black{background:#000;}/*黑色*/
 .blue{background:#09F;}/*蓝色*/
 .green{background:#093;}/*绿色*/
</style>
<script type="text/javascript" src="http://www.jinxingnb.com/uploads/allimg/190712/021T34496-0.jpg"></script>
<script type="text/javascript">
 $(document).ready(function(){
   //为了安全 google chrome 等浏览器是禁止本地文件写Cookie的即file:///F:/Lord community/lrtk/Untitled-2.html这样的以file开头的是不能写本地文件的
   var cookieClass = getCookie('class');//读取需要缓存的对象。
   $("body").attr("class",cookieClass);//
   $(".skin_list li").each(function(){
     $(this).click(function(){       
       var className=$(this).attr("class");//保存当前选择的类名
       $("body").attr("class",className,30);//把选中的类名给body
       function SetCookie(name,value,day)//两个参数,一个是cookie的名子,一个是值
       {
        var exp = new Date(); //new Date("December 31, 9998");
        exp.setTime(exp.getTime()   day*24*60*60*1000);
        document.cookie = name   "="  escape (value)   ";expires="   exp.toGMTString();
       }
       SetCookie("class",className,30);
     })
    });
   });
   function getCookie(name)//取cookies函数  
   {
    var nameEQ = name   "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i  ) {
     var c = ca[i];
     while (c.charAt(0)==' ') c = c.substring(1,c.length);
     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
   }
</script>
</head>
<body>
<div class="skin"><ul class="skin_list"><li style="width:100px;text-align:right;">更换背景:</li></li><li class="red"></li><li class="black"></li><li class="blue"></li><li class="green"></li></ul></div>
</body>
</html>

复制代码 代码如下:

input事件和其他的事件不一样,低版本的ie不支持input事件,只能用propertychange事件,高版本的ie和w3c标准浏览器支持input事件
2.输入事件触发的时候获取数据
这里数据有两种形式,一种是直接设置的对象数组,一种是ajax请求返回数据
这时候我们需要一个ajax请求函数,这里写了一个get请求

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery的cookie操作技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

//不推荐
var h = $('#ele').height();
$('#ele').css('height', h-20);

get: function(url, paraobj, fn, timeout) {
        var xhr = null;
        try {

         ////兼容firefox,chrom
          if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
          }

         //////兼容IE

         else if (Window.ActiveXObject) {

            xhr = new ActiveXObject("Msxml2.Xmlhttp");
          }
        } catch (e) {
          //TODO handle the exception
          xhr = new ActiveXObject('Microsoft.Xmlhttp');
        }
        xhr.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            fn.call(this, this.responseText);

          } else {
            setTimeout(function() {

               xhr.abort();
            }, timeout);
          }
        };
        var parastr = '';
        parastr  = "?";
        for (var prop in paraobj) {
          parastr  = prop   "="   paraobj[prop]   "&";
        }
         xhr.open('get', parastr != "?" ? (url   parastr) : url, true);
         xhr.send();

      }

希望本文所述对大家jQuery程序设计有所帮助。

复制代码 代码如下:

  1. ajax请求成功,且有数据的时候创建下拉框并在下拉框中追加选项       ////创建下拉Div
    创建下拉框代码:

您可能感兴趣的文章:

  • Jquery操作cookie记住用户名
  • jquery中cookie用法实例详解(获取,存储,删除等)
  • jquery.cookie.js用法实例详解
  • jquery.cookie实现的客户端购物车操作实例
  • jQuery基于cookie实现的购物车实例分析
  • jQuery操作cookie方法实例教程
  • jQuery的cookie插件实现保存用户登陆信息
  • jquery.cookie() 方法的使用(读取、写入、删除)
  • jquery 删除cookie失效的解决方法
  • 可兼容IE的获取及设置cookie的jquery.cookie函数方法
  • 详解jQuery的Cookie插件

//推荐
var $ele = $('#ele');
var h = $ele.height();
$ele.css('height',h-20);

createShowDiv: function() {

      ///如果下拉div已存在,删除掉
      var parentNode = this.autoElement.parentNode || this.autoElement.parentElement;
      var childNodes = parentNode.childNodes;
      var showDiv = document.getElementById(this.config.showdivId);
      if (showDiv) {
        parentNode.removeChild(showDiv);
      }
      //创建下拉Div
      var div = document.createElement('div');
      div.id = this.config.showdivId;
      //设置下拉div样式
      var style = this.config.style || {
        width: '200px',
        height: 'auto',
        backgroundColor: '#1c5683',
        cursor: 'pointer',
        display: 'block'
      };<br>     
      for (var prop in style) {
        div.style[prop] = style[prop];
      }
      this.showdiv = div;
    }

2、优化选择符。

追加选项代码:

复制代码 代码如下:

appendChild: function(data) {
      var self = this;
      var data = data;
      var fragment = document.createDocumentFragment();
      for (var i = 0; i < data.length; i  ) {
        var obj = data[i];
        var child = document.createElement('div');
        child.style.width = self.showdiv.style.width;
        child.style.border = '1px';
        child.style.borderStyle = 'solid';
        child.style.borderTopColor = 'white';
        child.setAttribute('key', obj[self.config.valueFiled]);
        child.innerHTML = obj[self.config.textFiled];
        fragment.appendChild(child);
      }
      self.showdiv.appendChild(fragment);
      self.util.insertAfter(self.showdiv, self.autoElement);

      //为下拉框添加点击事件
      self.util.AddEvt(self.showdiv, 'click', function(e) {
        var evt = e || window.event;
        var target = evt.srcElement || evt.target;
        var key = target.getAttribute("key");
        var val = target.innerHTML;
        self.autoElement.value = val;
        self.closeDiv();
        self.config.select.call(self, key, val);
      });
    }

//不推荐
$('div#myid')

上面说的是主要的几步思路,现在看一下怎么将这些代码封装到一个对象中,让它成为插件。这时候我们用到匿名闭包:

复制代码 代码如下:

(function(win) {
  var autocomplete= function() {
    this.Init.apply(this, arguments);

  }

  autocomplete.prototype = {

    ////添加相关操作代码

    Init: {}, ///初始化参数

    Render: {},

    createShowDiv: {}, ///创建下拉div

    appendChild: {}, ///在下拉div里面追加显示项

    closeDiv: {}, ////关闭下拉框

    //////工具对象,事件,请求,还有dom节点操作的函数

    util: {

      AddEvt: {}, ///添加事件

      insertAfter: {}, ///在某元素后面追加元素

        get: {} //// Ajax get请求

    }

  }

  win.Autocomplete= function(paraobj) {
    new autocomplete(paraobj).Render();
  }
})(window)

//推荐
$('#myid')

主体的代码添加好了,我们把具体的实现代码展示出来:

3、避免隐式通用选择符。

(function(win) {
  var autocomplete = function () {
    this.Init.apply(this, arguments);
  }
  autocomplete.prototype = {
    Init: function() {
      var args = Array.prototype.slice.call(arguments);
      if (args && args.length > 0) {
        var config = args[0];
        var getType = Object.prototype.toString;
        if (config && getType.call(config) == "[object Object]") {
          //       this.config = config;
          this.config = config || {
            id: '', //控件id
            data: [], //数据
            textFiled: '', //显示的文字的属性名
            valueFiled: '', //获取value的属性名
            style: {}, //显示的下拉div的样式设置
            url: '', //ajax请求的url
            paraName:'name',//ajax请求的参数
            select: function() {}, //选择选项时触发的事件,
            showdivId: '' //下拉选择区域的id
          };
        }
      }
    },
    Render: function() {
      var self = this;
      if (self.config) {
        var autoElement = document.getElementById(self.config.id);
        this.autoElement = autoElement;
        if (autoElement) {
          self.util.AddEvt(this.autoElement, 'input', function() {
            try {
              if (autoElement.value) {
                ////ajax请求获取数据的方式
                if (self.config.url && !self.config.data) {
                  var paraobj = {};
                  paraobj[self.config.paraName] = autoElement.value;
                  self.util.get(self.config.url, paraobj, function (data) {
                    self.createShowDiv();
                    self.appendChild(eval('('   data   ')'));
                  }, 10000);
                }
                ////直接设置对象数组的形式
                else if
                  (!self.config.url && self.config.data) {
                  self.createShowDiv();
                  self.appendChild(self.config.data);
                }

              } else {
                self.closeDiv();
              }

            } catch (e) {
              //TODO handle the exception
              alert(e);
            }
          });
        }

      }
    },
    ////创建下拉Div
    createShowDiv: function() {

      ///如果下拉div已存在,删除掉
      var parentNode = this.autoElement.parentNode || this.autoElement.parentElement;
      var childNodes = parentNode.childNodes;
      var showDiv = document.getElementById(this.config.showdivId);
      if (showDiv) {
        parentNode.removeChild(showDiv);
      }
      //创建下拉Div
      var div = document.createElement('div');
      div.id = this.config.showdivId;
      //设置下拉div样式
      var style = this.config.style || {
        width: '200px',
        height: 'auto',
        backgroundColor: '#1c5683',
        cursor: 'pointer',
        display: 'block'
      };
      for (var prop in style) {
        div.style[prop] = style[prop];
      }
      this.showdiv = div;
    },
    ///在下拉div里面追加显示项
    appendChild: function(data) {
      var self = this;
      var data = data;
      var fragment = document.createDocumentFragment();
      for (var i = 0; i < data.length; i  ) {
        var obj = data[i];
        var child = document.createElement('div');
        child.style.width = self.showdiv.style.width;
        child.style.border = '1px';
        child.style.borderStyle = 'solid';
        child.style.borderTopColor = 'white';
        child.setAttribute('key', obj[self.config.valueFiled]);
        child.innerHTML = obj[self.config.textFiled];
        fragment.appendChild(child);
      }
      self.showdiv.appendChild(fragment);
      self.util.insertAfter(self.showdiv, self.autoElement);

      //为下拉框添加点击事件
      self.util.AddEvt(self.showdiv, 'click', function(e) {
        var evt = e || window.event;
        var target = evt.srcElement || evt.target;
        var key = target.getAttribute("key");
        var val = target.innerHTML;
        self.autoElement.value = val;
        self.closeDiv();
        self.config.select.call(self, key, val);
      });
    },
    ////关闭下拉框
    closeDiv: function () {
      if (this.showdiv) {
        this.showdiv.style.display = 'none';
      }

    }
    ,
    util: {
      ///添加事件
      AddEvt: function(ele, evt, fn) {
        if (document.addEventListener) {
          ele.addEventListener(evt, fn, false);
        } else if (document.attachEvent) {
          ele.attachEvent('on'   (evt == "input" ? "propertychange" : evt), fn);
        } else {
          ele['on'   (evt == "input" ? "propertychange" : evt)] = fn;
        }
      },
      ///在某元素后面追加元素
      insertAfter: function(ele, targetELe) {
        var parentnode = targetELe.parentNode || targetELe.parentElement;
        if (parentnode.lastChild == targetELe) {
          parentnode.appendChild(ele);
        } else {
          parentnode.insertBefore(ele, targetELe.nextSibling);
        }
      },
      ///Get请求
      get: function(url, paraobj, fn, timeout) {
        var xhr = null;
        try {
          if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
          } else if (Window.ActiveXObject) {

            xhr = new ActiveXObject("Msxml2.Xmlhttp");
          }
        } catch (e) {
          //TODO handle the exception
          xhr = new ActiveXObject('Microsoft.Xmlhttp');
        }
        xhr.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            fn.call(this, this.responseText);

          } else {
            setTimeout(function() {

               xhr.abort();
            }, timeout);
          }
        };
        var parastr = '';
        parastr  = "?";
        for (var prop in paraobj) {
          parastr  = prop   "="   paraobj[prop]   "&";
        }
         xhr.open('get', parastr != "?" ? (url   parastr) : url, true);
         xhr.send();

      }
    }
  }

  win.AutoComplete = function (paraobj) {
    new autocomplete(paraobj).Render();

  }

})(window)

复制代码 代码如下:

下面是使用的代码

//不推荐
$('.someclass :radio')

页面调用

复制代码 代码如下:

window.onload = function () {
  AutoComplete({
    id: 'txtTest', //控件id
    url: '/Home/Test4', //数据
    paraName:'name',
    textFiled: 'name', //显示的文字的属性名
    valueFiled: 'id', //获取value的属性名
    //         style: {}, //显示的下拉div的样式设置
    //           url: '', //ajax请求的url
    select: function (val, text) {
      alert(val   '---'   text);
    }, //选择选项时触发的事件,
    showdivId: 'showDIv' //下拉选择区域的id});
  });

}

//推荐
$('.someclass input:radio')

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:jQuery通过写入cookie实现更换网页背景的方法,更

关键词: m.lom599.com