jQuery--属性和CSS

来源：互联网发布：免费瓷砖铺贴软件编辑：程序博客网时间：2024/06/05 14:50

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>

1 0