仿造jQuery写一个简单的框架，让大家先从简单的功能区了解框架到底是什么，框架是如何编写了，现在初步实现了ID选择器然后去设置其css样式和text文本
javascprit部分
<script>
function $$(support){
if(typeof support != "function"){
console.info("传入的参数不是函数")
}else{
var doc = window.document;
//谷歌和火狐浏览器
if(doc.addEventListener){
doc.addEventListener("DOMContentLoaded",support,false);
}else{//IE
//监听文档事件
doc.onreadystatechange = function(){
//IE6 || IE7 || IE8
if(doc.readyState == "loader" || doc.readyState == "complete" || doc.readyState == "interactive"){
support();
}
}
}
}
}
(function(window){
//公共方法，让别人去调用
window.$=function(selector){
return new jQuery(selector);
}
//私有的对象
var jQuery = function(selector){
//给jQuery对象绑定数组用来存放获取的元素
this.box = document.querySelectorAll(selector);
}
//重新定义jQuery类函数的prototype
jQuery.prototype={
//innerText方法
text:function(value){
for (var i = 0; i < this.box.length; i++) {
//把传入的值写到HTML
this.box[i].innerText = value;
}
return this;//返回this可以链式编程
},
//css方法
css:function(key,value){
for (var i = 0; i < this.box.length; i++) {
//把传入的值放到style
this.box[i].style[key]=value;
}
return this;//返回this可以链式编程
}
}
})(window);
//调用框架
$$(function(){
$("#box1").text("Hello world！").css("color","lightgreen").css("font-size","100px").css("text-align","center").css("height","100%");
$("#box2").text("Hello JAVAScript!").css("color","blue").css("font-size","100px").css("text-align","center").css("height","100%");
});
</script>
html部分
<html>
<head>
</head>
<body>
<div id="box1" style="background-color:black;height:50px"></div>
<div id="box2" style="background-color:orange;height:50px"></div>
</body>
</html>
799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
