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>
jQuery--属性和CSS的更多相关文章
- jquery 属性与css操作
属性1.属性 1.1 attr(name|properties|key,value|key,fn) 1) 获取属性值 $("img").attr(&quo ...
- jQuery属性/CSS使用例子
jQuery属性/CSS 1..attr() 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性. 例1:获取元素的属性的值 <p title="段落 ...
- jQuery修改class属性和CSS样式
jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...
- jQuery修改操作css属性实现方法
在jquery中我们要动态的修改css属性我们只要使用css()方法就可以实现了,下面我来给各位同学详细介绍介绍. css()方法在使用上具有多样性,我们先来了解css()方法基本知识. css() ...
- jQuery 属性操作和CSS 操作
如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...
- jquery中的属性和css
jQuery中的属性用于获取或设置元素的属性 1.attr(),获取或设置所有相匹配的元素的属性值:removeAttr("attr"),移除所有相匹配的元素的属性 //html ...
- JQuery DOM操作 、属性和CSS样式操作、其他函数
DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...
- 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
- jQuery的简单用法（jQuery的简介，选择器，属性和css,文档处理）
一.jQuery简介 1.1. JS库 JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器. 1.2. 当前流行的 JavaSc ...
- 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...
随机推荐
- Spring声明式事务的两种配置方式（注解/xml）
application配置tx:annotation-driven 配置声明式事务tx:TransactionManager 声明式事务需要数据源所以需要配置DataSource 使用:在类或者方法上 ...
- 创建sqlsession工具类
//1.sqlsession的获取: //类:GetSqlSession, 返回sqlsession对象,无参 public class GetSqlSession { public static S ...
- Vue 源码解读（8）—— 编译器 之 解析（上）
特殊说明 由于文章篇幅限制,所以将 Vue 源码解读(8)-- 编译器 之 解析 拆成了上下两篇,所以在阅读本篇文章时请同时打开 Vue 源码解读(8)-- 编译器 之 解析(下)一起阅读. 前言 V ...
- Renix中如何实现流调速——网络测试仪实操
在Renix操作中有时我们需要进行流调速,那么如何实现呢?接下来为您详细介绍. 第一步:预约测试资源 首先打开Renix软件,连接机箱, 预约端口 第二步:流调速 例如:端口下有3条流,分别设置为10 ...
- RENIX流量发送模式——网络测试仪实操
信而泰的RENIX平台支持5种传输模式, 如下图所示. 模式一: continuous Continuous:连续发送流 持续发送方式是默认的发送模式, 它不会自动的停止, 会一直发送, 直到用户手 ...
- 2021年国内BI厂商推荐_大数据分析工具
随着互联网大数据时代的不断发展,BI让企业的工作效率变得更高效.BI的功能也随着需求的增长不断地丰富,例如,数据可视化大屏.可视化表格.商业化数据分析.数据地图等.国外的厂商在很多场景下无法满足国内的 ...
- 三大数据库 sequence 之华山论剑 (中篇)
sequence 用法四 AUTO INCREMENT 通过 DEFAULT 还是需要手动创建 sequence.有没有更简单的用法呢? 当然,就是通过 AUTO INCREMENT 方式,自动创建 ...
- 【C# 线程】C++与C#数据类型对照表
详细:http://lzltool.com/doc/csharptocaddadd
- C# 题目
题目 http://blog.zhaojie.me/2011/03/my-interview-questions-for-dotnet-programmers.html 1.考察对常量和自读字段 初始 ...
- Invoke and BeginInvoke
原博客地址:http://www.cnblogs.com/worldreason/archive/2008/06/09/1216127.html 写的真的很好! 在Invoke或者BeginInvok ...