面向对象之——仿写jq
仿写jq
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#outer {
width: 100px;
height: 100px;
background-color: #00FFFF;
}
div {
width: 300px;
height: 300px;
background: darkorange;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner" class="center">0
<span class="ooo"></span>
<p></p>
<a href=""></a>
<span></span>
</div>
<div class="center">
1
</div>
</div>
</body>
<script type="text/javascript">
function findClass(obj,className){
var resultArr=[];
if(obj.getElementsByClassName){
resultArr=obj.getElementsByClassName(className);
}else{
var arrs=obj.getElementsByTagName("*");
for(var i=0;i<arrs.length;i++){
var reg=new RegExp("\\b"+className+"\\b");
if(reg.test(arrs[i].className)){
resultArr.push(arrs[i])
}
}
}
return resultArr;
}
function selectEl(arg){
//正则去除节点多余空格
var reg=/[^\s]+/g;
//数组接收节点
var elArr=arg.match(reg);
// console.log(arr);
//存储父级数组，并初始化
//从文档层查起
var parentArr=[document];
for(var i=0;i<elArr.length;i++){
var childArr=[];
for(var j=0;j<parentArr.length;j++){
//传入的id #??
if(/^#/.test(elArr[i])){
//去#
var ids=elArr[i].substring(1);
var el=document.getElementById(ids);
//去重
if(childArr.indexOf(el)==-1){
childArr.push(el);
}
}else if(/^\./.test(elArr[i])){
//传入的是class .??
var className=elArr[i].substring(1);
//注意ie低版本不兼容问题
var resultArr=findClass(parentArr[j],className);
for(var k=0;k<resultArr.length;k++){
if(childArr.indexOf(resultArr[k])==-1){
childArr.push(resultArr[k]);
}
}
}else{
var resultArr=parentArr[j].getElementsByTagName(elArr[i]);
for(var k=0;k<resultArr.length;k++){
if(childArr.indexOf(resultArr[k])==-1){
childArr.push(resultArr[k]);
}
}
}
}
parentArr=childArr;
}
return parentArr
}
//测试
//var arr=selectEl(" #outer .center span");
//console.log(arr)
function $(arg){
return new Jq(arg)
}
function ready(fn){
//ie兼容
if(window.addEventListener){
document.addEventListener('DOMContentLoaded',fn,false)
}else{
var os=document.createElement('script');
os.defer=true;
os.onreadystatechange=function(){
if(os.readyState=="complete"){
fn();
}
}
var oh=document.getElementsByTagName("head")[0];
oh.appendChild(os);
}
}
function Jq(arg){
this.elements=[];
if(typeof arg=="string"){
this.elements=selectEl(arg)
}else if(typeof arg=="function"){
ready(arg);
}else{
this.elements.push(arg)
}
}
//console.log($(".center"))
//JQ:$(".center").eq(1)
//eq方法最终就是帮我们找到想要操作的DOM节点帮我们把这个DOM节点转化成一个新的jq对象并返回出去
Jq.prototype.eq=function(index){
return $(this.elements[index])
}
//测试
// console.log($(".center").eq(1))
//事件监听兼容IE
function addEvent(obj,eventName,fn){
if(obj.addEventListener){//现代浏览器有addEventListener方法
obj.addEventListener(eventName,fn,false);
}else{
obj.attachEvent("on"+eventName,fn);
}
}
//click
//JQ:$(".center").click(function(){})
Jq.prototype.click=function(fn){
for(var i=0;i<this.elements.length;i++){
//很多事件都要兼容ie低版本
//用一个函数来兼容ie
//this.element[i].addEventListener("click",fn,false)
addEvent(this.elements[i],"click",fn,false);
}
}
//测试
// $('.center').click(function(){
// console.log("clickSuc")
// })
// $('.center').eq(1).click(function(){
// console.log("clickSuc1")
// })
//on
// JQ: $('.center').on("mouseup",function(){})
//可能有多个事件
// JQ: $('.center').on("mouseup mousedown",function(){})
Jq.prototype.on=function(eventStr,fn){
//把事件存储到事件数组中
var eventArr=eventStr.match(/[^\s]+/g);
// console.log(eventArr)
//遍历数组进行事件绑定
for(var i=0;i<eventArr.length;i++){
for(var j=0;j<this.elements.length;j++){
addEvent(this.elements[j],eventArr[i],fn);
}
}
}
//测试
// $('.center').on("mouseup",function(){
// console.log("onSuc")
// })
// $('.center').eq(1).on("mouseup",function(){
// console.log("onSuc")
// })
function setStyle(obj,styleName,styleValue){
var arr=["width","height"];
for(var i=0;i<arr.length;i++){
if(arr[i]==styleName){
if(typeof styleValue=="number"){
styleValue=styleValue+"px";
}
}
}
obj.style[styleName]=styleValue;
}
function getStyle(obj,styleName){
if(window.getComputedStyle){
// console.log(getComputedStyle(obj,null))
return getComputedStyle(obj,null)[styleName];
}else{
return obj.currentStyle(styleName);
}
}
// $(".index").css({
// background:"red",
// width:"100px",
// height:100
// });//使用for in 来判断
Jq.prototype.css=function(){
if(arguments.length==1){
if(typeof arguments[0]=="string"){
return getStyle(this.elements[0],arguments[0]);
}else{
for(var keys in arguments[0]){
for(var i=0;i<this.elements.length;i++){
setStyle(this.elements[i],keys,arguments[0][keys]);
// this.elements[i].style[keys]=arguments[0][keys];
}
}
}
}else if(arguments.length==2){
for(var i=0;i<this.elements.length;i++){
setStyle(this.elements[i],arguments[0],arguments[1]);
}
}
}
console.log($(".index").css("background"))
// $(".index").css("height",100);
// $(".index").css({
// background:"red",
// width:"100px",
// height:100
// });
</script>
</html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