首页 » 网络技术 » 正文

【jQuery入门】选择器方法使用总结

2022-08-19 网络技术 1832 views

在 jQuery 中对 HTML 元素（例如div 标签或 p 标签）进行操作时，如果需要指定执行该处理的元素。

指定元素的基本语法如下：

$('...')
// …指的是div和p等标签名

例如HTML如下：

<html>
<head></head>
<body>
    <div>你好啊</div>
</body>
</html>

用jQuery指定div标签元素的写法如下：

$('div')

在上面的例子中，HTML 语句中只有一个 div 标签，所以 '<div>你好啊</div>' 的位置可以简单地通过在 jQuery 中指定 div 元素来识别。

但是如果 HTML 看起来像这样：

<html>
<head></head>
<body>
    <div>你好啊</div>
    <div>外面天气怎么样</div>
</body>
</html>

如果我们只想对 jQuery 中的两个 <div> 之一应用处理，则不能仅通过指定 $('div') 来实现。因为这样指定适用于上面例子中的两个 div 标签，而我们只想指定一个，所以我们接下来介绍另外一种方式。

filter()方法的用法：

$('元素').filter('进一步过滤指定元素条件')

我们看一个具体的例子：

<div>
  <p id="greeting">你好啊</p>
  <p id="purpose">外面天气怎么样</p>
</div>

[jQuery]

$('p').filter('#greeting').after('<p>小明</p>')

执行结果：

<div>
  <p id="greeting">你好啊</p>
  <p>小明</p>
  <p id="purpose">外面天气怎么样</p>
</div>

jQuery中使用after方法是在指定元素之后添加参数元素的函数。

上面的 HTML 示例中有两个 <p> 标记。

因此可以看到filter方法用于缩小元素应用于哪些<p>标记。

'#greeting'被指定为过滤方法的参数，并且通过将初始#添加到 <p> 标记的 id 值，指定 id 值为greeting的 <p> 标记。

这样当无法仅使用 $('...') 来缩小元素时，将使用filter方法。

【jQuery入门】选择器方法使用总结

not()方法的用法

具有与filter()方法相似功能的方法有not()方法。

这个not()方法也可以将not()之后的要素从筛选中排除。

我们看下具体的例子：

<div>
  <p id="greeting">你好啊</p>
  <p id="purpose">外面天气怎么样</p>
</div>

[jQuery]

$('p').not('#purpose').after('<p>小明</p>')

执行结果：

<div>
  <p id="greeting">你好啊</p>
  <p>小明</p>
  <p id="purpose">外面天气怎么样</p>
</div>

与刚才filter()方法的例子相似，这次是使用not()方法将after()方法应用于“#purpose”的id值，即指定的是<p>中“#purpose”之外的其他标签，也就是剩余的“#greeting”的<p>标签。

filter()方法的用法

我们再来看看filter()方法的使用方法吧。

与回调函数一起使用

上文中我们是在HTML的<p>标签等中设定了id值的情况下，通过filter()方法进行了缩小。

但是如何对没有设定id值的标签进行元素的筛选呢？

实例：

<div>
  <p>张三李四</p>
  <p>张三王五</p>
  <p>小明小红</p>
  <p>小丽小微</p>
</div>

[jQuery]

$('p').filter(function(index,element){
    return el.textContent.startsWith('张三');
}).replaceWith('<p>赵六</p>')

执行结果：

<div>
  <p>赵六</p>
  <p>赵六</p>
  <p>小明小红</p>
  <p>小丽小微</p>
</div>

filter()方法中回调函数：

function(index,element){
    return el.textContent.startsWith('张三');
}

在上述的回调函数中，在<p>标签的元素中，缩小到了具有在‘张三’开头文本的<p>标签。

缩小范围后用replaceWith方法替换字符串。

filter()方法除了可以通过选择器指定元素进行筛选之外，还可以利用回调函数进行筛选。

本文来源：词雅网

本文地址：https://www.ciyawang.com/jq-75.html

本文使用「 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 」许可协议授权，转载或使用请署名并注明出处。

相关推荐

最近发表

标签列表

热门文章

搜索
返回顶部