2012-01-02 11 views
0

私はクエリーとjavascriptを一緒に使うことができるのだろうかと思っています。そのため、クラスごとにjavascriptで要素を選択し、その要素を処理するためにjavascriptを使用できます。ごめんなさい。ここに例があります:JQueryとJavascriptを混在させることはできますか?

$('.nav_flag').src = "images/flags/"+userCountryLower+".gif"; 

通常のJavaScriptを使用してクラスで要素を取得する方法はありますか?ありがとう!

編集:私はjQueryのを知っているではJavaScriptですが、私はjQueryの中にもっと良い言葉

+6

jQuery * is * JavaScript。 jQueryはJavaScriptで書かれたライブラリです。 –

答えて

4

ただし、バージョンによってattrまたは小道具で純粋なjQueryを使ってこれを簡単に行うことができますjQueryオブジェクトを取得するにはいくつかの方法があります。、返されるものは$('some selector')で、基になるDOM要素への参照を取得します。

あなたは配列の要素のような個々のDOM要素にアクセスすることができます

// update the src of the first matching element: 
$(".nav_flag")[0].src = "images/flags/"+userCountryLower+".gif"; 

// if you're going to access more than one you should cache the jQuery object in 
// a variable, not keep selecting the same thing via the $() function: 
var navFlgEls = $(".nav_flag"); 
for (var i = 0; i < navFlgEls.length; i++) { ... } 

しかし、あなたはjQuery's .each() methodを使用できる要素による手動ループではないだろう、コールバック関数内で使用すると、thisが設定されます提供していることを指摘現在のDOM要素に:

$(".nav_flag").each(function() { 
    this.src = "images/flags/"+userCountryLower+".gif"; 
}); 

しかし、jQueryのは、1行のコードで属性を設定する方法を提供します210

$(".nav_flag").attr("src", "images/flags/"+userCountryLower+".gif"); 

jQueryを使用せずに同じことを行うには、古いブラウザをサポートしない場合は.getElementsByClassname()または.querySelectorAll()を使用します。

2

利用.attr()の損失をcontroller'-jqueryのセレクタとJavaScriptを」混ぜるのではなく、ここでは2つをミックスすることができれば、私は思っていました。多くの場合、

$('.nav_flag').attr('src', "images/flags/"+userCountryLower+".gif"); 

、プレーンなJavaScriptでのjQueryを混合するために細かいですが、すでにjQueryライブラリが含まれている場合、あなたは同様にそれを使用したりすることがあります。つまり、jQueryでは、単純なJavaScriptの演算と比べて計算上のコストが高くなる操作をしなければなりません。

+0

ありがとう!私はGoogleでかなりの時間を探していて、結果は得られませんでした。 –

5

jQuery IS Javascript。それらを組み合わせて組み合わせることができます。しかし、あなたはあなたがしていることをよく知っている。

この場合、属性の値を設定するには、おそらく.attr関数を使用します。

2

あなたもjQueryを使ってそれを行うことができます。

$('.nav_flag').attr("src", "images/flags/"+userCountryLower+".gif");

2

はjQueryのは、単純にjavascriptの上に構築されたライブラリであることに留意してください。

任意のjQueryオブジェクトに対して、サブスクリプションで要素を選択すると、対応するdom要素が返されます。

$('#foo')[0] // is equivalent to document.getElementById('foo'); 
1

ネイティブJavascriptオブジェクトを取得するには、jQueryオブジェクトにインデックスを追加する必要があります。変更:あなたが使用することができますJavaScriptで

$('.nav_flag')[0].src = "images/flags/"+userCountryLower+".gif"; 

クラス名で要素を取得するには::へ

$('.nav_flag').src = "images/flags/"+userCountryLower+".gif"; 

document.getElementsByClassName('nav_flag')[0].src = "images/flags/"+userCountryLower+".gif"; 
0

をあなたの質問に答えるために、あなたはjQueryのを変換するために.toArray()を使用することができますオブジェクトを標準のDOM要素の配列に変換します。次に、最初の要素またはループを配列に渡して、クラスですべての要素を設定します。

$('.nav_flag').attr("src", "images/flags/"+userCountryLower+".gif"); 

または純粋なJavaScriptを使用します:尋ねたとしてそこに、あなたの質問に答えるために

if (navFlagElements = document.getElementsByClassName("nav_flag") && navFlagElements.length > 0) { 
    navFlagElements[0].src = "images/flags/"+userCountryLower+".gif" 
} 
関連する問題