属性和css操作

对属性的操作:

  attr(): 设置或者获取元素的属性

    方式1:获取

        attr("属性名称")

    方式2:设置一个属性

        attr("属性名称","属性值");

    方式3:设置多个属性    json

        attr({

          "属性1" : "值1",

          "属性2" : "值2"

        })

  removeAttr("属性名称"):移除指定属性

  添加class属性时

    方式1:   attr("class","值");

    方式2:   addClass("指定的样式值")

  removeClass("指定的样式值")

对css操作:操作元素的style属性

  css():获取或设置css样式

    方式1:获取

        css("属性名称")

    方式2:设置一个属性

        css("属性名称","属性值");

    方式3:设置多个属性    json

        css({

          "属性1" : "值1",

          "属性2" : "值2"

        });

  获取元素的尺寸:

    width()

    height()

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
        //1.1给username添加title属性
        var $username = $("[name = ‘username‘]")
        $username.attr("title","姓名");
        //1.2获取username的title属性
        alert($username.attr("title"));
        //1.3给username添加value和class属性
        $username.attr({
            "value":"yisen",
            "class":"textClass"
        });
        alert($username.val());
        //1.4删除username的class属性
        $username.removeAttr("class");
        //2.1给username添加一个名为textClass的样式
        $username.addClass("textClass");
        //2.2删除username的名为textClass的样式
        $username.removeClass("textClass");
        
        //4.1 给div添加边框样式
        var $div = $("div");
        $div.css("border","1px solid red");
        //4.2 获取div的边框样式
        alert($div.css("border"));
        //4.3 给div添加多种样式
        $div.css({
            "width":"100px",
            "height":"100px",
            "background-color":"yellow"
        });
        //5 获取div的位置
        alert($div.offset().left);
        //6 获取div的高和宽
        alert($div.width());
        alert($div.height());
        });    
    </script>
    <style type="text/css">
        .textClass {
            background-color: #ff0;
        }
    </style>
</head>
<body>
    <h3>表单</h3>
    <form action="">
        <table border="1">
            <tr id="tr1">
                <td><label>姓名</label></td>
                <td><input type="text" name="username"/></td>
            </tr>
            <tr>
                <td><span>密码</span></td>
                <td><input type="password" name="password" /></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="gender" value="男" /><input type="radio" name="gender" value="女" /></td>
            </tr>
            
            <tr>
                <td></td>
                <td>
                    <button type="button">普通按钮</button>
                    <input type="submit" value="提交按钮" />
                    <input type="reset" value="重置按钮" />
                </td>
            </tr>
        </table>
    </form>
    
    
    <h3>公告信息</h3>
    <div>
        未满18慎进
    </div>
    <span id="sp">外span<a href=‘#‘>内超链</a></span>
</body>
</html>

 

操作元素的style属性

属性和css操作

上一篇:webpack和webpack-dev-server安装配置


下一篇:What is Redux JS(译)