深入学习jQuery样式操作
Posted 小火柴的蓝色理想
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了深入学习jQuery样式操作相关的知识，希望对你有一定的参考价值。
前面的话
使用javascript脚本化CSS是一个系列，包括行间样式、计算样式、CSS类、样式表、动态样式和伪元素这六部分。而jQuery也实现了脚本化CSS的功能，提供了更为简单易用的方法
设置样式
前面介绍过jQuery的特性操作，可以通过attr()方法进行样式设置
<style> .cB{color: blue;} </style> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="test">测试文字</div> <button id="btn1">按钮</button> <script> btn1.onclick = function(){ $(\'#test\').attr(\'class\',\'cB\') } </script>
[注意]jQuery对象无法直接使用className属性设置类名，需要转换为javascript对象才可以使用
<style> .cB{color: blue;} </style> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="test">测试文字</div> <button id="btn1">按钮</button> <script> btn1.onclick = function(){ $(\'#test\')[0].className = \'cB\'; } </script>
增加样式
addClass(className)
addClass(className)方法为每个匹配元素增加一个或多个样式名，如果值已存在，则不添加
<style> .cB{color: blue;} .bgO{background-color:orange;} </style> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="test">测试文字</div> <button id="btn1">按钮</button> <script> btn1.onclick = function(){ $(\'#test\').addClass(\'cB bgO\') } </script>
addClass(function(index, currentClass))
addClass()方法可以接受一个函数作为参数，这个函数返回一个或更多用空格隔开的要增加的样式名。接收index参数表示元素在匹配集合中的索引位置和currentClass参数表示元素上原来的className。在函数中this指向匹配元素集合中的当前元素
<style> .cB{color: blue;} .bgO{background-color:orange;} </style> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="test" class="cB">测试文字</div> <button id="btn1">按钮</button> <script> btn1.onclick = function(){ $(\'#test\').addClass(function(index,currentClass){ alert(\'\' + index + currentClass );//\'0cB\' return \'bgO\'; }) } </script>
删除样式
removeClass()
removeClass()方法不带参数时，将删除全部类名
<style> .cB{color: blue;} .bgO{background-color:orange;} </style> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="test" class="cB bgO">测试文字</div> <button id="btn1">按钮</button> <script> btn1.onclick = function(){ $(\'#test\').removeClass(); } </script>
removeClass([className])
removeClass([className])方法用来删除参数中指定的一个或多个类名
<style> .cB{color: blue;} .bgO{background-color:orange;} </style> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="test" class="cB bgO">测试文字</div> <button id="btn1">按钮</button> <script> btn1.onclick = function(){ $(\'#test\').removeClass(\'cB bgO\'); } </script>
removeClass(function(index, currentClass))
removeClass()方法可以接收一个函数为参数，该函数返回一个或多个将要被移除的样式名。index参数表示在所有匹配元素的集合中当前元素的索引位置，currentClass参数表示原有的样式名
[注意]由于class是保留字，所以形参名设置为class时，会导致错误
<style> .cB{color: blue;} .bgO{background-color:orange;} </style> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="test" class="cB bgO">测试文字</div> <button id="btn1">按钮</button> <script> btn1.onclick = function(){ $(\'#test\').removeClass(function(index,currentClass){ alert(\'\' + index + currentClass);//0cB bgO return \'bgO\'; }); } </script>
切换样式
toggleClass()
在做某些效果的时候，可能会针对同一节点的某一个样式不断的切换，也就是addClass与removeClass的互斥切换，比如隔行换色效果
jQuery提供一个toggleClass()方法用于简化这种互斥的逻辑，通过toggleClass()方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass
toggleClass()有以下4种用法
【1】toggleClass()
当toggleClass()方法没有参数时，将删除或还原全部类名
<style> .cB{color: blue;} .bgO{background-color:orange;} </style> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="test" class="cB bgO">测试文字</div> <button id="btn1">按钮</button> <script> btn1.onclick = function(){ $(\'#test\').toggleClass(); } </script>
【2】toggleClass(className)
toggleClass(className)方法在匹配的元素集合中的每个元素上切换的一个或多个(用空格隔开)样式类名
<style> .cB{color: blue;} .bgO{background-color:orange;} </style> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="test" class="cB bgO">测试文字</div> <button id="btn1">按钮</button> <script> btn1.onclick = function(){ $(\'#test\').toggleClass(\'bgO\'); } </script>
【3】toggleClass(className,switch)
toggleClass()方法可以接收第二个参数switch，用来判断样式类是否应该被添加或删除。如果这个参数的值是true，那么这个样式类将被添加，相当于addClass；如果这个参数的值是false，那么这个样式类将被移除，相当于removeClass
$(\'#foo\').toggleClass(className, addOrRemove);
//等价于
if (addOrRemove){
$(\'#foo\').addClass(className);
}else{
$(\'#foo\').removeClass(className);
}
<style> .cB{color: blue;} .bgO{background-color:orange;} </style> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="test" class="cB bgO">测试文字</div> <button id="btn1">添加</button> <button id="btn2">删除</button> <script> btn1.onclick = function(){$(\'#test\').toggleClass(\'bgO\',true);} btn2.onclick = function(){$(\'#test\').toggleClass(\'bgO\',false);} </script>
【4】toggleClass(function(index,currentClass,switcher)[,switch])
toggleClass()可以接收一个函数作为参数，该函数用来返回在匹配的元素集合中的每个元素上用来切换的样式类名，接收元素的索引位置和元素旧的样式类作为参数
<style> .cB{color: blue;} .bgO{background-color:orange;} </style> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="test" class="cB bgO">测试文字</div> <button id="btn1">添加</button> <button id="btn2">删除</button> <button id="btn3">变更</button> <script> btn1.onclick = function(){$(\'#test\').toggleClass(function(index,currentClass,switcher){ alert(\'\' + index + currentClass + switcher) return \'bgO\' },true)}; btn2.onclick = function(){$(\'#test\').toggleClass(function(index,currentClass,switcher){ alert(\'\' + index + currentClass + switcher) return \'bgO\' },false)}; btn3.onclick = function(){$(\'#test\').toggleClass(function(index,currentClass,switcher){ alert(\'\' + index + currentClass + switcher) return \'bgO\' })}; </script>
判断样式
hasClass(className)
hasClass(className)方法用于确定任何一个匹配元素是否有被分配给定的类名，如果有则返回true；否则，返回false
<style> .cB{color: blue;} .bgO{background-color:orange;} </style> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="test" class="cB bgO">测试文字</div> <button id="btn1">按钮</button> <button id="btn2">是否存在指定样式</button> <script> btn1.onclick = function(){$(\'#test\').toggleClass(\'bgO\');} btn2.onclick = function(){alert($(\'#test\').hasClass(\'bgO\'))} </script>
[注意]该方法实际是为了增强代码可读性产生的。在jQuery()内部实际上是调用了is()方法来完成这个功能的
在javascript中，html5为所有元素添加了classList属性，这个classList属性是新集合类型DOMTokenList的实例，它也有类似的方法
add(value) 将给定的字符串值添加到列表中，如果值已存在，则不添加
contains(value) 表示列表中是否存在给定的值，如果存在则返回true,否则返回false
remove(val，e) 从列表中删除给定的字符串
toggle(value) 如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它
由于IE9-浏览器不支持classList属性，也就不支持add()、contains()、remove()和toggle()这四个方法
关于classList属性的类似的4个方法及兼容写法的详细信息移步至此
样式操作
在javascript中，查询计算样式需要处理getComputedStyle()方法和currentStyle属性的兼容；设置行间样式需要对style属性赋值
而在jQuery中，使用CSS()方法就可以解决以上的问题
【获取样式】
css(propertyName)
css(propertyName)方法用来获取匹配元素集合中的第一个元素的样式属性的计算值。要注意的是，这里获取的是计算样式，即类似于原生javascript的getComputedStyle或currentStyle
<style> div { width:60px; height:60px; margin:5px; float:left; } </style> <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <span id="result"></span> <div style="background-color:blue;"></div> <div style="background-color:rgb(15,99,30);"></div> <div style="background-color:#123456;"></div> <div style="background-color:#f11;"></div> <script> $("div").click(function () { $("#result").html("背景颜色是 " + $(this).css("background-color")); }); </script>
[注意]简写速写的CSS属性(如：margin,background,border)不支持
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="test" style="margin-top:10px;">测试文字</div> <script> //chrome浏览器输出10px 0px 0px //firefox和IE浏览器输出空字符串\'\' console.log( $(\'#test\').css(\'margin\')); </script>
css(propertyNames)
css(propertyNames)方法也可以接受一个或多个CSS属性组成的数组作为参数
从jQuery 1.9开始, 传递一个CSS的样式属性的数组给.css()将返回属性-值配对的对象
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <div id="test" style="margin-top:10px;">测试文字</div> <script以上是关于深入学习jQuery样式操作的主要内容，如果未能解决你的问题，请参考以下文章