jQuery的一些选择器

Posted 2020-08-09

jQuery 选择器允许对 html 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

 

一、元素选择器。

例如:

$("p").css("backgroundColor","red");

//选取所有P标签的背景色为红色

 

二、id选择器。

例如：

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").hide();
  });
});

//选择id为div1的元素使其点击隐藏

 

三、类选择器

例如：

$(document).ready(function(){
  $("button").click(function(){
    $(".div1").hide();
  });
});

//选择类为div1的元素使其点击隐藏

 

四、全局选择器。

例如：

$(document).ready(function(){
  $("button").click(function(){
    $("*").hide();
  });
});

//点击后所有元素都会隐藏

 

五、this选择器。

例如：

$(document).ready(function(){
  $("button").click(function(){
    $(this).hide();
  });
});

//点击后当前的元素会隐藏

 

六、子类选择器。

例如：

$(document).ready(function(){
  $("button").click(function(){
    $("p.class1").hide();
  });
});

//点击一个按钮后.class1下的P标签会隐藏

 

七、基本的筛选选择器

:eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引

gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始

例如：

$(document).ready(function(){
  $("button").click(function(){
    $(".class:first").hide();

//括号内:eq(), :lt(), :gt(), :even, :odd一样可以进行查找或者选取。
  });
});

 //选择.class类下的第一个元素使其隐藏。

 

八、内容筛选选择器。

$(":contains(text)")。选择所有包含指定文本的元素。

$(":parent")。选择所有含有子元素或者文本的元素。

$(":empty")。选择所有没有子元素的元素(包含节点)。

$(":has(selector)")。选择元素中至少包含指定选择器的元素。

例如：

$(".div:contains(‘:contains‘)").css("color", "#CD00CD");

//查找所有class=‘div‘中DOM元素中包含"contains"的元素节点，并添加颜色

 

九、可见性筛选选择器。

$(":visible")。选择所有显示的元素。

$(":hidden")。选择所有隐藏的元素。

不在文档中的元素是被认为是不可见的，如果当他们被插入到文档中，jQuery没有办法知道他们是否是可见的，因为元素可见性依赖于适用的样式.

 

十、属性筛选选择器。

$("[attribute|=‘value‘]")。选择指定属性值等于给字符串或以该字符串为前缀的元素。

$("[attribute*=‘value‘]")。选择指定属性具有包含一个给定的子字符串的元素。

$("[attribute~=‘value‘]")。选择指定属性用空格分隔的值中包含一个给定值的元素。

$("[attribute=‘value‘]")。选择指定属性是给定值的元素。

$("[attribute!=‘value‘]")。选择不存在指定属性，或者指定的属性值不等于给定值的元素。

$("[attribute^=‘value‘]")。选择指定属性是以给定字符串开始的元素。

$("[attribute$=‘value‘]")。选择指定属性是以给定值结尾的元素（区分大小写）。

$("[attribute]")选择所有具有指定属性的元素（可以是任何值）。

$("[attributeFilterL][attributeFilterN]")。选择匹配所有指定的属性筛选器的元素。

 

十一、表单元素选择器。

$(":input")。括号内基本可以填写表单元素的所有属性。

例如：

$(":input").css("border", "1px groove red");

//查找表单内所有 input 元素

 

十二、表单对象属性筛选选择器。

除了表单元素选择器外，表单对象属性筛选选择器也是专门针对表单元素的选择器，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行筛选。

$(":enabled")选择可用的表单元素。

$(":disabled")选择不可用的表单元素。

$(":checked")选取被选中的input元素。

$(":selected")选取被选中的option元素。

 

以上就是我总结出的一些jQuery基本选择器（部分转自慕课网），希望能对你有所帮助。