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 style="display:none;">我们的域名为：http://onestopweb.cn/</div>
<div>我们的域名为：http://www.onestopweb.cn/</div>
<div> </div>
<div></div>
<ul id="box">
<li>列表1</li>
<li>列表2</li>
<li class="red">列表3</li>
<li>列表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>
<div>
<h4>我是标题</h4>
</div>
<input type="text" />
</body>
</html>
demo.js
$(function(){
//$('li:first').css('background','#ccc');
//$('li:last').css('background','#ccc');
//$('#box li:last').css('background','#ccc');
//$('ul:first li:last').css('background','#ccc');
//$('li:not(.red)').css('background','#ccc');
//$('li:even').css('background','#ccc'); //偶数隔行变色
//$('li:odd').css('background','#ccc'); //奇数隔行变色
//$('li:eq(-2)').css('background','#ccc');
//$('li:gt(5)').css('background','#ccc');
//$('li:lt(5)').css('background','#ccc');
//$('div :header').css('background','#ccc');
//$('input').get(0).focus();
//$(':focus').css('background','#c00');
//$('li').first().css('background','#ccc');
//$('li').last().css('background','#ccc');
//$('li').not('.red').css('background','#ccc');
//$('li').eq(2).css('background','#ccc');
//$('div:contains("www")').css('background','#ccc');
//$('div:empty').css('background','#ccc').css('height','20px');
//$('ul:has(.red)').css('background','#ccc');
//$('div:parent').css('background','#ccc');
//$('ul').has('.red').css('background','#ccc');
//$('li').parent().css('background','#ccc');
//alert($('li').parent().size());
//alert($('li').parent().get(0));
//$('li').parents().css('background','#ccc');
//$('li').parentsUntil('body').css('background','#ccc');
//alert($('div:hidden').size());
//$('div:hidden').css('background','#ccc').show(1000);
alert($('div:visible').size());
});
相关推荐
在本章“第04章 过滤选择器（下）”中，我们将深入探讨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基本过滤选择器的使用方法。基本过滤选择器主要用于根据特定的规则筛选DOM...
在jQuery中，过滤选择器是一种特殊的选择器，用于从已选中的元素集合中进一步筛选出满足特定条件的元素。本篇文章将深入探讨jQuery的基本过滤选择器，并通过实例展示其用法。 1. `:first` `:first`选择器用于选取...
1. HttpSessionContextIntegrationFilter：这是Spring Security过滤器链的第一个过滤器。它的主要职责是确保每个线程都有一个SecurityContext实例，这个实例存储了当前用户的认证信息。当请求到达时，它检查session...
3. **参数配置**：`.fastLiveFilter()`方法接受两个参数，第一个是需要过滤的元素选择器，第二个可选参数是一个回调函数，可以进行进一步的定制操作。 例如，可以设置匹配模式： ```javascript $("#searchInput")....
这段代码选择所有类名为`parentLi`的元素（通常代表一级菜单项），并在用户悬停时，使用`slideToggle()`方法来滑动显示或隐藏其子级`.subMenu`（二级菜单）。`"slow"`参数决定了动画的执行速度。 为了确保二级菜单...
在Android系统中，文件选择器是一个至关重要的组件，它允许用户在众多文件和文件夹中进行浏览和选择，常用于应用程序需要访问用户设备上的特定文件时。本篇将深入探讨如何在Android应用中实现一个有效的文件选择器。...