在jQuery中选择器分为:基本选择器,层次选择器,过滤选择器,表单选择器
一,基本选择器:
1,基本选择器是jQuery最常用的选择器,也是最简单的选择器,它是通过元素id,class,标签名称来查找DOM元素(注意:在网页中ID只能使用一次,id是唯一的,但是class允许重复使用的)
2,id选择器:
1)根据给定的id匹配一个元素
2)用法:$("#txt")选取id为txt的元素(返回单个元素)
3.class(类选择器)
1)根据给定的类名匹配元素
2)用法:$(".txt")选取所有class为txt的元素(返回集合元素)
4、element(标签选择器)
1)用法:$("span,p,div"); 返回集合元素
5,*匹配所有元素
1)用法:$("*") :返回集合元素,匹配所有元素
二,层次选择器:
1,先找到元素的父级元素+空格找其子级元素
2.语法:parent child;
例如:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
var txt = $("#table1 tr");//找到table1中的tr
var txt = $("#table1 tr td");//找到table1中的tr下的td
})
</script>
</head>
<body>
<table id="table1">
<tr><td></td></tr>
</table>
三:过滤选择器:(注意:过滤选择器前以:开头)
1.基础过滤选择器:
1):first 找到第一个元素
用法:$("div:first")选取所有<div>元素中第一个<div>元素
2):last 找到最后一个元素
用法:$("div:last")选取所有<div>元素中最后一个<div>元素
3):odd 匹配下标为基数的元素
用法:$("input:odd")选取索引是奇数的<input>元素(索引从0开始)
4):even 匹配下标为偶数的元素
用法:$("input:even")选取索引是偶数的<input>元素(索引从0开始)
5):eq 匹配指定元素下标的元素(索引从0开始)
用法:$("input:eq(1)")选取索引等于1的<input>元素(索引从0开始)
6):gt 匹配比给定下标大的元素
用法:$("input:gt(1)")选取索引大于1的<input>元素(索引从0开始)
7):lt 匹配比给定下标大的元素
用法:$("input:lt(1)")选取索引小于1的<input>元素(索引从0开始)
8):not(select)
用法:$(input:not(select)) 返回集合元素
说明:去除所有与给定选择器匹配的元素。有点类似于“非”
9):header 匹配标题元素
用法:$(":header")选取网页中所有的<h1>,<h2>....
10):animated 选取正在执行动画的所有元素
用法:$("div:animated")选取正在执行动画的<div>元素
2,内容过滤选择器:
1):contains(“文本内容”)匹配元素是否包含指定的文本内容
2):has(标签元素)匹配含有选择器所匹配的元素的元素
3):empty 匹配元素内容为空的元素
4):parent 匹配含有子元素或者文本的元素
3,属性过滤选择器:
[attribute=value] :属性过滤选择器就是通过元素的属性来获取相应的元素
例如:
<input id="Checkbox1" type="checkbox" name="chk" action="#"/>
方式一:
$("input[name='chk']").attr("checked", true);
方式二:
$("input[name='chk']").prop("checked", true);
以上两种方式就是把name为chk的复选框的checked 属性改为true返回的是一个集合;
强调:
1.attr()一般推荐元素的非固有属性(用户自定义属性)时使用(如复选框中的”action“属性属于非固有属性)
2.prop用于元素的固有属性时使用(如复选框中的,id,type,...)不过prop要在jQuery1.6版本以上才有效果
4,可见性过滤选择器:
1):hidden 选取所有不可见的元素 筛选隐藏的元素(type="hidden",css: display="none")
2):visible 选取可见的元素
5,子元素过滤选择器
:nth-child(index/even/odd/equation)
注意:这里的索引值从1开始,而eq是从0开始
1):first-child 找到第一个子元素
用法:$("ul li:first-child")选取每个<ul>中第一个<li>元素
2):last-child 找到最后一个子元素
用法:$("ul li:last-child")选取每个<ul>中最后一个<li>元素
3):only-child 匹配只有一个子元素的元素
用法:$("ul li:last-child")在<ul>中选取是唯一子元素的<li>元素
6,表单对象属性过滤选择器
1):disabled 筛选不可用元素
<input disabled="disabled">不可用
2):enabled 筛选可用的元素
3): checked 筛选被选中的复选框
4): selected 筛选下拉框被选中的元素