Jqueryと素Javascriptでtipsツールを作ってみる。 #JavaScript

まず、Jqueryですぱぱぱーんと書いてみる。

jquery.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="HTML5">
<meta name="description" content="HTML5の解説">
<title>HTML5リファレンス</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
<!--
    li{
        width: 150px;
        height:50px;
        margin:20px;
        background-color: #F9F9F9;
        display: block;
    }
-->
</style>
<script type="text/javascript">
//<!--

    //documentのロード
    $(function(){
        var obj = $("li");
        obj.each(function (index){
            var newObj = $("<div>");
            $(this).mouseover(function(e){
                var x = e.clientX;
                var y = e.clientY;
                var message = $("input").eq(index).val();
                newObj.css({
                    "width" : "250px",
                    "height" : "50px",
                    "top" : y + 10,
                    "left" : x + 10,
                    "position" : "absolute",
                    "background-color" : "#FFCCCC"
                });
                newObj.html(message);
                $(this).append(newObj);
            });

            $(this).mouseout(function(e){
                newObj.remove();
            }); 
        });
    });

//-->
</script>
</head>
<body>
    <ul>
        <li alt="あいうえお"><input type="hidden" value="あいうえお" />サンプル00</li>
        <li alt="かきくけこ"><input type="hidden" value="かきくけこ" />サンプル01</li>
        <li alt="さしすせそ"><input type="hidden" value="さしすせそ" />サンプル02</li>
        <li alt="たちつてと"><input type="hidden" value="たちつてと" />サンプル03</li>
        <li alt="なにぬねの"><input type="hidden" value="なにぬねの" />サンプル04</li>
        <li alt="はひふへほ"><input type="hidden" value="はひふへほ" />サンプル05</li>
        <li alt="まみむめも"><input type="hidden" value="まみむめも" />サンプル06</li>
    </ul>
</body>
</html>

楽！すごい楽。
偉大だなあ。

次に、間違った素のjavascriptをかいてみた。

plain.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="HTML5">
<meta name="description" content="HTML5の解説">
<title>HTML5リファレンス</title>
<style type="text/css">
<!--
    li{
        width: 150px;
        height:50px;
        margin:20px;
        background-color: #F9F9F9;
        display: block;
    }
-->
</style>
<script type="text/javascript">
//<!--

    window.onload = function (e){
        try{
            var obj = document.getElementsByTagName("li");

            for(var i = 0; i < obj.length; i++){

                var textNode = document.createTextNode(document.getElementsByTagName("input").item(i).value);
                var newObj = document.createElement("div");
                obj.item(i).onmouseover = function (e){
                    var x = e.clientX;
                    var y = e.clientY;

                    newObj.style.position = "absolute";
                    newObj.style.width = "250px";
                    newObj.style.height = "50px";
                    newObj.style.top = y + 10 + "px";
                    newObj.style.left = x + 10 + "px";
                    newObj.style.backgroundColor = "#FFCCCC";
                    newObj.appendChild(textNode);
                    this.property = newObj;
                    this.appendChild(this.property);
                };
                obj.item(i).onmouseout = function (e){
                    this.removeChild(this.property);
                }
            }
        }catch(e){
            alert(e.stack);
        }
    };

//-->
</script>
</head>
<body>
    <ul>
        <li alt="あいうえお"><input type="hidden" value="あいうえお" />サンプル00</li>
        <li alt="かきくけこ"><input type="hidden" value="かきくけこ" />サンプル01</li>
        <li alt="さしすせそ"><input type="hidden" value="さしすせそ" />サンプル02</li>
        <li alt="たちつてと"><input type="hidden" value="たちつてと" />サンプル03</li>
        <li alt="なにぬねの"><input type="hidden" value="なにぬねの" />サンプル04</li>
        <li alt="はひふへほ"><input type="hidden" value="はひふへほ" />サンプル05</li>
        <li alt="まみむめも"><input type="hidden" value="まみむめも" />サンプル06</li>
    </ul>
</body>
</html>

まあ、もちろんあれですよ。
イベント発火してるときには、for文のiは既に限界突破してるってやつ。
次に、みんな大好きクロージャーで書いたもの。

closure.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="HTML5">
<meta name="description" content="HTML5の解説">
<title>HTML5リファレンス</title>
<style type="text/css">
<!--
    li{
        width: 150px;
        height:50px;
        margin:20px;
        background-color: #F9F9F9;
        display: block;
    }
-->
</style>
<script type="text/javascript">
//<!--

    window.onload = function (e){
        try{
            var obj = document.getElementsByTagName("li");

            for(var i = 0; i < obj.length; i++){

                obj.item(i).onmouseover = (function (index){
                    var newObj = document.createElement("div"); 
                    var textNode = document.createTextNode(document.getElementsByTagName("input").item(index).value);
                    return function (e){
                        var x = e.clientX;
                        var y = e.clientY;

                        newObj.style.position = "absolute";
                        newObj.style.width = "250px";
                        newObj.style.height = "50px";
                        newObj.style.top = y + 10 + "px";
                        newObj.style.left = x + 10 + "px";
                        newObj.style.backgroundColor = "#FFCCCC";
                        newObj.appendChild(textNode);
                        this.property = newObj;
                        this.appendChild(this.property);
                    }
                }(i))
                obj.item(i).onmouseout = (function (index){
                    return function (e){
                        this.removeChild(this.property);
                    }
                }(i));
            }
        }catch(e){
            alert(e.stack);
        }
    };

//-->
</script>
</head>
<body>
    <ul>
        <li alt="あいうえお"><input type="hidden" value="あいうえお" />サンプル00</li>
        <li alt="かきくけこ"><input type="hidden" value="かきくけこ" />サンプル01</li>
        <li alt="さしすせそ"><input type="hidden" value="さしすせそ" />サンプル02</li>
        <li alt="たちつてと"><input type="hidden" value="たちつてと" />サンプル03</li>
        <li alt="なにぬねの"><input type="hidden" value="なにぬねの" />サンプル04</li>
        <li alt="はひふへほ"><input type="hidden" value="はひふへほ" />サンプル05</li>
        <li alt="まみむめも"><input type="hidden" value="まみむめも" />サンプル06</li>
    </ul>
</body>
</html>

うん。ご存知、親スコープのiをローカルスコープのindexで閉じ込めちゃってます。
これがやりたかった。
以上。