那么p元素的class实际上是 class="orgClass newClass"样式只会在原本的类上继续增加，通过空格分隔
删除样式.removeClass() 需要样式之间的切: .removeClass()，作用是从匹配的元素中删除全部或者指定的class 。 .removeClass( )方法：.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名。.removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名。 <script type="text/javascript"> //.removeClass() 方法允许我们指定一个函数作为参数，返回将要被删除的样式 $('.right > div:first').removeClass(function(index,className){ //className = aa bb imoocClass //把div的className赋给下一个兄弟元素div上作为它的class $(this).next().addClass(className) //删除自己本身的imoocClass return 'imoocClass' }) </script> 注意事项： 如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数，那么所有的样式类将被移除。 切换样式.toggleClass()针对同一节点的某一个样式不断的切换，也就是addClass与removeClass的互斥切换。
通过toggleClass方法动态添加删除Class， 一次执行相当于addClass，再次执行相当于removeClass。
.toggleClass( )方法： 即：如果存在（不存在）就删除（添加）一个类。 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。
.toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名
.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除
.toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值
.toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数
<script type="text/javascript"> // 给所有的tr元素加一个class="c"的样式 $("#table tr").toggleClass("c"); </script> <script type="text/javascript"> // 给所有的偶数tr元素切换class="c"的样式 // 奇数的项的样式，有class="c"样式则删除，没有则添加 $("#table tr:odd").toggleClass("c"); </script> <script type="text/javascript"> // 第二个参数判断样式类是否应该被添加或删除 // true，那么这个样式类将被添加; // false，那么这个样式类将被移除 // 所有的偶数tr元素，应该都保留class="c"样式 $("#table tr:even").toggleClass("c", true); // 这个操作没有变化，因为样式已经是存在的 </script> 注意事项：toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加toggleClass会保留原有的Class名后新增，通过空格隔开 样式操作.css()动态的修改style属性
.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性
获取：
.css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值
.css( propertyNames )：传递一组数组，返回一个对象结果
设置：
.css(propertyName, value )：设置CSS
.css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理
.css( properties )：可以传一个对象，同时设置多个样式
注意事项：
浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px
.css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理
当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，
例如 .css(“width”,50}) 与 .css(“width”,“50px”})一样
<script type="text/javascript"> //background-color:blue; => rgb(0, 0, 255) //颜色都会转化成统一的rgb标示 $('p:eq(0)').text( $('.first').css("background-color")) </script> <script type="text/javascript"> //字体大小都会转化成统px大小 em=>px $('p:eq(1)').text( $('.first').css.("font-size")) </script> <script type="text/javascript"> //获取尺寸，传入CSS属性组成的一个数组 //{width: "60px", height: "60px"} var value = $('.first').css(['width','height']); //因为获取的是一个对象，取到对应的值 $('p:eq(2)').text( 'widht:' + value.width + ' height:' +value.height ) </script> <script type="text/javascript"> //多种写法设置颜色 $('.fourth').css("background-color","red"); $('.fifth').css("backgroundColor","yellow"); </script> <script type="text/javascript"> //多种写法设置字体大小 $('.fourth').css("font-size","15px"); $('.fifth').css("fontSize","0.9em"); </script> <script type="text/javascript"> //获取到指定元素的宽度，在回调返回宽度值 //通过处理这个value，重新设置新的宽度 //index 代表前面选择器的index值，即是数组索引值，是回调函数的参数之一，函数内可以不用. $('.sixth').css("width",function(index,value){//在js中的键值是用index-value去的。 value=value.split('px'); return (Number(value[0])+50)+value[1]; }) </script> <script type="text/javascript"> //合并设置,通过对象传设置多个样式 $('.seventh').css({ 'font-size' :"15px", "background-color" :"#40E0D0", "border" :"1px solid red" }) </script> 注意： split(‘px’)是以’px’为界限来分解，如果获取到的属性是12px，那么就会被分解为’12’和’px’，其中12是value[0]，'px’是value[1] 如果不用Number()函数转换，value[0]+50的结果是6050。此处用Number()将value[0]转换成数值才能与后面的50一起运算。 .css()与.addClass()设置样式的区别可维护性：
.addClass()的本质是通过定义个class类的样式规则，给元素添加一个或多个类。
css方法是通过JavaScript大量代码进行改变元素的样式
通过.addClass()我们可以批量的给相同的元素设置统一规则，变动起来比较方便，可以统一修改删除。
如果通过.css()方法就需要指定每一个元素是一一的修改，日后维护也要一一的修改，比较麻烦
灵活性：
通过.css()方式可以很容易动态的去改变一个样式的属性，不需要在去繁琐的定义个class类的规则。
一般来说在不确定开始布局规则，通过动态生成的HTML代码结构中，都是通过.css()方法处理的。
样式值：
.addClass()本质只是针对class的类的增加删除，不能获取到指定样式的属性的值。
.css()可以获取到指定的样式值。
样式的优先级：
css的样式是有优先级的，当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候，优先级如下
外部样式 < 内部样式 < 内联样式
.addClass()方法是通过增加class名的方式，那么这个样式是在外部文件或者内部样式中先定义好的，等到需要的时候在附加到元素上
通过.css()方法处理的是内联样式，直接通过元素的style属性附加到元素上的
通过.css方法设置的样式属性优先级要高于.addClass方法
总结： .addClass与.css方法各有利弊，一般是静态的结构，都确定了布局的规则，可以用addClass的方法，增加统一的类规则 如果是动态的HTML结构，在不确定规则，或者经常变化的情况下，一般多考虑.css()方式。
元素的数据存储 实现数据存取. 性能优化，比如sizzle选择中可以用来缓存部分结果集等等。常常用于我们存放临时的一些数据，因为它是直接跟DOM元素对象绑定在一起的> jQuery提供的存储接口jQuery.data( element, key, value ) //静态接口,存数据jQuery.data( element, key ) //静态接口,取数据.data( key, value ) //实例接口,存数据.data( key ) //实例接口,存数据 注意: 2个方法在使用上存取都是通一个接口，传递元素，键值数据。在jQuery的官方文档中，建议用.data()方法来代替。 把DOM可以看作一个对象，那么我们往对象上是可以存在基本类型，引用类型的数据的，但是这里会引发一个问题，可能会存在循环引用的内存泄漏风险。 通过jQuery提供的数据接口，就很好的处理了这个问题了，我们不需要关心它底层是如何实现，只需要按照对应的data方法使用就行了。 同样的也提供2个对应的删除接口，使用上与data方法其实是一致的。jQuery.removeData( element [, name ] )//增加.removeData( [name ] )//删除 <script type="text/javascript"> $('.right').click(function() { var ele = $(this); //通过.data方式设置数据 ele.data("a", "data test") ele.data("b", { name: "慕课网" }) //通过.data方式取出数据 var reset = ele.data("a") + "</br>" + ele.data("b").name ele.find('span').append(reset) }) </script> 就是说dataz这个方法可以静态用和动态用： 1静态：$.data(ele,key,value);里面三个参数分别代表要存储数据的节点、数据名称、数据内容； 2动态：ele.data(key,value)；表示某个节点存的数据名和数据内容。这两个的区别就在节点ele那里，即例子的第一个参数ele那里。这个ele可以作为data方法的调用者（选择者） ，也可以作为 被选择者（被调用）。 jquery方法的通用思想是：传入一个参数代表取值，传入两个参数代表设置这个值。
