常用CSS与Jquery选择器

1.常用CSS选择器

在介绍CSS选择器之前先介绍CSS各个选择器的权重，权重用于解决CSS样式的冲突问题。

a.选择器权重

选择器	权重
继承 *	0，0，0，0
伪元素，元素选择器	0，0，0，1
类，伪，伪类，属性选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式	1，0，0，0
！important	无穷大

注：权重用二进制表示，二进制数字越大该选择器优先级越高。有时候我们写的样式没起效果有可能是权重导致的优先级问题。

b.基础选择器：包括标签选择器、类选择器、id选择器、通配符选择器

选择器	类型	功能描述
标签选择器	标签选择器	选择该标签
.class	类选择器	选择某类
#id	id选择器	选择该id
*	通配符选择器	选择该页面所有元素

c.属性选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性且属性值等于val的E元素
E[att^=“val”]	选择具有att属性且值以val开头的E元素
E[att$=“val”]	选择具有att属性且值以val结尾的E元素
E[att*=“val”]	选择具有att属性且值中含有val的E元素

d.伪类选择器

链接伪类选择器	说明
a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择活动链接
e：focus	用于获得焦点的表单元素

注：为确保生效，按照LVHA的顺序来书写。

e.结构伪类选择器

选择符	说明
E：first-child	匹配父元素中的第一个子元素E
E：last-child	匹配父元素中最后一个E元素
E：nth-child（n)	匹配父元素中的第n个子元素E，会把所有子元素都排号n,可以是数字、公式（只能是n）、关键字（even，odd）
E：first-of-type	指定类型E的第一个
E：last-of-type	指定类型E的最后一个
E：last-of-type（n）	指定类型E的第n个

注：元素E和冒号之间用空格隔开

f.伪元素选择器

选择符	说明
：：before	在元素内部的前面插入内容
：：after	在元素内部的后面插入内容

2.常用jquery选择器

a.基本用法

$("选择器")  //里面的选择器可以直接写CSS选择器，但是要加引号

b.jQuery筛选选择器

语法	用法	描述
：eq(index)	$(“li:eq(2)”)	获取li元素，选择索引号为2的元素，index从0开始
:odd/:even	$(“li:odd”)	获取li元素，选择索引号为奇数的元素

c.jquery筛选方法

语法	用法	描述
parent()	$(“li”).parent()	查找最近一级的父级
children(selector)	$(“ul”).children(“li”)	相当于ul>li，选择最近一级子级
find(selctor)	$(“ul”).find(“li”)	相当于ul li，后代选择器
siblings(selector)	$(“.first”).siblings(“li”)	查找兄弟节点，不包括本身
nextAll([expr])	$(“.last”).nextAll()	查找当前元素之后所有的同辈元素
hasClass(class)	$(‘div’).hasClass(“pro”)	查找当前元素是否含有某个特定的类，有则返回true
eq（index）	$(‘ul li’).eq(2)	索引号从0开始

注：本文只介绍了常用选择器，更多选择器的用法请去CSS官网查询。

常用CSS与Jquery选择器相关推荐

jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器在CSS3选择器标淮草案定义 ...
jQuery选择器和选取方法
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器在CSS3选择器标淮草案定义 ...
php jquery选择器,常用jQuery选择器总结_jquery
在Dom 编程中我们只能使用有限的函数根据id 或者TagName 获取Dom 对象. 然而在jQuery 中则完全不同,jQuery 提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象 ...
Jmeter之CSS选择器/JQuery选择器关联
选择器: CSS选择器或JQuery选择器是Jmeter支持的两种语法,下面对其两种语法进行简单介绍 CSS选择器 JQuery选择器 Chrome - 复制CSS选择器 Google Chrome在 ...
css与jquery、图标字体、常用数据
常用数据 *)按钮常用颜色:#008cBA/#169fe6;(字母大小写没有区别) css与jquery.图标字体. *)还能这样选择 header #search input[type=" ...
javaweb学习笔记2(jquery的使用，以及常用的方法，选择器，过滤器)
javaweb学习笔记2 javascript正则表达式 regfxp对象方式1: var putt=new RegExp("e");//表示要求字符串中必须包含字符串evar ...
CSS css选择器 jquery jQuery选择器的优先级 XXX XX X xxx xx x
CSS css选择器 jquery jQuery选择器的优先级 XXX XX X xxx xx x 行间选择器 id选择器类选择器元素选择器通配符选择器
Web学习第四天——CSS简介、选择器，常用（文本、字体、列表、背景、超链接）样式
Web学习第四天--CSS简介.选择器,常用(文本.字体.列表.背景.超链接)样式一.CSS简介 (一).什么是CSS? (二).CSS能够干什么? (三).CSS语法结构 (四).CSS的使用方式 ...
CSS 选择器、jQuery选择器大全
CSS 选择器 CSS选择器参考手册:http://www.w3school.com.cn/cssref/css_selectors.asp jQuery选择器大全一.基本选择器 1. id选择器( ...

常用CSS与Jquery选择器

1.常用CSS选择器

a.选择器权重

b.基础选择器：包括标签选择器、类选择器、id选择器、通配符选择器

c.属性选择器

d.伪类选择器

e.结构伪类选择器

f.伪元素选择器

2.常用jquery选择器

a.基本用法

b.jQuery筛选选择器

c.jquery筛选方法

常用CSS与Jquery选择器相关推荐

最新文章

热门文章