首页 > 代码库 > 关于jquery的css的一些知识

关于jquery的css的一些知识

2024-08-20 22:02:08   221人阅读

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="http://www.mamicode.com/include/jquery/jquery-1.1.3.1.pack.js"></script>
  <link href="http://www.mamicode.com/1.css" rel="stylesheet" title="style1" type="text/css" />
  <link href="http://www.mamicode.com/2.css" rel="stylesheet" title="style2" type="text/css" />
  <link href="http://www.mamicode.com/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的一些知识


联系
我们