jQuery学习---简单封装jQuery
李胡媚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封装jQuery</title>
</head>
<body>
<button id="btn1">学习ajax</button>
<span id="span1"></span>
<button id="btn2">学习ajax</button>
<span id="span2"></span>
<button id="btn3">学习ajax</button>
<span id="span3"></span>
<button id="btn4">学习ajax</button>
<span id="span4"></span>
<script type="text/javascript">
function jQuery(selector){
if (typeof selector == "string"){
if (selector.charAt(0) == "#"){
domObj = document.getElementById(selector.substring(1));
//精髓所在
//精髓所在
//精髓所在
return new jQuery();
}
}
//页面加载完毕之后注册回调函数
if (typeof selector == "function"){
window.onload = selector
}
//定义一个html函数代替：domObj.innerHTML = ""
// function html (htmlStr){
// domObj.innerHTML = htmlStr
// }
this.html = function (htmlStr){
domObj.innerHTML = htmlStr
}
//定义click函数代替 domObj.onclick = function(){}
// function click (fun){
// domObj.onclick = fun
// }
this.click = function (fun){
domObj.onclick = fun
}
}
$ = jQuery
//原始状态
window.onload=function (){
document.getElementById("btn1").onclick = function (){
document.getElementById("span1").innerHTML = "<font color='red'>很牛逼1</font>"
}
}
//封装 document.getElementById("btn1")
window.onload=function (){
$("#btn2").onclick = function (){
$("#span2").innerHTML = "<font color='red'>很牛逼2</font>"
}
}
//封装回调函数
$(
function (){
$("#btn3").onclick = function() {
$("#span3").innerHTML = "<font color='red'>很牛逼3</font>"
}
}
)
//封装.innerHtml
$(function (){
$("#btn4").click(function() {
$("#span4").html("<font color='red'>很牛逼4</font>")
})
})
</script>
</body>
</html>注意注意：js中的三个回调函数只能生效最后一个，测试时要把其余注释
类似资料：