jQuery--属性和CSS_jquery 根据属性和css-优快云博客

本文链接：https://blog.youkuaiyun.com/daliyuan350649623/article/details/53764195

本文介绍如何使用jQuery进行元素属性、CSS类、HTML代码、文本及值等操作，包括设置属性、切换样式、设置div的CSS样式等多种实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery–属性和CSS

属性：

attr(name) 获得指定属性名的值
attr(key ,val ) 给一个指定属性名设置值
attr(prop ) 给多个属性名设置值。参数：prop json数据
{k : v , k : v , …..}
removeAttr(name) 移除指定属性

CSS类

<xxx class="a b c d my ">
addClass(“my”) 追加一个类
removeClass(“my”) 将指定类移除
toggleClass(“my”) 如果有my将移除，如果没有将添加。

HTML代码/文本/值

val() 获得value的值
val(text) 设置value的值

html() 获得html代码，含有标签
html(…) 设置html代码，如果有标签，将进行解析。

text() 获得文本值，将标签进行过滤
text(…) 设置文本值，如果有标签，将被转义 –> < & lt; & & amp; > & lt; & nbsp;

CSS

css(name) 获得指定名称的css值
css(name ,value) 设置一对值
css(prop) 设置一组值

位置

offset() 获得坐标，返回JSON对象，{“top”:200, “left” : 100}
这里写图片描述
offset(…) 设置坐标。例如：$(this).offset({“top”:0 , “left” : 0})
scrollTop() 垂直滚动条滚过的距离
scrollLeft() 水平滚动条滚过的距离

尺寸

这里写图片描述
height([…]) 获得或设置高度
width([…])获得或设置宽度

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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.8.3.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function(){
            //设置属性
            //$("[name='username']").attr("disabled","disabled");
            //$("[name='username']").removeAttr("disabled");

            //切换样式
            $("#btn").click(function(){
                $("[name='username']").toggleClass("textClass");
            });
            //alert($("#dv").text());
            //alert($("#dv").html());
            //把标签当做普通文本
            //$("#dv").text("<a href='http://www.baidu.com'>点击</a>");
            //把标签当做标签 
            //$("#dv").html("<a href='http://www.baidu.com'>点击</a>");

            //设置div的css样式
            $("#dv").css("border","1px solid #000");
            //prop：可以使json格式，同时设置多个样式
            $("#dv").css({
                "width":"200px",
                "height":"200px",
                "font-size":"50px",
                "color":"red"
            });




        });
    </script>
    <style type="text/css">
        .textClass {
            background-color: #ff0000;
        }
    </style>
</head>
<body>
    <h3>表单</h3>
    <form action="">
        <table border="1">
            <tr id="tr1">
                <td><label>姓名</label></td>
                <td><input type="text" name="username" class="textClass" value="jack" /></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>
                    <input type="checkbox" name="hobby" value="1"/>抽烟
                    <input type="checkbox" name="hobby" value="2"/>喝酒
                    <input type="checkbox" name="hobby" value="3"/>烫头
                </td>
            </tr>
            <tr>
                <td>我的照片</td>
                <td><input type="file" name="image" /></td>
            </tr>
            <tr>
                <td>学历</td>
                <td>
                    <select name="edu">
                        <option value="1">小班</option>
                        <option value="2">中班</option>
                        <option value="3">大班</option>
                        <option value="4">学前班</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button id="btn" type="button">普通按钮</button>
                    <input type="submit" value="提交按钮" />
                    <input type="reset" value="重置按钮" />
                    <input type="image" value="图片按钮" src="../image/0050.jpg" style="height: 30px;width: 50px" />
                </td>
            </tr>
        </table>
    </form>


    <h3>公告信息</h3>
    <div id="dv">
        未满18慎进
    </div>

</body>
</html>