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 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...
随机推荐
- 入职钉钉接近半年，谈谈自身的新人landing体会
一.适应新环境 到了一个新环境里,身边的一切都比较陌生,与同事和领导都不太熟,一开始说话说不到一起都比较正常.在和同事吃饭的时候,多听多参与聊天,主动一些,逐渐熟悉起来就好了. 另外,我的工作台bas ...
- Virtual Box 中的虚拟系统无法调整分辨率（无法自适应窗口大小）
关于 Virtual Box 中安装好虚拟机后无法调整分辨率,即无法随 vbox 窗口大小自动调整内部虚拟机的屏幕. 网上找了百度了一遍,很多方法并不凑效,好在最后解决了,现将过程记录,以飨来者. 1 ...
- iOS 通知扩展插件
iOS 通知扩展插件 目录 iOS 通知扩展插件 Notification Service Extension 新建一个target 代码实现 注意事项 UINotificationConentExt ...
- Django模板的继承与模板的导入
目录 一:模版的继承 1.什么是模板继承? 2.使用继承流程原理 3.模板继承语法 二:模板的继承使用 1.案例需求 2.总结模板继承 三:模版的导入 1.模板导入 2.模板导入格式 3.模板导入使用 ...
- 想用WPS 2019模板设计报表？Smartbi V9没问题
导读:Smartbi V9 报表设计器可以支持WPS 2019个人版了,而且报表功能也有明显增强. 企业报表软件(Smartbi Spreadsheet)是思迈特软件于2014年针对企业客户.系统 ...
- SPYEYE手机远程监控和官方SPYEYE间谍软件最新下载方式
听起来远程控制手机好像很高级的样子,但是实现起来其实非常简单.实现原理如下: 运行程序,让程序不停地读取数据 用手机给手机发送邮件 判断是否读取到指定主题的手机,如果有,则获取手机内容 根据邮件内容, ...
- WPF中RichTextBox中添加文字的两种方法
RichTextBox控件不同于TextBox控件,后者可以直接通过其Text属性绑定或者在后台动态添加文字. (一)使用数据绑定 <RichTextBox FontSize="12& ...
- 【Oracle】PLSQL如何更新、提交数据库中数据
转至:https://blog.csdn.net/Bee_AI/article/details/89279612 Oracle更新单表数据时,一般使用SELECT--FOR UPDATE语句,这条语句 ...
- 利用logrotate工具对catalina.out进行日志分割实战
logrotate是linux自带的日志分割工具,如果没有可以用yum安装 yum -y install logrotate 要配置日志分割定时任务,需要在/etc/logrotate.d/下创建一个 ...
- 优达学城 UdaCity 纳米学位
优达学城 UdaCity 纳米学位 Num Course desc 1 AI Programming with Python 使用Python编程基础 2 Android Basics 安卓基础 3 ...