精华内容
下载资源
问答
  • 主要介绍了html无序列表标签和有序列表标签使用示例,需要的朋友可以参考下
  • 利用jQuery对无序列表排序的原理是:获取到无序列表中的所有列表项,并转成数组形式,使用JavaScript函数其进行排序后再次输出。其中使用到的jQuery函数有ready()、get()、text()、each()、append()和JavaScript...
  • 在网页开发中,经常要用到无序列表。事实上在符合W3C标准的div+css布局中,无序列表被大量使用,ASP.NET虽然内置了BulletedList控件,用于创建和操作无序列表,但感觉不太好用
  • 利用jQuery对无序列表排序

    千次阅读 2016-07-12 16:11:46
    2015-07-16 11:53 409人阅读 评论...利用jQuery对无序列表排序的原理是:获取到无序列表中的所有列表项,并转成数组形式,使用JavaScript函数其进行排序后再次输出。其中使用到的jQuery函数有ready()、get()、text

      409人阅读  评论(0)  收藏  举报
      分类:
     
     

    利用jQuery对无序列表排序

    利用jQuery对无序列表排序的原理是:获取到无序列表中的所有列表项,并转成数组形式,使用JavaScript函数对其进行排序后再次输出。其中使用到的jQuery函数有ready()、get()、text()、each()、append()和JavaScript函数sort()。

    1.jQuery函数介绍

    (1)jQuery函数get()--获取匹配元素集合

    该函数取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,实际上是元素数组)。其语法形式如下:

      
    1. object.get() 

    注:如果你想要直接操作DOM对象而不是jQuery对象,这个函数非常有用。

    (2)jQuery函数text()--获取和设置元素内容

    该函数获取和设置匹配元素的文本内容。其语法形式如下:

      
    1. object.text([val|fn]) 

    注:val和fn参数可选。val是设置元素的文本内容值;fn(index,text)函数返回一个字符串,接受两个参数,index为元素在集合中的索引位置,text为原先的text值。

    (3)jQuery函数append()--向元素追加内容

    该函数向每个匹配的元素内部追加内容。其语法形式如下:

      
    1. object.append(content|fn) 

    注:这个操作与对指定的元素执行appendChild方法并将它们添加到文档中的情况类似。content参数表示追加的内容;fn(index,html)返回一个HTML字符串,用于追加到每一个匹配元素内部,接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值。

    2.JavaScript函数介绍

    JavaScript函数sort()--元素排序,用于对数组元素进行排序。其语法形式如下:

      
    1. arrayObject.sort([sortby]) 

    注:sortby可选,规定排列顺序,必须是函数。返回值为排序后的数组本身。如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序。说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

    如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数a和b,其返回值如下:若a小于b,在排序后的数组中a应该出现在b之前,则返回一个小于0的值。若a等于b,则返回0。若a大于b,则返回一个大于0的值。

    3.功能实现

    实现无序列表项排序功能的步骤如下。

    (1)获取所有的列表项,并将其装入数组。

    (2)对数组对象进行排序。

    (3)将排好序的数组重新填充到无序列表中。

    首先,把jQuery库引入进来:

      
    1. <script language="JavaScript" src="jslib/jquery-1.6.js"></script> 

    然后,添加完整代码:
      
    1. <script language="JavaScript" type="text/JavaScript"> 
    2. 2 $(document).ready(function(){  
    3. 3   var items = $(".orderobj li").get();    //获取所有待排序li装入数组items  
    4. 4   items.sort(function(a,b)                //调用JavaScript内置函数sort  
    5. 5   {  
    6. 6       var elementone = $(a).text();  
    7. 7       var elementtwo = $(b).text();  
    8. 8       if(elementone < elementtwo) return -1;   
    9. 9       if(elementone > elementtwo) return 1;  
    10. 10      return 0;  
    11. 11  });  
    12. 12  
    13. 13  var ul = $(".orderobj");  
    14. 14  $.each(items,function(i,li)       
    15.                 //通过遍历每一个数组元素,填充无序列表  
    16. 15  {  
    17. 16      ul.append(li);  
    18. 17  });  
    19. 18 });  
    20. 19 </script> 

    以上代码通过数组排序并重新填充无序列表使得列表项有序。具体效果如图4.11所示。

     
    图4.11  无序列表项排序

    原文:http://book.51cto.com/art/201207/350481.htm

    0
    展开全文
  • 无序列表

    2016-10-11 10:57:03
    type=circle时无序列表: 香蕉 苹果 大鸭梨 type=disc时的无序列表: 榴莲 石榴 葡萄皮 type=square时的无序列表: 李佳乐 最美 哈哈哈
    <body>
    <h4>type=circle时无序列表:</h4>
    <ul type="circle">
    <li>香蕉</li>
    <li>苹果</li>
    <li>大鸭梨</li>
    </ul>
    <h4>type=disc时的无序列表:</h4>
    <ul type="disc">
    <li>榴莲</li>
    <li>石榴</li>
    <li>葡萄皮</li>
    </ul>
    <h4>type=square时的无序列表:</h4>
    <ul type="square">
    <li>李佳乐</li>
    <li>最美</li>
    <li>哈哈哈</li>
    </ul>
    </body>

    展开全文
  • js无序列表

    2015-02-15 21:55:16
    使用js实现无序列表,适合每一位初学者的小例子。
  • 主要介绍了jQuery实现对无序列表的排序功能,涉及jQuery与javascript常见的文本操作函数与sort排序函数的相关使用方法,具有一定参考借鉴价值,需要的朋友可以参考下
  • 有这样的一个需求,内容为一个无序列表,想让列表的项目符号必须采用缩略图,本文使用CSS方法进行布局实现,大家可以参考下
  • 无序列表ul

    千次阅读 2018-11-29 18:10:48
    给一堆数据添加列表语义并且这一堆数据都无先后之分,是使用最多的列表,定义列表其次,有序列表最少(可以用无序列表来实现)。 英文:unordered list 2.无序列表格式 &lt;h2&gt;标题&lt;/h2&gt; &...

    1.无序列表含义

    给一堆数据添加列表语义并且这一堆数据都无先后之分,是使用最多的列表,定义列表其次,有序列表最少(可以用无序列表来实现)。
    英文:unordered list

    2.无序列表格式

    <h2>标题</h2>
    <ul>
        <li>内容</li>
    </ul>
    

    3.举例说明

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ul标签-无序列表</title>
    </head>
    <body>
    <h2>中国城市</h2>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>安徽</li>
        <li>湖南</li>
    </ul>
    </body>
    </html>
    

    显示内容如下:
    在这里插入图片描述

    4.注意

    (1)ul标签是用来给一堆数据添加列表语义的,而不是给他们添加小圆点的。(小圆点可在css中删除);
    (2)ul标签和li标签是一个整体,所以一般情况下ul标签和li标签都是一起出现的,不会单独使用;
    (3)注意li:li其实是list item(列表条目)的缩写。

    5.应用场景

    (1)新闻列表
    (2)商品列表
    (3)导航条

    6.通过css来改变无序列表样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ul标签-无序列表</title>
        <!--css改变无序列表样式-->
        <style type="text/css">
            ul{
                list-style: none;
            }
            li{
                background-color: #01AAED;
                height: 50px;
                width: 150px;
                /*将无序列表改成导航条样式*/
                float: left;
                text-align: center;
                line-height: 50px;
            }
        </style>
    </head>
    <body>
    <h2>中国城市</h2>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>安徽</li>
        <li>湖南</li>
    </ul>
    </body>
    </html>
    

    显示页面如下:

    在这里插入图片描述
    这是简单来实现一下,不要介意,方便读者更好理解。

    展开全文
  • 无序列表进行布局,然后用块级元素div进行结合使用 ul { list-style: none } * { margin: 0; padding: 0; } div { width: 1150px; height: 400px; margin: 50px auto; border: 1px solid red; overfl
  • ul标签用来创建一个无序列表 <ul></ul> li标签用于向无序列表里面添加内容 <ul> <li>李老</li> <li>李王</li> <li>李刘</li> <li>李哥</...

    无序列表

    ul标签用来创建一个无序列表

    <ul></ul>
    

    li标签用于向无序列表里面添加内容

    <ul>
    		<li>李老</li>
    		<li>李王</li>
    		<li>李刘</li>
    		<li>李哥</li>
    </ul>
    

    在这里插入图片描述

    type用于改变li打印的内容前面的符号样式

    <ul type="circle">
    			<li>李老</li>
    			<li>李王</li>
    			<li>李刘</li>
    			<li>李哥</li>
    		</ul>
    

    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<ul type="circle">
    			<li>李老</li>
    			<li>李王</li>
    			<li>李刘</li>
    			<li>李哥</li>
    		</ul>
    		<!--
            	ul标签创建一个ul列表 里面包含li标签 li标签用于向无序列表里面添加内容
            	可以在ul标签里面通过type=""来修改无序列表表内容前面符号的样式
            	某些浏览器不太兼容type设置的样式
            -->
    	</body>
    </html>
    
    

    设置无项目符号的无序列表
    因某些浏览器和其他浏览器对无序列表前面的项目符号显示的样式不同
    所以我们可以设置不要项目符号或者直接在ul标签里面用内联样式 style="list-style: none"
    如果需要设置项目符号,则可以采用为li设置背景图片的方式设置
    在这里插入图片描述

    有序列表

    用ol替代无序列表中的ul就可创建一个有序列表
    何为有序列表:
    即,每一项有标号,各项互相之间有一定顺序叫有序列表
    在这里插入图片描述
    当然,我们也可以用type设置序号样式,type默认是"1"即阿拉伯数字序号
    “a” "A"分别表示小写和大写的英文字母序号,即ABCDE…或abcde…
    “i” "I"分别表示小写和大写的罗马数字序号,即
    在这里插入图片描述
    在这里插入图片描述
    定义列表
    用来对某个东西进行定义。它有两个标签,dt和dd,dt用来表示被说明的对象,dd表示,对象的定义。
    在这里插入图片描述

    展开全文
  • 1.无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。 无序列表始于 <ul 标签。每个列表项始于 <li。 2.无序列表的type属性有三个值 disc:表示实心小圆点 circle:表示空心...
  • 下面小编就为大家带来一篇浅谈html有序列表、无序列表与定义列表。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 有序列表、无序列表、定义列表 三种列表标签和语义 标签 语义 <u1></u1> 无序列表 <o1></o1> 有序列表 <d1></d1> 定义列表 无序列表 无序列表顾名思义就是“没有...
  • html5有序列表无序列表自定义列表

    千次阅读 2020-09-06 20:03:45
    1.无序列表 无序列表代码如下 <h2>1.无序列表</h2> <p>你喜欢的水果有哪些</p> <ul> <li>榴莲</li> <li>苹果</li> <li>香蕉</li> <li&...
  • 有序列表和无序列表

    2019-09-20 15:06:20
    有序列表中默认的type类型是数字,而且是从1开始的。它有两个属性:type、start。 type:有五个属性值:1、a、A、i、I(罗马数字),表示列表前缀的格式...无序列表默认的前缀样式是实心圆 从字面意思也很容易看出来 ...
  • HTML无序列表

    2020-07-31 11:43:57
    <!DOCTYPE html> <html lang="en"> <head> ...meta charset="UTF-8">...无序列表<...无序列表使用</h2> <h3>type值为square类型的列表</h3> <ul type="square"> .
  • 无序列表、有序列表、定义列表 2018.01.03 --&gt; &lt;body&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;列表的使用&lt;/title&gt;...
  • 用于组织数据的列表 ...在后面的CSS样式学习中将大量使用到列表元素的高级作用。  4.4.1 列表的结构组成 ...大部分网页应用中的列表均采用无序列表,其列表标签采用<ul></ul>,编写方法如下:  <li
  • 有序列表和无序列表的不同类型

    千次阅读 2019-06-12 15:15:54
    定义:无序列表是一个项目的列表,此列项目默认使用粗体圆点(典型的小黑圆圈)进行标记。 无序列表始于 ul 标签。每个列表项始于 li 默认类型:ul type=”disc” 因为是默认类型,所以不需要写出来,直接ul即可。 ...
  • jQuery无序列表的下拉菜单是一款jquery mnmenu插件。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 190,061
精华内容 76,024
关键字:

对无序列表使用