JQuery常用方法（一）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="Scripts/jquery-2.0.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
          
            $("#btnJQueryVersion").click(function () {
                //alert(jQuery.fn.jquery);或者
                alert($().jquery);
            });
            $("#btnText").click(function () {
                //$("#inputText").text("赋值");不起作用
                $("#inputText").val("赋值");
                $("#divText").text("赋值")


            });

            $("#btnHtml").click(function () {
                $("#divHtml").html("<span>abc</span>")
            });

            $("#btnFadeOut").click(function () {
                $("#divCanvas").fadeOut(3000);
            });

            $("#btnFadeIn").click(function () {
                $("#divCanvas").fadeIn();
            });
            $("#btnFadeToggle").click(function () {
                $("#divCanvas").fadeToggle();
            });

            $("#btnHide").click(function () {
                $("#divContent").hide();
            });

            $("#btnShow").click(function () {
                $("#divContent").show();
            });
            $("#btnAddClas").click(function () {
                $("#divContent").addClass("txtClass");
            });

            $("#btnRemoveClass").click(function () {
                $("#divContent").removeClass("txtClass");
            });

            $("#btnSetAttr").click(function () {
                $("#divContent").attr("class", "txtClass");
                
            });
            $("#btnRemoveAttr").click(function () {
                $("#divContent").removeAttr("class");
            });



        });
    </script>
    <style type="text/css">
        ul li{
            float:left;
           list-style-type:none;
        }
        .txtClass
        {
            color:red;
            font-weight:900;
        }
    </style>
</head>
<body>
    <ul>
        <li><button id="btnJQueryVersion">JQuery版本</button></li>
        <li><button id="btnText" type="button">text与val方法</button></li>
        <li><button id="btnHtml" type="button">html方法</button></li>
        <li><button id="btnFadeOut" type="button">淡出</button></li>
        <li><button id="btnFadeIn" type="button">淡入</button></li>
        <li><button id="btnFadeToggle" type="button">淡入淡出</button></li>
        <li><button id="btnShow" type="button">Show</button></li>
        <li><button id="btnHide" type="button">Hide</button></li>
        <li><button id="btnAddClas" type="button">添加Class</button></li>
        <li><button id="btnRemoveClass" type="button">移除Class</button></li>
        <li><button id="btnSetAttr" type="button">设置属性</button></li>
        <li><button id="btnRemoveAttr" type="button">移除属性</button></li>
    </ul>
    <div id="divText">
        
    </div>
    <input  id="inputText" type="text" value=""/>
    <div id="divHtml">

    </div>
    <div style="border:solid 1px red;width:500px;height:500px" id="divCanvas">
       淡入淡出
    </div>
    <div id="divContent">
        内容
    </div>
</body>
</html>
JQuery常用方法（一）

猜你喜欢
