jQueryソースコードのremoveAttr()メソッドの解析解釈_jquery

この記事では、jQuery ソース コード解釈の RemoveAttr() メソッドをより詳細に分析します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

jQuery プロトタイプ オブジェクトを拡張するメソッド:

コードをコピーします コードは次のとおりです。

jQuery.fn.extend({
//name、削除する DOM 要素の属性名を渡します。
removeAttr: function( name ) {

//jQuery.fn オブジェクト、つまり jQuery プロトタイプ オブジェクトの each メソッドを使用して、現在のセレクターによって選択された jQuery オブジェクト配列を走査し、チェーン呼び出し用の jQuery オブジェクトを返します。
return this.each(function() {
//jQueryのグローバルメソッドremoveAttrを呼び出し、トラバースされたDOMオブジェクトにこれと削除する属性の名前を渡します。
jQuery.removeAttr( this, name );
});
}
});

jQueryのグローバルメソッドremoveAttr

コードをコピー コードは次のとおりです:

//jQuery オブジェクトのグローバル メソッドを拡張します
jQuery.extend({

//elem は走査される各 DOM オブジェクトであり、value は削除される属性名です。
removeAttr: function(elem, value) {
変数名、propName、
i = 0、
//rnotwhite は (/S /g)
//値が " " の場合、論理 AND 式の値は null
//値が "title href" であると仮定した場合、論理 AND 演算子のどちらのオペランドもブール値ではないため、この時点で 2 番目のオペランドは ["title", "href"] として返されます。
//match は、文字列内の指定された値を取得するか、1 つ以上の正規表現の一致を見つけて、一致結果を格納する配列を返す JavaScript 文字列メソッドです。他のタイプではエラーが報告されます。
attrNames = value && value.match( rnotwhite );
//attrNames が null でなく、現在の DOM オブジェクトのノード タイプが 1 の場合は、if ステートメント ブロックに入ります。それ以外の場合は関数から飛び出し、この走査を終了し、次の走査を開始します。
If ( attrNames && elem.nodeType === 1 ) {
//この時点で、attrNames は削除する属性名を含む配列、つまり ["title", "href"]
//while ループを実行する この書き方では、まず attrNames から要素を取り出して name に代入し、i を 1 ずつ増やして、name に値があるかどうかを判定します。実行が完了すると、name に値がなくなるまで次のループが開始されます。
while ( (name = attrNames[i ]) ) {
//属性名が「for」や「class」などのjsキーワードと同じ名前の場合は、「htmlFor」や「className」に置き換えます。
propName = jQuery.propFix[ name ] || name;

//ブール属性の場合は特別な処理を行います
If ( jQuery.expr.match.bool.test( name ) ) {
//getSetInput は、Input 要素が getAttribute("value")
をサポートしているかどうかを検出します。 //getSetAttribute は、キャメルケース命名形式での属性名の設定がサポートされているかどうかを検出します
//!ruseDefault.test( name ) は大文字と小文字を区別せず、name がチェックされた属性であるか選択された属性であるかを検出します。
If ( getSetInput && getSetAttribute || !ruseDefault.test( name ) ) {
// Boolean 属性を削除すると、実際には Boolean 属性に false
の値が代入されます。 に } else {
//ie9 以下をサポート
//属性「default-checked」を「defaultChecked」に変換し、値 false を割り当てます
elem[ jQuery.camelCase( "default-" name ) ] =
                                                                                                                                                                                                      }
} else {
// ブール属性でない場合は、jQuery のグローバル attr メソッドを呼び出して属性
を設定します jQuery.attr(elem, name, "");
}
//getSetAttribute は、setAttribute がキャメルケース命名形式での属性名の設定をサポートしているかどうかをテストするために使用されます。サポートしている場合は、setAttribute および getAttribute を使用するときに修正された属性名を使用する必要があります。 (ie6/7対応)
//getSetAttibute が false の場合は、サポートされていないことを意味し、サポートされている場合は、変更された属性名が使用されます。
// DOM ネイティブの RemoveAttribute メソッドを呼び出して属性
を削除します elem.removeAttribute( getSetAttribute ? name : propName );
}
}
}
});

キーワード属性の修正

コードをコピー コードは次のとおりです:

jQuery.extend({
    propFix: {
        "for": "htmlFor",
        "クラス": "クラス名"
    }
});
jQuery.extend({
    キャメルケース: function( string ) {
        return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase );
    }
});
var nodeHook、boolHook、
    attrHandle = jQuery.expr.attrHandle,
    ruseDefault = /^(?:checked|selected)$/i,
    getSetAttribute = support.getSetAttribute,
    getSetInput = support.input;
// セットアップ
div = document.createElement( "div" );
div.setAttribute( "クラス名", "t" );
div.innerHTML = " a";
a = div.getElementsByTagName("a")[ 0 ];
// テストの最初のバッチ。
select = document.createElement("select");
opt = select.appendChild( document.createElement("オプション") );
input = div.getElementsByTagName("input")[0];
a.style.cssText = "top:1px";
// キャメルケースクラスの setAttribute をテストします。それが機能する場合、get/setAttribute (ie6/7) を実行するときに attrFixes が必要です
support.getSetAttribute = div.className !== "t";

检测input が getAttribute("value") をサポートしているかどうか

复制代 代码如下:

// サポート: IE8 のみ
// 信頼できるかどうかを確認 getAttribute("value")
input = document.createElement( "input" );
input.setAttribute( "値", "" );
support.input = input.getAttribute( "value" ) === "";

检测否布尔值プロパティ

复制代代码如下:

booleans = "checked|selected|async|autofocus|autoplay|controls|遅延|無効|非表示|ismap|ループ|複数|オープン|読み取り専用|必須|スコープ付き",

matchExpr = {
    "bool": new RegExp( "^(?:" ブール値 ")$", "i" )
}、

ここで説明されている大規模な jQuery プログラムの設計が役立つことを望みます。