JQuery初体验

时间:2022-08-07 15:43:33

虽然做b/s也有一年半了,但是还没怎么认真的去看JQuery,趁自己生病的这几天,恶补一下JQuery方面的知识,保持学习的态度,内容很简单,聊以自慰一下>_<。废话不多说,直接上代码了。

通过HTML标签实现控件隐藏:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>按钮点击消失文本</title>
    <script src="jquery.js"></script>
    <script type="text/javascript" language="javascript">
        /*获取文本对象*/
        $(document).ready(function () {
            /*从文本对象中获取到button标签的点击事件*/
            $("button").click(function () {
                /*获取到p标签的点击事件*/
                $("p").hide();
            });
        });
    </script>
</head>
<body>
    <h2>This is a heading</h2>
    <p>This is a paragraph</p>
    <p>This is a another paragraph</p>
    <button type="button">Click me</button>
    <input type="button" value="Click me" />
</body>
</html>

通过控件ID实现对象隐藏:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>通过ID隐藏控件</title>
    <script src="jquery.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("button").click(function () {
                $("#test").hide();
            });
        });
    </script>
</head>
<body>
    <h2>This is a heading</h2>
    <p>This is a paragraph</p>
    <p id="test">This is another paragraph</p>
    <button type="button">隐藏控件id为test的p标签</button>
</body>
</html>