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 Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
基于jQuery实现定位导航位置效果
Nov 15 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jquery实现的放大镜效果示例
Feb 24 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jquery实现上传图片功能
Jun 29 jQuery
jQuery实现简单轮播图效果
Dec 27 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
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
JS公共小方法之判断对象是否为domElement的实例
2016/11/25 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
面试常见的js算法题
2017/03/23 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
Python生成随机密码
2015/03/10 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
python绘制条形图方法代码详解
2017/12/19 Python
python放大图片和画方格实现算法
2018/03/30 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
大学生村官工作感言
2014/01/10 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
活着观后感
2015/06/03 职场文书
毕业实习单位意见
2015/06/04 职场文书
反邪教教育心得体会
2016/01/15 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs