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 相关文章推荐
js跟随滚动条滚动浮动代码
Dec 31 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 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
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
详解python的数字类型变量与其方法
2016/11/20 Python
python常见排序算法基础教程
2017/04/13 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
python五子棋游戏的设计与实现
2019/06/18 Python
如何在python中写hive脚本
2019/11/08 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
数控专业应届生求职信
2013/11/27 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
活动总结报告范文
2014/05/04 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
政府四风问题整改措施
2014/10/04 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
新员工辞职信范文
2015/05/12 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技