タブの切り替えメニュー

現在、「jQuery 標準デザイン講座」という本でjQueryを学んでいます。chapter 3のレッスン８でタブの切り替えメニューを学んでいるのですが、一行分からない部分があります。

$('#contents div[id != "tab1"]').hide();のここの[id != "tab1"]の部分の意味が分かりません。特に、！の意味が分かりません。

勉強中ですので、優しくご伝授していただければと思います。

よろしくお願い致します。

HTML
1<!doctype html>
2<html>
3
4<head>
5  <meta charset="UTF-8">
6  <title>Lesson08</title>
7  <link rel="stylesheet" href="css/reset.css">
8  <link rel="stylesheet" href="css/style.css">
9  <script src="js/jquery-2.1.4.min.js"></script>
10  <script src="js/script.js"></script>
11</head>
12
13<body>
14  <header>
15    <h1>Tab</h1>
16  </header>
17  <main>
18    <ul>
19      <li><a href="#tab1" class="current">01</a></li>
20      <li><a href="#tab2">02</a></li>
21      <li><a href="#tab3">03</a></li>
22      <li><a href="#tab4">04</a></li>
23    </ul>
24    <div id="contents">
25      <div id="tab1">
26        <p><strong>01</strong></p>
27        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
28          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
29          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
30          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
31          est laborum.</p>
32      </div>
33      <div id="tab2">
34        <p><strong>02</strong></p>
35        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
36          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
37          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
38          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
39          est laborum.</p>
40      </div>
41      <div id="tab3">
42        <p><strong>03</strong></p>
43        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
44          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
45          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
46          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
47          est laborum.</p>
48      </div>
49      <div id="tab4">
50        <p><strong>04</strong></p>
51        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
52          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
53          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
54          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
55          est laborum.</p>
56      </div>
57    </div>
58  </main>
59</body>
60</html>

CSS
1@charset "UTF-8";
2
3body{
4	font-family: Arial, sans-serif;
5	-webkit-font-smoothing: antialiased;
6	background:#E46E6E;
7}
8
9h1{
10	padding:45px 0;
11	color:#C15757;
12	font-size:5em;
13	font-weight:bold;
14	text-align:center;
15}
16
17main{
18	width:1000px;
19	margin:0 auto;
20	display:block;
21}
22
23ul li{
24	float:left;
25	margin-right:1px;
26	list-style-type:none;
27}
28
29ul li a{
30	font-size:2em;
31	font-weight:bold;
32	color:#FFF;
33	text-decoration:none;
34	display:block;
35	width:100px;
36	padding:15px 20px;
37	background:#C15757;
38}
39
40ul li a:hover{
41	background:#D26161;
42	color:#FFF;
43}
44
45ul li a.current{
46	background:#F5F4F2;
47	color:#C15757;
48}
49
50#contents{
51	clear:both;
52	margin-bottom:150px;
53}
54
55#contents div{
56	padding:30px 20px;
57	background:#F5F4F2;
58}
59
60#contents p{
61	margin-top:20px;
62	line-height:2em;
63	color:#C15757;
64}
65
66#contents strong{
67	font-size:4em;
68	font-weight:bold;
69	color:#D6AF62;
70}
71

jQuery
1$(function(){
2  // #tab1以外を非表示にする
3  $('#contents div[id != "tab1"]').hide();
4
5  // タブをクリック
6  $("a").click(function(){
7    // 一度全てのコンテンツを非表示にする
8    $("#contents div").hide();
9
10    // 選択されたコンテンツを再表示する
11    $($(this).attr("href")).show();
12
13    // 現在のcurrentクラスを削除
14    $(".current").removeClass("current");
15
16    // 選択されたタブ（自分自身）にcurrentクラスを追加
17    $(this).addClass("current");
18
19    return false;
20  });
21});
22

m.ts10806

2020/09/05 05:37

|　じゃなくて　!　ですか？

dreamland

2020/09/05 05:39

div[id != "tab1"] ここの部分の、ビックリマーク！です。

m.ts10806

2020/09/05 05:42

$("[ 属性 |= '値' ]")　なら分かるんですが http://www.jquerystudy.info/reference/selectors/containsPrefix.html 本当に「!」になっていますか？書籍をよく確認してみてください。

dreamland

2020/09/05 05:46

