写在前面:
我是一个php后端开发,对于前端技能一直都没有系统的学习过,只是有些基础概念和调试能力,现在开始对此技能进行系统学习,大神请忽略。第一篇文章就说下最基本的选择器
- id选择器,权重最大。对于页面上的唯一id进行筛选 使用$("#btn"),进行选择
- 类选择器,根据标签中class的值进行筛选,使用$('.articles')进行选择
- 属性选择器,使用中括号,比如 a[href] {color:red;},将a标签的href颜色变成红色, *[title]{color:red} 将所有元素的title颜色改成红色,
- 伪类选择器, 使用冒号进行选择,比如 是用来选择某个类,或者说,选择的是某个类的状态。比如【:link】,【:visited】
- 伪元素选择器,使用双冒号进行选择,::before,::after, 暂时不太明白,以后明白了进行确认
关系选择器
- 后代选择器,包括子代,孙代所有的,使用 空格
- 子代选择器,只包括子代的,使用>
- 兄弟选择器,使用 ~
- 相邻兄弟选择器,使用+
示例:
伪类选择器
$("ul li :first").html() ul的子元素第一个li 的html的值
$("ul li :last").html() ul的子元素最后一个li的html的值
属性选择器
$("a[href='http://xxx/xxx/cabinet/cabinet/edit/32']").html(111) a标签下 href是http://xxx/xxx/cabinet/cabinet/edit/32的html的值
关系选择器
$("ul a").length ul下所有a元素的个数
$(".active a").length 类是active 的a标签的个数
$(".active>a").length 类是active的字标签是a的个数