模擬jQuery框架做一些簡單的封裝
什么是封裝？
打包？安裝？組合？
我們將一些功能組裝在一起，生成一些簡單好用的API，復雜的API就不用在看了，
比如：我們通過元素的ID獲取頁面的一個元素DOM物件
原生的API：
document.getElementById(id)
我們封裝之后的API：
// 封裝
function $(id){
return docuement.getElementById(id);
}
// 使用
var x = $(id);
jQuery庫，里面存在大量的JavaScript函式
獲取jQuery
①//cdn 引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
②下載之后在專案匯入
公式：$(selector).action() //選擇器就是css的選擇器,css中的選擇器它全部能用！
案例：
<a href="https://www.cnblogs.com/xiaoxiaodeboke/p/#" id="test-jquery">點擊</a>
$("#test-jquery").click(function(){
alert('hello,jQuery!');
})
檔案工具站：https://jquery.cuishifeng.cn/index.html
案例：
//獲取滑鼠當前的坐標
mouse:<span id="mouseMove"></span>
<div id="divMove">移動滑鼠</div>
//當網頁元素加載完畢之后，回應事件
$(function(){
$('#divMove').mousemove(function (e){
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
})
});
//操作dom
<ul id="test-ul">
<li >JavaScript</li>
<li name="python">Python</li>
</ul>
$('test-ul li[name=python]').text();//獲得值
$('test-ul li[name=python]').text('123456');//設定值
//CSS的操作
$('test-ul li[name=python]').css({"color","red"});
//元素的顯示和隱藏 本質是display：none;
$('test-ul li[name=python]').show(); $('test-ul li[name=python]').hide();
[1]獲取頁面元素的DOM物件
常用的API：
-
getElementById()
-
getElementsByTageName();
-
getElementsByClassName();
-
querySelector()
-
querySelectorAll()
我們自己實作一個方法，命名為 $()，實作上面的所有的API的使用：
/**
* 獲取頁面元素的DOM物件的方法\
* @param selector
* 1 #xxxx 表示是通過id查找元素，我直接回傳一個物件 $("#box")
* 2 .xxxxx 通過class名字獲取一組元素
* 3 其他的情況 標簽 ".abc li"
*/
function $(selector){
if(!selector){
return document;// 如果沒有指定selector，就回傳document物件本身
}
// 判斷是否是id選擇器
if(selector.indexOf("#")==0){
return document.getElementById(selector.substr(1)); // #box
}
// 判斷是否是類樣式名稱選擇器 ".abc"
if(selector.indexOf(".") == 0 && selector.indexOf(" ") == -1 && selector.indexOf(",") == -1){
return document.getElementsByClassName(selector.substr(1));
}
// 其他選擇器
var elements = document.querySelectorAll(selector);
if(elements.length == 1){
return elements[0];// 如果只有一個就回傳一個，
}
return elements;// 如果有多個就回傳集合
return undefined; // 回傳原生的DOM物件陣列
}
呼叫測驗：
<script>
window.onload=function(){
console.log($("#username"));
console.log($(".abc"));
console.log($("li"));
console.log($("ul .def"))
}
</script>
<input type="text" id="username">
<ul>
<li class="abc"></li>
<li class="abc"></li>
<li class="abc"></li>
<li class="abc"></li>
<li class="def"></li>
<li class="def"></li>
<li class="def"></li>
</ul>
<input type="text" class="def">
[2]操作這些元素的屬性
原生的API：
var attValue = https://www.cnblogs.com/xiaoxiaodeboke/p/xxxDom.attrName ;
xxxDom.attrName = attrValue;
我們自己封裝的方法：
方法1：常規屬性操作
/**
* 操作DOM物件的屬性
* @param {} dom 要處理的DOM物件
* @param {*} attrName
* 1 string型別，表示是屬性的名字 checked
* 2 object型別， 我們認識是要設定一組屬性 {size:100,name:卡卡西}
* @param {*} attrValue 可選的引數，如果沒有傳遞，就是獲取屬性值，如果傳遞了就是設定屬性值
*
*/
function $attr(dom,attrName,attrValue){
if(!dom || !attrName){
return; //如果DOM不存在，直接回傳
}
// 判斷第二個引數是什么型別
if((typeof attrName)== 'string'){ // attrName = "value"
// 判斷是否有第三個引數，如果有就是設定屬性值，如果沒有就是獲取屬性值
if(attrValue){
dom.setAttribute(attrName,attrValue);
}else{
return dom.getAttribute(attrName);
}
return;
}else if((typeof attrName) == 'object'){ //attrName = {value:"漩渦鳴人",size:20,type:"button"}
var obj = attrName;
// 要同時設定多個屬性值
for(var aname in obj){// 可以通過for回圈取出物件的屬性和value
dom.setAttribute(aname,obj[aname]);
}
return;
}
// 沒有其他情況 報錯
throw "引數有誤:"+attrName;
}
使用方法
<input type="text" id="uname" value=https://www.cnblogs.com/xiaoxiaodeboke/p/"宇智波佐助">
<script>
var unameDom = $("#uname");
// 獲取value的值
var value = $attr(unameDom,"value");
console.log("通過$attr獲取的屬性值："+value);
// 設定value的值
$attr(unameDom,"value","旗木卡卡西");
// 設定多個屬性值
$attr(unameDom,{value:"漩渦鳴人",size:20,type:"button"})
// 錯誤的呼叫方法
// $attr(unameDom,123)
</script>
特殊的屬性操作： innerHTML，innerText, class
/**
* 給一個或者多個元素...
* 如果className存在就洗掉 如果不存在就添加
* @param {*} obj
* @param {*} className
*/
function $switchClass(obj,className){
if(!obj || !className){
return;
}
// 判斷是一個還是一組？
if(obj.length && obj.length > 1){
//集合
for(var x = 0;x < obj.length;x ++){
if( obj[x].className.indexOf(className)!=-1){// 類名本身存在
$removeClass( obj[x],className);
}else{
$addClass( obj[x],className);
}
}
}else{
if(obj.className.indexOf(className)!=-1){// 類名本身存在
$removeClass(obj,className);
}else{
$addClass(obj,className);
}
}
}
/**
* 給一個或者多個元素洗掉指定的類名
* @param {*} obj
* @param {*} className
*/
function $removeClass(obj,className){
if(!obj || !className){
return;
}
// 判斷是一個還是一組？
if(obj.length && obj.length > 1){
//集合
for(var x = 0;x < obj.length;x ++){
obj[x].className = obj[x].className.replaceAll(className,"");
}
}else{
obj.className = obj.className.replaceAll(className,"");
}
}
/**
* 給一個或者多個元素添加指定的類名
* @param {*} obj 可以是一個物件，也可以是一組物件
* @param {*} className
*/
function $addClass(obj,className){
if(!obj || !className){
return;
}
// 判斷是一個還是一組？
if(obj.length && obj.length > 1){
//集合
for(var x = 0;x < obj.length;x ++){
obj[x].className = (obj[x].className?obj[x].className:"") + " " + className;
}
}else{
obj.className