JavaScript使用链式方法封装jQuery中CSS()方法示例


Posted in jQuery onApril 07, 2017

本文实例讲述了JavaScript使用链式方法封装jQuery中CSS()方法。分享给大家供大家参考,具体如下:

主要思路就是:返回this对象,将所获取的操作元素放入一个数组中。在原型中添加拓展方法

<html>
<head>
  <title></title>
</head>
<body>
  <div id="one">aa</div>
</body>
<script type="text/javascript">
//封装类似于JQuery的连缀
/*
思路:一个操作后再返回本来的对象this,将获取的元素放入一个数组内部。通过原型添加方法;
为了能在原型对象中添加方法;这个应该用函数来建立原型对象
function Base(){
  this.getId=function(id){
    return this;
  }
  使用的时候,需要new一个实例对象
  var newBase=Base();
}
*/
function Base(){
  this.element=[];
  //获取ID
  this.getId=function(id){
    //将所获取的元素放入数组里面,返回当前对象
      this.element.push(document.getElementById(id))
      // return this.element.length
      return this
    }
    //获取className,遍历push
    this.getClass=function(name){
      var names=document.getElementsByName(name);
      for( var i=0;i<names.length;i++){
        this.element.push(names[i])
      }
      return this;
    }
    //获取tagName;遍历push
    this.getTag=function(tags){
      var tags=document.getElementsByTagName(tags);
      for(var i=0;i<tags.length;i++){
        this.element.push(tags[i])
      }
      return this;
    }
  }
//通过原型添加方法:
Base.prototype.css=function(attr,value){
  //遍历选取当前元素
  for(var i=0;i<this.element.length;i++){
    this.element[i].style[attr]=value;
  }
  return this;
}
var newBase= new Base();
// alert(newBase.getId("one"))
newBase.getId("one").css("background","red").css("color","blue").css("fontSize","60")
</script>
</html>

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

jQuery 相关文章推荐
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery获取随机颜色的实例代码
May 21 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jquery插件实现搜索历史
Apr 24 jQuery
jQuery中map函数的两种方式
Apr 07 #jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 #jQuery
jQuery实现文章图片弹出放大效果
Apr 06 #jQuery
jQuery自定义图片上传插件实例代码
Apr 04 #jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 #jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 #jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 #jQuery
You might like
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
openPNE常用方法分享
2011/11/29 PHP
curl不使用文件存取cookie php使用curl获取cookie示例
2014/01/26 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
js实现按Ctrl+Enter发送效果
2014/09/18 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
javascript实现瀑布流动态加载图片原理
2016/08/12 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
详解Python循环作用域与闭包
2019/03/21 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
Python中生成ndarray实例讲解
2021/02/22 Python
毕业生的自我评价分享
2013/12/18 职场文书
装修协议书范本
2014/04/21 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
2015年检验科工作总结
2015/04/27 职场文书
nginx之内存池的实现
2022/06/28 Servers
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL