<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//js中数组是对象
//可以给对象，动态添加方法
//页面加载完成后，执行本匿名函数
window.onload=function(){
//通过tagName找元素
//var arr=$("span");
//alert(arr.length);
//可以对这个数组对象进行for 或for in
//也可以通过下标为0的，取第1个成员
//alert(arr[0].innerHTML);
//alert($("span")[0].innerHTML);
//通过id找元素
//var obj=$("#nav");
//alert(obj[0].innerHTML);
//alert(obj[0].getAttribute("tag"));//标准的取属性
//alert($("#nav").attr("tag"));//取属性
//给元素加内容到里面
//var span=document.createElement("span");
//span.innerHTML="TEST";
//document.getElementById("box1").appendChild(span);
//给多个元素，同时加同样的内容在内部
//var arrUL=document.getElementsByTagName("ul");
//for(var i=0;i<arrUL.length;i++){
// var li=document.createElement("li");
// li.innerHTML="test"+i;
// arrUL[i].appendChild(li);
//}
/*
var li=document.createElement("li")
li.innerHTML="SS";
$("ul").append(li);
*/
//$("ul").append("<li>test</li>");
/*
//将自己设为个class属性为active
//并将兄弟的class属性清空
//$("#demo")[0].setAttribute("class","active");
$("#demo").attr("class","active");
var arr=$("#demo").siblings();
//alert(arr.length);
for(var i in arr){
arr[i].setAttribute("class","");
}
*/
//
//var arr=$("#demo").attr("class","active").siblings();
//alert(arr.length);
alert($("#c").css("color"));
}
/**
* 定义一个叫$的函数，用于返回对象(数组)
* @param string selector 默认是元素标签名称，如span div ...
如果传入的参数以#开头的字符串，则以该字符串作为id去找元素，同样返回数组，只有一个成员
* @author ZouYiliang <it9981@gmail.com>
*/
function $(selector){
//给$添加别的功能
//如果传入的是一个普通节点对象，则转为jQuery对象
//明白什么是jQuery对象，什么是普通节点对象
//区别是什么? 只有jQuery对象，才能调jQuery的方法 如attr()
//jQuery对象上不能调用普通节点对象的方法，如getAttribute()
//相互如何转换?
//jQuery转为普通对象，只需要用 [index]当数组一样取某一个成员
//普普通对象转jQuery对象?
if(selector instanceof Object){
return buildObject(selector);
}
//取选择器第一个字符 例如: #nav ，取到#
var firstChar=selector.substring(0,1);
//alert(firstChar);//#
//除第一个字符以外的内容，全部取出来 例如: #nav ，取到nav
var sel=selector.substring(1);
//alert(sel);//nav
//先定义好一个空数组，最后会返回这个数组(是这个对象)
var list=[];
switch(firstChar){
case "#":
var obj=document.getElementById(sel);
//alert(obj)
if(obj!==null){
list[0]=obj;
}
break;
case ".":
// todo
break;
default:
//默认是通过标签名找元素
list=document.getElementsByTagName(selector);
break;
}
//给对象(被返回的那个数组对象)加一个方法
list.attr=function(attrName,value){
if(arguments.length==1){
//返回数组中，第一个成员的指定属性值
return this[0].getAttribute(attrName);
}else{
this[0].setAttribute(attrName,value);
return this;
}
}
//再扩展一个方法,类似于 appendChild()
//content可能是 string element
list.append=function(content){
if(typeof content=="string"){
for(var i=0;i<this.length;i++){
//先取出原有的innerHTML
var oldInnerHTML=this[i].innerHTML;
this[i].innerHTML=oldInnerHTML+content;
}
}else if(typeof content=="object"){
for(var i=0;i<this.length;i++){
this[i].appendChild(content.cloneNode(true));
}
}
}
//返回兄弟元素
list.siblings=function(){
var arr=[];
for(var i=0;i<this.length;i++){
//alert(this[0].parentNode.childNodes.length);
var brothers=this[0].parentNode.childNodes;
for(var j=0;j<brothers.length;j++){
//过滤掉非元素节点
if(brothers[j].nodeType!=1){
continue;
}
if(brothers[j] != this[i]){
arr[arr.length]=brothers[j];
}
}
}
return arr;
}
//obj.style.color
list.css=function(styleName){
switch(styleName){
case "color":
//要做兼容处理，否则只能取写在属性中的，不能取外部样式的
return this[0].style.color;
break;
}
}
return list;
//-------------------------------//
//传入一个普通节点对象，返回jQuery对象
function buildObject(obj){
//todo...
//return ...;
}
}
</script>
</head>
<body>
<div id="nav" tag="5">
<span>111</span>
<span>222</span>
</div>
<div id="box1"></div>
<ul></ul>
<ul></ul>
<ul></ul>
<style type="text/css">
.active{background-color:#F0F0F0;}
</style>
<div>
<ul>
<li class="active">111</li>
<li id="demo" >222</li>
<li>333</li>
</ul>
</div>
<div id="c" style="color:red">aaaaaa</div>
</body>
</html>