JS搭建myQuery框架：实现jquery中的attr和css方法,要求可以做链式操作【诗书画唱】
本期重点：
学习记录
题目和我想出和给出的答案
实现jquery中的attr方法,要求可以做链式操作。
ps.attr('src','img/11.png');
ps.attr('name','abc');
ps.attr('type','button');
具体代码例子
实现jquery中的css方法
搭建myQuery框架.html
预备知识.html
学习记录
题目和我想出和给出的答案
实现jquery中的attr方法,要求可以做链式操作。
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>
//同时定义和运行匿名函数能够保证定义的变量在函数的外部无法访问
(function(){
var myQuery = window.$ = function(selector){
return new myQuery.prototype.Init(selector);
};
//处理myQuery的prototype属性
myQuery.prototype = {
Init: function(selector){
//获取页面中指定选择器的元素
var eles = document.querySelectorAll(selector);
//将eles数组和this对象合并在一起
Array.prototype.push.apply(this,eles);
//this指向了myQuery.prototype对象
return this;
}
};
//实现框架的可扩展功能(添加新的属性和方法)
myQuery.extend = function(obj){
//将obj对象中的属性和方法合并到myQuery对象中
for(var attr in obj) {
this[attr] = obj[attr];
}
};
//当往myQuery.prototype对象中添加属性以后,
//那么通过new Init方法创建出来的对象中也会包含myQuery.prototype对象中的属性
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]);
}
},
css: function(){
//获取调用css函数时的参数的个数
var len = arguments.length;
if(len === 2) {
var cssName = arguments[0];
var cssVal = arguments[1];
//对所有的元素做样式设置
this.each(function(index,item){
item.style[cssName] = cssVal;
});
}
//实现链式操作的代码
return this;
},
attr: function(){
//获取调用attr函数时的参数的个数
var len = arguments.length;
if(len === 2) {
var attrName = arguments[0];
var attrVal = arguments[1];
//对attrVal的数据类型进行判断
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框架添加一个扩展功能:格式化日期的功能
$.extend({
frm: 'yyyy-MM-dd',
toStr: function(d){
//实现格式化的代码
return '2021-4-13';
},
trim: function(str){//去掉字符串两端的空格
return (str || '').replace(/^\s+|\s+$/g,'');
},
noConflict: function(){//解决变量名冲突
var mq = $;
delete window.$;//删除window对象中的$属性
window.$$ = mq;
}
});
//使用扩展功能
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>
个人答案：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
//基础代码的部分：
(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];
}
};
//写自己想实现的功能代码的部分：
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为获取调用css函数时的参数的个数：
var len = arguments.length;
if(len === 2) {
var cssName = arguments[0];
var cssVal = arguments[1];
this.each(function(index,item){
//我打印出参数的值和类型，就方便我知道这里的参数代表什么，是干什么用的：
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是否是同一个内容：
console.log("this:"+this)
return this;
}
});
})();
window.onload = function(){
//设置img的src为'../img/11.png'：
$('img').attr('src','../img/11.png');
//设置input的type为button， name为abc的方法1：
$('input').attr('type','button')
$('input').attr('name','abc');
//设置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>
//同时定义和运行匿名函数能够保证定义的变量在函数的外部无法访问
(function(){
var myQuery = window.$ = function(selector){
return new myQuery.prototype.Init(selector);
};
//处理myQuery的prototype属性
myQuery.prototype = {
Init: function(selector){
//获取页面中指定选择器的元素
var eles = document.querySelectorAll(selector);
//将eles数组和this对象合并在一起
Array.prototype.push.apply(this,eles);
//this指向了myQuery.prototype对象
return this;
}
};
//实现框架的可扩展功能(添加新的属性和方法)
myQuery.extend = function(obj){
//将obj对象中的属性和方法合并到myQuery对象中
for(var attr in obj) {
this[attr] = obj[attr];
}
};
//当往myQuery.prototype对象中添加属性以后,
//那么通过new Init方法创建出来的对象中也会包含myQuery.prototype对象中的属性
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]);
}
},
//实现jquery中的css方法：
css: function(){
//获取调用css函数时的参数的个数
var len = arguments.length;
if(len === 2) {
var cssName = arguments[0];
var cssVal = arguments[1];
//对所有的元素做样式设置
this.each(function(index,item){
item.style[cssName] = cssVal;
});
}
//实现链式操作的代码
return this;
}
});
})();
//给myQuery框架添加一个扩展功能:格式化日期的功能
$.extend({
frm: 'yyyy-MM-dd',
toStr: function(d){
//实现格式化的代码
return '2021-4-13';
},
trim: function(str){//去掉字符串两端的空格
return (str || '').replace(/^\s+|\s+$/g,'');
},
noConflict: function(){//解决变量名冲突
var mq = $;
delete window.$;//删除window对象中的$属性
window.$$ = mq;
}
});
//使用扩展功能
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('当前元素的下标是：' + index);
console.log('当前元素内部的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>
预备知识.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// var arr = [1,2,3];
// //push将指定的元素添加到数组的尾部
// 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];
//将数组中的元素依次添加到了stu对象的尾部
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>
