最近迷上了原生 js, 能不用 jquery 等框架的情况都会手写一些 js 方法, 记得刚接触前端的时候为了选择器而使用 jquery... 现在利用扩展原型的方法实现一些 jquery 函数: 1. 显示 / 隐藏 javascript 代码
- //hide()
- Object.prototype.hide = function(){
- this.style.display="none";
- return this;
- }
- //show()
- Object.prototype.show = function(){
- this.style.display="block";
- return this;
- }
return this 的好处在于链式调用.
2. 滑动 省略 speed 和 callback 的传入, 因为要加一串判断和处理回调, 代码量大 javascript 代码
- //slideDown()
- Object.prototype.slideDown = function(){
- this.style.display = 'block';
- if(this.clientHeight<this.scrollHeight){
- this.style.height=10+this.clientHeight+"px";
- var _this = this;
- setTimeout(function(){_this.slideDown()},10)
- }else{
- this.style.height=this.scrollHeight+"px";
- }
- }
- //slideUp()
- Object.prototype.slideUp = function(){
- if(this.clientHeight>0){
- this.style.height=this.clientHeight-10+"px";
- var _this = this;
- setTimeout(function(){_this.slideUp()},10)
- }else{
- this.style.height=0;
- this.style.display = 'none';
- }
- }
3. 捕获 / 设置 javascript 代码
- //attr()
- Object.prototype.attr = function(){
- if(arguments.length==1){
- return eval("this."+arguments[0]);
- }else if(arguments.length==2){
- eval("this."+arguments[0]+"="+arguments[1]);
- return this;
- }
- }
- //val()
- Object.prototype.val = function(){
- if(arguments.length==0){
- return this.value;
- }else if(arguments.length==1){
- this.value = arguments[0];
- return this;
- }
- }
- //html()
- Object.prototype.html = function(){
- if(arguments.length==0){
- return this.innerHTML;
- }else if(arguments.length==1){
- this.innerHTML = arguments[0];
- return this;
- }
- }
- //text() 需要在 html() 结果基础上排除标签, 会很长, 省略
4.CSS 方法 javascript 代码
- //css()
- Object.prototype.css = function(){
- if(arguments.length==1){
- return eval("this.style."+arguments[0]);
- }else if(arguments.length==2){
- eval("this.style."+arguments[0]+"='"+arguments[1]+"'");
- return this;
- }
- }
5. 添加元素 javascript 代码
- //append()
- Object.prototype.append = function(newElem){
- this.innerHTML += newElem;
- return this;
- }
- //prepend()
- Object.prototype.prepend = function(newElem){
- this.innerHTML = arguments[0] + this.innerHTML;
- return this;
- }
- //after()
- Object.prototype.after = function(newElem){
- this.outerHTML += arguments[0];
- return this;
- }
- //before()
- Object.prototype.before = function(newElem){
- this.outerHTML = arguments[0] + this.outerHTML;
- return this;
- }
6. 删除 / 替换元素 javascript 代码
- //empty()
- Object.prototype.empty = function(){
- this.innerHTML = "";
- return this;
- }
- //replaceWith()
- Object.prototype.replaceWith = function(newElem){
- this.outerHTML = arguments[0];
- return this;
- }
- //remove() js 自带, 省略.
7. 设置 css 类 javascript 代码
- //hasClass()
- Object.prototype.hasClass = function(cName){
- return !!this.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") );
- }
- //addClass()
- Object.prototype.addClass = function(cName){
- if( !this.hasClass( cName ) ){
- this.className += " " + cName;
- }
- return this;
- }
- //removeClass()
- Object.prototype.removeClass = function(cName){
- if( this.hasClass( cName ) ){
- this.className = this.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " );
- }
- return this;
- }
上面的设置 CSS 类也可以利用 html5 新 API classList 及 contains 实现 但不兼容 IE8 以下及部分火狐浏览器 javascript 代码
- Object.prototype.hasClass = function(cName){
- return this.classList.contains(cName)
- }
- Object.prototype.addClass = function(cName){
- if( !this.hasClass( cName ) ){
- this.classList.add(cName);
- }
- return this;
- }
- Object.prototype.removeClass = function(cName){
- if( this.hasClass( cName ) ){
- this.classList.remove(cName);
- }
- return this;
- }
9. 选择器 javascript 代码
- //id 或 class 选择器 $("elem")
- function $(strExpr){
- var idExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/;
- var classExpr = /^(?:\s*(<[\w\W]+>)[^>]*|.([\w-]*))$/;
- if(idExpr.test(strExpr)){
- var idMatch = idExpr.exec(strExpr);
- return document.getElementById(idMatch[2]);
- }else if(classExpr.test(strExpr)){
- var classMatch = classExpr.exec(strExpr);
- var allElement = document.getElementsByTagName("*");
- var ClassMatch = [];
- for(var i=0,l=allElement.length; i<l; i++){
- if(allElement[i].className.match( new RegExp( "(\\s|^)" + classMatch[2] + "(\\s|$)") )){
- ClassMatch.push(allElement[i]);
- }
- }
- return ClassMatch;
- }
- }
需要强调的是, 选择器返回的结果或结果集包含的是 htmlDOM, 并非 jquery 的对象. 大多数人都知道, document.getElementById("id") 等价于 jquery$("#id")[0], 另外上面 class 选择器选择的结果如需使用, 需要利用 forEach 遍历: javascript 代码
- $(".cls").forEach(function(e){
- e.css("background","#f6f6f6")
- })
10. 遍历 siblings() 和 children() 获取的结果也需要结合 forEach 使用 javascript 代码
- //siblings()
- Object.prototype.siblings = function(){
- var chid=this.parentNode.children;
- var eleMatch = [];
- for(var i=0,l=chid.length;i<l;i++){
- if(chid[i]!=this){
- eleMatch.push(chid[i]);
- }
- }
- return eleMatch;
- }
- //children() 原生 js 已含有该方法, 故命名为 userChildren.
- Object.prototype.userChildren = function(){
- var chid=this.childNodes;
- var eleMatch = [];
- for(var i=0,l=chid.length;i<l;i++){
- eleMatch.push(chid[i]);
- }
- return eleMatch;
- }
- //parent()
- Object.prototype.parent = function(){
- return this.parentNode;
- }
- //next()
- Object.prototype.next = function(){
- return this.nextElementSibling;
- }
- //prev()
- Object.prototype.prev = function(){
- return this.previousElementSibling;
- }
jquery 事件函数原生 js 已有, 另外, 原生 js 实现 jquery 的一个常用函数 ajax 将会在下一篇写道. 原生 js 实现 ajax 方法 https://notes/20430/a483bfb2b9ca0174be1e899983185b71.html
来源: http://www.qdfuns.com/article/20430/8a1c45570f3c192f51c2d191a7032b52.html