jQuery 的一个例子

发布时间:2019-10-08编辑:脚本学堂
通过本例可以了解:jQuery的事件句柄、选择器、基本语法结构

 通过本例可以了解:jquery的事件句柄、选择器、基本语法结构。

<!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">
<head runat="server">
    <title>test</title>
    <script src="/js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        .red
        {
            background-color: Red;
        }
        .green
        {
            background-color: Green;
        }
        .blue
        {
         background-color: Blue;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(
        function() {
            $("div").addClass("blue");
            //$("#olID>li").addClass("green");

            $("#olID>li").hover(
            function() {
                $(this).addClass("red")
            },
            function() {
                $(this).removeClass("red")
            });

            $("#olID>li:last").hover(
            function() {
                $(this).addClass("green");

            },
            function() {
                $(this).removeClass("green");

            })
        })
       
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ol id="olID">
            <li>Terry.Feng.C</li>
            <li>北京精神</li>
            <li>fengruitao@gmail.com</li>
        </ol>
    </div>
    </form>
</body>
</html>