<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq的面向对象转化</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.test{
width: 100px;
height: 100px;
border: 1px black solid;
}
html{
background-color: white;
}
</style>
</head>
<body>
<div id="div1">
<div class="div1">
<span class="span1">
<span>
<a href="#">百度</a>
</span>
</span>
</div>
</div>
<div class="div1">
<span class="span1">
<span>
<a href="#">淘宝</a>
</span>
</span>
</div>
<div class="test" style="width: 200px">555</div>
<div class="test">666</div>
<input type="text" class="text" id="put">
</body>
<script type="text/javascript">
//三种写法等效
// $(function(){
// })
// $(document).ready(function(){
// })
// document.addEventListener("DOMContentLoaded",function(){
// })
// $(function(){
// $("#div1 .div1 .span1 span a").on("click",function(){
// })
// $("#div1 .div1 .span1 span a").keydown(function(){
// })
// $("#div1 .div1 .span1 span a").css("color","red")
// $("#div1 .div1 .span1 span a").css({
// "background":"green",
// "color":"red",
// "diplay":"none"
// })
// $(document).click(function(){
// })
// })
//1.ready函数
function ready(fn){
//document.addEventListener("DOMContentLoaded",fn);
addEvent(document,"DOMContentLoaded",fn);
}
//2.getE函数
function getE(str){
//"#div1 .div1 .span1 span a"
var reg = /^\s*|\s*$/g; //去除开头和结尾的空格
var str1 = str.replace(reg,""); //选择器名字之间的空格合并为一个
var reg2 = /\s+/g;
var str2 = str1.replace(reg2," ");
var arr = str2.split(" "); //arr["#div1",".div1",".span1","span","a"]
var parsents = [document]; //存放父级元素
var children = []; //存放子级级元素,将最终的children返回,赋值给this.ev
//完成层层搜索,最大的父级一定为document,逐级往下搜索,直到找到所有满足要求的dom元素
for(var i = 0;i < arr.length; i++){
children = [];
for(var j = 0;j < parsents.length; j++){
switch(arr[i].charAt(0)){
case "#":
var el = document.getElementById(arr[i].substr(1));
children.push(el);
break;
case ".":
// var els = parsents[j].getElementsByClassName(arr[i].substr(1));
var els = byClassName(parsents[j],arr[i].substr(1));
for (var k = 0; k < els.length; k++){
children.push(els[k]);
}
break;
default:
var els = parsents[j].getElementsByTagName(arr[i]);
for (var k = 0; k < els.length; k++){
children.push(els[k]);
}
break;
}
}
parsents = children;
}
return children;
}
function Jquery(ev){
this.ev = []; //存放最终元素的集合
if(typeof(ev) == "string"){
// this.ev = document.querySelectorAll(ev);
this.ev = getE(ev);
}else if(typeof(ev) == "function"){
ready(ev);
}else{
this.ev.push(ev);
}
}
Jquery.prototype = {
constructor: Jquery,
on:function(ev,fn){
for (var i = 0; i < this.ev.length; i++) {
addEvent(this.ev[i],ev,fn);
}
},
click:function(fn){
for (var i = 0; i < this.ev.length; i++) {
addEvent(this.ev[i],"click",fn)
}
},
keydown:function(fn){
for (var i = 0; i < this.ev.length; i++) {
addEvent(this.ev[i],"keydown",fn)
}
},
ready:function(fn){
window.addEventListener('load',fn,false);
},
//判断参数类型,以不同的方式设置css
css:function(a,b){
for (let i = 0; i < this.ev.length; i++){
if(arguments.length == 1 && (typeof(arguments[0]) == "object")){
for(key in a){
if(typeof(a[key]) == "string"){
if(this.ev[i] == document){
document.body.style[key] = a[key];
}else{
this.ev[i].style[key] = a[key];
}
}else if(typeof(a[key]) == "function"){
var str = a[key](i,getComputedStyle(this.ev[i],null)[key]);
if(typeof str == "number"){
this.ev[i].style[key] = str+"px";
}else{
this.ev[i].style[key] = str;
}
}
}
}else if(arguments.length == 1 && (typeof(arguments[0]) == "string")){
//只能获取行间样式
// return this.ev.style[a];
if(this.ev[i] == document){
return window.getComputedStyle(document.body,null)[a];
}else{
//此方法只有一个string类型参数时,只返回第一个元素的css属性值
return window.getComputedStyle(this.ev[0],null)[a];
}
}else if(arguments.length == 2 && (typeof(arguments[1]) == "string")){
if(this.ev[i] == document){
document.body.style[a] = b;
}else{
this.ev[i].style[a] = b;
}
}else if(arguments.length == 2 && (typeof(arguments[1]) == "function")){
var str = b(i,getComputedStyle(this.ev[i],null)[a]);
if(typeof str == "number"){
this.ev[i].style[a] = str+"px";
}else{
this.ev[i].style[a] = str;
}
}
}
},
attr:function(a,b){
for (let i = 0; i < this.ev.length; i++) {
if(arguments.length == 1 && (typeof(arguments[0]) == "object")){
for(key in a){
if(this.ev[i] == document){
document.documentElement.setAttribute(key,a[key]);
}else{
this.ev[i].setAttribute(key,a[key]);
}
}
}else if(arguments.length == 1 && (typeof(arguments[0]) == "string")){
if(this.ev[i] == document){
return document.documentElement.getAttribute(a);
}else{
return this.ev[i].getAttribute(a);
}
}else if(arguments.length == 2 && (typeof(arguments[1]) == "string")){
if(this.ev[i] == document){
document.documentElement.setAttribute(a,b);
}else{
this.ev[i].setAttribute(a,b);
}
}else if(arguments.length == 2 && (typeof(arguments[1]) == "function")){
var str = b(i,this.ev[i].getAttribute(a));
this.ev[i].setAttribute(a,str);
}
}
}
}
function $(arg){
return new Jquery(arg);
}
$.each = function(obj,fn){
if(obj instanceof Jquery){ //判断obj是否是Jquery的实例
for(var i in obj.ev){
fn(i,obj.ev[i]);
}
}else{
for(var i in obj){
fn(i,obj[i]);
}
}
};
$.each($(".test"),function(i,n){
console.log(i+":"+n);
})
//监听事件兼容写法,addEvent();
//通过类名获取元素,兼容低ie的函数,byClassName();
function addEvent(obj,ev,fn){
//兼容绑定dom2级事件
if(window.addEventListener){
obj.addEventListener(ev,fn);
}else{ //IE浏览器
obj.attachEvent("on"+ev,fn);
}
}
function byClassName(p,cn){
if(p.getElementsByClassName){
return p.getElementsByClassName(cn);
}else{ //没有通过类名获取元素方法的情况下
var arr = p.getElementsByTagName("*");
var arr1 = []; //最终return出去的数组
for (var i = 0; i < arr.length; i++) {
if(arr[i].className == cn){
arr1.push(arr[i]);
}
}
return arr1;
}
}
$(document).ready(function(){
$("#div1 .div1 .span1 span a").on("click",function(){
console.log(666);
})
$(document).click(function(){
console.log(111);
})
$(document).keydown(function(){
var e = window.event;
console.log(e.keyCode);
})
$("#div1 .div1 .span1 span a").css("color","red");
$(".test").css("color","cyan");
console.log($(".test").css("width"));
$(".test").css({
"backgroundColor":"blue",
"fontSize":"30px",
"textAlign":"center"
});
$(document).css({
"backgroundColor":"gray",
"width":"500px",
"height":"500px"
});
$(".test").css({
width: function(index, value) {
return parseFloat(value) * 1.5;
},
height: function(index, value) {
return parseFloat(value) * 1.5;
}
});
$(".test").css("width",function(index,value){
return parseFloat(value) * 2;
});
$(".test").css("border",function(index,value){
console.log(value);
});
$(document).attr("index",1);
$(".text").attr({
"type":"button",
"checked":true
});
$(".text").attr("class", function(index,value){ return value+" item input"+index});
console.log($(".text").attr("class"))
})
</script>
</html>
浙公网安备 33010602011771号