如何使用jQuery实现基于条件的搜索查询、实时数据抓取及升降序排列功能？

本文共计856个文字，预计阅读时间需要4分钟。

本文实例讲述了jQuery实现条件搜索、实时取值及升降排序的方法。分享给广大开发者供参考，具体如下：

1. 鼠标点击获取搜索条件中的选中值 方法：使用jQuery的 `.val()` 方法 代码示例： javascript function getAttrValue() { return $('#searchCondition').val(); }

2. 实时取值 方法：监听输入框的 `input` 事件，使用 `.val()` 获取当前值 代码示例： javascript $('#searchCondition').on('input', function() { var currentValue=$(this).val(); console.log('当前搜索条件值：' + currentValue); });

3. 升降排序 方法：监听排序按钮的点击事件，根据排序方向重新排列元素 代码示例： javascript $('#ascSortBtn').on('click', function() { var $items=$('#resultList').children(); $items.sort(function(a, b) { return $(a).data('order') - $(b).data('order'); }); $('#resultList').($items); });

$('#descSortBtn').on('click', function() { var $items=$('#resultList').children(); $items.sort(function(a, b) { return $(b).data('order') - $(a).data('order'); }); $('#resultList').($items); });

本文实例讲述了jQuery实现条件搜索查询、实时取值及升降序排序的方法。分享给大家供大家参考，具体如下：

一。鼠标点击获取搜索条件中的被选中的值

创建方法 getAttrValue() 方法，每次的 .click 都要调用 function getAttrValue(){}

例如，把选中的值给到属性 data-value 。只需要每次点击，获取 li.active 的子集 a 的 .attr("data-value")即可

eg:

var pubTime = $(getArr[0]).find("li.active").children().attr("data-value");

pubTime 就是第一个搜索项的值

二。排序方式的状态（主要应用于table 内容的升降序排列需求）

排序方式分为三种状态：

1. 默认灰色未选中
2. 点击默认降序 .desc
3. 再点击升序 .asc

CSS ：

.search-sort li a, .search-sort li a.asc, .search-sort li a.desc { background-image : sort.png }--灰色图标 .search-sort li.active a.desc { background-image: desc.png }--向下的蓝色图标 .search-sort li.active a.asc { background-image: asc.png !important; }--向上的蓝色图标

JS ：默认第一个排序降序被选中。切换排序方式，默认展示降序。排序方式互斥

// 第一行： li a.asc--展示灰色图标 // 第二行: 第一次点击 li 时， li.active a.desc，展示向下的蓝色图标，并且清除 siblings .active ；同时，其他的排序方式默认 asc ； // getAttrValue()---每次选中就走一次输出 $(".search-sort li a").addClass("asc"); $(".search-sort li").each(function(){ $(this).click(function(){ $(this).addClass("active"); $(this).children("a").addClass("desc").toggleClass("asc"); $(this).siblings().removeClass("active"); $(this).siblings().children().removeClass("desc").addClass("asc"); getAttrValue(); }) }); // 默认第一个时间降序被选中 $($(".search-sort").children()[0]).addClass("active") $($(".search-sort").children()[0]).children().addClass("desc").removeClass("asc");

三。获取排序方式的值

li.active a[class=" desc / asc "]

/* * sortArr // 排序方式 给出一个数组 * 根据 index 脚标找 sortArr 对应的值 * */ var sortArr = ["sortTime","sortTotalComment","sortIncreaseComment"]; //三种排序方式 var sortIndex = $(getArr[getLen-1]).find("li.active").index(); // 当前那个按钮被选中,返回脚标 var sortLast = $(getArr[getLen-1]).find("li.active").children().attr("class"); //返回被选中按钮的 class name var sortLastString = sortLast.substring(11); // substring(11) 截取从11到最后的字符串 == desc / desc asc var dataValue = sortArr[sortIndex].concat(sortLastString); // .concat() 生成新的字符串

dataValue 就是排序方式的值

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。