JS Jquery 遍历,筛选页面元素 自动完成(实现代码)

下面是关于JS Jquery遍历、筛选页面元素和实现自动完成的攻略。

什么是Jquery?

JQuery是一个快速，小巧且功能强大的JavaScript库。它使得处理HTML文档、事件处理、动画和Ajax等操作更加简单和快捷。JQuery提供了具有出色表现的API集合，这些API可用于访问和修改文档的结构与内容，处理事件、动画以及Ajax操作等。

遍历页面元素

页面元素的遍历包括访问、查找和遍历DOM元素。JQuery提供了大量的方法可用于访问、查找和遍历DOM元素。

访问

访问元素通常基于CSS选择器或Xpath路径。在JQuery中，常用的方法包括$()和find()。 $()是JQuery的主要函数，可以接受一个CSS选择器或HTML标签建立JQuery对象。例如：

// 通过id选择元素
var elem = $('#my-id');
// 通过class选择元素
var elems = $('.my-class');
// 通过标签选择元素
var elems = $('p');

如果想要在某个元素的子元素中查找匹配的元素，可以使用find()方法。例如：

// 只查找elem元素的后代元素中的所有p元素
var elems = elem.find('p');

查找

除了选择器选择之外，还可以使用许多其他的方法来查找或定位元素。例如，parent()和children()可用于在DOM树中向上或向下移动一层，而siblings()可用于在当前元素的同一级别上查找所有匹配的元素。

// 子元素(.child)查询
var children = $('#parent').children('.child');
// 祖先元素查询
var parents = $('#element').parents('.parent');
// 同级元素查询
var siblings = $('#element').siblings('.sibling');

遍历

在JQuery中，元素的遍历通常包括迭代、循环和过滤。对于这些操作，我们可以使用each()、for()和filter()等方法。

// 使用 each() 遍历选中的元素
$('.my-class').each(function() {
  console.log($(this).text());
});

// 使用 for 循环遍历选中的元素
var els = $('.my-class');
for(var i = 0; i < els.length; i++) {
  console.log($(els[i]).text());
}

// 使用 filter() 过滤元素
var els = $('.my-class').filter('.selected');

筛选页面元素

JQuery提供了许多可以筛选选中元素的方法。其中，filter()和not()是很常用的方法。

filter方法

filter()方法可以基于CSS选择器筛选或通过一个函数进行筛选。这个函数的返回值必须是可以转化成布尔值的。例如：

// 对于选中的元素，只保留包含'error'类的元素
$('.my-class').filter('.error');
// 对于选中的元素，只保留其文本内容包含'error'的元素
$('.my-class').filter(function() {
  return $(this).text().indexOf('error') > -1;
});

not方法

not()方法可以基于CSS选择器或一个函数的返回值来筛选不需要的元素。

// 基于类名来过滤
$('.my-class').not('.selected');
// 基于函数进行过滤，以下代码中移除所有包含'disabled'类名的元素。
$('.my-class').not(function() {
  return $(this).hasClass('disabled');
});

自动完成

自动完成是一种常见的用户界面模式，常用于输入字段上。本文中，我们将通过一个简单的例子来讲解如何实现自动完成功能。例如，在一个输入框中，当输入值包含'j'时，应该显示在数据库中检索到的以'j'开头的所有单词。

首先，我们要为输入框绑定keypress事件，以便在每次按键按下时触发。

$('#input').keypress(function() {
  // 处理查询事件
  var matches = [];
  var value = $(this).val();
  if(value.indexOf('j') === 0) {
    // 这里简单模拟了一些查询，得到了匹配值
    matches = ['JavaScript', 'jQuery', 'JSON'];
  }

  // 更新下拉框列表
  $('#matches').empty();
  for(var i = 0, length = matches.length; i < length; i++) {
    $('<li></li>').html(matches[i]).appendTo('#matches');
  }

  // 显示下拉框结果
  $('#matches').show();
});

在上面的代码中，当输入框的值发生变化时，我们检查输入框的值是否以'j'开头。如果是，我们查询'j'开头的所有单词，然后将其添加到结果列表中。最后，我们还需要显示下拉框结果。

完整代码示例：

$('#input').keypress(function() {
  // 处理查询事件
  var matches = [];
  var value = $(this).val();
  if(value.indexOf('j') === 0) {
    // 这里简单模拟了一些查询，得到了匹配值
    matches = ['JavaScript', 'jQuery', 'JSON'];
  }

  // 更新下拉框列表
  $('#matches').empty();
  for(var i = 0, length = matches.length; i < length; i++) {
    $('<li></li>').html(matches[i]).appendTo('#matches');
  }

  // 显示下拉框结果
  $('#matches').show();
});

HTML代码：

<input type="text" id="input" />
<ul id="matches"></ul>

以上就是关于JS Jquery遍历、筛选页面元素和实现自动完成的全部攻略。