"属性过滤选择器示例 - 经典网页js教程_实用类"
属性过滤选择器是JavaScript（特别是jQuery库）中用于精准定位和操作DOM元素的重要工具。这些选择器允许开发者根据元素的特定属性来选取元素集合，进而进行样式修改、事件绑定等操作。以下是对描述中涉及的属性过滤选择器的详细解释：
1. **含有属性title的div元素**：
使用`$('div[title]')`可以选择所有具有`title`属性的`div`元素。这将选取所有设置了`title`属性的`div`，无论属性值是什么。
2. **属性title值等于"test"的div元素**：
使用`$('div[title="test"]')`可以选取`title`属性值为`"test"`的`div`元素。
3. **属性title值不等于"test"的div元素(没有属性title的也将被选中)**：
使用`$('div:not([title="test"])')`或`$('div:not([title])')`可以选取`title`属性值不等于`"test"`或者根本没有`title`属性的`div`元素。
4. **属性title值以"te"开始的div元素**：
使用`$('div[title^="te"]')`可以选取`title`属性值以`"te"`开头的`div`元素。
5. **属性title值以"est"结束的div元素**：
使用`$('div[title$="est"]')`可以选取`title`属性值以`"est"`结尾的`div`元素。
6. **属性title值含有"es"的div元素**：
使用`$('div[title*="es"]')`可以选取`title`属性值中包含子字符串`"es"`的`div`元素。
7. **选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素**：
首先选取所有具有`id`属性的`div`元素，然后在这些元素中进一步筛选出`title`属性值包含`"es"`的元素。可以这样写：`$('div[id][title*="es"]')`。
此外，示例代码中还提到了子选择器和过滤选择器的其他用法：
- **子选择器**：
`function sure2()`中的`$("div > p")`是一个子选择器的例子，它会选取所有直接位于`div`元素之下的`p`元素。
- **过滤选择器**：
`$("#orderList li a")`选取了`id`为`"orderList"`的元素下的所有`li`元素的`a`子元素，并将其颜色设置为红色。`$("#orderList li:even")`则选择了列表项中的偶数项，应用鼠标悬停时的颜色变化效果。
- **jQuery的is()方法**：
提示中提到，可以使用`is()`方法来判断元素是否可见，如`$(element).is(":visible")`会返回一个布尔值，表示元素当前是否可见。
通过这些选择器，开发者可以更精确地控制页面上的元素，实现更复杂的交互和动态效果。在实际开发中，了解并熟练运用这些选择器能极大地提高代码的效率和可读性。
我的内容管理
展开
