jQuery--属性和CSS

1.属性和CSS介绍

属性(重点掌握)

attr(name) 获取指定属性名的值
attr(key,val) 给一个指定属性名设置值
attr(prop) 给多个属性名设置值。参数：prop json数据
removeAttr(name) 移除指定的属性

addClass("aa") 追加一个Class <a class='bb aa'>
removeClass("") 将指定类移除
toggleClass("my") 如果有my将移除，如果没有将添加

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

html() 获得html代码，含有标签
html(...) 设置的是html代码，如果有标签将被解析

text() 只获得文本，不含标签
text(...) 设置文本值，如果文本含有标签，将被转义

CSS(了解即可)

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

offset(...) 设置坐标，返回json对象{"top":200,"left":100}
position()
scrollTop() 垂直滚动条 滚过的距离
scrollLeft() 水平滚动条

height([...]) 获得或者设置高度（注意单词为height！！！！）
width([...]) 获得或者设置宽度

2.代码实例

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>Insert title here</title>
 6     <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 7     <script type="text/javascript">
 8         jQuery(document).ready(function(){
 9             //将name=‘username’的input设置为不可用
10             $("input[name='username']").attr("disabled","disabled");
11             //将name=‘username’的input设置为可用    这个必须得移除
12             $("input[name='username']").removeAttr("disabled");
13             //其它的就不一一试了
14         });
15     </script>
16     <style type="text/css">
17         .textClass {
18             background-color: #ff0000;
19         }
20     </style>
21 </head>
22 <body>
23     <h3>表单</h3>
24     <form action="">
25         <table border="1">
26             <tr id="tr1">
27                 <td><label>姓名</label></td>
28                 <td><input type="text" name="username" class="textClass" value="jack" /></td>
29             </tr>
30             <tr>
31                 <td><span>密码</span></td>
32                 <td><input type="password" name="password" /></td>
33             </tr>
34             <tr>
35                 <td>性别</td>
36                 <td>
37                     <input type="radio" name="gender" value="男" />男
38                     <input type="radio" name="gender" value="女" />女
39                 </td>
40             </tr>
41             <tr>
42                 <td>爱好</td>
43                 <td>
44                     <input type="checkbox" name="hobby" value="1"/>抽烟
45                     <input type="checkbox" name="hobby" value="2"/>喝酒
46                     <input type="checkbox" name="hobby" value="3"/>烫头
47                 </td>
48             </tr>
49             <tr>
50                 <td>我的照片</td>
51                 <td><input type="file" name="image" /></td>
52             </tr>
53             <tr>
54                 <td>学历</td>
55                 <td>
56                     <select name="edu">
57                         <option value="1">小班</option>
58                         <option value="2">中班</option>
59                         <option value="3">大班</option>
60                         <option value="4">学前班</option>
61                     </select>
62                 </td>
63             </tr>
64             <tr>
65                 <td></td>
66                 <td>
67                     <button>普通按钮</button>
68                     <input type="submit" value="提交按钮" />
69                     <input type="reset" value="重置按钮" />
70                     <input type="image" value="图片按钮" src="../image/0050.jpg" style="height: 30px;width: 50px" />
71                 </td>
72             </tr>
73         </table>
74     </form>
75
76
77     <h3>公告信息</h3>
78     <div>
79         未满18慎进
80     </div>
81
82 </body>
83 </html>