Created
August 18, 2013 07:28
-
-
Save chengmu/6260375 to your computer and use it in GitHub Desktop.
method to be jquery-free
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 选取dom元素 | |
*/ | |
var $ = document.querySelectorAll.bind (document); | |
myList = Array.prototype.slice.call (myNodeList); | |
/** | |
* 尾部追加 DOM 元素 | |
*/ | |
// jQuery 写法 | |
$(parent).append ($(child)); | |
// DOM 写法 | |
parent.appendChild (child); | |
/** | |
* 头部插入 DOM 元素。 | |
*/ | |
// jQuery 写法 | |
$(parent).prepend ($(child)); | |
// DOM 写法 | |
parent.insertBefore (child, parent.childNodes[0]); | |
/** | |
* 删除 DOM 元素。 | |
*/ | |
// jQuery 写法 | |
$(child) .remove (); | |
// DOM 写法 | |
child.parentNode.removeChild (child); | |
/** | |
* jQuery 的 on 方法,完全可以用 addEventListener 模拟。 | |
*/ | |
Element.prototype.on = Element.prototype.addEventListener; | |
NodeList.prototype.on = function (event, fn) { | |
[]['forEach'].call(this, function (el) { | |
el.on(event, fn); | |
}); | |
return this; | |
}; | |
/** | |
* jQuery 的 trigger 方法则需要单独部署,相对复杂一些。 | |
*/ | |
Element.prototype.trigger = function (type, data) { | |
var event = document.createEvent('HTMLEvents'); | |
event.initEvent(type, true, true); | |
event.data = data || {}; | |
event.eventName = type; | |
event.target = this; | |
this.dispatchEvent(event); | |
return this; | |
}; | |
//在 NodeList 对象上也部署这个方法。 | |
NodeList.prototype.trigger = function (event) { | |
[]['forEach'].call(this, function (el) { | |
el['trigger'](event); | |
}); | |
return this; | |
}; | |
/** | |
* attr 方法 | |
*/ | |
//jQuery | |
$("#picture").attr ("src","http://url/to/image"); | |
//DOM 元素允许直接读取属性值,写法要简洁许多。 | |
$("#picture").src = "http://url/to/image"; | |
//需要注意,input 元素的 this.value 返回的是输入框中的值,链接元素的 this.href 返回的是绝对 URL。如果需要用到这两个网页元素的属性准确值,可以用 this.getAttribute ('value') 和 this.getAttibute ('href')。 | |
/** | |
* addClass 方法 | |
*/ | |
//jQuery 的 addClass 方法,用于为 DOM 元素添加一个 class。 | |
$('body') .addClass ('hasJS'); | |
//DOM 元素本身有一个可读写的 className 属性,可以用来操作 class。 | |
document.body.className = 'hasJS'; | |
// or | |
document.body.className += ' hasJS'; | |
//HTML 5 还提供一个 classList 对象,功能更强大(IE 9 不支持)。 | |
document.body.classList.add ('hasJS'); | |
document.body.classList.remove ('hasJS'); | |
document.body.classList.toggle ('hasJS'); | |
document.body.classList.contains ('hasJS'); | |
/** | |
* CSS | |
*/ | |
//jQuery 的 css 方法,用来设置网页元素的样式。 | |
$(node).css ("color", "red"); | |
//DOM 元素有一个 style 属性,可以直接操作。 | |
element.style.color = "red"; | |
// or | |
element.style.cssText += 'color:red'; | |
/** | |
* 数据储存 | |
*/ | |
//jQuery 对象可以储存数据。 | |
$("body") .data ("foo",52); | |
//HTML 5 有一个 dataset 对象,也有类似的功能(IE 10 不支持),不过只能保存字符串。 | |
element.dataset.user = JSON.stringify (user); | |
element.dataset.score = score; | |
/** | |
* Ajax | |
*/ | |
//jQuery 的 Ajax 方法,用于异步操作。 | |
$.ajax({ | |
type: "POST", | |
url: "some.php", | |
data: { name: "John", location: "Boston" } | |
}).done(function( msg ) { | |
alert( "Data Saved: " + msg ); | |
}); | |
//我们可以定义一个 request 函数,模拟 Ajax 方法。 | |
function request(type, url, opts, callback) { | |
var xhr = new XMLHttpRequest(); | |
if (typeof opts === 'function') { | |
callback = opts; | |
opts = null; | |
} | |
xhr.open(type, url); | |
var fd = new FormData(); | |
if (type === 'POST' && opts) { | |
for (var key in opts) { | |
fd.append(key, JSON.stringify(opts[key])); | |
} | |
} | |
xhr.onload = function () { | |
callback(JSON.parse(xhr.response)); | |
}; | |
xhr.send(opts ? fd : null); | |
} | |
//然后,基于 request 函数,模拟 jQuery 的 get 和 post 方法。 | |
var get = request.bind (this, 'GET'); | |
var post = request.bind (this, 'POST'); | |
/** | |
* 动画 | |
*/ | |
//jQuery 的 animate 方法,用于生成动画效果。 | |
$foo.animate ('slow', { x: '+=10px' }); | |
//jQuery 的动画效果,很大部分基于 DOM。但是目前,CSS 3 的动画远比 DOM 强大,所以可以把动画效果写进 CSS,然后通过操作 DOM 元素的 class,来展示动画。 | |
foo.classList.add ('animate'); | |
//如果需要对动画使用回调函数,CSS 3 也定义了相应的事件。 | |
el.addEventListener ("webkitTransitionEnd", transitionEnded); | |
el.addEventListener ("transitionend", transitionEnded); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment