用原生js實現jquery的一些方法
阿新 • • 發佈:2022-03-20
1.顯示/隱藏
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的好處在於鏈式呼叫。
2.滑動 省略speed和callback的傳入,因為要加一串判斷和處理回撥,程式碼量大
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.捕獲/設定
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.新增元素
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.刪除/替換元素
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類
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以下及部分火狐瀏覽器
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.選擇器
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;
}
|