jquey復習(二) – JAVA編程語言程序開發技術文章

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title></title>
<script type=”text/javascript” src=”lib/jquery-1.5.2.js”></script>
<style type=”text/css”>
.red {
    background-color: red;
}


.green {
    background: green;
}
</style>


<script type=”text/javascript”>
    $(function() {
        //pre元素下的所有子孫元素。
        //$(“form input”)選 中[ <input name=”name” />, <input name=”newsletter” /> ]
        /*
         $(“form input”).hover(function() {
         $(this).addClass(“green”);
         }, function() {
         $(this).removeClass(“green”);
         });
         */
        //pre元素下的子元素。
        //[ <input name=”name” /> ]
        /*
        $(“form>input”).hover(function() {
            $(this).addClass(“green”);
        }, function() {
            $(this).removeClass(“green”);
        });
         */


        //pre元素後的next元素。pre 與next平級
        //[ <input name=”name” />, <input name=”newsletter” /> ]
        /*$(“label+input”).hover(function() {
                $(this).addClass(“green”);
            }, function() {
                $(this).removeClass(“green”);
            });
         */


        //[ <input name=”none” /> ]
        //prev元素之後所有sibings元素
        //siblings和next不同,siblings返回的是,所有同輩元素的集合。next,僅是一個。
        /*
        $(“form ~ input”).hover(function() {
            $(this).addClass(“green”);
        }, function() {
            $(this).removeClass(“green”);
        });
         */


        //這就是next方式,選 中的隻有一個。
        $(“form +input”).hover(function() {
            $(this).addClass(“green”);
        }, function() {
            $(this).removeClass(“green”);
        });


    });
</script>
</head>
<body>
    <form>
        <label>Name:</label> <input name=”name” />
        <fieldset>
            <label>Newsletter:</label> <input name=”newsletter” />
        </fieldset>
    </form>
    <input name=”none” />
    <input name=”second” />
</body>
</html>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title></title>
<script type=”text/javascript” src=”lib/jquery-1.5.2.js”></script>
<style type=”text/css”>
.red {
    background-color: red;
}


.green {
    background: green;
}
</style>


<script type=”text/javascript”>
    $(function() {


        //匹配找到的第一個元素
        //[ <tr><td>Header 1</td></tr> ]
        /*
        $(“tr:first”).hover(function() {
            $(this).addClass(“green”);
        }, function() {
            $(this).removeClass(“green”);
        });
         */
        //匹配找到的最後一個元素
        //[ <tr><td>Value 2</td></tr> ]
        /*
        $(“tr:last”).hover(function() {
            $(this).addClass(“green”);
        }, function() {
            $(this).removeClass(“green”);
        });
         */
        //能夠 checked的input才有:checked
        /*
        $(“input:not(:checked)”).hover(function() {
            $(this).addClass(“green”);
        }, function() {
            $(this).removeClass(“green”);
        });
         */
        //偶數元素,從0開始計數
        /*
        $(“tr:even”).hover(function() {
            $(this).addClass(“green”);
        }, function() {
            $(this).removeClass(“green”);
        });*/
        //奇數元素,從0開始計數。
        /*
        $(“tr:odd”).hover(function() {
            $(this).addClas

發佈留言