2.1 jQuery选择器是怎样

  • 1.CSS选择器
    要使某些样式应用于特定的HTML成分,首先要求找到该因素。在CSS中,执行这一任务的突显规则称为CSS采取器。
    图片 1
    图片 2

大概拥有主流浏览器都帮衬地点那个常用的选用器。别的css中还有伪类接纳器(E:Pseudo-Elements{CssRules})、子采用器(E>F
{CssRules}) ,临近采纳器(E+F{CssRules })和特性接纳器(E[attr
]{CssRules})等。遗憾的是,主流浏览器并非全盘扶助全部的CSS选取器。

Note
把CSS应用到网页中有3种艺术,即行间样式表、内部样式表和外部样式表。上例中接纳的是内部样式表,内部样式表的弱点是不可能被几个页面重复使用的。

  • 2.jQuery选择器
    比较:
    CSS获取到成分的代码:
    图片 3
    jQuery获取到元素的代码:
    图片 4

2.2 jQuery选用器的优势

  1. 简介的写法
  2. 支持CSS1到CSS3选择器
  3. 到家的处理机制
    如选取页面中不设有的成分也不会报错。
    必要留意的是,$()选拔的世代是目的,尽管网页上平素不此成分。因而当要用jQuery检查某些成分在网页上是或不是存在时,供给依照成分的尺寸来判定,使用以下代码:
    图片 5
    恐怕转发成DOM对象来判定,如下:
    图片 6
    不能采用那种方法判断:
    图片 7

2.3 jQuery选择器

jQuery选用器分为着力选用器、层次选用器、过滤接纳器和表单选拔器。

2.3.1 基本选用器

骨干选取器是jQuery中最常用的选用器,也是最简单易行的选用器,它通过成分id ,
class和标签名等来探寻DOM成分。
图片 8

2.3.2 层次选择器

万一想经过DOM成分之间的层系关系来收获一定成分,例如后代元素、子成分、相邻成分和兄弟成分等,那么层次选拔器是3个不行好的精选。
图片 9
等价关系:
图片 10
图片 11
$(“#prev~div”)接纳器只好采纳”#prev”成分前边的同辈

要素。而siblings()方法与上下地点非亲非故,只借使同辈节点就都能匹配。

2.3.3 过滤选用器

过滤选取器重借使因而一定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS的伪类选拔器语法相同,即采纳器都是多少个冒号(:)起初。遵照不一致的过滤规则,过滤选拔能够分为主题过滤、内容过滤、可知性过滤、属性过滤、子成分过滤和表单对象属性过滤选用器。

  • 1.主导过滤选用器
    图片 12
    图片 13

  • 2.内容过滤接纳器
    内容过滤采取器的过滤规则土要体以往它所富含的子成分或文本内容上。
    图片 14

  • 3.可知性过滤采取器
    可知性过滤选用器是基于成分的可知和不可知状态来摘取相应的因素。
    图片 15
    在可知性选拔器中,需求专注选取器:hidden,‘它不仅蕴涵样式属性display为“none”的因素,也囊括文件隐藏域(<input tyge="hidden"/>)和visibility:hidden等等的因素。

  • 4.属性过滤选用器
    质量过滤选用器的过滤规则是经过成分的性质来博取相应的因素。
    图片 16

  • 5.子元素过滤选用器
    子成分过滤选取器的过滤规则相对于其余的采取器稍微有些复杂,可是没什么,只要将成分的父成分和子成分区分清楚,那么使用起来也分外简单。其余还要小心它与普通的过滤采用器的界别。

图片 17

:nth-child()选用器是很常用的子元素过滤采取器,详细成效如下。
(1):nth-child(even)能选拔各样父成分下的索引值是偶数的因素。
(2):nth-child(odd)能选拔侮个父成分下的索引值是奇数的要素。
(3):nth-child(2)能选拔种种父成分下的索引值等于2的要素。
(4):nth-child(3n)能选拔姆个父成分下的索引值是3的翻番的成分,(n从0开首)。
(5):nth-child(3n+1)能采取侮个父成分F的索引值是(3n+1)的要素,(n从0开首)。

Note:
eq(index)只特出2个成分,而:nth-child将为每1个符合条件的父成分匹配子成分。同时应该小心到nth-child(index)的index是从1开始的,
而:eq(index)是从0开端的。同理:first和:first-child,last和:last-child也就像。

  • 6.表单对象属性过滤选用器
    此选用器重即便对所挑选的表单成分举行过滤,例比如选取被选中的下拉框,多选框等等。
    图片 18

2.3.4 表单采用器

为了使用户能够越来越灵敏地操作表单,jQuery中特地投入了表单选择器。
图片 19

2.5 采用器中的一些注意事项

2.5.1 选拔器中含有特殊符号的注意事项

  • 1.选取器中蕴涵 “·”、“#”、“(” 或 “]” 等特殊字符
    决此类错误的法子是应用转义符转义。
    图片 20
    利用字符转义获取上述因素:图片 21

  • 2.属性选拔器的引号难题
    1.3.1本子彻底废弃了1.1.0版本遗留下的@符号,要是你选拔1.3.1上述的本子,那么您不能够在质量前添加@符号,比如需求这么写:
    $(' div[title = "test"] ');
    而不是$(' div[@title = "test"] ');

2.5.2 选拔器中隐含空格的注意事项

采取器中的空格也是小心的,多3个空格或少,个空格大概会获得完全不一样的结果。
图片 22
图片 23

就此会出现分歧的结果,是因为后代选择器与过滤选择器的例外。

图片 24
如上代码是选择cfass为“test”的成分里面的隐藏成分(即后代选用器)。
而代码:
图片 25
则是选拔隐藏的class为“test”的因素(即过滤选择器)。

2.6 案例商讨—某网站品牌列表的效果

  • return false幸免连接跳转
    鉴于给超链接添加onclick事件,由此要求选取“return
    false”语句让浏览器认为用户并未单击该超链接,从而阻比该超链接跳转。

  • 常用选取器
    show():展现隐藏的匹配成分。
    css(name,value):给成分设置样式。
    text(string):设置富有匹配成分的文书内容。
    filter(expr):筛选出与钦点表明式匹配的要素集合,当中expr可以是两个采取器的构成。
    addClass(class):为合作的元赓添加内定的类名。

  • 判定成分是或不是出示
    if($category.is(":visible")){//执行代码}

  • 轮换动作toggle()方法
    图片 26

相关文章

网站地图xml地图