index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>过滤选择器</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div>我们的域名为：
<strong>访问</strong>
http://www.onestopweb.cn/</div>
<div style="display:none;">我们的域名为：http://onestopweb.cn/</div>
<div> </div>
<div></div>
<ul id="box">
<li>列表1</li>
<li>列表2</li>
<li class="red" title="列表3">列表3</li>
<li class="red">列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>
<ul>
<li>列表1</li>
</ul>
<div>
<h4>我是标题</h4>
</div>
<input type="text" />
</body>
</html>
demo.js
$(function(){
//$('li:first-child').css('background','#ccc');
//$('li:last-child').css('background','#ccc');
//$('li:only-child').css('background','#ccc');
//$('li:nth-child(even)').css('background','#ccc');
//$('li:nth-child(odd)').css('background','#ccc');
//$('li:nth-child(2)').css('background','#ccc');
//$('li:nth-child(3n)').css('background','#ccc');
//$('li:nth-child(3n+1)').css('background','#ccc');
//alert($('.red').is('li'));
//alert($('.red').is('div'));
//alert($('.red').is($('Li')));
//alert($('.red').is($('DIv')));
//alert($('.red').is($('li').get(2)));
//alert($('.red').is($('li').eq(2)));
/*
alert($('.red').is(function(){
//alert($(this).get(0));
return $(this).attr('title') == '列表3';
}));
//注意，必须使用 $(this) 来表示要判断的元素，否则，不管 function 里面是否返回 true 或 false 都和调用的元素无关了
*/
//alert($('li').eq(2).hasClass('red'));
//$('li').slice(2,9).css('background','#ccc');
//$('li').slice(2).css('background','#ccc');
//$('li').slice(0,-2).css('background','#ccc');
//$('li').slice(2,-2).css('background','#ccc');
//alert($('#box').find('li').end().get(0));
//alert($('#box').find('li').parent().get(0));
//$('#box').next('ul').end().css('background','#ccc');
//alert($('div:first').children().size());
//alert($('div:first').contents().size());
//$('li').filter('.red,:first,:last').css('background','#ccc');
//$('li').filter('.red,:first-child,:last-child').css('background','#ccc');
$('li').filter(function(){
return $(this).attr('class') == 'red' && $(this).attr('title')=='列表3';
}).css('background','#ccc');
});
相关推荐
在本章中，我们将深入探讨JavaScript中的过滤选择器，这些选择器在开发高效、动态的Web应用程序时扮演着至关重要的角色。过滤选择器允许我们从DOM（文档对象模型）树中精确地挑选出符合特定条件的元素，从而实现对...
**JQ基本过滤选择器详解** 在Web开发中，jQuery（简称JQ）是一个非常流行的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。其中，选择器是jQuery的核心功能之一，它允许我们高效地选取DOM...
过滤选择器是其中的一个重要分支，它进一步细分为六种类型，包括简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性过滤选择器。 接下来，我们将重点介绍内容过滤...
以上介绍的四个jQuery内容过滤选择器，每个选择器都有其独特的用途。在实际开发中，它们可以结合其他选择器或方法使用，以便于开发者进行更精确的DOM操作。需要注意的是，内容过滤选择器在使用时应确保传入的参数...
3. 过滤选择器：包括简单过滤、内容过滤、可见性过滤、属性过滤、子元素过滤等，如`$("p:first")`（第一个`<p>`元素）、`$("tr:even")`（偶数行的`<tr>`元素）、`$("input:enabled")`（所有启用的`<input>`元素）等...
jQuery过滤选择器是jQuery库中一个非常强大的特性，它允许我们根据特定条件精确地选取DOM元素集合中的子集。在上述示例中，展示了多种过滤选择器的使用方法，让我们逐一解析： 1. `:first` 和 `:last`： - `$('li:...
- 基本过滤选择器：包括`:first`、`:last`、`:even`、`:odd`、`:eq(index)`、`:gt(index)`、`:lt(index)`、`:header`、`:animated`等，分别用于选取第一个、最后一个、偶数位置、奇数位置、特定索引、大于特定索引、...
#### 四、层次选择器 层次选择器用于选取具有特定关系的元素，例如父元素、子元素等。 1. **祖先-后代选择器**：使用空格分隔符` `表示祖先元素和后代元素之间的关系。 - 示例：`$(".bgRed div")`会选择所有位于...
本资料聚焦于生物分离工程的第二章——过滤技术，通过一份详细的PPT为我们揭示了过滤在生物工程中的应用与实践。 过滤作为基础的固液分离手段，在生物工程中扮演着关键角色。它主要用于去除溶液中的悬浮固体，或者...
在提供的代码示例中，我们看到四个按钮，分别对应四种不同的子元素过滤选择器。当点击这些按钮时，相应的CSS样式将被应用到匹配的选择器上，这使得我们可以直观地看到这些选择器的作用。 例如，当点击id为`btn1`的...
- **过滤选择器**: - `:first`: 选择第一个元素。 ```javascript $('li:first').css('background', '#f00'); ``` - `:last`: 选择最后一个元素。 ```javascript $('li:last').css('background', '#0f0'); ``...
在jQuery中，过滤选择器是一种特殊的选择器，用于从已选中的元素集合中进一步筛选出满足特定条件的元素。本篇文章将深入探讨jQuery的基本过滤选择器，并通过实例展示其用法。 1. `:first` `:first`选择器用于选取...
在jQuery众多功能中，选择器是最为核心的部分之一，而过滤选择器又是选择器中非常实用的一个功能。 在本篇文章中，我们将详细介绍jQuery基本过滤选择器的使用方法。基本过滤选择器主要用于根据特定的规则筛选DOM...
1. HttpSessionContextIntegrationFilter：这是Spring Security过滤器链的第一个过滤器。它的主要职责是确保每个线程都有一个SecurityContext实例，这个实例存储了当前用户的认证信息。当请求到达时，它检查session...
#### 四、内容过滤选择器 **4.1 :contains(text)** - **描述**: 选择含有文本内容为`text`的元素。 - **示例**: `$("p:contains('Hello')")` 会选中所有包含文本`Hello`的`<p>`元素。 **4.2 :empty** - **描述**: ...
3. **参数配置**：`.fastLiveFilter()`方法接受两个参数，第一个是需要过滤的元素选择器，第二个可选参数是一个回调函数，可以进行进一步的定制操作。 例如，可以设置匹配模式： ```javascript $("#searchInput")....
jQuery选择器主要分为四大类：基本选择器、层次选择器、过滤选择器和表单选择器。 ##### 1. 基本选择器（Basic Selectors） 基本选择器是最简单的一类选择器，用于根据元素类型、ID或类名来选取元素。 - **元素...