jQuery 连续列表实现代码


Posted in Javascript onDecember 21, 2009

这个教程将告诉你如何运用jQuery添加连续的CSS类生成一个生动的列表。第二个示例是如何运用jQuery的prepend特性为留言列表添加一个留言计数。
可以先看看示例。
1a.添加jQuery代码
下载jQuery,在<head>标签之间如下添加jQuery代码:

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#step li").each(function (i) { 
i = i+1; 
$(this).addClass("item" i); 
}); 
}); 
</script>

jQuery将如下输出html源码:
jQuery 连续列表实现代码 
1b.CSS编码
相应的运用背景图片样式化<li>元素。(step1.png, step2.png, step3.png等等)。
#step .item1 { 
background: url(step1.png) no-repeat; 
} 
#step .item2 { 
background: url(step2.png) no-repeat; 
} 
#step .item3 { 
background: url(step3.png) no-repeat; 
}

jQuery 连续列表实现代码 
2a.添加连续的内容
你也可以运用这种技巧添加有序的内容,运用jQuery的prepend方法。下面就采用此种方法生成计数的留言列表。
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ $("#commentlist li").each(function (i) { 
i = i+1; 
$(this).prepend('<span class="commentnumber"> #' i '</span>'); 
}); 
}); 
</script>

将为每个<li>添加一个<span calss=”commentnumber”>计数</span>.
jQuery 连续列表实现代码 
2b.CSS
样式化<li>:position:relative 用position:absolute把.commentnumber放在留言条目的右上角。
#commentlist li { 
position: relative; 
} 
#commentlist .commentnumber { 
position: absolute; 
right: 0; 
top: 8px; 
}

 2b.CSS
样式化<li>:position:relative 用position:absolute把.commentnumber放在留言条目的右上角。
#commentlist li {
  position: relative;
}
#commentlist .commentnumber {
  position: absolute;
  right: 0;
  top: 8px;
}

jQuery 连续列表实现代码
Javascript 相关文章推荐
字符串的replace方法应用浅析
Dec 06 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
AngularJS中的promise用法分析
May 19 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 Javascript
jQuery解决iframe高度自适应代码
Dec 20 #Javascript
IE 上下滚动展示模仿Marquee机制
Dec 20 #Javascript
js控制div及网页相关属性的代码
Dec 19 #Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 #Javascript
JS 的应用开发初探(mootools)
Dec 19 #Javascript
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 #Javascript
javascript demo 基本技巧
Dec 18 #Javascript
You might like
一个简洁的多级别论坛
2006/10/09 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
vue 插件的方法代码详解
2019/06/06 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
Python中最大递归深度值的探讨
2019/03/05 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
香港化妆品经销商:我的公主
2016/08/05 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
项目经理聘任书
2014/03/29 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
债务授权委托书范本
2014/10/17 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
Java基础之线程锁相关知识总结
2021/06/30 Java/Android