-<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 10px;
}
</style>
</head>
<body>
<div id="demo"></div>
<div></div>
<div></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div></div>
<div></div>
<div></div>
<div id="last"></div>
</body>
</html>
<script>
//function $(id) {return document.getElementById(id)} //id选择器
function getClass(classname) // Writing of the class
{
// Judging whether it supports
if (document.getElementsByClassName)
{
return document.getElementsByClassName(classname);
}
var arr = []; // used to return an array
var dom = document.getElementsByTagName("*" );
for ( var i=0;i<dom.length;i++) // traverse all boxes
{
var txtarr = dom [i].className.split(" "); // Split class name and convert to array
// ["demo","test"];
for ( var j=0;j<txtarr.length;j++) // iterate over an array split by classname
{
if (txtarr[j] == classname)
{
arr.push(dom[i]); // What we want is div
}
}
}
return arr;
}
// $("#demo") $(".one") $("div")
// Encapsulate your own $
function $(str) {
var s = str.charAt(0); // A variable of s Stores the symbol # .
var ss = str. substr(1); // demo
switch (s)
{
case "#":
return document.getElementById(ss);
break;
case ".":
return getClass(ss);
break;
default :
return document.getElementsByTagName(str);
}
}
$("#demo").style.backgroundColor = "purple";
$("#last").style.backgroundColor = "purple";
var test = $(".one");
for(var i=0;i<test.length;i++)
{
test[i].style.backgroundColor = "blue";
}
</script>
-
<!
DOCTYPE html
>
<
html
>
<
head
lang
=
"en"
>
<
meta
charset
=
"UTF-8"
>
<
title
></
title
>
<
style
>
div
{
width
:
100px
;
height
:
100px
;
background-color
: pink;
margin
:
10px
;
}
<
/
style
>
</
head
>
<
body
>
<
div
id=
"demo"
></
div
>
<
div
></
div
>
<
div
></
div
>
<
div
class=
"one"
></
div
>
<
div
class=
"one"
></
div
>
<
div
class=
"one"
></
div
>
<
div
></
div
>
<
div
></
div
>
<
div
></
div
>
<
div
id=
"last"
></
div
>
</
body
>
</
html
>
<
script
>
//function $(id) {return document.getElementById(id)} //id选择器
function getClass(classname)
// 类的写法
{
//判断支持否
if(document.getElementsByClassName)
{
return document.getElementsByClassName(classname);
}
var arr = [];
//用于返回 数组
var dom = document.getElementsByTagName(
"*");
for(
var i=
0;i<dom.length;i++)
// 遍历所有的 盒子
{
var txtarr = dom[i].className.split(
" ");
// 分割类名 并且 转换为数组
// ["demo","test"];
for(
var j=
0;j<txtarr.length;j++)
// 遍历 通过类名分割的数组
{
if(txtarr[j] == classname)
{
arr.push(dom[i]);
// 我们要的是 div
}
}
}
return arr;
}
// $("#demo") $(".one") $("div")
//封装自己的$
function $(str) {
var s = str.charAt(
0);
// 一个s 的变量 存放是 符号 # .
var ss = str.substr(
1);
// demo
switch(s)
{
case
"#":
return document.getElementById(ss);
break;
case
".":
return getClass(ss);
break;
default :
return document.getElementsByTagName(str);
}
}
$(
"#demo").style.backgroundColor =
"purple";
$(
"#last").style.backgroundColor =
"purple";
var test = $(
".one");
for(
var i=
0;i<test.length;i++)
{
test[i].style.backgroundColor =
"blue";
}
<
/
script
>