jQuery 连续列表实现代码
这个教程将告诉你如何运用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源码： 
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;
}
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>. 
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 连续列表实现代码
这个教程将告诉你如何运用jQuery添加连续的CSS类生成一个生动的列表.第二个示例是如何运用jQuery的prepend特性为留言列表添加一个留言计数. 可以先看看示例. 1a.添加jQuery代码 下载jQuery,在<head>标签之间如下添加jQuery代码: 复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script> <script typ
-
JQuery实现列表中复选框全选反选功能封装(推荐)
我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的id,class,现在想想我都不好意思叫他封装了),然后想到之前老大有写过这个功能去看下他怎么写的,真是没有对比就没有伤害啊,这才叫封装: $(':checkbox[data-check-target]').click(function () { var target = $(this).attr(
-
jQuery实现列表的全选功能
只需要几行代码就可以实现列表的全选功能,并且可以配合post请求执行后台的删除程序 js 复制代码 代码如下: function DelAlert(data) { if(data == 'error') { alert("错误-"); } else if(data == 'success') { alert("成功-");
-
全面解析DOM操作和jQuery实现选项移动操作代码分享
DOM: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>DOM选项移动操作</title> <style> select { width: px; height: px; } div { display: inline-block; width: px } </style> <
-
jQuery实现列表的增加和删除功能
具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <style> </style> </head> <body> <div> <table style="margin: 10px a
-
js、jquery实现列表模糊搜索功能过程解析
实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 2. 可以点击某一项进行选中列表项 3. 可以按下上.下.回车键来控制列表项 4. 按下回车键时则会选中列表项 5. 点击文本框中的下拉键头时会切换下拉框的显示/隐藏 6. 点击文本框外部时自动隐藏下拉框 先来预览一下效果吧! 列表中包含的列表项有: 北京.上海.杭州.安庆.大兴安岭.安阳.广州.贵阳.哈尔滨.合肥.邯郸.呼伦贝尔.淮南.黄山.济南.济宁.嘉兴.南昌.南通.南宁.南京 在预览
-
基于jQuery实现列表循环滚动小技巧(超简单)
看到一个很好的思路,记录一下 之前使用jQuery做滚动效果,在这两篇文章里有写:文一.文二,分别使用了scrollLeft()与scrollTop().scroll()来实现 后来看到一个demo,觉得思路很妙,想着可以用来做列表内容项的滚动,效果大概是这样的: 思路是这样的: 只要能够不停地把第一个item移动到末尾,其余的自会往上填补空缺,填补的过程用动画放慢些,就能有不断滚动的视觉效果了(数组删了第一个元素,再在末尾加上这个元素,等于把第一个元素移动到末尾:元素总量没有改变,但位置全发生
-
jQuery fadeOut 异步实例代码详解
定义和用法 fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果). 注释:隐藏的元素不会被完全显示(不再影响页面的布局). 提示:该方法通常与 fadeIn() 方法一起使用. 语法 $(selector).fadeOut(speed,easing,callback) 1. 概述 jquery实现动画效果的函数使用起来很方便,不过动画执行是异步的,所以要把自定义的操作放在回调函数里. 2. example <html> <body> <table id
-
jQuery自定义数值抽奖活动代码
本文实例为大家分享了jquery输入数字随机抽奖特效代码,供大家参考,具体内容如下 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery自定义数值抽奖活动代码 - 何问起</title><base target="_blank" /> <script type="text/ja
-
js实现无限级树形导航列表效果代码
本文实例讲述了js实现无限级树形导航列表效果代码.分享给大家供大家参考.具体如下: 这是一款js实现无限级树形下拉导航菜单,简洁实用,用到一个已封装好的JS类,有用的大家借鉴一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-unlimit-tree-style-nav-list-codes/ 具体代码如下: <meta http-equiv="Content-Type" content="text/html;