誠然，不管前端技術怎么發展，重心都不會變，就是 操作DOM + 獲取資料，
下面的代碼演示了如何快速手寫一個簡單的jQuery：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手寫minijQuery</title>
</head>
<body>
<input id="username" placeholder="請輸入用戶名" autocomplete="off"> <span id="username2"></span> <br>
<input id="password" placeholder="請輸入密碼" autocomplete="off"> <span id="password2"></span>
<script>
let $ = function(id){
/**為了簡潔，只實作ID選擇器* */
let dom = document.getElementById(id);
return {
_dom : dom ,
/** 獲取元素的value屬性值 || 賦值* */
val: function(newVal){
if(arguments.length){
this._dom.value = newVal;
return;
}
return this._dom.value;
},
/** 獲取元素的innerHTML屬性值 || 賦值* */
html: function(newVal){
if(arguments.length){
this._dom.innerHTML = newVal;
return;
}
return this._dom.innerHTML;
},
/** 給元素系結事件* */
on: function(event,callback){
this._dom['on' + event] = callback;
}
}
}
$('username').on('input',function(){
$('username2').html($('username').val());
});
$('password').on('input',function(){
$('password2').html($('password').val());
});
</script>
</body>
</html>
效果如上圖所示， 就是在輸入框右邊同步顯示左邊輸入框的值，
如果你是JavaScript零基礎，并看過《JavaScript百煉成仙》的函式七重關的話，相信也可以很快寫出來，雖然不難，但是通過這個例子，可以很好地鞏固基礎，和增強自己學習前端的自信心，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/374804.html
標籤：其他