js 简易封装jquery
(一).引入‘$’符号
HTML:
<body>
<script src="myjq.js"></script>
</body>
JS:
;//防止受到别的js文件影响
(function() {
var jQuery = function() {
return 111;
};
window.jQuery = jQuery;
window.$ = window.jQuery;
console.log($());
})();
(二).dom节点的选取
比如我们要完成
(
x
x
x
)
.
c
s
s
(
)
,
这
个
j
q
语
句
,
我
们
可
以
当
作
对
象
.
方
法
但
是
要
完
成
(xxx).css(),这个jq语句,我们可以当作对象.方法 但是要完成
(xxx).css(),这个jq语句,我们可以当作对象.方法但是要完成(xxx).css().background(),对象.方法.方法是不可以的,会报错。
我们需要obj.a()=====>返回对象 .b()必须这样做,我们首先要有这种思想
<script>
console.log($('li'));
</script>
;(function(){
var jQuery = function(selected) {
return new jQuery.prototype.init(selected); //返回一个对象
};
var markArray = function(arr,that){
var brr = that;
for(var i=0;i<arr.length;i++){
brr[i]=arr[i]
}
brr.length=arr.length;
return brr;
};
jQuery.prototype = {
init:function(selected){
//这是一个方法===》选择元素的
var dom = document.querySelectorAll(selected);
return markArray(dom,this); //返回一个对象,this为init
},
a:function(){
alert("aaaaa");
return this;
},
b:function(){
alert("bbbbb");
return this;
},
c:function(){
alert("ccccc")
}
};
jQuery.prototype.init.prototype= jQuery.prototype;
window.jQuery = window.$ = jQuery;
})();
(三).dom添加方法:
JS:
;
(function() {
var jQuery = function(selected) {
return new jQuery.prototype.init(selected); //返回一个对象
};
var markArray = function(arr, that) {
var brr = that;
for (var i = 0; i < arr.length; i++) {
brr[i] = arr[i]
}
brr.length = arr.length;
return brr;
};
jQuery.prototype = {
init: function(selected) {
//这是一个方法===》选择元素的
var dom = null;
if (typeof selected != "string") {
dom = [selected];
} else {
dom = document.querySelectorAll(selected);
}
return markArray(dom, this); //返回一个对象
},
hover: function(over, out) {
this[0].onmouseover = over;
this[0].onmouseout = out;
return this;
},
css: function(attr, val) {
for (var i = 0; i < this.length; i++) {
this[i].style[attr] = val;
}
return this;
},
html: function(val) {
for (var i = 0; i < this.length; i++) {
this[i].innerHTML = val;
}
return this;
},
first: function() {
return $(this[0]);
},
last: function() {
return $(this[this.length - 1]);
},
eq: function(num) {
return $(this[num]);
}
};
jQuery.prototype.init.prototype = jQuery.prototype;
window.jQuery = window.$ = jQuery;
})();
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
#box {
width: 100px;
height: 100px;
}
</style>
<body>
<div id="box">111111111</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script src="myjq.js"></script>
<script>
$("#box").hover(function() {
alert('鼠标移入');
}, function() {
alert("鼠标移出");
})
$("#box").css("background", "red");
$("ul li").first().css("background", "red");
$("ul li").last().css("background", "red");
$("ul li").eq(2).css("background", "blue");
</script>
</body>
</html>