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

前提

「'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選

行動規範の内容に同意します

回答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

総合スコア145201

taka_oct092018

2022/11/15 19:16

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

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.47%

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

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

質問する

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

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