<html>
<head>
<title> 根据span value的值，排序li </title>
<script type="text/javascript">
//冒泡排序，效率有点低
function sortList(){
var list=document.getElementById("oList");
var lis=list.childNodes;
for(var i=0,imax=lis.length-1; i<imax; i++){
for(var j=0; j<imax-i; j++){
if(parseInt(lis[j].childNodes[0].value)>
parseInt(lis[j+1].childNodes[0].value))
lis[j].swapNode(lis[j+1]);//交换元素
}
}
}
</script>
</head>
<body>
<ul id="oList">
<li><span value="3">三</span></li>
<li><span value="8">八</span></li>
<li><span value="2">二</span></li>
<li><span value="5">五</span></li>
<li><span value="7">七</span></li>
<li><span value="9">九</span></li>
<li><span value="4">四</span></li>
<li><span value="6">六</span></li>
<li><span value="1">一</span></li>
<li><span value="10">十</span></li>
</ul>
<INPUT TYPE = button VALUE = "Swap List" onclick = "sortList()">
</body>
</html>
分享到：
相关推荐
使用上面的排序函数，对获取到的值进行排序，然后根据排序结果重新排列列表项。可以使用`.each()`方法结合索引来重新插入元素： ```javascript var sortedListItems = $("li").detach().sort(sortAscending); $...
<li><span class="star"></span></li> <li><span class="star"></span></li> <li><span class="star"></span></li> <li><span class="star"></span></li> <li><span class="star"></span></li> ``` CSS部分...
- 可以看到，这里没有使用 `$index` 和 `$value`，而是传入了自定义的变量名 `i` 和 `lang`。 #### 五、嵌套模板 1. **使用 `{{tmpl}}` 嵌套其他模板**：可以使用 `{{tmpl}}` 语法来引用其他模板。 - 示例： ``...
(答案见下载资源) 上机任务1 ... 在chrome的控制台中输入jQuery...为某dom元素应用某css样式可以使用jQuery中的addClass方法，例如:将id为tt的div元素应用.bt样式，可用些语句：$("#tt").addClass("color","red");
由于jQuery tmpl已不再更新，开发者可能需要考虑使用其他模板引擎，如Handlebars、Mustache或者直接使用上述提到的现代前端框架。这些工具提供了更丰富的功能和更好的社区支持。 综上所述，jQuery tmpl是jQuery生态...
### Jquery使用小结 #### 一、Jquery简介与基础使用 JQuery 是一款流行的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等开发工作。通过本文，我们将对 JQuery 的基础知识进行总结，并...
<li><a href="#"><h3>餐厅名称</h3><p>地址信息</p><span class="ui-li-count">4.5</span></a></li> ... ``` jQuery Mobile 提供了丰富的事件处理，如 `pagecreate`、`pageshow`、`pagebeforechange` 等，可以...
### jQuery元素选择器使用方法技巧 #### 一、引言 在前端开发中，jQuery 是一个非常流行的 JavaScript 库，它极大地简化了 HTML 文档遍历、事件处理、动画等操作，并提供了强大的 DOM 操作能力。jQuery 的核心功能...
以上代码实现了基本的Select模拟功能，但可以根据实际需求进行扩展，例如添加搜索过滤、多选支持等。同时，这种模拟方法也能帮助我们在IE浏览器中获得更一致的视觉效果和交互体验。 需要注意的是，虽然这种方法可以...
`increaseQuantity()`和`decreaseQuantity()`函数会根据当前元素找到对应的商品数量输入框，并更新其值。同时，我们还需要确保数量始终是非负整数： ```javascript function increaseQuantity(btn) { var input = ...
在事件处理函数中，可以改变选中状态（比如通过添加/移除特定的CSS类），并更新页面上显示的值（比如一个假想的`<span>`元素来展示当前选择）。 4. 如果需要，还可以监听`<select>`的原始元素，确保其`value`与用户...
jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了DOM操作、事件处理、动画设计以及Ajax交互。在“jquery常用操作.pdf”中，主要涵盖了jQuery的选择器、DOM操作、AJAX以及JSON数据处理等多个方面的内容。 1. ...
通过使用jQuery，开发者可以以更少的代码实现更多的功能，提高了开发效率。 **2. 创建网页键盘的HTML结构** 网页键盘通常由一系列按钮组成，每个按钮代表一个字符或功能（如删除、确认等）。HTML结构可能如下： `...
本文将详细讨论如何使用jQuery来实现这一功能，同时提供一个自编的简单实用的模拟select效果的代码示例。 首先，让我们理解原生HTML `select` 元素的基本功能。`<select>` 元素用于创建一个下拉列表，用户可以从中...
通过使用 JQuery，开发者能够更加高效地编写功能强大的网页应用程序。本文将详细介绍 JQuery 的一些常用思路与方法，帮助读者快速掌握这门技术。 #### 二、基本概念与操作 ##### 1. 选择器 JQuery 提供了丰富的...
为了隐藏原生的下拉菜单并构建自定义的界面，可以创建一个包含`<ul>`和多个`<li>`的结构，然后使用CSS进行样式设计。 ```html <span class="selected-option">请选择</span> ;"> <li data-value="1">选项1</li>...
前端使用JQuery与Ajax技术获取后端返回的JSON数据，并根据用户选择的页数来动态渲染页面。 ```javascript function getJSONData(pageNumber) { $.getJSON("blackList.ce", function(data) { var totalCount = ...
如果你想得到 jQuery对象，可以使用 $(this) 函数。 jQuery 代码: $("img").each(function(){ $(this).toggleClass("example"); }); -----------------------------------------------------------------------...
《jQuery自定义Select控件深度解析》 在Web开发中，Select控件是常见...同时，我们可以根据实际需求进行扩展，以满足更复杂的应用场景。通过这种方式，我们不仅提高了用户体验，还能更好地融合到网页的整体设计之中。
然而，随着版本更新，新的API和性能优化不断引入，建议开发者使用更现代的jQuery版本以获得更好的性能和兼容性。 总结，jQuery 1.4.2版帮助文档详尽地涵盖了选择器、DOM操作、事件处理、效果动画以及Ajax等多个方面...