一个封装DOM查询的例子

10人阅读 评论(0) 收藏 举报
分类:
function Elem(id){
    this.elem = document.getElementById(id)
}
Elem.prototype.html = function (val){
    var elem = this.elem
    if (val) {
        elem.innerHTML = val
        return this;//链式操作
    } else {
        return elem.innerHTML
    }
}

Elem.prototype.on = function(type, fn){
    var elem = this.elem
    elem.addEventListener(type, fn)//用于向指定元素添加时间句柄
    return this;
}

var div1 = new Elem('div1')//把对应id写在这里
// console.log(div1.html())

div1.html('<p>hello World</p>').on('click',function(){//链式操作
    alert('clicked')
}).html('<p>javascript</P>')
来自:慕课网《前端JavaScript面试技巧》2-11原型链继承例子
查看评论

简单封装js的dom查询

最近一直在啃犀牛书,有感,于是写了个简单的js的dom查询 $ = function (val) { switch(val.charAt(0)) { ...
  • molaifeng
  • molaifeng
  • 2012-11-07 18:21:19
  • 1460

基于DOM现有的insertBefore()方法封装一个insertAfter()方法

DOM提供了insertBefore()方法,可在已有元素前插入一个新元素,在调用此函数时,必须知道三个元素: 1、新元素:你想插入的元素(newElement); 2、目标元素:你要插到哪个元素...
  • liuyingshuai_blog
  • liuyingshuai_blog
  • 2017-01-17 10:18:00
  • 807

一个封装的创建DOM元素的JS方法

 忘记是从什么地方看来的了,快忘记了,写下拉记录下,也顺便再回忆一次。function CreateElement(name,attrs,style,text)                ...{...
  • bamboo_ding
  • bamboo_ding
  • 2008-05-02 14:03:00
  • 1070

php dom 解析类和函数文件封装

  • 2012年03月04日 13:45
  • 333KB
  • 下载

关于封装部分DOM操作的方法

window.utils = { /////////////////////////////关于DOM操作js开始///////////////////////////////////// ...
  • kuangshp128
  • kuangshp128
  • 2017-06-06 19:47:45
  • 210

Js基础学习之 -- DOM兼容 根据标签、类名获取节点函数封装

Js基础学习之 --  DOM兼容 根据标签、类名获取节点函数封装                  1.    作用:所有类选择器名为cName的标签       参数:类选择器的名(cl...
  • b1244154318
  • b1244154318
  • 2016-07-17 23:24:33
  • 2012

JS实现简单的对dom操作封装

js 测试 //duquery (function(w){//定义立即执行函数,传入全局对象window function duquery(id){//定义函数,实现去...
  • toubidu
  • toubidu
  • 2016-02-19 15:13:53
  • 83

js的DOM(节点操作)

插入节点insertBefore() insertBefore() 方法可在已有的子节点前插入一个新的子节点。 语法: insertBefore(newn...
  • yiren_99
  • yiren_99
  • 2015-08-21 22:33:27
  • 462

通过JAVA反射实现简单的ORM,将查询结果封装为对象

package org.test;import java.lang.reflect.Field;import java.lang.reflect.Method;import java.sql.Conn...
  • a600423444
  • a600423444
  • 2011-06-12 22:36:00
  • 3838

jQuery源码学习---简单dom封装(一)

封装简易的dom操作。 一、解决命名空间和变量污染 1.作用域 2.立即执行函数 3.闭包 jQuery是一个类数组对象,里面有各种方法,当然jQuery的dom选择器是sizzle很牛叉,...
  • wujimiao
  • wujimiao
  • 2017-02-14 00:33:26
  • 738
    个人资料
    等级:
    访问量: 29
    积分: 35
    排名: 207万+
    文章存档