这几天在学习css选择器,看了几位大佬的文章,觉得写的不错,所以作为参考,自我总结了下,以便后面使用。
js选择器:
一、基本选择器
1.id选择器:$("#id") //$("#"+var)此时var是个字符串变量,可实现动态选择
2.类选择器:$(".class")
3.标签选择器:$("tag")
4.属性选择器:$("[attr='value']")(包括前缀查找:$("[attr=va-]")和后缀查找$("[attr$=lue]"))
注意:$("[attr"+var+"]")此时属性值是个变量。
5.this选择器:$(this)表示当前所在元素
6.组合查找:将上述选择器组合起来查找
1)$("tag.class")
2)$("tag[attr=value]")
2)
7.多项选择器:是指用,分隔选择器后,组合起来查找 //选出的元素是按照他们在HTML中出现的顺序排列的,且不会出现重复元素
1) $("p,div")
2)$(".class1,.class2")
3)$("p.class1,div.class2")
二、层级选择器:$(“ancestor descendant"),层级选择器是根据DOM结构设计的,层级间需要用空格隔开。但组合选择器间无需用空格隔开。(组合选择器用于兄弟节点间做区别,层级选择器用于父子节点间做区别):$("div.class ul[attr=value]")/$("div.class li.class") //层级间可以不是直属关系
三、子选择器:$("parent child")层级间必须是直属关系,
四、过滤器:一般不单独使用,而是加在选择器后面实现对元素的精确定位
1)$('ul.lang li:first-child') //选出ul的第一个子元素(选出的是li,且是父元素的第一个子元素)
2)$('ul.lang li:last-child') //选出ul的最后一个子元素
3)$('div.lang p:nth-child(2)') //选出父元素(div)的第二个子元素且子元素需为p元素
4)$('div.lang p:nth-child(even)') //选出父元素中序号为偶数的子元素,且此元素需为p元素
5)$('div.lang p:nth-child(odd)') //选出父元素中序号为奇数的子元素,且此元素需为p元素
五、表单相关
来自
:input:可以选择,,和;
:file:可以选择,和input[type=file]一样;
:checkbox:可以选择复选框,和input[type=checkbox]一样;
:radio:可以选择单选框,和input[type=radio]一样;
:focus:可以选择当前输入焦点的元素,例如把光标放到一个上,用$('input:focus')就可以选出;
:checked:选择当前勾上的单选框和复选框,用这个选择器可以立刻获得用户选择的项目,如$('input[type=radio]:checked');
:enabled:可以选择可以正常输入的、 等,也就是没有灰掉的输入;
:disabled:和:enabled正好相反,选择那些不能输入的。
六、更多选择器查看下节css伪类与伪元素
七、查找与过滤
1)find(‘过滤条件’)方法用于查找某节点的子节点,本身也是一个选择器:var ul=$("#ul"); var li=ul.find(".li");
2)parent(‘过滤条件’)方法用于查找某节点的父节点
3)next(‘过滤条件’)方法用于查找某节点的下一个直属兄弟节点
4)prev(‘过滤条件’)方法用于查找某节点的上一个直属兄弟节点
5)filter(“筛选条件”)方法用于过滤,筛选出符合条件的元素
var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
langs.filter(function () {
return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
}); // 拿到Swift, Scheme
来自
css选择器:
一、选择器总结:http://www.ruanyifeng.com/blog/2009/03/css_selectors.html
https://www.w3cschool.cn/css/css-selector.html(详细讲述了选择器、优先级及使用规范)
二、选择器优先级:css优先级是指css样式在浏览器中被解析的先后顺序。
1)! important优先级最高,但仅适用于引入样式的css,不适用与