• 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>
  • 相关阅读:
    虽然非常简单但是效果不错
    Google地图开发总结
    笔记(一):ES6所改良的javascript“缺陷”
    ex6的选择器
    android中的style部分属性值介绍
    Android ImageSwitcher
    c# Winform退出程序的方法
    Android ImageView获取网络图片
    循环向数据库(sql server)插入10W条数据
    Android Handler+Thread实现更新Ui
  • 原文地址:https://www.cnblogs.com/jxxblogs/p/9609804.html
Copyright © 2020-2023  润新知