JS搭建myQuery框架：實(shí)現(xiàn)jquery中的attr和css方法,要求可以做鏈?zhǔn)讲僮鳌驹?shī)書畫唱】
本期重點(diǎn)：
學(xué)習(xí)記錄
題目和我想出和給出的答案
實(shí)現(xiàn)jquery中的attr方法,要求可以做鏈?zhǔn)讲僮鳌?/p>
ps.attr('src','img/11.png');
ps.attr('name','abc');
ps.attr('type','button');
具體代碼例子
實(shí)現(xiàn)jquery中的css方法
搭建myQuery框架.html
預(yù)備知識(shí).html
學(xué)習(xí)記錄
題目和我想出和給出的答案
實(shí)現(xiàn)jquery中的attr方法,要求可以做鏈?zhǔn)讲僮鳌?/p>
ps.attr('src','img/11.png');
ps.attr('name','abc');
ps.attr('type','button');
老師的答案：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//同時(shí)定義和運(yùn)行匿名函數(shù)能夠保證定義的變量在函數(shù)的外部無(wú)法訪問(wèn)
(function(){
var myQuery = window.$ = function(selector){
return new myQuery.prototype.Init(selector);
};
//處理myQuery的prototype屬性
myQuery.prototype = {
Init: function(selector){
//獲取頁(yè)面中指定選擇器的元素
var eles = document.querySelectorAll(selector);
//將eles數(shù)組和this對(duì)象合并在一起
Array.prototype.push.apply(this,eles);
//this指向了myQuery.prototype對(duì)象
return this;
}
};
//實(shí)現(xiàn)框架的可擴(kuò)展功能(添加新的屬性和方法)
myQuery.extend = function(obj){
//將obj對(duì)象中的屬性和方法合并到myQuery對(duì)象中
for(var attr in obj) {
this[attr] = obj[attr];
}
};
//當(dāng)往myQuery.prototype對(duì)象中添加屬性以后,
//那么通過(guò)new Init方法創(chuàng)建出來(lái)的對(duì)象中也會(huì)包含myQuery.prototype對(duì)象中的屬性
myQuery.prototype.Init.prototype = myQuery.prototype;
myQuery.prototype.extend = myQuery.extend;
myQuery.prototype.extend({
get: function(index){//獲取指定下標(biāo)的元素
return this[index];
},
each: function(fn){
for(var i = 0;i < this.length;i ++) {
fn(i,this[i]);
}
},
css: function(){
//獲取調(diào)用css函數(shù)時(shí)的參數(shù)的個(gè)數(shù)
var len = arguments.length;
if(len === 2) {
var cssName = arguments[0];
var cssVal = arguments[1];
//對(duì)所有的元素做樣式設(shè)置
this.each(function(index,item){
item.style[cssName] = cssVal;
});
}
//實(shí)現(xiàn)鏈?zhǔn)讲僮鞯拇a
return this;
},
attr: function(){
//獲取調(diào)用attr函數(shù)時(shí)的參數(shù)的個(gè)數(shù)
var len = arguments.length;
if(len === 2) {
var attrName = arguments[0];
var attrVal = arguments[1];
//對(duì)attrVal的數(shù)據(jù)類型進(jìn)行判斷
if(typeof attrVal === 'function') {
this.each(function(index,item){
item[attrName] = attrVal(index);
});
} else {
this.each(function(index,item){
item[attrName] = attrVal;
? ? item.setAttribute(attrName,attrVal);
});
}
}
return this;
}
});
})();
//給myQuery框架添加一個(gè)擴(kuò)展功能:格式化日期的功能
$.extend({
frm: 'yyyy-MM-dd',
toStr: function(d){
//實(shí)現(xiàn)格式化的代碼
return '2021-4-13';
},
trim: function(str){//去掉字符串兩端的空格
return (str || '').replace(/^\s+|\s+$/g,'');
},
noConflict: function(){//解決變量名沖突
var mq = $;
delete window.$;//刪除window對(duì)象中的$屬性
window.$$ = mq;
}
});
? ? //使用擴(kuò)展功能
? ? console.log($.frm);
? ? console.log($.toStr(new Date()));
? ??
? ? console.log($.trim('? ? ? ?ab? c? ? '));
// ? ? $.noConflict();//將框架的變量重命名為了$$
// ? ? $$();
window.onload = function(){
// var igs = document.querySelectorAll('[name="igs"]');
// for(var i = 0;i < igs.length;i ++) {
// //igs[i]['src'] = 'img/11.png';
// //igs[i].setAttribute('src','img/11.png');
// }
? ? ? ? ? ? ? ? $('[name="igs"]').attr('src',function(index,value){
? ? ? ? ? ? ? ? return 'img/' + index + '.png';
? ? ? ? ? ? ? ? });
}
</script>
</head>
<body>
<img name="igs" />
<img name="igs" />
<img name="igs" />
</body>
</html>
個(gè)人答案：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
//基礎(chǔ)代碼的部分：
(function(){
var myQuery = window.$ = function(selector){
return new myQuery.prototype.Init(selector);
};
myQuery.prototype = {
Init: function(selector){
var eles = document.querySelectorAll(selector);
Array.prototype.push.apply(this,eles);
return this;
}
};
myQuery.extend = function(obj){
for(var attr in obj) {
this[attr] = obj[attr];
}
};
//寫自己想實(shí)現(xiàn)的功能代碼的部分：
myQuery.prototype.Init.prototype = myQuery.prototype;
myQuery.prototype.extend = myQuery.extend;
myQuery.prototype.extend({
get: function(index){
return this[index];
},
each: function(fn){
for(var i = 0;i < this.length;i ++) {
fn(i,this[i]);
}
},
attr: function(){
//這里的len為獲取調(diào)用css函數(shù)時(shí)的參數(shù)的個(gè)數(shù)：
var len = arguments.length;
if(len === 2) {
var cssName = arguments[0];
var cssVal = arguments[1];
this.each(function(index,item){
//我打印出參數(shù)的值和類型，就方便我知道這里的參數(shù)代表什么，是干什么用的：
console.log("item:"+item
+"? cssName:"+cssName+" cssVal:"+cssVal
+" document.getElementsByTagName('img')[0]:"
+document.getElementsByTagName('img')[0])
console.log("src類型:"+typeof src)//undefined
console.log("cssName類型:"+typeof cssName)//string
//item.cssName='img/11.png';
item[cssName]=cssVal;
//document.getElementsByTagName('img')[0]['src']='img/11.png'可以推出item[cssName]=cssVal
//document.getElementsByTagName('img')[0].src='img/11.png'
});
}
//常常使用console.log看this等是什么東西，用typeof看是什么類型，a==b看a和b是否是同一個(gè)內(nèi)容：
console.log("this:"+this)
return this;
}
});
})();
window.onload = function(){
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ?
//設(shè)置img的src為'../img/11.png'：
? ? ? ? ? ? ? ? ??
? $('img').attr('src','../img/11.png');
?//設(shè)置input的type為button， name為abc的方法1：? ? ? ? ? ? ? ? ? ?
?$('input').attr('type','button')
?$('input').attr('name','abc');
? //設(shè)置input的type為button， name為abc的方法2：
?$('input').attr('type','button').attr('name','abc');
? ? ? ? ? ? ? ? ??
}
</script>
<body>
<!--ps.attr('src','img/11.png');
ps.attr('name','abc');
ps.attr('type','button');-->
<input type="text" >
<img src="" />
</body>
</html>
具體代碼例子
搭建myQuery框架.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//同時(shí)定義和運(yùn)行匿名函數(shù)能夠保證定義的變量在函數(shù)的外部無(wú)法訪問(wèn)
(function(){
var myQuery = window.$ = function(selector){
return new myQuery.prototype.Init(selector);
};
//處理myQuery的prototype屬性
myQuery.prototype = {
Init: function(selector){
//獲取頁(yè)面中指定選擇器的元素
var eles = document.querySelectorAll(selector);
//將eles數(shù)組和this對(duì)象合并在一起
Array.prototype.push.apply(this,eles);
//this指向了myQuery.prototype對(duì)象
return this;
}
};
//實(shí)現(xiàn)框架的可擴(kuò)展功能(添加新的屬性和方法)
myQuery.extend = function(obj){
//將obj對(duì)象中的屬性和方法合并到myQuery對(duì)象中
for(var attr in obj) {
this[attr] = obj[attr];
}
};
//當(dāng)往myQuery.prototype對(duì)象中添加屬性以后,
//那么通過(guò)new Init方法創(chuàng)建出來(lái)的對(duì)象中也會(huì)包含myQuery.prototype對(duì)象中的屬性
myQuery.prototype.Init.prototype = myQuery.prototype;
myQuery.prototype.extend = myQuery.extend;
myQuery.prototype.extend({
get: function(index){//獲取指定下標(biāo)的元素
return this[index];
},
each: function(fn){
for(var i = 0;i < this.length;i ++) {
fn(i,this[i]);
}
},
//實(shí)現(xiàn)jquery中的css方法：
css: function(){
//獲取調(diào)用css函數(shù)時(shí)的參數(shù)的個(gè)數(shù)
var len = arguments.length;
if(len === 2) {
var cssName = arguments[0];
var cssVal = arguments[1];
//對(duì)所有的元素做樣式設(shè)置
this.each(function(index,item){
item.style[cssName] = cssVal;
});
}
//實(shí)現(xiàn)鏈?zhǔn)讲僮鞯拇a
return this;
}
});
})();
//給myQuery框架添加一個(gè)擴(kuò)展功能:格式化日期的功能
$.extend({
frm: 'yyyy-MM-dd',
toStr: function(d){
//實(shí)現(xiàn)格式化的代碼
return '2021-4-13';
},
trim: function(str){//去掉字符串兩端的空格
return (str || '').replace(/^\s+|\s+$/g,'');
},
noConflict: function(){//解決變量名沖突
var mq = $;
delete window.$;//刪除window對(duì)象中的$屬性
window.$$ = mq;
}
});
? ? //使用擴(kuò)展功能
? ? console.log($.frm);
? ? console.log($.toStr(new Date()));
? ??
? ? console.log($.trim('? ? ? ?ab? c? ? '));
// ? ? $.noConflict();//將框架的變量重命名為了$$
// ? ? $$();
window.onload = function(){
//console.log($('p').get(1).innerHTML);
// var ps = $('p');
// for(var i = 0;i < ps.length;i ++) {
// var p = ps[i];
// console.log(p.innerHTML);
// }
? ? ? ? ? ? ? ? $('p').each(function(index,item){
? ? ? ? ? ? ? ? console.log('當(dāng)前元素的下標(biāo)是：' + index);
? ? ? ? ? ? ? ? console.log('當(dāng)前元素內(nèi)部的html代碼是:' + item.innerHTML);
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? $('#act').get(0);
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? $('p').css('background','red').css('color','blue');
}
</script>
</head>
<body>
<input type="text" id="act" />
<p>第一段文本</p>
<p>第二段文本</p>
<p>第三段文本</p>
</body>
</html>
預(yù)備知識(shí).html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// var arr = [1,2,3];
// //push將指定的元素添加到數(shù)組的尾部
// arr.push(4);
// console.log(arr);
// function test(a,b){
// console.log(this.name);
// }
var stu = {
name: '張三',
age: 18,
0:'one'
};
// test();//this=window
// test.apply(stu,[1,2]);//this=stu
? ? ? ? ? ? //Array.prototype.push.apply
? ? ? ? ? ? var arr1 = ['one',5,true];
? ? ? ? ? ? //將數(shù)組中的元素依次添加到了stu對(duì)象的尾部
? ? ? ? ? ? Array.prototype.push.apply(stu,arr1);
? ? ? ? ? ? console.log(stu);
? ? ? ? ? ??
? ? ? ? ? ? var pro = {
? ? ? ? ? ? pname: '德芙巧克力',
? ? ? ? ? ? price: 10.5
? ? ? ? ? ? };
? ? ? ? ? ? var order = ['一盒','一箱'];
? ? ? ? ? ? console.log(Array.prototype.push.apply(pro,order));
? ? ? ? ? ? //console.log(pro);
//? ? ? ? ? for(var i = 0;i < pro.length;i ++) {
//? ? ? ? ? console.log(pro[i]);
//? ? ? ? ? }
</script>
</head>
<body>
</body>
</html>
