Hello jQuery(显示,隐藏和修改)

创建一个HTML 页面, 引入jQuery 类库并且编写如下代码:    

<html>
    <head>
        <title>Hello jQuery</title>
        <script type="text/javascript" src="jquery-1.9.1.js"></script>
    </head>
    <body>
        <div id="divMsg">Hello jQuery!</div> 
            <input id="btnShow" type="button" value="显示" />
            <input id="btnHide" type="button" value="隐藏" /><br />
            <input id="btnChange" type="button" value="修改内容为 Hello jQuery, too!" />
         <script type="text/javascript" >
             $("#btnShow").bind("click", function(event) { $("#divMsg").show(); });
             $("#btnHide").bind("click", function(event) { $("#divMsg").hide(); });
             $("#btnChange").bind("click", function(event) { $("#divMsg").html("Hello jQuery, too!"); }); 
          
        </script>
    </body>
</html>

&#160;

效果如下:

image

页面上有三个按钮, 分别用来控制Hello jQuery 的显示,隐藏和修改其内容.

此示例使用了:

(1) jQuery 的Id 选择器: $("#btnShow")

(2) 事件绑定函数 bind()

(3) 显示和隐藏函数. show()和hide()

(4) 修改元素内部html 的函数html()

你可能感兴趣的:(Hello jQuery(显示,隐藏和修改))