ゆとり日記

心にゆとりを持って生きたいプログラマーの雑記です。気が向いたら書きます。

jQueryでdocument.getElementByIdしたいです

どうも、jQuery初心者です。

今更仰々しく書くような事でもないんですが、知らなかったことなので一応・・。

jQueryでdocument.getElementByIdするにはどうするか?

JavaScriptであれば、下記のように書けば指定したIDのエレメントが取得出来ます。

var element = document.getElementById('hoge');

jQueryで同じようにエレメントを取得しようとして書いたのが下記のコード。

$('#hoge');

しかし、想定した動きをしてくれません。それは何故か?
上記のjQueryのコードは生のエレメントではなく、jQueryのオブジェクトを取得してしまっているためです。
jQueryでエレメントを取得するためには、以下のように記述する必要があります。

// 書き方は二通り
$('#hoge').get(0);

$("#hoge")[0];

これまでの事を踏まえて、簡単なサンプルコードを書いてみます。

画面表示後に2秒待ってから、動画を再生する処理

index.html

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>動画再生画面</title>
</head>
<body>

    <video id="demo" controls width="800" height="480">
        <source src="sample.mp4">
        <source src="sample.ogv">
        <source src="sample.webm">
        <p>ご利用のブラウザでは再生することが出来ません</p>
    </video>

    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

index.js

$(document).ready(function(){

    // 2秒後に動画再生開始
    setTimeout(function(){
        // JavaScriptの場合
        //document.getElementById('demo').play();

        // jQueryの場合
        $('#demo').get(0).play();
    }, 2000);

});

説明は面倒なので省きますが・・、動画再生を行う部分でjQueryによるエレメント取得を行なっています。

※videoタグにはautoplayという自動再生のオプションがついているのですが、
今回は画面表示後に少し待ってから動画再生を行いたかったため、 こんな処理を書いてます。

おしまい