質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

2974閲覧

JQuery $(document).ready(function()の書き方について

Alice0225

総合スコア206

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/08/27 02:52

編集2018/08/27 03:30

Jqueryの書き方に関してイマイチ理解できない為、こちらで質問をさせていただきます。

元々のソース

JQuery

1$(window).bind("load resize", function(){ 2~~~ 3}).trigger("resize");

ウィンドウが読み込まれた際
画面がリサイズされた際
に該当の関数を実行するつくりになっているのですが、
この「load」部分を

JQuery

1$(document).ready(function(){

へと変える場合、この構文に「リサイズされた際」を加えるにはどのような書き方となりますでしょうか。
「JQuery ready resize」等で検索を行いましたが、元ソースと同様のloadを使用したものしかヒットしてこない状況で詰まってしまっています。

書き方そのものでなくとも「こういう単語で調べればヒットします」等の情報だけでも助かります。

皆様のお知恵をお借りできますと幸いです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Alice0225

2018/08/27 02:56

ご指摘いただきありがとうございます。タイトルを修正させていただきました。
guest

回答3

0

$(fnc)は load のタイミングで動かないため、下記のように入れてしまったりもともと別にしたりするとか。

JavaScript

1$( function() { 2 $( window ).on( "load resize", function() { 3 //~~~ 4 } ).trigger( "resize" ); 5} );

JavaScript

1$( function() { 2 $( window ).trigger( "resize" ); 3 //~~~ 4} ); 5$( window ).on( "load resize", function() { 6 //~~~ 7} );

【$(function(){}) と $(window).on('load',function(){}) の違い】
https://qiita.com/mimoe/items/74cb3a01a30162759fdd

【jQueryの読込み「ready」と「load」と「function」の順番について | web-wizardry】
http://web-wizardry.net/jquery/jqueryの読込みreadyとloadの順番について/

投稿2018/08/27 04:39

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

無名関数式がエレガントと感じている方が多そうですが、そんなことはないと思います。

JavaScript

1function handleEvent () {} 2jQuery(handleEvent); 3jQuery(window).on('resize', handleEvent).trigger(handleEvent);

懸念は、 trigger() で一度、実行しておきながら、ready() で再実行していること。
再実行する事に意味があるなら、いいのですが。

Re: Alice0225 さん

投稿2018/08/27 04:42

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

下記ではどうでしょうか。

js

1$(document).ready(function(){ 2 wresize(); 3 $(window).on("resize", function(){ 4 wresize(); 5 }); 6}); 7 8var wresize = function(){ 9 ~~~ 10}; 11 12

個人的にはloadのところは短いものにしたいですけど。

js

1$(function(){

投稿2018/08/27 02:56

編集2018/08/27 03:56
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Alice0225

2018/08/27 03:29 編集

ご回答いただきありがとうございます。 無知な質問で申し訳ないのですが、上記記載方法で ①DOMの読み込みが終わったら ②画面がリサイズされたら それぞれの場合に関数が実行される、という認識でよろしいのでしょうか。 12:05 追加 質問に不足がありまして申し訳ございません。 元の $(window).bind("load resize", function(){ が }).trigger("resize"); でしめられている場合は記述が変わってきますでしょうか。 具体的には $(document).ready(function(){ $(window).on("resize", function(){   ~処理~ }); }).trigger("resize"); の記述で問題ないでしょうか。
bwz61366

2018/08/27 03:03

>個人的にはloadのところは短いものにしたいですけど。 $(document).ready(fnc)の形は最新版jQueryでは廃止されてたと思うし、普通に$(fnc)の形でなければいけないと思う まぁ、使ってるjQueryのバージョンがわからんからなんともいえんけど
m.ts10806

2018/08/27 03:58

Alice0225さん 1つ読み違えてました。load時にもresizeの処理実行しないといけませんね。 修正してみました。 bwz61366さん 補足ありがとうございます。 readyで書かなくなって久しいので恥ずかしながら廃止されたことを把握しておりませんでした。 質問者さんの環境ではおそらくreadyで書いているんでしょうし、ひとまずその前提での回答ということで。
Alice0225

2018/08/27 04:18

ご回答ありがとうございます。 元々の $(window).bind("load resize", function(){ 内の処理は load時 resize時 で同様の処理なので、 $(document).ready(function(){   $(window).on("resize", function(){     ~処理~   }); }).trigger("resize"); でいいかなと思ったんですが認識違いでしょうか…?
m.ts10806

2018/08/27 04:20

それで想定通りの動いたのであればそれでも良いかと。 ただreadyの中にはresize以外にもさまざまな処理が入ってくる可能性があるので明示的にするためリサイズの処理だけ外出ししました。
Alice0225

2018/08/27 04:41

何度も何度も申し訳ございません 動作確認ができる環境が許可がいるような環境のため、最後にもう一度だけ認識があっているか確認させていただきたいのですが、 私が最後に提示させていただきました、 $(document).ready(function(){   $(window).on("resize", function(){     ~共通処理~   }); }).trigger("resize"); にて ①ready時に~共通処理~が行われる ②resize時に~共通処理~が行われる 上記認識に間違いはありませんでしょうか。 本来なら自身で確認すべきところ、お伺いしてばかりで申し訳ございません。
m.ts10806

2018/08/27 04:46

jsならローカルPCでミニマムコードを試してみたら良いのでは・・・?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問