2011-09-13 21 views
0

は、HTMLjQueryのセレクタの最適化

<div id="one" > 
<input type="radio" value="x" name="group" > 
<input type="radio" value="y" name="group" > 
<input type="radio" value="z" name="group" > 
</div> 

は、私はjQueryを使ってDOMへのアクセスに関する二つの質問を持って考えてみましょう。

  1. 質問の一つ

私はちょうど私が方法1

を持ってselected.Soで入力ラジオの値を見つけたい:

var value=""; 
$("#one input:radio[name=group]").each(function(){ 
    if($(this).is(:checked)){ 
    value=$(this).val(); 
    } 
}); 

方法2:

var value=$("#one input:radio[name=group]:checked").val(); 

2つの方法の間にはかなりのパフォーマンスの違いがありますか?方法2ではなく、1行のコードで行います。

また、実際にjquery内の"input:radio[name=group]:checked"という行で何が起こっているのかを説明してください。

  1. 私は入力が "y" の値を有することに 真のchecked属性を設定したい二つの

質問。だから、

$("input:radio").filter("[value=y]").attr('checked', true); 

$("#one input:radio[name=group]").filter("[value=y]").attr('checked', true); 

同じことを行います。

"div id"と "[name = group]"を追加するとパフォーマンスに違いはありますか?

+0

document.getElementByIdは最も速いです! – wukong

+0

"2つの方法の間にかなりのパフォーマンスの違いがありますか?方法2ではなく、1行のコードで行います.." 1行のコードでは、パフォーマンスは*それとはまったく関係ありません。 – jensgram

+0

はい..私はそれ自体、唯一の利点は、コードの行を保存していることを意味します.. – Sarath

答えて

1

それがダウンして、純粋なパフォーマーになると、私はより良い見つける一つの解決策があります:(jsperf上)「それを自分で行いますが、」

/私はあなたのテストをしましたが、それが唯一のコピーを作成するために私に時間がかかりました私が追加した結果から;)

http://jsperf.com/selectoroptimization

を貼り付け、最善の方法は、最初の質問のための第二1のようですが、1秒間には、ブラウザに依存します。

+0

"jsperf"のための大丈夫感謝..実際に何がJQueryの内部で起こっているかの説明を見つけるか? – Sarath

+0

いいえ、私はjQuery内部で何が起こっているかに精通していません。 –

+0

Py:素晴らしい!私はjsperfについて知らなかった! – tsimbalar