そうなんですね。もう一度本を見てみたのですが、「!」でした。

dreamland

2020/09/05 05:49

先ほど送っていただいたサイトに、$("[ 属性 != '値' ]")書いてありました。 http://www.jquerystudy.info/reference/selectors/notEqual.html ご協力いただき、ありがとうございました。

m.ts10806

2020/09/05 05:52

回答しています。あまり使わない（他にも代替案があったりするから）ので私も勉強になりました。

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

回答2件

ベストアンサー

おそらく下記です。
jQuery日本語リファレンス:[attribute!=value]

プログラミング言語では != は「not equal」を指します。

セレクタについては下記のようなまとめがあるので、読んでおくと良いです。
jQuery日本語リファレンス:Selectors/API/jQuery
Selectors | jQuery API Documentation

投稿2020/09/05 05:51

m.ts10806

総合スコア80850

dreamland

2020/09/05 05:54

!=はnot equl を示すのですね。教えていただきありがとうございます。サイトのURLも記載していただき、ありがとうございます。参考にさせていただきます。

m.ts10806

2020/09/05 05:59

JavaScriptされているなら使ったことはあるかと思います。サイトのURLというか最後のはjQuery公式ドキュメントなので、チェックしておくべきもの（できればブックマークしておくべき）ですね。

dreamland

2020/09/05 06:13

ご丁寧に教えていただきありがとうございます。ブックマークしておきます。

phpman

2020/09/06 12:04

m.ts10806さん https://teratail.com/questions/287559 こちらの回答から逃げているようですが、素直にできませんでしたと謝った方が良いのではないでしょうか？

m.ts10806

2020/09/06 23:10

phpmanさん本件とどう関係しますか？

m.ts10806

2020/09/06 23:14

それに例の件は私や他の方の意見を受け入れられなかった時点で決裂しています。わざわざそこに労力を割こうと思わないだけで「逃げる」とは面白い考え方ですね。きちんと時間や技術を割いてほしいのだったら正規のルートで発注してください。それに根本的な考え方が違うのでなぜ謝る必要があるか分かりません。そして、そもそも「できている」ので「できませんでした」と謝る必要がどこにあるんでしょうか。ひとまず丸投げで何も問題が発生してない質問にアドバイスもらえるだけありがたいと思ってください。ではでは。 dreamlandさんちょっとしつこい方がいるので反応してしまいましたが、本件とは無関係な問答、失礼しました。

phpman

2020/09/12 12:32

> そして、そもそも「できている」ので「できませんでした」と謝る必要がどこにあるんでしょうか。エンジニアじゃない方のようなので、対象を明確にした発言ができないようです。 https://teratail.com/questions/287559 「できている」とは、以下のSQL文が、MySQL5.6とMySQL8.0の双方で動くという意味で間違いありませんか？ SELECT `password` FROM `mysql`.`user`

m.ts10806

2020/09/12 20:27

本件と無関係なのでやめてもらえますか？私が書いてないものを書いたものとして捏造するのはやめてください。迷惑です。

phpman

2020/09/24 11:40

> 本件と無関係なのでやめてもらえますか？あなたが逃げ回るので仕方ないです。 > 私が書いてないものを書いたものとして捏造するのはやめてください。迷惑です。具体的にどこが捏造なのでしょうか？はぐらかすのは止めて下さい。男らしい返信をして下さい。 MySQL5.6で動く、次のSQL文ですが、MySQL8.0でも動くのでしょうか？YES or NOでお答え下さい。 SELECT `password` FROM `mysql`.`user`

m.ts10806

2020/09/24 11:43 編集

本件との関係は何でしょうか。逃げ回るも何も、既にあなたは多くの人に見限られているだけであなたが勝手に私怨で追い回しているだけです。理解できない人、理解しようとしない人にいつまでも構う人はいません。それだけのこと。運営に対応依頼しています。

phpman

2020/09/24 11:50

https://teratail.com/questions/287559 追記をご覧ください。自分が間違っていたことを認めて謝れば済む話です。 > MySQL5.6で動く、次のSQL文ですが、MySQL8.0でも動くのでしょうか？YES or NOでお答え下さい。 > SELECT `password` FROM `mysql`.`user` YESかNOで答えられるはずです。答えはNOです。つまりあなたの誤りです。

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