どうも、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という自動再生のオプションがついているのですが、
今回は画面表示後に少し待ってから動画再生を行いたかったため、
こんな処理を書いてます。
おしまい