<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>js封装3</title></head><body><div id="div"><button id="hide" class="hide">hide</button><button id="show" class="show">show</button><div> <img id="img" src="../a/images/1.png" alt=""></div><input type="text" id="input"><p id="onmouseover">鼠标移入事件</p><ul><li>1</li><li>2</li><li>3</li></ul></div><script>let f = function(selector){this.querySelectorAll(selector);}f.prototype.querySelectorAll = function(selector){this.element = document.querySelectorAll(selector);return this.element;}// // 隐藏f.prototype.hide =function(){for(i=0;i<this.element.length;i++){this.element[i].style.display = 'none';}}// 显示f.prototype.show =function(){for(i=0;i<this.element.length;i++){this.element[i].style.display = 'block';}}// 事件f.prototype.click = function(click,ev){let c = click;// console.log(c);switch(true){//点击事件case c === 'onclick':this.element[0].onclick = ev;break;// 失去焦点事件case c === "onblur":this.element[0].onblur = ev;break;// 元素获得焦点case c === "onfocus":this.element[0].onfocus = ev;break;// 鼠标移入事件case c === "onmouseover":this.element[0].onmouseover = ev;break;// 鼠标移除事件case c === "onmouseout":this.element[0].onmouseout = ev;break;}}// css样式f.prototype.css = function(attr,value){this.element[0].style[attr] = value;}$ = function (selector){return new f(selector);}// 实例调试// 获取元素let hide = $('.hide');$('#hide');console.log($('#hide'));// 隐藏$('#hide').click('onclick',function(){$('#img').hide();});// 显示$('.show').click('onclick',function(){$('#img').show();});// 失去焦点$('#input').click('onblur',function(){console.log(1111);});// 元素获得焦点$('#input').click('onfocus',function(){console.log(2222);});// 鼠标移入事件$('#onmouseover').click('onmouseover',function(){console.log(3333);});// 鼠标移除事件$('#onmouseover').click('onmouseout',function(){console.log(4444);});// css样式$('ul').css('color','red');$('ul').css('background','coral');$('ul').css('width','100px');</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
