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 Cloud Jaeger 进行分布式跟踪
在本文中,学习如何实现 Jaeger(基于 OpenTracing 和 Spring Boot 应用程序)以及如何使用 Jaeger UI 可视化跟踪. 介绍 在本文中,我们将探讨如何使用 Jaege ...
- Python_time库_特定字符串格式的时间、struct_time、时间戳的处理
time库 时间戳:格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数. # time.strptime(),功能:将特定字符串格 ...
- DoS,DDoS,DRoS攻击
- 简单excel饼状图怎么做，bi工具怎么做饼状图
饼状图是为了在一个整体体现个体所占的比例,比如一块蛋糕每人各分多大份.了解了饼状图的含义,就来学习饼状图怎么做吧. 首先,我们准备excel表格饼状图的初始数据 然后选择excel表格上方的插入,选择 ...
- 华为RH2288H服务器引导ServiceCD安装Windows Server操作系统
安装准备 ServiceCD光盘. Windows操作系统安装光盘. 物理光驱. 使用虚拟控制台远程安装操作系统时,需要准备以下软件: ServiceCD光盘或ServiceCD ISO文件. Win ...
- shell-if表达式（-f,-d,-s,-r,-w,-x,-eq,-ne,-ge,-gt,-le,-lt ）
文件表达式 if [ -f file ] 如果文件存在if [ -d - ] 如果目录存在if [ -s file ] 如果文件存在且非空if [ -r file ] 如果文件存在且可读if [ -w ...
- net core or Linux
某用户执行net core sdk 版本不生效 sudo chmod +x /home/username/netcore3.1sdk/dotnet //某个用户执行新版本net core sdk
- pandas模块补充
数据分析模块pandas和matplotlib补充 面向百度式编程 面向百度式工作 遇到没有见过的知识点或者是相关知识点一定不要慌,结合百度和已知的知识点去学习 pandas模块补充 基于numpy构 ...
- Java中ArrayList和LinkedList的异同
一:ArrayList和LinkedList的大致区别如下: 1.ArrayList是实现了基于动态数组的数据结构,ArrayList实现了长度可变的数组,在内存中分配连续的空间.遍历元素和随机访问元 ...
- C# form捕捉方向键事件
在C# Form中监听键盘输入事件本身是很简单的,但是如果是想监听键盘上的上下左右这四个方向键,实现起来有所不同.下面我就以一个Demo简单陈述一下实现过程. 一.为了让界面能够监听键盘事件,必须实现 ...