simpleJQ.js
实现的方法 :
-
$('选择器'):可选值, ID,类,标签,属性
-
click():$(select).click(function(){ }): 注册点击事件
-
css(): $(selector).css({color:'red',background:'pink'}): 设置样式
-
show(): $(selector).show(): 显示元素
-
hide():$(selector).hide(): 隐藏元素
-
html():
-
$(selector).html(content) 设置标签内容
-
$(selector).html(): 获取标签内容; 不可继续进行链式编程
function $(selector) {
// 获取dom元素
var dom = document.querySelector(selector);
return {
0:dom,
click:function(callback){
dom.onclick=callback
},
css: function () {
// 说明是key,val
if (arguments.length == 2) {
dom.style[arguments[0]] = arguments[1];
} else if (arguments.length == 1) { //说明传递的是对象格式的属性{}
for (var key in arguments[0]) {
dom.style[key] = arguments[0][key];
}
}
return this;
},
show: function () {
dom.style.display = 'block';
return this;
},
hide: function () {
dom.style.display = 'none';
return this;
},
html: function (content) {
if(content){
dom.innerHTML = content;
return this;
}else{
return dom.innerHTML;
}
}
}
}
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试代码</title>
<style>
</style>
</head>
<body>
<div class="container">
<button id='show'>显示</button>
<button id='hidden'>隐藏</button>
<button id='bgchange'>修改背景色</button>
<hr>
<div id="box">
这是一个用于测试的div盒子, 点击显示按钮,显示该div, 点击隐藏按钮, 隐藏该div
</div>
</div>
</body>
<script src="simpleJQ.js"></script>
<script>
console.log($("#box"));
// 显示box
$("#show").click(function(){
$("#box").show();
});
// 隐藏box
$("#hidden").click(function(){
$("#box").hide();
});
// 修改box的样式
$("#bgchange").click(function(){
$("#box").show().css({color:'red',background:'pink'})
});
</script>
</html>
