jQuery 小ネタ集

下記 @lulucowcow さんの記事を参考に実装してみました。
https://qiita.com/lulucowcow/items/6c2167d35de0910b819b

ついでに、自分用メモもかねてこちらのサイトを参考にsec7,8を実装しています。
http://www.jquerystudy.info/tutorial/basic/effect.html

下のコードを全コピーして、適当なテキストファイルに張り付けて保存→拡張子を.htmlに変えてChromeかIEで開く→F12でコンソールを開く→ボタンたたくと結果がコンソールに表示される。

```HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>jQuery テスト</title>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

</head>
<body>

    <h2> F12でコンソールの出力を確認してください</h2>

    <p>-- section1 --------------------- </p>
    <input id="btn1" type="button" value="not() を実行" />

    <div class="label1">label1</div>
    <div id="label2">label2</div>
    <div class="label3">label3</div>
 
    <!-- - - - - - - - - - - - - - - - - - - -  -->

    <script>
        document.getElementById("btn1").onclick = function (){
            var r = $('div').not('.label1, #label2'); // classで要素の指定するときはドット,idのときは＃を先頭に入れる

            r.each(function(value, element) {
                console.log(element)
            })
        }
    </script>
    <!-- ********************************************* --><br />

    <p>-- section2 --------------------- </p>
    <input id="btn21" type="button" value="find() を実行その1" />
    <input id="btn22" type="button" value="find() を実行その2" />

    <a id="section2">  
        <li class="label4">label4</li>
        <li class="label5">label5</li>
        <li class="label6">label6</li>
    </a>
    <br />

        <li class="label7">label7</li>
        <li class="label5">label8</li>
        <li class="label9">label9</li>
        
    <!-- - - - - - - - - - - - - - - - - - - -  -->

    <script>
        document.getElementById("btn21").onclick = function (){
            //var r = $('.section2').find('.label5');
            var r = $(document).find('.label5');

            r.each(function(value, element) {
                console.log(element)
            })
        }

        document.getElementById("btn22").onclick = function (){
            var r = $('#section2').find('.label5'); // 

            r.each(function(value, element) {
                console.log(element)
            })
        }
    </script>
    <!-- ********************************************* -->
    <br />

    <p>-- section3 --------------------- </p>
    <input id="btn31" type="button" value="next() を実行" />
    <input id="btn32" type="button" value="nextAll() を実行" />

    <a>
        <li class="label12">label12</li>        
        <li class="label11">label11</li>  <!-- ←label11をSelectしNextというメソッドを呼ぶが、連番のlabel12が返ってくるわけではない -->        
        <li class="label10">label10</li>        
        <br />
        <li class="label13">label13</li>        
        <li class="label14">label14</li>        
        <li class="label15">label15</li>        
    </a>
    <!-- - - - - - - - - - - - - - - - - - - -  -->

    <script>
        document.getElementById("btn31").onclick = function (){
            var r = $('.label11').next(); 

            r.each(function(value, element) {
                console.log(element)
            })
        }

        document.getElementById("btn32").onclick = function (){
            var r = $('.label11').nextAll(); 

            r.each(function(value, element) {
                console.log(element)
            })
        }
    </script>
    <!-- ********************************************* --><br />

    <p>-- section4 --------------------- </p>
    <input id="btn41" type="button" value="prev() を実行" />
    <input id="btn42" type="button" value="prevAll() を実行" />

    <a> 
        <li class="sec4">section41</li>        
        <li class="sec4">section42</li>        
        <li class="sec4target">target</li>        
    </a>
    <!-- - - - - - - - - - - - - - - - - - - -  -->

    <script>
        document.getElementById("btn41").onclick = function (){
            var r = $('.sec4target').prev();

            r.each(function(value, element) {
                console.log(element)
            })
        }

        document.getElementById("btn42").onclick = function (){
            var r = $('.sec4target').prevAll();

            r.each(function(value, element) {
                console.log(element)
            })
        }
    </script>
    <!-- ********************************************* --><br />


    <p>-- section5 --------------------- </p>
    <input id="btn5" type="button" value="siblings() を実行" />

    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li class="sibTarget">list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>
    
    <!-- - - - - - - - - - - - - - - - - - - -  -->

    <script>
        document.getElementById("btn5").onclick = function (){
            var r = $('.sibTarget').siblings();

            r.each(function(value, element) {
                console.log(element)
            })
        }

    </script>
    <!-- ********************************************* --><br />


    <p>-- section6 --------------------- </p>
    <input id="btn6" type="button" value="data() を実行" />

    <p id="sec6" data-name="太郎" data-age="30" data-tel="080-1234-5678">My name is JIRO.</p>
    
    <!-- - - - - - - - - - - - - - - - - - - -  -->

    <script>
        document.getElementById("btn6").onclick = function (){
            var r = $('#sec6').data();
            console.log(r);
        }
        // 参考: https://www.sejuku.net/blog/38263
    
    </script>
    <!-- ********************************************* --><br />

    <p>-- section7 - hover,this ---------- </p>
    <a class="sec7" id="1">click me.</a><br /><br /> <!-- ほんとはdivタグなんだけどsec1の結果がわかりづらくなるのでaタグ-->
    <a class="sec7" id="2">click me.</a><br /><br />
    <a class="sec7" id="3">click me.</a><br /><br />
    <a class="sec7" id="4">click me.</a><br /><br />
    <a class="sec7" id="5">click me.</a><br /><br />

    <!-- - - - - - - - - - - - - - - - - - - -  -->

    <script type="text/javascript">
        // マウスオーバーした時の処理
    	$(function () {
            $(".sec7").hover(overFunc, outFunc);
            
            function overFunc(){
                $(this).css("background-color", "#FC6");
            }
            
            function outFunc(){
                $(this).css("background-color", "#09C");
            }
            
        });
		
        // クリックされたときにthisでidを取得する方法    
        $(function () {
            $(".sec7").click(function(){
                console.log(this.id);
            });
        });
    </script>

    <!-- - - - - - - - - - - - - - - - - - - -  -->

    <style type="text/css">
        .sec7{
            width:100px;
            margin:10px;
            padding:5px;
            color:#fff;
            background-color:#09C;
        }
    </style>
    <!-- 参考: http://www.jquerystudy.info/tutorial/basic/this1.html -->
    <!-- ********************************************* -->
    
    <p>-- section8 - innerHTML ---------- </p>
    <input id="btn8" type="button" value="innerHTML を変更" /><br /><br />
    <a class="sec8">1</a><br /><br /><!-- ほんとはdivタグなんだけどsec1の結果がわかりづらくなるのでaタグ-->
    <a class="sec8">2</a><br /><br />
    <a class="sec8">3</a><br /><br />

    <!-- - - - - - - - - - - - - - - - - - - -  -->

    <script type="text/javascript">

        document.getElementById("btn8").onclick= function () {
            var myDOM = $(".sec8")[0];
            myDOM.innerHTML = "XXXXX";
        };

    </script>

    <!-- - - - - - - - - - - - - - - - - - - -  -->

    <style type="text/css">
        .sec8{
            width:100px;
            margin:10px;
            padding:5px;
            color:#fff;
            background-color:#09C;
        }
    </style>
    <!-- 参考: http://www.jquerystudy.info/tutorial/basic/dom.html -->
    <!-- ********************************************* -->
    

</body>
</html>
```