jquery基本的用法

来源:互联网 发布:交换机端口绑定ip地址 编辑:程序博客网 时间:2024/05/16 19:46

1.布局:

<body>
    <p id="text1">设置文本测试</p>
    <p id="text2">设置html内容</p>
    <p>user name :<input type="text" id="text3" /></p>
    <button id="btn1" >设置文本</button>
   <button id="btn2">设置html</button>
    <button id="btn3">修改text值</button>

</body>


2.js函数

<script type="text/javascript" >
        $(document).ready(function () {
            $("#btn1").click(function () {
                $("#text1").text("jquery的text赋值");
            });

            $("#btn2").click(function () {
                $("#text2").html("html的赋值");
            })
            $("#btn3").click(function () {
                $("#text3").val("检查用户名");
            })
        });
    </script>


3.全部html

<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Script/jquery-1.7.1.js"></script>
    <script type="text/javascript" >
        $(document).ready(function () {
            $("#btn1").click(function () {
                $("#text1").text("jquery的text赋值");
            });

            $("#btn2").click(function () {
                $("#text2").html("html的赋值");
            })
            $("#btn3").click(function () {
                $("#text3").val("检查用户名");
            })
        });
    </script>
</head>
<body>
    <p id="text1">设置文本测试</p>
    <p id="text2">设置html内容</p>
    <p>user name :<input type="text" id="text3" /></p>
    <button id="btn1" >设置文本</button>
   <button id="btn2">设置html</button>
    <button id="btn3">修改text值</button>

</body>
</html>


0 0