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元素中的层系关系来赢得一定元素,例如后代元素、子元素、相邻元素和兄弟元素等,那么层次选择器是一个好好的选项。
图片 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)只相当一个因素,而:nth-child将为各级一个符合条件的父元素匹配子元素。同时该专注到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 选择器中带有空格的注意事项

选择器中的空格也是当心的,多一个空格或丢失,个空格或会沾全不同之结果。
图片 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地图