获取样式和设置样式

<p class='myClass'  title='this is p'>this is p</p>

样式其实就是class属性所以设置和获取样式都能用attr()方法来完成,attr()方法用法:http://www.cnblogs.com/kuangxin/p/4243991.html


追加样式

实例:

<style>

  .high{

      font-weight:bold;//字体加粗

      color:red;//字体颜色设置为红色

     }

  .another{

      font-style:italic;//斜体

      color:blue;//字体设置为蓝色

          }

</style>

<p class="high" title="this is p">this is p</p>

jQuery代码:

$(p).addClass('another');

结果:

<p class="hight another" title="this is p">this is p</p>

此时在<p>元素中同时拥有俩个class值,即‘hight’和‘another’。在css中有以下俩条规定:

(1)如果给一个元素添加了多个class值,那么就相当于合并了他们的样式。

(2)如果不同的class设定了同一样式属性,则后者覆盖前者。

在上例中相当于给<p>元素添加了如下样式:

      font-weight:bold;//字体加粗

      color:red;//字体颜色设置为红色

      font-style:italic;//斜体

      color:blue;//字体设置为蓝色

在以上样式中,存在两个‘color’属性,而后面的‘color’属性会覆盖前面的‘color’属性,因此最终的’color‘属性的值为’blue‘,而不是’red‘,样式最终呈现为:

      font-weight:bold;//字体加粗

      font-style:italic;//斜体

      color:blue;//字体设置为蓝色

attr和addClass()的区别:

<p>this is p<p>

$('p').addClass('high');//结果<p class='high'>this is p</p>

$('p').attr('class','high');//结果<p class='high'>this is p<p>

再次使用

$('p').addClass('another');//结果<p class='high another'>this is p</p>

$('p').attr('class','another');//结果<p class='another'>this is p<p>


移除样式

实例:

HTML:

<p class='high another'>this is p</p>

jQuery代码:

$('p').removeClass('high');//移除high样式

$('p').removeClass('another');//移除another样式

等价于

$('p').removeClass('high anothe');//移除high another样式

等价于

$('p').removeClass();//清空样式

结果:

<p>this is p</p>


切换样式

HTML:

<p class='myClass'>this is p</p>

jQuery代码:

$('p').toggleClass('another');//切换为another样式

注意!       toggleClass()方法会不停的在俩种样式之间切换,当class为myClass时,运行代码则切换为another,当class为another时,运行代码则切换为myClass


判断是否包含某个样式

jQuery代码:

var bool= $('p').hasClass('myClass');//判断p标记是否包含样式myClass,包含返回true,否则返回false

注意!      这个方法是为了增强代码可读性而产生的,在jQuery内部实际上是调用了is()方法来完成这个功能的,上述代码等价于var bool=$('p').is('.myClass')

jQuery样式操作的更多相关文章

  1. 深入学习jQuery样式操作

    × 目录 [1]设置样式 [2]增加样式 [3]删除样式[4]切换样式[5]判断样式[6]样式操作 前面的话 使用javascript脚本化CSS是一个系列,包括行间样式.计算样式.CSS类.样式表. ...

  2. jQUery 样式操作

    一.css样式操作的方法: 1..css("样式"):获得样式值,比如$("input").css("color")  获得input中字体 ...

  3. 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】

    一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...

  4. jQuery 样式操作、文档操作、属性操作的方法总结

    文档操作: addClass()             向匹配的元素添加指定的类名.after()                    在匹配的元素之后插入内容.append()         ...

  5. jquery——样式操作

    思想:同一个函数完成取值和赋值 addClass.removeClass. <!DOCTYPE html> <html lang="en"> <hea ...

  6. jQuery属性和样式操作

    回顾 1. jquery基本使用 <script src="jquery.min.js"></script><script> $(functio ...

  7. Jquery选择器与样式操作

    jquery选择器 jquery用法思想一 选择某个网页元素,然后对它进行某种操作 jquery选择器 jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择 ...

  8. dom操作 属性操作 样式操作

    jQuery DOM操作 1 插入子元素 append('<img>') 插后面 被插入元素调用 appendTo('<img scr="...">') 新 ...

  9. jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件

    jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...

随机推荐

  1. java获取文件的父目录

    File file = new File("a.txt"); String parentPath = file.getParent(); // null File parentDi ...

  2. JAVA实现多线程的两种方法

    参考URL: http://www.cnblogs.com/jbelial/archive/2013/03/17/2964472.html 1.继承 java.lang.Thread 类. 2.实现R ...

  3. 一次完整的http事务

    一次完整的http事务 https://www.processon.com/view/link/56c6679ce4b0f0c4285e69c0 规范把 HTTP 请求分为三个部分:状态行.请求头.消 ...

  4. [Javascript Crocks] Understand the Maybe Data Type

    In this lesson, we’ll get started with the Maybe type. We’ll look at the underlying Just and Nothing ...

  5. eclipse导入myeclipse中的web项目

    场景:在myeclipse编写的一个简单的电信计费系统项目,后面公用到eclipse,想把它给导入到eclipse中 操作:eclipse中在packag explorer空白处右键>impor ...

  6. Converter实现Date类型转换

    1.springmvc-config.xml配置 <?xml version="1.0" encoding="UTF-8"?> <beans ...

  7. PHP设计模式之 单例模式 工厂模式 实例讲解

    单例模式又称为职责模式,它用来在程序中创建一个单一功能的访问点,通俗地说就是实例化出来的对象是唯一的.所有的单例模式至少拥有以下三种公共元素:1. 它们必须拥有一个构造函数,并且必须被标记为priva ...

  8. luogu2431 正妹吃月饼

    题目大意 求一个正整数集合\(K\),使得\(\sum_{k\in K}2^k\in[A,B]\),且\(|K|\)最大.\(A,B\)大小在long long范围内. 思路 \(\sum_{k\in ...

  9. Android系统之Recovery移植教程 【转】

    本文转载自:http://luckytcl.blog.163.com/blog/static/14258648320130165626644/ recovery的移植,这方面的资料真实少之又少啊,谷歌 ...

  10. NET中的池

    NET中的各种池 在.NET中,常用到的池有四个:字符串拘留池.线程池 .应用程序池.数据库连接池. 字符串拘留池 在.NET中字符串是不可变对象,修改字符串变量的值会产生新的对象.为降低性能消耗及减 ...