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

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

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

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

解決済

jQueryにおけるプロパティ「'val'」はval()メソッドなのでしょうか。

taka_oct092018
taka_oct092018

総合スコア116

jQuery

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

1回答

0グッド

0クリップ

223閲覧

投稿2022/11/15 12:24

編集2022/11/15 12:33

前提

「'val' : mouse${ name }」から要素<input value="mouseover">などが
生成されるということは理解出来ています。
「$('<input>', {'val' : mouse${ name }});」という記述は、
val()メソッドが実行されているのでしょうか。

「改訂新版jQuery本格入門_サンプルコード_P266より」 一部編集しています。
よろしくお願い致します。

該当のソースコード

jQuery

1$(function() { 2 3 $(function() { 4 $('input[type="radio"]') 5 .first() 6 .prop({ 'checked' : 'true' }) 7 .triggerHandler('change'); 8 }); 9 10 // 一覧に表示させるプロパティ 11 const props = [ 12 'target', 13 'currentTarget', 14 'relatedTarget', 15 'fromElement', 16 'toElement' 17 ]; 18 19 // 要素の内容を文字列に変換 20 function toHtml(element) { 21 if (!element) { return `---`; } 22 23 if (element === window) { 24 return 'window'; 25 } else if (element === document) { 26 return 'document'; 27 } 28 29 let html; 30 31 if (element && element.tagName) { 32 html = '<${ element.tagName.toLowerCase() }'; 33 } 34 35 if (element.attributes) { 36 const attrs = element.attributes; 37 for (const index in attrs) { 38 const attr = attrs[index]; 39 if (!attr || attr.name === 'style' || !attr.value) { continue; } 40 html += ` ${ attr.name }="${ attr.value }"`; 41 } 42 } 43 44 if (html) { html += '>'; } 45 return html; 46 } 47 48 // イベントハンドラ(一覧表に要素を表示) 49 const handler = function(event) { 50 $.each(props, function(index, property) { 51 $(document.getElementById(property)).text(toHtml(event[property])); 52 }); 53 }; 54 55 // ラジオボタンの設定 56 const form = $('<form>', { 57 'submit' : false, 58 'css' : { 'margin' : '10px 0' } 59 }).appendTo(document.body); 60 61 $.each([ 'over', 'out', 'move', 'down', 'up' ], function(index, name) { 62 $('<input>', { 63 'name' : 'event', 64 'type' : 'radio', 65 'val' : `mouse${ name }`, // 疑問の箇所 @@@@@@@@@@@@@@@@@@@@@@@@@@@@ 66 'change' : function() { // 実行するイベント処理の切り替え 67 $('input[type="radio"]').each(function() { 68 $(document.body)[this.checked ? 'on' : 'off'](this.value, handler); 69 }); 70 $('td').text(`---`); 71 } 72 }).appendTo(form); 73 form.append(`mouse${ name }`); 74 }); 75 76 // マウスカーソルを移動させる領域 77 const parent = $('<div>', { 78 'height' : 200, 79 'id' : 'parent', 80 'text' : 'parent', 81 'width' : 200, 82 'css' : { 83 'border' : '1px solid black', 84 'float' : 'left', 85 'padding' : 5, 86 'position' : 'relative' 87 } 88 }).appendTo(document.body); 89 90 const child = $('<div>', { 91 id : 'child', 92 text : 'child', 93 css : { 94 'border' : '1px dashed black', 95 'height' : 100, 96 'left' : 45, 97 'padding' : 5, 98 'position' : 'relative', 99 'top' : 30, 100 'width' : 100 101 } 102 }).appendTo(parent); 103 104 // プロパティの一覧表 105 const table = $('<table>', { 106 css : { 107 'borderCollapse' : 'collapse', 108 'float' : 'left', 109 'margin' : '10px 0', 110 'marginLeft' : '1em' 111 } 112 }).appendTo(document.body); 113 114 $.each(props, function(index, property) { 115 const tr = $('<tr>'); 116 $('<th>', { 117 'text' : property, 118 'css' : { 119 'padding' : 3, 120 'textAlign' : 'left' 121 } 122 }).appendTo(tr); 123 124 $('<td>', { 125 'id' : property, 126 'css' : { 127 'padding' : 3, 128 'whiteSpace' : 'nowrap' 129 } 130 }).appendTo(tr); 131 132 table.append(tr); 133 }); 134 135});

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" href="css/style.css"> 7</head> 8<body> 9 10<script src="js/jquery-3.6.0.min.js"></script> 11<script src="js/app.js"></script> 12</body> 13</html>

試したこと

(検索して調べたサイト)
https://uxmilk.jp/45120
jQueryのeach()メソッドの基本的な使い方

https://goworkship.com/magazine/javascript-beginner-mistakes/#2
JavaScript初心者が失敗しがち/間違えがちなこと8選

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

1

ベストアンサー

そのとおりです。$()にわたすオブジェクトにvalのキーを持たせると、それはvalメソッドの呼び出しとして処理されます。

As of jQuery 1.8, any jQuery instance method (a method of jQuery.fn) can be used as a property of the object passed to the second parameter:(jQuery公式より)

投稿2022/11/15 12:33

maisumakun

総合スコア141370

taka_oct092018😄を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

taka_oct092018

2022/11/15 19:16

maisumakun様、いつもアドバイスありがとうございます。 丁寧な説明をして下さったおかげで、理解出来ました。 jQuery/JavaScriptはとても柔軟で奥が深い言語ですね。 私は英語が苦手なので公式サイトを読むのは苦労します。

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

jQuery

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