`
- 浏览:
602693 次
- 性别:
- 来自:
广州
-
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入门实例：使用CSS()方法改变现有的CSS样式表，css()方法在使用上具有多样性。其中有一种可接受两个输入参数：样式属性和样式值，两者之间用逗号分隔。比如要改变链接颜色，可以这样编写代码： $("#61dh a")....
内容索引:脚本资源,jQuery,无刷新风格切换 jQuery 无刷新切换网站风格，如果你想在你的网站中加入这项功能，这个实例最适合您了，它使用了jQuery插件，用起来更稳定、省心，你需要准备好多份CSS样式表文件，这和...
.important { font-size:x-large; font-weight:bold; color:#c3c3c3; } jQuery – 获取并设置 CSS 类 ...通过 jQuery，可以很容易地对 CSS 元素进行操作。 切换 CSS 类 ...jQuery 操作 CSS ...实例样式表 下面的样
本文实例讲述了jQuery实现获取及设置CSS样式操作。分享给大家供大家参考，具体如下： addClass():向被选元素添加一个或多个类 removeClass():从被选元素删除一个或多个类 toggleClass():对被选元素进行添加/删除...
jquery easyUI 组件（包括JS、CSS样式表以及实例）
12.5 自动选择CSS样式 第3部分 CSS混合应用技术篇 第13章 CSS与JavaScript的综合应用 13.1 JavaScript概述 13.2 JavaScript语法基础 13.3 实例一：输入时高亮显示的Excel表格 13.4 实例二...
2.7.6 实例：九九乘法表 2.8 函数 2.8.1 定义和调用函数 2.8.2 用arguments对象访问函数的参数 2.8.3 实例：杨辉三角 2.9 其他对象 2.9.1 对象简述 2.9.2 时间日期：Date对象 2.9.3 数学...
style1.css 名为style1的CSS样式文件。 style2.css 名为style2的CSS样式文件。 style3.css 名为style3的CSS样式文件。 第16章（源代码\第16章） 示例描述：本章演示字体属性用法。 间距与间隔....
Jquery DataTable是一个很不错的表格插件。...1、功能强大，支持分页、服务器分页、表头表格等样式自定义 2、支持jedit等其他Jquery插件 3、支持ajax、dom、json等数据源； 4、众多使用者的实例代码
书名：jQuery权威指南(系统介绍jQuery方方面面,囊括118个实例和2个综合案例,实战性强） 作者：陶国荣 著 书号：978-7-111-32543-7 定价：59.00元 出版社：机械工业出版社华章公司 出版时间：2011年1月 编辑推荐：...
本教程系统地讲解了CSS样式的基础理论和实际运用技术，并结合实例来讲解层叠样式表与层布局相结合制作网页的方法。在实例制作过程中除了介绍CSS样式设计各方面的知识外，还结合实际网页制作中可能遇到的问题提供解决...
首先第一步就是在需要调用FullCalendar日程插件的页面中载入必要的javascript和css文件，包括jQuery库文件，FullCalendar插件以及FullCalendar样式表。如果您还想要拖动日程的功能，那么还需要加入jQuery ui插件。 ...
式来样式化页面上不同的元素，有时候可以不是纯 css。 在第三章里，你会学习如何触发事件，浏览器发事件时，你将会使用 jQuery 的事件处理机 制处理行为。你 也能够在 jQuery的秘密 sauce中获得内在的消息：在 页面...
在 <head> 中导入 cropper.css 样式表： <link rel="stylesheet" href="/assets/lib/cropper/cropper.css" /> 2.在 <body> 的结束标签之前，按顺序导入如下的 js 脚本： <script src="/assets/lib/jquery.js">...
css边框以及其他常用样式 css之float样式 css之float实现作业实例 css之display样式 css之内外边距 本周作业以及思路 第15周 上节内容答疑 上节内容回顾 CSS内容补充之position CSS内容补充之overflow CSS内容之...
先看看这个使用jQuery做的双色表格的效果： 这个双色表格看上去应该觉得挺专业的，不过它用jQuery实现的确很简单。 第一步：写好css。 <style type="text/css"> th { /*表头样式*/ background:#0066FF; ...