jQuery学习笔记（四）封装js框架

自己的思路：首先获取接收过来的数据，根据字符串截取(.substring(范围))进行判断

判断：1，#     id元素     2，.    class元素   3，<>  HTML标签  

然后返回return tqObject;

然后是function方法->进行方法的封装，下面示例。

var $ = function(selector){

this.tqObject = new TQObject();
if(selector.substring(0,1) == "#"){
var elem = document.getElementById(selector.substring(1));
this.tqObject.data.push(elem);
} else if(selector.substring(0,1) == "."){
//类选择器的操作
var elems = document.getElementsByTagName("*");
var reg = new RegExp("(^|\\s)"+selector.substring(1)+"($|\\s)");
for(var i=0 ; i < elems.length ; i ++){
if(reg.test(elems[i].className)){
this.tqObject.data.push(elems[i]);
}
}
} else if(selector.indexOf("<") == 0 && selector.lastIndexOf(">")==selector.length-1){
//1、判断是否为HTML标签
//2、提取标签名称
var elemName = selector.substring(1,selector.indexOf(">"));
//3、document.createElement("div");
var newElem = document.createElement(elemName);
//4、封装标签内容
var content = selector.substring(selector.indexOf(">")+1,selector.lastIndexOf("<"));
newElem.innerHTML = content;
//5、将元素封装到TQObject中
this.tqObject.data.push(newElem);
}
else {
//标记选择器
var elems = document.getElementsByTagName(selector);
this.tqObject.data=elems;
}
return tqObject;
}
id选择器
function $(selector){
var c=selector.substring(0,1);
if(c=='#'){
return document.getElementById(selector.substring(1,selector.length));
}
}
类选择器
语法:$(".class")
function $(selector){
//判断浏览器是否支持getElementsByClassName
//docment.getElementsByTagName('*')+正则表达式
var className=selector.substring(1);
if(document.getElementsByTagName){
return document.getElementsByClassName(className)
}else{
//docment.getElementsByTagName('*')+正则表达式
//匹配这个class是否存在这个类名
var reg=new RegExp("(^|\\s)"+className+"$|\\s");
var elems=document.getElementsByTagName("*");
//获取页面的所有元素
var arr=[];
//保存回去到的className元素
for(var i=0;i<elems.length;i++){
if(reg.test(elems[i].className))
arr.push(elems[i]);
}
}
return arr;
}
element标签选择器,通过页面上的元素名称获取一组元素
目的是简化document.getElementsByTagName()
语法:$("element")
function $(element){
return document.getElementsByTagName(element);
}
封装jqurey
实现目标
$("div").html("<a href='http://www.baidu.comn'>百度</a>")
$("div").html();得到第一个元素的html值
html():对innerHTML属性的封装
var TQObject = function(){
this.data = [];
}
TQObject.prototype={
size:function(){
return this.data.length;
}
html:function(content){
if (content) {
//为元素设置html值(xx.innerHTTML="")
for(var i=0;i<this.data.length;i++){
this.data[i].innerHTTML=content;
}


}else{
//获取html值(return xx.innerHTML)
if(this.data.length!=0){
return this data[0].innerHTTML;
}
return;
}
}
append();
$("a").append(b);
将b追加到a的后面
$("bady").append($("<div>hello</div>"));
appendto()j将a追加到b的后面
$("<div>hello</hello>").appendto($("body"));
inserBefore()
$("a").insertBefore(b);
$("<div>hello</div>".inserbefore($("#myDiv")))
append:function(tqObject){
//将tqObject里面的第一个元素增加到this里面的第一个元素里
//$("body").append($('<div>Hello Tarena</div>'));
var srcElem = this.data[0];
var tarElem = tqObject.data[0];
srcElem.appendChild(tarElem);
return this;
},
appendTo:function(tqObject){
// tqObject为源元素
// this为目标元素
// 将this中的第一个元素，追加到tqObject的第一个元素中
var srcElem=tqObject.data[0];
var tarElem=this.data[0];
srcElem.appendChild(tarElem);
return this;
}


}