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

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

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

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

Q&A

解決済

2回答

2731閲覧

jQueryの変数宣言の意味

yamagata_user

総合スコア40

jQuery

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

0グッド

0クリップ

投稿2017/12/03 11:53

var x = $(".test div a")

のように書いたとき、「テストというクラス名のついた要素の中にあるdivタグの中にあるaタグの要素をjqueryオブジェクト化してから変数Xに代入する」

という意味と理解で大丈夫でしょうか。
結局メソッドに操作させるためにはセレクタやcssのクラス名をそのまま渡してもメソッドはそれらを解釈できず、jQueryのメソッド(関数?)はオブジェクトしか操作できないため、aタグなどのhtmlの要素(セレクタ?)やクラス名を$("")や$('')で囲ってオブジェクト化する必要があるということでしょうか。

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

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

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

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

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

karamarimo

2017/12/03 13:02

「メソッドに操作させるためにはセレクタやcssのクラス名をそのまま渡してもメソッドはそれらを解釈できず、jQueryのメソッド(関数?)はオブジェクトしか操作できないため」というのがよく分かりません。具体例をあげるなどして説明してもらえますでしょうか。
guest

回答2

0

ベストアンサー

「テストというクラス名のついた要素の中にあるdivタグの中にあるaタグの要素をjqueryオブジェクト化してから変数Xに代入する」

概ねそのとおりですが, もうすこし詳しく書くと

「(『class属性の中にtestが含まれる任意の要素』の配下にある『div要素』の配下にある『a要素』)に対応するHTMLElement(HTMLAnchorElement)オブジェクト(HTMLDOM仕様で定義されている)をjQueryオブジェクトでラップしたオブジェクト」
を変数xに代入する

となります. 言い換えると,

セレクタ文字列.class div aの条件に合致するHTMLElementオブジェクトをdocumentオブジェクトから取得し, jQueryオブジェクトでラップしたオブジェクト を変数xに代入する

となります.

結局メソッドに操作させるためにはセレクタやcssのクラス名をそのまま渡してもメソッドはそれらを解釈できず、jQueryのメソッド(関数?)はオブジェクトしか操作できないため、aタグなどのhtmlの要素(セレクタ?)やクラス名を$("")や$('')で囲ってオブジェクト化する必要があるということでしょうか。

おっしゃりたいことはなんとなく判りますが, 念の為に解説します.
CSSのクラス名を含め, セレクタ文字列は単なる文字列ですからそのままでは文字列としての操作しか出来ません. そこでjQueryを介することでセレクタ文字列をもとに操作対象のHTMLElementオブジェクト(jQueryでラップ済み)を選んでいるのです. 得られたjQueryオブジェクトにはjQueryが提供する便利機能が満載なので, 扱うのが面倒なHTMLElementオブジェクトを直接操作せずに済むのです.

NOTE:
jQueryはその利便性を高めるために多くの機能を一箇所に詰め込みすぎています. これはある程度HTMLDOMを理解している方にはスクリプトコードが劇的に短くなることからこの上なく便利なのですが, プログラム初心者がオブジェクト指向やHTMLDOMのイロハを学ぶ前にjQueryを学ぶのは, その特殊性から非常に混乱を招きやすく危険です. ですから, 並行してHTMLDOM(HTML文書をJavaScriptから操作する仕組み)について理解を深めるように努めて下さい.

投稿2017/12/03 13:19

defghi1977

総合スコア4756

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

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

yamagata_user

2017/12/04 13:12

ご回答ありがとうございます。 jqueryを自在に扱えるようになるためにはHTMLDOMの学習が必要ということでしょうか。 HTMLDOMという言葉は先日初めて知りました。 このようなサイトで軽く目を通すだけでいいのでしょうか? http://memopad.bitter.jp/w3c/htmldom/dom_nodes.html ちなみにこちらのサイト(https://developer.mozilla.org/ja/docs/Web/JavaScript/JavaScript_technologies_overview)は何を書いているのやら全く理解できませんでした。 「HTMLElement」とはHTMLDOMで使われる用語ですよね?これはaタグやdivタグのようなCSSで”セレクタ”と呼ばれているもののことでしょうか。 そしてHTMLElementもHTMLDOMでは「HTMLElementオブジェクト」と呼ばれるオブジェクトの一種であり、しかしjqueryのメソッドはHTMLElementオブジェクトは理解できずjqueryオブジェクトしか理解できないため$("")や$('')で囲む必要があるということだと思いました。
defghi1977

2017/12/04 20:39

一旦あなたのjQueryや「セレクタ」の知識を全て捨てて下さい. あなたの間違った「語彙」は周りの混乱を招きます. jQueryでできることは全てHTMLDOMだけで出来ます. ですからまずはHTMLDOMだけで物事を考えられるようになりましょう. https://developer.mozilla.org/ja/docs/Using_the_W3C_DOM_Level_1_Core https://developer.mozilla.org/ja/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces 等が役に立つと思います. (全てがWEBでの標準的な言い回しで説明されているので, 丁寧に読み込んで下さい) ともあれ, HTMLDOMの存在に気がつけたのは大きな前進でして, 急がば廻れとも言いますが, ここさえ乗り切れればjQueryなぞちょちょいのちょいです.
yamagata_user

2017/12/06 13:21

ありがとうございます。 いただいたURLのwebサイトを読んでみます。
guest

0

「テストというクラス名のついた要素の中にあるdivタグの中にあるaタグの要素をjqueryオブジェクト化してから変数Xに代入する」

そのとおりです。

セレクタやcssのクラス名をそのまま渡してもメソッドはそれらを解釈できず、jQueryのメソッド(関数?)はオブジェクトしか操作できない

違和感があります。メソッドはオブジェクトに含まれているので、メソッドがオブジェクトから独立して存在しているように書かれると、なんか変です。
たとえるなら「バイキンマンをそのまま渡してもアンパンチはそれらを解釈できず、アンパンチはアンパンマンしか操作できない」ぐらいの違和感です。

投稿2017/12/05 00:21

Lhankor_Mhy

総合スコア35865

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

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

yamagata_user

2017/12/06 13:23

メソッドもオブジェクトの一部ということでしょうか? それは知りませんでした。 正直「jqueryオブジェクト」の正確な意味もよくわかってないままオブジェクトという言葉を使っていたのでそのあたりも再度勉強したいと思います。 このたびはありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問