jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
本文实例分析了jQuery常用样式操作。分享给大家供大家参考，具体如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.high {
font-weight: bold; /* 粗体字 */
color : red; /* 字体颜色设置红色*/
}
.another {
font-style: italic;
color: blue;
}
</style>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
//获取样式
$("input:eq(0)").click(function(){
alert( $("p").attr("class") );
});
//设置样式
$("input:eq(1)").click(function(){
$("p").attr("class","high");
});
//追加样式
$("input:eq(2)").click(function(){
$("p").addClass("another");
});
//删除全部样式
$("input:eq(3)").click(function(){
$("p").removeClass();
});
//删除指定样式
$("input:eq(4)").click(function(){
$("p").removeClass("high");
});
//重复切换样式
$("input:eq(5)").click(function(){
$("p").toggleClass("another");
});
//判断元素是否含有某样式
$("input:eq(6)").click(function(){
alert( $("p").hasClass("another") )
alert( $("p").is(".another") )
});
});
//]]>
</script>
</head>
<body>
<input type="button" value="输出class类"/>
<input type="button" value="设置class类"/>
<input type="button" value="追加class类"/>
<input type="button" value="删除全部class类"/>
<input type="button" value="删除指定class类"/>
<input type="button" value="重复切换class类"/>
<input type="button" value="判断元素是否含有某个class类"/>
<p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
</html>
效果图：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jQuery文本框得到与失去焦点动态改变样式效果
本文实例讲述了jQuery文本框得到与失去焦点动态改变样式效果.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body { font: nor
-
JQuery操作元素的css样式
我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元 素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的:而jQuery里提供三种方法来实现这个功能, 虽然它们和传统方法的思想相通,但是却节省了许多代码.还是那句 话 – "jQuery让JavaScript代码变得简洁!" 1. addClass() – 添加CSS类 复制代码 代码如下: $("#target"
-
jquery 操作css样式、位置、尺寸方法汇总
一.CSS 1.css(name) 访问第一个匹配元素的样式属性. 返回值 String 参数 name (String) : 要访问的属性名称 示例: 复制代码 代码如下: $("p").css("color"); //取得第一个段落的color样式属性的值 2.css(properties) 把一个"名/值对"对象设置为所有匹配元素的样式属性.这是一种在所有匹配的元素上设置大量样式属性的最佳方式. 返回值 jQuery 参数 properti
-
JQuery结合CSS操作打印样式的方法
本节内容:JQuery.CSS操作打印样式. 一.添加打印样式 1,为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: 复制代码 代码如下: <link rel="stylesheet" href="css/mainstylesheet.css" media="screen" /> 用于打印的css: 复制代码 代码如下: <link rel="stylesheet" href=&q
-
jQuery操作元素css样式的三种方法
我们常常要使用Javascript来改变页面元素的样式.其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的:而jQuery里提供三种方法来实现这个功能,虽然它们和传统方法的思想相通,但是却节省了许多代码.还是那句话 - "jQuery让JavaScript代码变得简洁!" 1. addClass() - 添加CSS类 $("#target").addClass(&q
-
JQuery中操作Css样式的方法
复制代码 代码如下: //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr("class","divClass")设置Id为two的class属性. //2.追加样式 $("#two").addClass("divClass2")为ID为two的对象追加样式divClass2 //3.移除
-
jquery 如何动态添加、删除class样式方法介绍
取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: 复制代码 代码如下: var p_class = $("p").attr("class"); //获取p元素的class [html] 使用attr()方法来设置p元素的class,JQuery代码如下: [code] 1 $("p").attr("'class", "
-
基于jquery animate操作css样式属性小结
昨天突然有网友问我animate()方法可以来操作所有css属性吗?是的,我告诉他可以的.不过,在此有需要注意点需要大家搞清楚:当使用 animate()时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight而不是 margin-right,等等. css中的不是所有属性都可以用Jquery动画(animate函数)来动态改变,下面总结了JQ可以操作元素的一些属性: * backgroundPosi
-
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性 一个img标签: <img src="images/image.1.jpg" id="hibiscus" alt="
-
jQuery操作属性和样式详解
• 区分 DOM 属性和元素属性 <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" /> 通常开发人员习惯将id,src,alt等叫做这个元素的"属性".我们将其称为"元素属性".但是在解析成 DOM 对象时,实际浏览器最后会将标签元素解析成"DOM 对象",