侧边栏壁纸
  • 累计撰写 793 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

目 录CONTENT

文章目录

选择器

Dettan
2022-01-09 / 0 评论 / 0 点赞 / 115 阅读 / 1,020 字
温馨提示:
本文最后更新于 2022-07-23,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
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选择
0

评论区