JQUERY操作css与css()方法、获取设置尺寸；
一、jQuery addClass() 方法
向不同的元素添加 class 属性。在添加类时，您也可以选取多个元素
<style>
.aa
{
color:red;
}; </style>
<body> <h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p> <button>给元素添加class属性</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("aa");//把上面的class属性aa,添加给“h1/h2/p” });
});
</script>
二、jQuery removeClass() 方法
<style>
.aa
{
color:red;
}; </style>
<body> <h1 class="aa">标题 1</h1>
<h2 class="aa">标题 2</h2>
<p class="aa">这是一个段落。</p> <button>给元素移除class属性</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").removeClass("aa");//给“h1/h2/p”移除aa属性 });
});
</script>
三、jQuery toggleClass() 方法：被选元素进行添加/删除类的切换操作
<style>
.aa
{
color:red;
}; </style>
<body> <h1 class="aa">标题 1</h1>
<h2 class="aa">标题 2</h2> <button>切换</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("h1,h2").toggleClass("aa");//给“h1/h2/p”切换aa属性 });
});
</script>
四、jQuery css() 方法
设置多个 CSS 属性
<body> <p style="background-color:#ff0000">这是一个段落。</p> <button>切换</button>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"yellow","font-size":"200%"});
});
});
</script>
尺寸：
jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
JQUERY操作css与css()方法、获取设置尺寸；的更多相关文章
- 利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变
查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...
- 使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片
查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...
- jquery attr方法和prop方法获取input的checked属性问题
jquery attr方法和prop方法获取input的checked属性问题 问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法 ...
- jquery操作html元素之（ 获取并设置 CSS 类）
jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一 ...
- jQuery操作DOM和CSS函数
function des html jquery result html() 获取元素中HTML内容 <div id="box" style="color:red& ...
- 关于jQuery——attr方法和prop方法获取input的checked属性操作
经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 1.通过prop方法获取checked属性,获取 ...
- 汇总常用的jQuery操作Table tr td方法
虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...
- jQuery操作DOM节点的方法总结
1.parent():获得当前匹配元素集合中每个元素的父元素,该方法只会向上一级对 DOM 树进行遍历 $('li.item-a').parent().css('background-color', ...
- PHP中的__get()和__set()方法获取设置私有属性
在类的封装中,获取属性可以自定义getXXX()和setXXX()方法,当一个类中有多个属性时,使用这种方式就会很麻烦.为此PHP5中预定义了__get()和__set()方法,其中__get()方法 ...
随机推荐
- XAF响应式布局皮肤界面展示
XAF为了对手机.平板电脑的支持,增加了新的响应式布局皮肤支持,这个功能已经出来很久了,对于平板电脑.PC的支持已经很不错了,对于手机的界面还不是很完美. 本篇展示一下当前的效果,让有需要的同学.还没 ...
- 深入浅出设计模式——工厂方法模式（Factory Method）
介绍在简单工厂模式中,我们提到,工厂方法模式是简单工厂模式的一个延伸,它属于Gof23中设计模式的创建型设计模式.它解决的仍然是软件设计中与创建对象有关的问题.它可以更好的处理客户的需求变化. 引入我 ...
- PyCharm配置GitHub
原文出处: https://github.com/wssnail/ws96apt/blob/master/weixin/a.py#L21-21打开file,选择settings,找到Version C ...
- HTTP中的摘要认证机制
引子: 指定和服务器端交互的HTTP方法,URL地址,即其他请求信息: Method:表示http请求方法,一般使用"GET","POST". url:表示请求 ...
- 使用File类递归列出E盘下全部文件
import java.io.File;public class FileListTest { public void tree(File file){ if(file.listFiles()!=nu ...
- android应用保活机制
android应用保活的基本原理: 都是通过双进程互拉以及设置进程的重要性,除非你root后 把自己的进程设置成系统进程. 互拉的方式有很多种 1.可以通过监听系统广播来把自己拉起来 2.可以多个ap ...
- Python内置的字符串处理函数整理
Python内置的字符串处理函数整理 作者: 字体:[增加 减小] 类型:转载 时间:2013-01-29我要评论 Python内置的字符串处理函数整理,收集常用的Python 内置的各种字符串处理 ...
- CSS3中媒体查询，更换样式表
<link rel="stylesheet" href="css/1.css" media="(min- width:600px)"& ...
- 微信网页授权,微信登录,oauth2
微信官方文档: http://mp.weixin.qq.com/wiki 微信公众平台OAuth2.0授权详细步骤如下: 1. 用户关注微信公众账号.2. 微信公众账号提供用户请求授权页面URL.3. ...
- iOS开发UI篇—简单介绍静态单元格的使用
iOS开发UI篇—简单介绍静态单元格的使用 一.实现效果与说明 说明:观察上面的展示效果,可以发现整个界面是由一个tableview来展示的,上面的数据都是固定的,且几乎不会改变. 要完成上面的效果, ...