Query实例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,2881064151以及基本的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的一些知识的更多相关文章

  1. jQuery和CSS 3定制HTML 5视频播放器

    目前,随着越来越多的浏览器开始支持更多的HTML5新特性,开发者也逐渐关注HTML5的开发.在众多HTML5的新特性中,视频方面的新特性是 很值得开发者和用户关注的.现在,只需要有支持HTML5的浏览 ...

  2. jquery-8 jquery如何处理css样式

    jquery-8  jquery如何处理css样式 一.总结 一句话总结: 1.如何获取网页的三个高? 1)可视区域的高$(window).height(); 2)文档总高度$(document).h ...

  3. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  4. js进阶 11-3 jquery中css属性如何操作

    js进阶 11-3  jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...

  5. jQuery属性/CSS使用例子

    jQuery属性/CSS 1..attr() 获取匹配的元素集合中的第一个元素的属性的值  或 设置每一个匹配元素的一个或多个属性. 例1:获取元素的属性的值 <p title="段落 ...

  6. jquery的css详解（二）

    jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...

  7. jquery的css详解（一）

    通过阅读源码可以发现css是jq的实例方法.而在内部调用jq的工具方法access来实现的,对该方法不了解的朋友请点击 -> jquery工具方法access详解 在access的回调中做了一个 ...

  8. jquery修改css样式，样式带!important

    由于需求的需要,今天在用jquery修改一个弹出框的样式的时候,由于有一个按钮有padding-left:12px;导致内间距空出来的这一块颜色用普通的方式无法改变. 普通的jquery修改css的方 ...

  9. 使用jquery修改css中带有!important的样式属性

    当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...

随机推荐

  1. linux 实时查看Tomcat日志信息

    cd /../tomcat/logs 进入tomcat/logs/文件夹下  # tail -f catalina.out

  2. [web] spring boot 整合MyBatis

    1.maven依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...

  3. 03-Linux各目录及每个目录的详细介绍

    Linux各目录及每个目录的详细介绍 [常见目录说明] 目录 /bin 存放二进制可执行文件(ls,cat,mkdir等),常用命令一般都在这里. /etc 存放系统管理和配置文件 /home 存放所 ...

  4. iOS 添加Resource bundle target(静态库中使用图片等资源)

    一.首先将资源文件打包成bundle 新建工程:File -> New -> Project... -> OS X -> Framework & Library -&g ...

  5. Extended VM Disk In VirtualBox or VMware (虚拟机磁盘扩容)

    First, Clean VM all snapshot, and poweroff your VM. vmdk: vmware-vdiskmanager -x 16GB myDisk.vmdk vd ...

  6. curl 上传文件

    1)在 php 5.5.0 之前,如果使用 @+文件路径的文件上传文件,具体看这里:http://www.cnblogs.com/tujia/p/5938463.html 2)php 5.5.0 之后 ...

  7. 【代码审计】iZhanCMS_v2.1 后台任意文件删除漏洞分析

      0x00 环境准备 iZhanCMS官网:http://www.izhancms.com 网站源码版本:爱站CMS(zend6.0) V2.1 程序源码下载:http://www.izhancms ...

  8. java中调用groovy

    Groovy在Java中的应用,做几个小例子以备查 package com.boco.efficiency.groovy; import groovy.lang.Binding; import gro ...

  9. mysql5.6.34-debug Source distribution在树莓派下编译的几个错误

    raspberrypi下编译mysql5.6 debug版源码. 1. 启动错误 和mysqld相关的文件及文件夹权限必须设置为mysql用户可读可写可执行,特别是/var/run/mysqld/目录 ...

  10. win10找回Windows照片查看器