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 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...
随机推荐
- jsp页面获取请求参数问题记录
同一个请求可以从请求路径中获取参数,使用param.参数名 window.location.href = "admin/page.html?pageNum="+pageNum+&q ...
- Meterpreter核心命令
实验目的 掌握Meterpreter常见的基本命令的使用 实验原理 1.Meterpreter介绍 meterpreter是metasploit框架中的一个扩展模块,作为溢出成功以后的攻击载荷使用,攻 ...
- NFA转化为DFA
NFA(不确定的有穷自动机)转化为DFA(确定的有穷自动机) NFA转换DFA,通常是将带空串的NFA(即:ε-NFA)先转化为不带空串的NFA(即:NFA),然后再转化为DFA. 提示:ε是空串的意 ...
- 【C# .Net GC】GC的类型与工作方式 和配置
.net主要有两种类型垃圾回收器,也可也说是垃圾回收器的两种工作模式. GC的类型主要有两种: 工作模式是针对进程的,程序启动后就不能修改了.只能在配置文件.json .xml进行设置.但是可用通过G ...
- [MethodImpl(MethodImplOptions.Synchronized)]与lock机制
[MethodImpl(MethodImplOptions.Synchronized)]与lock机制 在进行.NET开发时,经常会遇见如何保持线程同步的情况.在众多的线程同步的可选方式中,加锁无疑是 ...
- Unicode 详细介绍
总结起来为啥需要Unicodey就是为了适应全球化的发展,便于不同语言之间的兼容交互,而ASCII不再能胜任此任务了 UTF-8 与UTF-16的区别 UTF-8的优缺点 程序员那么到底该如何选择呢? ...
- 常见三种存储方式DAS、NAS、SAN的架构及比较
转至:https://blog.csdn.net/shipeng1022/article/details/72862367 随着主机.磁盘.网络等技术的发展,数据存储的方式和架构也在一直不停改变,本文 ...
- pandas补充(其二)与matplotlib补充
今日内容概要 pandas补充知识(2) matplotlib补充知识 今日内容详细 pandas补充 数据汇总 # 数据透视表 pd.pivot_table(data,values-None,ind ...
- （五）目标检测算法之Faster R-CNN
系列博客链接: (一)目标检测概述 https://www.cnblogs.com/kongweisi/p/10894415.html (二)目标检测算法之R-CNN https://www.cnbl ...
- Chaoter07 面向对象 （Object）
目录 Chapter07 面向对象 7.1 类与对象 7.1.1 对象在内存中的存在形式 (重要) 7.1.2 属性 / 成员变量 7.1.3 类与对象的内存分配机制(重要) Object03 Obj ...