zoukankan      html  css  js  c++  java
  • 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; 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>
  • 相关阅读:
    hibernate框架学习之增删改查helloworld
    hibernate学习笔记第七天:二级缓存和session管理
    hibernate框架学习第六天:QBC、分页查询、投影、数据加载策略、二级缓存
    hibernate框架学习第五天:数据查询、投影等
    hibernate框架学习第四天:关联关系、外键、级联等
    hibernate框架学习第三天:对象状态、一级缓存、快照等
    词链—动态规划
    智力大冲浪-贪心
    高精度开方数
    高精度最小公倍数
  • 原文地址:https://www.cnblogs.com/jxxblogs/p/9609804.html
Copyright © 2011-2022 走看看