JQuery（5）_Jquery 过滤选择器

最新推荐文章于 2021-01-30 12:21:17 发布

魏宇轩

最新推荐文章于 2021-01-30 12:21:17 发布

阅读量449

点赞数

分类专栏： JQuery（更新完）文章标签： Jquery

本文链接：https://blog.csdn.net/qq_36260974/article/details/103415812

版权

JQuery（更新完）专栏收录该内容

27 篇文章 2 订阅

订阅专栏

本系列博客汇总在这里：JQuery 汇总

Jquery 过滤选择器

一、说明
二、基本过滤选择器
三、代码演示

一、说明

过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素，该选择器都以 “:” 开头按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器。

二、基本过滤选择器

1、:first

用法: $(”tr:first”);
返回值：单个元素的组成的集合。
说明：匹配找到的第一个元素。

2、:last

用法：$(”tr:last”);
返回值：集合元素。
说明：匹配找到的最后一个元素。与 :first 相对应。

3、:not(selector)

用法：$(”input:not(:checked)”);
返回值：集合元素。
说明：去除所有与给定选择器匹配的元素，有点类似于 ”非”，意思是没有被选中的 input（当 input 的type=”checkbox”）。

4、:even

用法：$(”tr:even”);
返回值：集合元素。
说明：匹配所有索引值为偶数的元素，从 0 开始计数，js 的数组都是从 0 开始计数的，例如要选择table 中的行，因为是从 0 开始计数，所以 table 中的第一个 tr 就为偶数 0。

5、: odd

用法：$(”tr:odd”);
返回值：集合元素。
说明：匹配所有索引值为奇数的元素，和 :even 对应，从 0 开始计数。

6、:eq(index)

用法：$(”tr:eq(0)”);
返回值：集合元素。
说明：匹配一个给定索引值的元素 .eq(0) 就是获取第一个 tr 元素，括号里面的是索引值，不是元素排列数。

7、:gt(index)

用法：$(”tr:gt(0)”);
返回值：集合元素。
说明：匹配所有大于给定索引值的元素。

8、:lt(index)

用法：$(”tr:lt(2)”);
返回值：集合元素。
说明：匹配所有小于给定索引值的元素。

9、:header(固定写法)

用法：$(”:header”).css(”background”, “#EEE”);
返回值：集合元素。
说明：匹配如 h1, h2, h3 之类的标题元素.这个是专门用来获取 h1，h2 这样的标题元素。

10、:animated(固定写法)

返回值：集合元素。
说明：匹配所有正在执行动画效果的元素。

三、代码演示

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="path" value="${pageContext.request.contextPath }"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${path }/js/jquery-1.8.3.js"></script>
<title>Insert title here</title>
<script type="text/javascript">

$(function()
{
	var css1 = {background:'yellow',color:'red'};
	$("tr:odd").css(css1);	
});

function myclick()
{	
	//var divs = $("tr:first");
	//var divs = $("tr:last");
	/* 
	var divs = $("tr:even");
	divs.each(function()
	{
		var divObj = $(this);
		alert(divObj.html());
	}); 
	*/
	/* 
	//获取被选中的
	$("input:checked").each(function()
	{
		alert($(this).val());
	});
	*/
	
	//获取没有被选中的
	$("input:not(:checked)").each(function()
	{
		alert($(this).val());
	});
}

function checkAll()
{
	/* 
	$("td input").each(function()
	{
		$(this).attr("checked","checked");
	});
	*/
	//jquery元素选择器获得到的都是数组，如果不去便利就调用方法，那么就是给这一组元素区操作，如果想当个操作需要遍历。
	$("td input").attr("checked","checked");
}

function reverseCheck()
{
	$("td input").each(function()
	{
		var checkedState = $(this).attr("checked");
		if(checkedState == 'checked')
		{
			$(this).removeAttr("checked");
		}
		else
		{
			$(this).attr("checked","checked");
		}
	});
}

//注意：方法名不能取 click
function _click()
{
	//alert($("tr:eq(3)").html());
	$("tr:lt(1)").each(function()
	{
		alert($(this).html())
	});
}
</script>
<style type="text/css">
table
{
	border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1">
<tr>
	<td><input type="checkbox" value="1"></td>
	<td>魏宇轩1</td>
	<td>18</td>
</tr>
<tr>
	<td><input type="checkbox" value="2"></td>
	<td>魏宇轩2</td>
	<td>18</td>
</tr>
<tr>
	<td><input type="checkbox" value="3"></td>
	<td>魏宇轩3</td>
	<td>18</td>
</tr>
<tr>
	<td><input type="checkbox" value="4"></td>
	<td>魏宇轩4</td>
	<td>18</td>
</tr>
</table>
<input type="button" value="点击1" onclick="myclick()">
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="reverseCheck()">
<input type="button" value="点击2" onclick="_click()">
</body>
</html>