jQuery小练习3

最新推荐文章于 2024-11-11 20:14:01 发布

原创最新推荐文章于 2024-11-11 20:14:01 发布 · 441 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

JavaScript 专栏收录该内容

62 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的基本网页示例，其中包括了样式设置、元素点击事件处理及简单的DOM操作等内容。通过该示例可以了解到如何使用JavaScript增强HTML页面的交互性和动态效果。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    <style type="text/css">
            div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }
            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
     </style>

     <!--引入jquery的js库-->
    </head>
    <body>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <table border=1>
        <tr>
            <td>第1行</td><td>第1行</td>
        </tr>
        <tr>
            <td>第2行</td><td>第2行</td>
        </tr>
        <tr>
            <td>第3行</td><td>第3行</td>
        </tr>
        <tr>
            <td>第4行</td><td>第4行</td>
        </tr>
        <tr>
            <td>第5行</td><td>第5行</td>
        </tr>

        <tr>
            <td>第6行</td><td>第6行</td>
        </tr>
    </table>
    <br><br><br>
    <table border=1>
        <tr>
            <td>第1行</td><td>第1行</td>
        </tr>
        <tr>
            <td>第2行</td><td>第2行</td>
        </tr>
        <tr>
            <td>第3行</td><td>第3行</td>
        </tr>
        <tr>
            <td>第4行</td><td>第4行</td>
        </tr>
        <tr>
            <td>第5行</td><td>第5行</td>
        </tr>
        <tr>
            <td>第6行</td><td>第6行</td>
        </tr>
    </table>        
    </body>
    <script language="JavaScript">

        /*
         * <p>段落1</p>
            <p>段落2</p>
            <p>段落3</p>
         */

        $("p").each(function(index,domEle){
            $(domEle).click(function(){
                alert($(domEle).text());
            });
        });

        $("table:eq(0) tr:even").css("background","pink");

        $("table:eq(1) tr:odd").css("background","blue");


    </script>

</html>

这里写图片描述