javascriptをjqueryに変換します。

Question

私はこのスクリプトを使用して、画面の幅に応じて小さくて大きな画像を読み込みます。

<script> 
var jt_width = screen.width; 
//var jt_height = screen.height; 
if (jt_width < 361) {document.write('<div class="small-image"><img src="http://www.example.com/small-image.jpg" alt="small image alt"></div>') } else { document.write('<div class="large-image"><img src="http://www.example.com/large-image.jpg" alt="large image alt"></div>')}; 
</script> 

欠点は、誰かが横に縦向きから行くときの携帯電話で、それは即座に変化しないことであり、私はこれを行うためにjqueryのを使用したいです。

window.outerWidthや.width（）を使用するなど、さまざまな可能性についてオンラインで読んでいますが、ブラウザの互換性に関しては、.width（）が最良の解決策であると理解しました。

私は上記のスクリプトをjqueryバージョンに変換したいと思いますが、私はjavascriptについてほとんど知りませんので、これを行う方法はわかりません。これは私が持っているものです

function load(){ 
    w.value = $(window).width(); 
    h.value = $(window).height(); 
} 

jqueryを使って同じ出力を得るにはどうすればいいですか？

Answer 1

新しいスクリプトは、スクリプトの応答性には役立ちません。

<script> 
var jt_width = screen.width; 
function doAThing() { 
    if (jt_width < 361) { 
    document.write('<div class="small-image"><img src="http://www.example.com/small-image.jpg" alt="small image alt"></div>') } else { document.write('<div class="large-image"><img src="http://www.example.com/large-image.jpg" alt="large image alt"></div>') 
    }; 
} 

doAThing(); 
window.addEventListener('resize', doAThing); 
</script> 

EDIT：あなたはリスナーを追加する必要があり、私はオリエンテーションのために正常に動作します「サイズを変更」かなり確信しているが、あなたはそれをテストし、それがうまく機能していない場合は、オンorientationchangeリスナーを追加することができます機能だけでなく：

window.addEventListener('orientationchange', doAThing);

Answer 2

これはjqueryのを使用して実装したものです。変化に

$(window).resize(function () { 
    var width = $(window).width(); 
    var height=$(window).height(); 
    /**on resize you can change your content or code based on your condition*/ 
}); 
/*This event will be triggered when the window size will change */