jQuery的一点基础小知识(通过jQuery获取页面元素)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>通过jQuery获取页面元素</title>
        <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //            function fn() {
            //                var obj = document.getElementById("sundayAM");
            //                var result = obj.innerHTML;
            //            document.getElementById("sundayAM").html();//✖
            //                alert("周日上午的行程是:" + result);
            //            }
            $(function() {
                    $("#ok").click(
                        function() {
                            //$();//工厂函数
                            //jQuery();//工厂函数
                            jQuery("table").css("border", "solid thin black");
                            $(".redStyle").css("background-color", "lightcoral");
                            var result = $("#sundayAM").html();
                            //                    var result = $("#sundayAM").innerHTML; //✖
                            alert("周日上午的行程是:" + result);
                            //                    $("#saturdayAM").css("color", "green").next().css("color", "red");
                            $("#sundayAM").css("color", "blue").prev().css("color", "yellow");
                        }
                    );
                }

                //jQuery的常用方法:
                //工厂方法:
                //$();
                //jQuery();
                //常用的API方法:
                //html();//获取元素内容(包含HTML标记)
                //text();//获取元素内容(仅包含文本)
                //css();//给元素添加CSS样式属性
                //addClass();//给元素添加CSS的样式类
                //next();//获取元素的下一个元素
                //prev();//获取元素的上一个元素
                //click();//绑定按钮的点击事件
            );

            //给按钮添加单击事件的语法:
            //            $(
            //                function () {
            //                    $("选择器").click(
            //                        function() {
            //                            //点击事件的处理代码
            //                        }
            //                    );
            //                }
            //            );
        </script>
    </head>

    <body>
        <table border="0" cellspacing="3" cellpadding="2">
            <caption>课程表</caption>
            <tr>
                <th>&nbsp;</th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
                <th class="redStyle">周六</th>
                <th class="redStyle">周日</th>
            </tr>
            <tr>
                <td>上午</td>
                <td>班会</td>
                <td>jQuery</td>
                <td>jQuery</td>
                <td>Java</td>
                <td>Java</td>
                <td class="redStyle" id="saturdayAM">休息</td>
                <td class="redStyle" id="sundayAM">
                    <h3>休息</h3></td>
            </tr>
            <tr>
                <td>下午</td>
                <td>Java</td>
                <td>指导学习</td>
                <td>指导学习</td>
                <td>指导学习</td>
                <td>指导学习</td>
                <td class="redStyle">休息</td>
                <td class="redStyle">休息</td>
            </tr>
        </table>
        <input id="ok" type="button" value="获取周日上午的行程" />
    </body>

</html>

posted on 2018-01-04 11:54  空对月  阅读(141)  评论(0编辑  收藏  举报