一、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()方法、获取设置尺寸；的更多相关文章

  1. 利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变

    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...

  2. 使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...

  3. jquery attr方法和prop方法获取input的checked属性问题

    jquery attr方法和prop方法获取input的checked属性问题   问题:经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法 ...

  4. jquery操作html元素之（ 获取并设置 CSS 类）

    jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一 ...

  5. jQuery操作DOM和CSS函数

    function des html jquery result html() 获取元素中HTML内容 <div id="box" style="color:red& ...

  6. 关于jQuery——attr方法和prop方法获取input的checked属性操作

    经常使用jQuery插件的attr方法获取checked属性值,获取的值的大小为未定义,此时可以用prop方法获取其真实值,下面介绍这两种方法的区别: 1.通过prop方法获取checked属性,获取 ...

  7. 汇总常用的jQuery操作Table tr td方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  8. jQuery操作DOM节点的方法总结

    1.parent():获得当前匹配元素集合中每个元素的父元素,该方法只会向上一级对 DOM 树进行遍历 $('li.item-a').parent().css('background-color', ...

  9. PHP中的__get()和__set()方法获取设置私有属性

    在类的封装中,获取属性可以自定义getXXX()和setXXX()方法,当一个类中有多个属性时,使用这种方式就会很麻烦.为此PHP5中预定义了__get()和__set()方法,其中__get()方法 ...

随机推荐

  1. Linux命令行与命令

    Linux命令行与命令   作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Linux的命令是很重要的工具,也往往是初学者最大的瓶 ...

  2. LTE Module User Documentation（翻译11）——配置用户测量

    LTE用户文档 (如有不当的地方,欢迎指正!) 17 Configure UE measurements   仿真中激活的用户测量配置取决于所选的 “consumers”,例如切换算法.用户可能需要添 ...

  3. MFC编程入门之十三（对话框：属性页对话框及相关类的介绍）

    前面讲了模态对话框和非模态对话框,本节来将一种特殊的对话框--属性页对话框. 属性页对话框的分类 属性页对话框想必大家并不陌生,XP系统中桌面右键点属性,弹出的就是属性页对话框,它通过标签切换各个页面 ...

  4. Teleport Ultra/Teleport Pro的冗余代码批量清理方法

    Teleport Pro 是款优秀的网站离线浏览工具(即网站整站下载工具),Teleport Ultra是其增强版,但使用此系列软件下载的离线网页里会包含大量冗余代码(如tppabs),手动去修改工作 ...

  5. Windows下pip安装包报错：Microsoft Visual C++ 9.0 is required Unable to find vcvarsall.bat

    刚在机器上windows环境下装上pip方便以后安装包的时候使用,谁知道第一次使用pip安装asyncio的时候就报错. 在Windows7x64下使用pip安装包的时候提示报错:Microsoft ...

  6. HTML 认识

    1.1认识什么是纯文本文件 Window 自带的一个软件,叫做记事本,记事本保存的格式就是TXT,就是英文text的缩写,术语上称呼为"纯文本文件". 注意:    TXT文件,只 ...

  7. MYSQL -NOSQL -handlersocket

    一个MYSQL的插件,让MYSQL支持NOSQL 好处,跟MYSQL公用数据.比普通CACHE方便.普通CACHE有同步数据问题 坏处,不兼容MEMCAHE,跟MEMCAHE一样没安全控制 编译与安装 ...

  8. spring随手笔记2：初始化方法

    1.init-method="init" public class HelloWorldServiceImpl implements HelloWorldService { pri ...

  9. HDU 1372 Knight Moves

    最近在学习广搜  这道题同样是一道简单广搜题=0= 题意:(百度复制粘贴0.0) 题意:给出骑士的骑士位置和目标位置,计算骑士要走多少步 思路:首先要做这道题必须要理解国际象棋中骑士的走法,国际象棋中 ...

  10. MATLAB 图像处理——Contrast Enhancement Techniques

    Contrast Enhancement Techniques %调整图片尺寸imresizeimages{k} = imresize(images{k},[width*dim(1)/dim(2) w ...