首页 > 代码库 > 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基本选择器(部分转自慕课网),希望能对你有所帮助。
jQuery的一些选择器