<!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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
