017 jquery中对样式的操作
1.样式操作
2.css-dom操作
3.程序
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
text-align: center;
}
a {
color: #04D;
text-decoration: none;
}
a:hover {
color: #F50;
text-decoration: underline;
}
.SubCategoryBox {
width: 600px;
margin: 0 auto;
text-align: center;
margin-top: 40px;
}
.SubCategoryBox ul {
list-style: none;
}
.SubCategoryBox ul li {
display: block;
float: left;
width: 200px;
line-height: 20px;
}
.showmore {
clear: both;
text-align: center;
padding-top: 10px;
}
.showmore a {
display: block;
width: 120px;
margin: 0 auto;
line-height: 24px;
border: 1px solid #AAA;
}
.showmore a span {
padding-left: 15px;
background: url(img/down.gif) no-repeat 0 0;
}
.promoted a {
color: #F50;
}
</style>
<script type="text/javascript" src="scripts/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
//1. hasClass(): 某元素是否有指定的样式
alert($("div:first").hasClass("SubCategoryBox")); //true //2. 移除样式
$("div:first").removeClass("SubCategoryBox"); alert($("div:first").hasClass("SubCategoryBox")); //3. 添加样式
$("div:first").addClass("SubCategoryBox"); //4. 切换样式: 存在, 则去除; 没有, 则添加.
$(".showmore").click(function() {
$("div:first").toggleClass("SubCategoryBox");
return false;
}); //5. 获取和设置元素透明度: opacity 属性
alert($("div:first").css("opacity")); $("div:first").css("opacity", 0.5); //6. width 和 height
alert($("div:first").width());
alert($("div:first").height()); $("div:first").width(400);
$("div:first").height(80); //7. 获取元素在当前视窗中的相对位移: offset().
//其返回对象包含了两个属性: top, left. 该方法只对可见元素有效
alert($("div:first").offset().top);
alert($("div:first").offset().left); });
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a><i>(30440) </i></li>
<li><a href="#">索尼</a><i>(27220) </i></li>
<li><a href="#">三星</a><i>(20808) </i></li>
<li><a href="#">尼康</a><i>(17821) </i></li>
<li><a href="#">松下</a><i>(12289) </i></li>
<li><a href="#">卡西欧</a><i>(8242) </i></li>
<li><a href="#">富士</a><i>(14894) </i></li>
<li><a href="#">柯达</a><i>(9520) </i></li>
<li><a href="#">宾得</a><i>(2195) </i></li>
<li><a href="#">理光</a><i>(4114) </i></li>
<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li><a href="#">明基</a><i>(1466) </i></li>
<li><a href="#">爱国者</a><i>(3091) </i></li>
<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>
017 jquery中对样式的操作的更多相关文章
- js进阶 11-3 jquery中css属性如何操作
js进阶 11-3 jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...
- JavaScript jQuery 中定义数组与操作及jquery数组操作
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- JavaScript jQuery 中定义数组与操作及jquery数组操作 http://www.jb51.net/article/76601.htm
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- js进阶 11-1 jquery中的页面内容操作的三个方法
jquery中的页面内容操作的三个方法 一.总结 一句话总结:记三个方法即可.text,html,val.因为这里是方法,所以设置值的是后面方法的参数. 1.jquery中的页面内容操作的三个方法? ...
- jQuery中 对标签元素操作（2）
一.属性操作 1.获取属性和设置属性 例如下jQuery代码: var $para=$("p"); //获取<p>节点 var p_txt=$par ...
- jquery中对 iframe的操作
我们先看一下 JQUERY中的对像 contents() 的帮助文件 contents() 概述 查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容 示例 描述: ...
- jquery 中json数组的操作(转）
在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多. 今天试过json[i].remove(),json.remove(i)之后都不行,看网页的DOM对象中好像J ...
- jQuery中cookie的简单操作
jQuery 可以通过 jquery.cookie.js 插件来操作 Cookie. 用NuGet安装:PM>Install-Package js-cookie -Version 官网:http ...
- jQuery中的文档操作处理（五）：append()、prepend()、after()、before()、wrap()、wrapAll()、wrapInner()、clone()等
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
随机推荐
- 架构师成长之路1.2-多功能系统信息统计工具dstat
点击返回架构师成长之路 架构师成长之路1.2-多功能系统信息统计工具dstat dstat命令是一个用来替换vmstat.iostat.netstat.nfsstat和ifstat这些命令的工具,是一 ...
- debian9部署ownCloud
ownCloud是一个开源的私有云存储,支持外接存储,具有良好的扩展性.ownCloud是传统的C/S架构,支持目前各大流行平台.服务端客户端实时同步,使用体验非常好. ownCloud is Wed ...
- bzoj1030: [JSOI2007]文本生成器（AC自动机+DP）
第一次写这类题...懵 直接计算答案不好计算,所以补集转化求不合法的方案. 首先考虑朴素的DP,设$f(i, s)$表示前$i$个字符,字符串为$s$的方案数,且任意一个给定串都不存在$s$中. 我们 ...
- 解题：POJ 2888 Magic Bracelet
题面 这题虽然很老了但是挺好的 仍然套Burnside引理(因为有限制你并不能套Polya定理),思路和这个题一样,问题主要是如何求方案. 思路是把放珠子的方案看成一张图,然后就巧妙的变成了一个经典的 ...
- VS之解决方案文件夹
Visual Studio提供了一种特殊的文件夹,它可以帮助组织大型解决方案.它们的名称也恰如其分,叫做“解决方案文件夹”. 注意 解决方案文件夹是解决方案资源管理器中的一种组织工具,创建这样的文 ...
- Myeclipse/STS 首次在本地部署配置一个Spring MVC 项目 (十二)
1. 在本地新创建一个文件夹 ,做为项目工作空间; 2. 用 Myeclipse 或 STS 进入该文件夹,该文件夹就成为项目的工作空间: 3. 就要进 窗口-首选项,配置: 环境默认编码: 1> ...
- CSS-3 文字阴影—text-shadow 的使用
text-shadow还没有出现的时候,大家在网页中的阴影就是用ps一张图片作为背景.那么现在有了CSS3的这个属性,日后我们的工作会更简洁些. text-shadow之前出现过,不过不久就被Pass ...
- 在OS X 10.9配置WebDAV服务器联合NSURLSessionUploa…
CHENYILONG Blog 在OS X 10.9配置WebDAV服务器联合NSURLSessionUploadTask实现文件上传iOS7推出的NSURLSession简化了NSURLConn ...
- 【CTF WEB】函数绕过
函数绕过 <?php show_source(__FILE__); $c = "<?php exit;?>"; @$c.=$_GET['c']; @$filena ...
- 简单解读linux的/proc下的statm、maps、memmap 内存信息文件分析【转】
转自:https://blog.csdn.net/sctq8888/article/details/7398776 转载自:http://hi.baidu.com/deep_pro/blog/item ...