5

HTMLは次のとおりです。

<html>
  <head>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="jquery-1.7.2.js"></script>
    <script type="text/javascript" src="access.js"></script>
  </head>
  <body>
    <button id="trigger"></button>
    <img id= "testElement" style= "position: absolute; border-color: white; top:340px; left:615px;" width="34px" height= "34px" />
  </body>
</html>

access.js ファイルは次のとおりです。

$(document).ready( function(){
  $('#trigger').click(function(){
    $('#testElement').src="success.png";
    //THIS WON'T WORK.
    document.getElementById('testElement').src= "success.png";
    //BUT THIS WORKS.
  });
});

$を使用すると、戻りオブジェクトが jQuery オブジェクトになることがわかっています。getElementById とは異なります。しかし、なぜここで jQuery セレクターが機能しないのでしょうか?

「追加/スタイル」などの操作をさらに行うには、jQuery オブジェクトが必要です...

ありがとう。

更新 ほぼ同時に多くの正解が表示されました...誰にクレジットを与えるべきかを判断できるように、より多くの説明をお願いします。ありがとうございます!

正解がよくわからなくてすみません…もっと詳しく知りたいです。

すべての属性ノード (src/width/height...) は jQuery オブジェクトのプロパティではありませんか? jQuery セレクターは img/p/li/div node のような DOM 要素ノードのみを選択しますか? (<>は多少の誤差が生じます。)

更新された情報をご覧ください... ありがとうございます！

4

7 に答える 7

10

jQuery 要素は、配列のようなjQuery オブジェクトにラップされた DOM 要素であるため、すべての jQuery メソッドにアクセスできますが、元の DOM メソッドとプロパティへのアクセスが「失われる」ことを意味します。jQuery メソッドを使用するか、元の DOM 要素を取得してバニラ プロパティを使用できます。

$('#testElement').attr('src', 'success.png');
$('#testElement')[0].src = 'success.png';
                --^-- get DOM element
于 2012-11-25T04:50:10.397 に答える
8

.attr()jQuery オブジェクトで jQuery メソッドを使用する必要があるため:

$('#testElement').attr("src", "success.png");
于 2012-11-25T04:47:16.773 に答える
4

する必要があります

$('#testElement').prop("src","success.png");  //1.6 and above

また

$('#testElement').attr("src","success.png");  //before 1.6

JavaScript と JQuery でプロパティにアクセスする方法は異なります

document.getElementById('testElement').src= "success.png";

で達成することもできます

$('#testElement')[0].src = "success.png";
于 2012-11-25T04:48:40.597 に答える
3

srcjQuery オブジェクトのプロパティではありません。あなたがする必要があります

$('#testElement').attr('src', 'success.png')
于 2012-11-25T04:47:27.070 に答える
3

代わりにこれを使用してください：

$('#testElement').attr("src","success.png");

または、使用できるものよりも最新バージョンの jquery を使用している場合:

$('#testElement').prop("src","success.png");
于 2012-11-25T04:47:41.953 に答える
3

jQuery オブジェクトにはsrcDOM オブジェクト プロパティであるプロパティがないため、getElementById が機能し、一致する要素の属性またはプロパティを使用.attr()または設定します.prop()

$('#testElement').attr('src',"success.png");
$('#testElement').prop('src',"success.png");
于 2012-11-25T04:49:39.317 に答える
2 
>$('#testElement');

[<img id="testElement" style= "position: absolute; border-color: white; top: 340px; left: 615px; " width="34px" height= " 34px"> ]

ご覧のとおり、$ は DOM 要素の配列を返します。document.getElementsBy(Class|Tag)NameDOM 比較が必要な場合は、と同様です。

ID (#testElement) を扱う場合、このような要素は 1 つしかないので、直接アクセスできます$('#testElement')[0](つまり、配列の最初の要素)。その後は、プレーンな JS で行うのと同じように処理することができます。

于 2012-11-25T05:25:11.983 に答える