用原生js實現jquery的一些方法

時間  2019-12-13
標籤 原生 實現 jquery 一些 方法 欄目 JavaScript 简体版
原文   原文鏈接

1.顯示/隱藏css

?
1
2
3
4
5
6
7
8
9
10
//hide()
Object.prototype.hide = function (){
  this .style.display= "none" ;
  return this ;
}
//show()
Object.prototype.show = function (){
  this .style.display= "block" ;
  return this ;
}

return this的好處在於鏈式調用。html

2.滑動 省略speed和callback的傳入，由於要加一串判斷和處理回調，代碼量大html5

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//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.捕獲/設置jquery

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//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方法瀏覽器

 

?
1
2
3
4
5
6
7
8
9
//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.添加元素app

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//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.刪除/替換元素ide

?
1
2
3
4
5
6
7
8
9
10
11
//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類this

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//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如下及部分火狐瀏覽器spa

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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.選擇器.net

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//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遍歷：

?
1
2
3
$( ".cls" ).forEach( function (e){
  e.css( "background" , "#f6f6f6" )
})

10.遍歷 siblings()和children()獲取的結果也須要結合forEach使用

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//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;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程