jQuery（选择器）

2022-05-12 20:57:12 浏览数 (1)
  • 基本选择器（*）
代码语言：javascript复制
在开发过程中，jQuery对象的定义
var $obj=$("选择的对象")；
//$obj为自定义的元素名
代码语言：javascript复制
$("#id");
选中的结果是该元素的jQuery对象
代码语言：javascript复制
$("标签名称");jquery对象的集合，如果选择结果只有一个，那么是当前对象
代码语言：javascript复制
$(".类名");
jQuery对象的集合，类名是在css中定义
代码语言：javascript复制
$("selector1seletor2");
满足selector1选择器，并且同时也满足seletor2选择器的元素的集合

注意：并集选择器中，两个选择器不可以分开，中间无空格。

  • 全局选择器

代码语言：javascript复制
$("*");
jQuery对象的集合，会选中所有
  • 层次选择器（*）
    • 后代选择器
代码语言：javascript复制
$("selector1 selector2");
选择selector1内部所有满足selector2的元素

注意：后代选择器中，两个选择器中间是有空格的，与并集选择器区别开。

  • 子代选择器

代码语言：javascript复制
$("selector1>selector2");
选择selector1中满足selector2选择器的内容，扔掉孙代
代码语言：javascript复制
$("selector1 selector2");
选择满足选择器1元素后面的满足选择器2的元素

注意：只能选择相邻后面的一个

  • 同辈元素选择器

代码语言：javascript复制
$("选择器1~s选择器2");
选择选择器1元素之后的同辈元素，
并且同辈元素满足选择器2的要求

注意：前面的同辈元素是不会被选择的（被选择元素不只一个）

  • 属性过滤选择器（*）
代码语言：javascript复制
$(选择器[attributeName^|$|*=''])
在选择器的基础上，
对属性进行选择=代表属性值必须和'指定值'一致；

^=属性以指定值开头；

$=属性以'指定值'结尾；

*=属性值中包含有'指定值'；

  • [attributeName='指定值'] 获取相应属性值为指定值的元素；
  • [attributeName^='指定值'] 获取相应属性值以指定值开头的元素；
  • [attributeName$='指定值'] 获取相应属性值以指定值结尾的元素；
  • [attributeName*='指定值'] 获取相应属性值中包含指定值的元素；
  • [attributeName!='指定值'] 获取相应属性值中不包含指定值的元素；

  • 基本过滤选择器 都是以:开头
    • :eq(index)：选择索引等于index的元素；
    • :gt(index)：选择索引大于index的元素；
    • :lt(index)：选择索引小于index的元素；
    • :header：选择标签h1~h6的元素；
    • :focus：选择所有获取焦点的元素；
    • :animated 选择所有的动画；
    • :first 选择索引第一个元素；
    • :last 选择索引最后一个元素；
    • :not(选择器) 选择不包含selector选择器的元素；
    • :even 选择索引为偶数的元素；
    • :odd 选择索引为奇数的元素；

注意：

  1. 使用等于和小于进行并集选择器时，等于在前；
  2. eq后的元素index重新按照0进行排列才能取出正确的数据（推荐显示先用lt，再使用eq）；
  • 可见性过滤选择器
    • :visible 选取所有可见元素（占据文档流的位置。例如：visibility:hidden,opacity:0,width:0px）；
    • :hidden 选择所有隐藏元素（例如：display:none,type="hidden）；
  • 表单过滤选择器
    • :input 选择所有input元素；

等同于：

代码语言：javascript复制
$("input")

等同于：

代码语言：javascript复制
$("input[type='text']")

等同于：

代码语言：javascript复制
$("input[type='password']")

可使用以下方式选中：

代码语言：javascript复制
$("input[type='image']")

等同于：

代码语言：javascript复制
$("input[type='file']")

等同于：

代码语言：javascript复制
$("input[type='radio']")

等同于：

代码语言：javascript复制
$("input[type='checkbox']")

等同于：

代码语言：javascript复制
$("input[type='button']")

等同于：

代码语言：javascript复制
$("input[type='submit']")

等同于：

代码语言：javascript复制
$("input[type='reset']")
  • 内容过滤选择器
    • :contains("value") 选择元素中内容包含指定值的元素（包括div等标签）；
    • :empty 选中不包含子元素和内容的元素；
    • :has(选择器) 匹配包含有指定选择器选中的元素的元素；
    • :parent 匹配含有子元素或者文本的元素；
  • 子元素过滤选择器
    • :nth-child(index) 匹配其父元素下的第N个子或奇偶元素；

注意：index值从1开始，可以是数字，

可以是even偶数，odd奇数，

可以使用表达式2n,3n,3n 1...

  • :first-child 匹配所给选择器( :之前的选择器)的第一个子元素；

等同于：

代码语言：javascript复制
:nth-child(1)

注意：但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一 个子元素。这相当于:nth-child(1)；

  • :last-child 匹配所给选择器( :之前的选择器)的最后一个子元素；

注意：:last 只匹配最后一个元素，而此选择符将为每个父元素匹配最后一个子元素；

  • :only-child 唯一的一个子元素；

注意：如果父元素中含有其他元素，那将不会被匹配。（注：这里的其他元素并不包含文本节点，如：图片。用$('p img:only-child')是可以匹配

display hidden input reset submit

0 人点赞