一、addClass() - 向被选元素添加一个或多个类
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div,p").addClass("important"); }); }); </script> <style type="text/css"> .important{font-weight:bold; font-size:xx-large;} .blue{color:blue;} </style> </head> <body> <h1>标题 1</h1> <h2>标题 2</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> <div>这是非常重要的文本!</div><br> <button>向元素添加类</button> </body>
也可以在 addClass() 方法中规定多个类:
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $("button").click(function(){ $("#div1").addClass("important blue"); }); }); </script> <style type="text/css"> .important{font-weight:bold; font-size:xx-large;} .blue{color:blue;} </style> </head> <body> <div id="div1">这是一些文本。</div> <div id="div2">这是一些文本。</div><br> <button>向第一个 div 元素添加多个类</button> </body>
二、removeClass() - 从被选元素删除一个或多个类
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $("button").click(function(){ $("h1,h2,p").removeClass("blue"); }); }); </script> <style type="text/css"> .important{font-weight:bold; font-size:xx-large;} .blue{color:blue;} </style> </head> <body> <h1 class="blue">标题 1</h1> <h2 class="blue">标题 2</h2> <p class="blue">这是一个段落。</p> <p>这是另一个段落。</p><br> <button>从元素上删除类</button> </body>
三、hasClass() - 对被选元素进行判断是否有该类
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $("h1").click(function(){ if($(this).hasClass("blue")){ $(this).removeClass("important"); }else{ /*...............*/ } }); }); </script> <style type="text/css"> .important{font-weight:bold; font-size:xx-large;} .blue{color:blue;} </style> </head> <body> <h1 class="blue important">标题 1</h1> <h2>标题 2</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> <button>切换 CSS 类</button> </body>
四、toggleClass() - 对被选元素进行添加/删除类的切换操作
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $("button").click(function(){ $("h1,h2,p").toggleClass("blue");//切换css类,当类存在时,就删除,不存在时就添加,必须要有点击动作 }); }); </script> <style type="text/css"> .important{font-weight:bold; font-size:xx-large;} .blue{color:blue;} </style> </head> <body> <h1>标题 1</h1> <h2>标题 2</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> <button>切换 CSS 类</button> </body>
默认的 CSS 类切换只能是无样式和指定样式之间的切换,如果想实现样式 red和样式 blue之间的切换还必须自己写一些逻辑。
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $('div').click(function () { $(this).toggleClass('red'); //一开始切换到样式 red if ($(this).hasClass('red')) { //判断样式 red 存在后 $(this).removeClass('blue'); //删除样式 blue } else { $(this).toggleClass('blue'); //添加样式 blue,这里也可以 addClass } }); }); </script> <style type="text/css"> .blue{ color:blue;} .red{ color:red;} .size{ font-size:36px;} .green{ color:green;} </style> </head> <body> <div>JQuery1</div> <div>JQuery2</div> </body>
.toggleClass()方法提供了传递匿名函数的方式,来设置你所需要切换的规则。
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ /* $('div').click(function () { $(this).toggleClass(function () { //传递匿名函数,返回要切换的样式 return $(this).hasClass('red') ? 'blue' : 'red'; //这里有个缺陷red添加进去后就删除不了 }); }); */ $('div').click(function () { $(this).toggleClass(function () { if ($(this).hasClass('red')) { $(this).removeClass('red'); return 'blue'; } else { $(this).removeClass('blue'); return 'red'; } }); }); }); </script> <style type="text/css"> .blue{ color:blue;} .red{ color:red;} .size{ font-size:36px;} .green{ color:green;} </style> </head> <body> <div class="blue">JQuery1</div> <div>JQuery2</div> </body>
五、css() - 设置或返回被选元素的一个或多个样式属性
1、返回指定的 CSS 属性的值:
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ alert("Background color = " + $("p").eq(1).css("background-color"));//这里可以通过eq()这个方法来选择第几个p标签 }); </script> </head> <body> <p style="background-color:#ff0000">这是一个段落。</p> <p style="background-color:#00ff00">这是一个段落。</p> <p style="background-color:#0000ff">这是一个段落。</p> </body>
在 CSS 获取上,我们也可以获取多个 CSS 样式,而获取到的是一个对象数组,如果用传统方式进行解析需要使用 for in 遍历。
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ var box = $('p').css(['color', 'height', 'width']); //得到多个 CSS 样式的数组对象 alert(box);//返回的是一个对象数组object /* for (var i in box) { //逐个遍历出来 alert(i + ':' + box[i]); } */ //上面使用了js的原生方法,这里jQuery 提供了一个遍历工具专门来处理这种对象数组,$.each()方法,这个方法可以轻松的遍历对象数组。 $.each(box, function (attr, value) { //遍历 JavaScript 原生态的对象数组 alert(attr + ':' + value); }); //使用$.each()可以遍历原生的 JavaScript 对象数组,如果是 jQuery 对象的数组怎么使用.each()方法呢? $('p').each(function (index, element) { //index 为索引,element 为元素 DOM对象 alert(index + ':' + element); }); }); </script> <style type="text/css"> p{ background-color:#ff0000;} </style> </head> <body> <p>这是一个段落。</p> <p>这是一个段落。</p> <p>这是一个段落。</p> <p>这是一个段落。</p> </body>
2、设置指定的 CSS 属性:
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $("p").eq(0).css("background-color","#FF0");//这里可以通过eq()这个方法来选择第几个p标签 }); </script> </head> <body> <p style="background-color:#ff0000">这是一个段落。</p> <p style="background-color:#00ff00">这是一个段落。</p> <p style="background-color:#0000ff">这是一个段落。</p> <p>这是一个段落。</p> </body>
在需要设置多个样式的时候,我们可以传递多个 CSS 样式的键值对即可。
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $("p").eq(0).css({ "background-color":"#FF0", "font-size":"36px" });//这里可以通过eq()这个方法来选择第几个p标签 }); </script> </head> <body> <p style="background-color:#ff0000">这是一个段落。</p> <p style="background-color:#00ff00">这是一个段落。</p> <p style="background-color:#0000ff">这是一个段落。</p> <p>这是一个段落。</p> </body>
如果想设置某个元素的 CSS 样式的值, 但这个值需要计算我们可以传递一个匿名函数。
<script src="jquery-1.11.1.min.js"></script> <script> $(function(){ $('p').css('width', function (index, value) { alert(value); return (parseInt(value) - 500) + 'px'; }); }); </script> </head> <body> <p style="background-color:#ff0000">这是一个段落。</p> <p style="background-color:#00ff00">这是一个段落。</p> <p style="background-color:#0000ff">这是一个段落。</p> <p>这是一个段落。</p> </body>