$("セレクタ")[0].click()の[0]の意味

$("セレクタ")[0].click()の[0]の意味を教えてください

2018/01/25 05:06 編集

具体的な利用例をご提示ください。また、調べてみたこと、やってみたことがあれば、それも。何もなく単に「教えてください」というのは非推奨の質問として位置づけられています。　https://teratail.com/help/avoid-asking

行動規範の内容に同意します

回答3件

ベストアンサー

jQueryのセレクタは複数のオブジェクトを拾おうとします。
[0]はその0番目の要素をDOMとしてつかんでいます
考え方としてはこういうことです

仕様：
DIVをクリックすると赤くなる仕組みで、「A」をクリックすると「B~E」もクリックされる

javascript
1$(function(){
2  $('div').on('click',function(){
3    $(this).css("background-Color","red");
4  });
5  $('#aaa').on('click',function(){
6    $('#bbb').trigger('click');
7    $('#ccc').eq(0).trigger('click');
8    $('#ddd')[0].click();
9    $('#eee').get(0).click();
10  });
11});

HTML
1<div id="aaa">A</div>
2<div id="bbb">B</div>
3<div id="ccc">C</div>
4<div id="ddd">D</div>
5<div id="eee">E</div>

投稿2018/01/25 05:12

編集2018/01/25 05:13

yambejp

総合スコア117615

defeatist

2018/01/26 01:25

ありがとうございます

行動規範の内容に同意します

jQuery で得られているのは、jQuery で扱える操作用のオブジェクトであって実際のノードではありません。 $('.foo').on('click', ...) や $('.foo').css(...) 等が呼べるので、ノードに直結したオブジェクトの様に見えますが、実際は複数のノードを束ねた操作用のオブジェクトです。ノードに生えている addEventListener 等、raw オブジェクトのメソッドを呼び出すには、[0] の様に添え字アクセスを使います。

jQuery にも click イベントを発火させる $('.foo').click() がありますが、実際は .foo のセレクタでマッチする全てのノードの click イベントが発火します。

また jQuery の click と raw オブジェクトの click は動作が異なります。例えば

html
1<!DOCTYPE html>
2<html>
3<head>
4<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
5<script type="text/javascript">
6$(function() {
7  $('#foo').click();
8});
9</script>
10</head>
11<body>
12	<a id="foo" href="http://www.google.com">google</a>
13</body>
14</html>