JQuery中的选择器

文章目录

• 基本选择器
• 层次选择器
• 属性选择器
  • 基本过滤选择器
  • 可见性选择器

一、基本选择器是哪些？

基本选择器包括标签选择器，类选择器，ID选择器，并集选择器，全局选择器

标签选择器   element
类选择器   .class\

ID选择器  #id

并集选择器  selector1,selector2...selectorN

全局选择器   *

如：

$(function(){
$("h1").css('color','blue').click(function(){
//使隐藏元素显示
$('dd').show(1000)
});
//类选择器
$(".price").css({'background':'#ccc','padding':'5px'})
//ID选择器
$('#author').css('color','#083499');
//并集选择器(用逗号分隔多个选择器)
$('.intro,dt,dd').css('color','red')
//全局选择器
$('*').css("font-weight","bold")
})

二、层次选择器

层次选择器通过DOM元素之间的层次关系来获取元素

后代选择器  pre desc

子选择器  pre>desc

相邻元素选择器  pre+desc

同辈元素选择器pre~desc

如：

//后代选择器 是textRight class下的所有的p元素全部选中(不管是子集还是孙子集)
$('.textRight p').css('color','red');
//子选择器 (只会选择它的亲儿子)
$('.textRight>p').css('color','blue');
//相邻选择器 1.只能选中与自己相邻的 2.必须是指定的元素 3.自己之后的
$('h1+p').css("text-decoration","underline");
//同辈元素选择器 1.同层级 2.在该元素之后
$('h1~div').css("background","#333");

属性选择器

属性选择器通过HTML的属性来选择元素

[arr] 选取包含给定属性的元素

[arr=value] 选取等于给定属性是某个特定值的元素

[arr!=value] 选取不等于给定属性是某个特定的元素

[arr^=value] 选取给定属性是以某些特定属性开始的元素

[arr$=value] 选取给定属性是以某些特定属性结尾的元素

[arr*=value] 选取给定属性是以包含某些值的元素

如：

$(function(){
//属性选择器 包含某个属性
$('[class]').css('background','gray')
//属性值等于某个值 注意 单引号和双引号 外单内双 外双内单
$('[class="hot"]').css('color','red')
//指定的属性不等于某个值 如果这个属性都没有 也是满足条件的
$('a[class!="hot"]').css('background','yellow')
//指定的属性以什么值开头
$('a[href^="www"]').css('background','#0f0')
//指定是属性以什么值结尾
$('a[href$="html"]').hide()
//指定的属性包含某个指定值
$('a[href*="2925"]').css('font-size','40px')
})

过滤选择器

:frist  选取一个元素

:last 选取最后一个元素        

:not(selector) 选取去除所有与给定选择器匹配的元素

:even 选取索引是偶数的所有元素（index从0开始）

:odd 选取索引是奇数的所有元素（index从0开始）

:eq 选取索引等于index的所有元素（index从0开始）

:gt 选取索引大于index的所有元素（index从0开始）

:lt  选取索引小于index的所有元素（index从0开始）

:header  选取所有标题  如H1~H6

:focus  选取所有获取的焦点的元素

:animatedoy  选择所有动画

如：

$(function(){
//不管是even 还是 odd 还 gt lt eq 索引都是从0开始
//选择标题元素
$(':header').css('background','blue').css('color','#fff')
//奇数行
$('li:odd').css('background','#f0f0f0')
//偶数行
$('li:even').css('color','green')
//首行
$('li:first').css('font-size','16px')
//末行
$('li:last').css('font-size','18px')
//索引等于某个值
$('li:eq(2)').css('color','red')
}

通过元素显示状态来选取元素

:visible  选取所有可见的元素

:hidden  选取所有隐藏的元素

如：

$(function(){
$('button:first').click(function(){
$('div:hidden').show()
})
$('button:last').click(function(){
$("div:visible").hide()
})
})