index() 就会返回index,只有用eq() 就行了
选择器
#
.
•
ab
a b
a>b b可省
a+b b可省 选中左边符合a紧挨着的右边符合b 其中的b,a不会选中 只选中右边的
a~b b可省 siblings 选符合条件的a右边的所有符合条件的b,像+一样选中右边,不想+一样只选一个
a,b b可省
a:first
a:last
a:even 偶
a:odd 奇
[href] 是属性选择,不是css选择$("[class=active]")这种可以
[href=""] 一般的li[href] 这种写法只是习惯,只是并集选择,li [href] 这个说就是后代选择 属性不用引号
[href&= ]
[href^= ]
[href*= ]
[][] 属性并 $("li[class][title*=y]")
eq $("li:eq(1)" ) $("li" ).eq(1)
gt
lt
is if($("[fds]").is("li:eq(0)")) is里也是个选择器
:not(selector)
:header 所有标题 h1到h6
:focus 所以获得焦点的元素
:visible
:hidden
$("div:first~div").css("border", "1px solid pink");
选择器中的空格
每个选择器都是独立的,除了 :eq那几个。所以只要写在一起就是组合选择器。
var $t_a = $(".test :hidden"); //带空格的jQuery选择器
选取class为“test”的元素内部的隐藏元素
var $t_b = $(".test:hidden"); //不带空格的jQuery选择器
选取隐藏的class为“test”的元素
遍历
垂直
patent(选择器)
parents(选择器)
find(选择器) 所有子孙中查找
children(选择器) 儿子中查找
水平
next(选择器)
prev(选择器)
siblings(选择器) 兄弟中查找,次元素前后的兄弟都中招,不加选择器量<scrip>都中招。包含自己
隔行变色
$("tr:even").css("background-color","#ccc");
选择器
a,h,label
{}h1 em {color:red;} /只有h1里的em应用规则/ 后代选择器
div.className{} /类名是className的div/
ul>p{} 子选择器
li+li{} 兄弟选择器,5个里元素在一起的话,只有第一个不应用规则
E:first-child{}
E:last-child{}
E:nth-child(3){}
:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数,
可以是整数值(1,2,3,4)
可以是表达式(2n+1、-n+5)和关键词(odd、even),
表达式里的n是从0开始递增1的整数.2n表示偶数,2n+1表示奇数
E:nth-last-child(n){} //倒着查的
E:first-of-type{} //孩子里每一个类型的第一个元素,有几种类型的元素就能选出来几个.
E:last-of-type{}
E:nth-of-type(3){}
E:nth-last-of-type{}
E:only-child{}
遍历E,如果集合E中的任何一个元素其只有一个子元素的话就选中
E:only-of-type{}
E的后代只有一种子元素.
属性选择器
•
[href]{}
•
[type="password"]{}
•
a[href^="http"]{} //以http开头
•
a[href$="cn"]{} //以cn结尾
•
a[href*="baidu"]{} //中间含有baidu
E:not(){}E:empty{} //element里为空的,有空格不算空.E:target{} //:target选择器称为目标选择器,用来匹配文档(页面)的id的某个标志符的目标元素。
<h2><a href="#brand">Brand</a></h2>
<div class=“section” id=“brand”>
content for Brand
</div>
.section{
display: none;
}
#brand:target{
/*这里的:target就是指id="brand"的div对象*/
display:block;
}
form里的杂项选择器
•
:enabled
•
:disabled
•
:cheched
选中被选择的单选框和复选框
•
read-write
•
read-only
•
::selection //被选中的文本的样式
::selection{
background: orange;
color: white;
}
:before :after
::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常和"content"配合使用,使用的场景最多的就是清除浮动。
content:""; , :after 是伪类,不存在dom树中,所以无法用js选择
评论区