jQuery的一些选择器

jQuery的一些选择器

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基本选择器(部分转自慕课网),希望能对你有所帮助。