`
- 浏览:
626291 次
- 性别:
- 来自:
广州
-
jQuery实例CSS 样式表动态选择
本实例主要说的还是jquery的选择器，
关于jquery的css的一些知识
用类似
$("li").css("cursor","pointer");
这样的方式来确定
具体的大家就看代码
吧
css样式表一
body{background:#000;
color:#fff}
h1{font-size:14px;
color:#fff;font-weight:bold;}
p{font-size:12px;
color:#fff;}
css样式表二
body{background:#f00;color:#fff}
h1{font-size:15px;color:#fff;font-weight:bold;}
p{font-size:13px;color:#fff;}
css样式表三
body{background:#fee;color:#000}
h1{font-size:16px;color:#000;font-weight:bold;}
p{font-size:14px;color:#000;}
主要文件代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="utf-8">
<HTML>
<HEAD>
<TITLE>css 选择</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/include/jquery/jquery-1.1.3.1.pack.js"></script>
<link href="1.css" rel="stylesheet" title="style1" type="text/css" />
<link href="2.css" rel="stylesheet" title="style2" type="text/css" />
<link href="3.css" rel="stylesheet" title="style3" type="text/css" />
</HEAD>
<BODY>
<h1>jQuery 是一个新型的JavaScript库. </h1>
<p>jQuery是一个简洁快速的JavaScript库，它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。
jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不用的应用程序。
jQuery是一个轻量级的脚本，其代码非常小巧，JavaScript包只有15K左右。
jQuery支持CSS1-CSS3,以及基本的xPath
jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+
</p>
<ul>
<li rel="style1" class="styleswitch">styles1</li>
<li rel="style2" class="styleswitch">styles2</li>
<li rel="style3" class="styleswitch">styles3</li>
</ul>
<SCRIPT LANGUAGE="JavaScript">
<!--
$('.styleswitch').css("cursor","pointer");
$('.styleswitch').click(function()
{
switchStylestyle(this.getAttribute("rel"));
return false;
});
var c = readCookie('style');
if (c) switchStylestyle(c);
function switchStylestyle(styleName)
{
$('link[@rel*=style][@title]').each(function(i)
{
this.disabled = true;
if (this.getAttribute('title') == styleName) this.disabled = false;
});
createCookie('style', styleName, 365);
}
function createCookie(name,value,days)
{
if (days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++)
{
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name)
{
createCookie(name,"",-1);
}
//-->
</SCRIPT>
</BODY>
</HTML>
分享到：
相关推荐
这个主题涵盖了两个关键的技术：jQuery（一个流行的JavaScript库）和CSS3（一种强大的样式表语言，为Web带来丰富的动画功能）。 首先，jQuery是JavaScript的一个轻量级库，它简化了JavaScript的DOM操作、事件处理和...
接下来，"css"目录下的文件是CSS样式表，它们负责定义网页的布局和视觉风格。CSS3引入了许多新的特性，如动画（Animations）和过渡（Transitions），这些在实现动态背景时起着关键作用。例如，可以设置背景图片的...
CSS3是CSS（层叠样式表）的最新版本，提供了许多增强的视觉效果和动画功能。在这个项目中，CSS3的关键技术包括： 1. **3D转换**：CSS3的`transform`属性允许元素进行二维或三维变换，如旋转、缩放、平移等。在这个...
css目录中的样式表文件则定义了元素的外观和动画效果。index.html是网页的入口文件，它引入了JavaScript和CSS文件，并构建了页面的基本结构。 具体到实现过程，开发者可能在HTML中创建了一个签到面板，每个表情作为...
压缩包内的`index.html`应该是项目的主页面文件，`css`目录包含CSS样式表，`images`目录可能存放按钮的背景图片或其他图形资源，而`js`目录则包含jQuery脚本文件。 9. 二次修改： 由于描述中提到有能力者可以进行...
而CSS则是样式表语言，用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档的外观和格式。 首先，jQuery在登录页面中的应用主要体现在交互性上。例如，它可以用于实现动态验证，当用户输入用户名和密码时，...
CSS3是层叠样式表的最新版本，引入了许多新的特性和功能，如3D变换、过渡和动画。在这个特效中，CSS3被用来实现数字卡片翻转的效果。每个数字卡片通常由前后两部分组成，通过`transform`属性实现翻转。当计时器数值...
CSS3是层叠样式表的最新版本，引入了许多新特性，如选择器、过渡、动画、边框、背景等，大大增强了网页的样式表现力。在立体式动画百叶窗切换效果中，CSS3的两个关键特性被广泛应用：一是3D转换，二是关键帧动画。 ...
CSS3（层叠样式表3）扩展了CSS2，引入了更多新的选择器、动画、过渡和3D效果，而jQuery则是一个轻量级的JavaScript库，简化了DOM操作、事件处理和动画效果。下面我们将探讨一些CSS3和jQuery结合使用的技术实例，以...
其次，CSS3则是层叠样式表的最新版本，它引入了许多新的特性和功能，如动画、过渡、选择器增强等。在这个滑块设计中，CSS3被用来创建滑块的视觉样式，包括滑块条、滑块按钮、以及可能的指示器（如价格标签）。例如，...
在网页设计中，CSS（层叠样式表）用于控制页面布局和视觉外观，而jQuery是一种JavaScript库，简化了DOM操作、事件处理和动画效果。在这个项目中，CSS被用来定义菜单的布局、颜色、字体等视觉属性，而jQuery则可能...
CSS（层叠样式表）用于定义网页的布局和外观。"css-template"可能是一些预设的样式模板，开发者可以快速应用到自己的项目中，以创建一致的设计风格。而"DIV+CSS"则强调了使用CSS进行布局，DIV是一个常用的HTML标签，...
这个“jQuery+CSS图片浮动层效果”压缩包包含了一个利用jQuery库和CSS样式实现的此类功能的实例。以下是关于这个主题的详细解释。 首先，jQuery是一个广泛使用的JavaScript库，它简化了JavaScript的DOM操作、事件...
CSS3是层叠样式表的最新版本，它引入了许多新的选择器、布局模式和动画效果。在这个3D字幕特效中，CSS3的动画和转换（Transform）属性发挥了关键作用。例如，`@keyframes`规则用于定义动画的各个阶段，而`transform:...
CSS3是层叠样式表的最新版本，它提供了许多强大的新特性，如选择器扩展、过渡效果、动画、阴影和边框等。在这个FAQ模板中，CSS3被用来增强视觉效果，比如使用伪类`:hover`来改变鼠标悬停在菜单项上的样式，使用`...
`css`文件夹中的样式表可能包含滑块的外观定义，如滑块轨道的背景色、滑块本身的形状和颜色，以及选中区域的样式。CSS3的过渡（`transition`）和动画（`animation`）属性可以使得滑块在拖动时平滑地改变位置，增强...
`css`文件夹则包含样式表文件，这些文件定义了进度条及页面其他元素的样式。CSS3的选择器、属性和规则被用来控制进度条的外观和动态效果。例如，可能会有针对进度条容器和百分比值元素的样式定义，以及针对动画或...
- `css`目录：包含了CSS样式表文件，用于定义插件的视觉样式。 - `img`目录：存放可能用到的图像资源，如图标或其他图形元素。 - `js`目录：包含JavaScript文件，其中可能有插件的核心代码，如实现弹出菜单逻辑的...
《DIV+CSS+JQUERY源码实例》是一个深入解析网页布局与交互技术的资源集合，主要围绕HTML中的元素、CSS样式表以及JavaScript库jQuery展开。这些技术是现代网页开发的基础，对于创建动态、响应式的用户体验至关重要。...
- 通过类（class）或ID（id）属性，我们可以对`<div>`元素进行针对性的CSS样式设置。 2. **CSS基础** - CSS是层叠样式表，用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。 - 基本语法包括选择...