zoukankan      html  css  js  c++  java
  • jQuery DOM

    一、选择符

    1.1 使用$()函数

    使用$()函数,这个函数接受CSS选择符作为参数,充当一个工厂,返回包含页面中对应元素的jQuery对象。所有能在样式表中使用的选择符都可以传给这个函数。

    选择符 CSS jQuery 说明
    标签名 p{} $('p') 取得文档中所有的段落
    ID #some-id{} $('#some-id') 取得文档中ID为some-id的一个元素
    .some-class{} $('.some-class') 取得文档中类为some-class的所有元素
    子元素组合符 #selected-plays>li{} $('#selected-plays>li') 取得文档中id为selected-plays的直接子元素
    不包含某个元素 #selected-plays li:not(.horizontal){} $('#selected-plays li:not(.horizontal)') 取得selected-plays的后代li元素,不包括horizontal类的li元素
    1.2 属性选择符

    属性选择符使用一种从正则表达式中借鉴而来的通配符语法,

    以 表示值在字符串的开始,

    以 表示值在字符串的结尾。

    用星号 表示要匹配的值可以出现在字符串中的任意位置,

    用 表示对值取反。

    $('a[href^="mailto:"]')  选择以mailto:开头的锚元素a

    $('a[href$=".pdf"]') 选择以.pdf结尾的链接

    $('a[href*="henry"]') 选择任意位置包含henry的所有链接

    1.3 自定义选择符

    使用自定义选择符的时候,就无法使用速度最快的原生方法。因此建议在能够使用原生方法的情况下,就不要频繁使用自定义选择符,以确保性能。

    自定义选择符通常跟在一个CSS选择符后面,基于已经选择的元素集的位置来查找元素。自定义选择符的语法与CSS中的伪类选择符语法相同,即选择符以冒号:开头。

    1):eq(n)

    $('div.horizontal:eq(1)')  从horizontal类的div集合中选择第2项

    JS数组采用从0开始的编号方式,而CSS则是从1开始的。

    2):odd  :even

    odd奇数  even 偶数

    3):nth-child()

    这个选择符相对元素的父元素而非当前选择的所有元素来计算位置,它可以接受数值、odd或even作为参数

    nth-child是jQuery中唯一从1开始计数的选择符。

    4):contains()

    $('td:contains(Henry)') 选择表格单元中含有Henry字符内容的表格。

    该选择符区分大小写。

    5)基于表单的选择符

    :input  输入字段、文本区、选择列表和按钮元素

    :button 按钮元素或type属性值为button 的输入元素

    :enabled 启用的表单元素

    :disabled 禁用的表单元素

    :checked 勾选的单选按钮或复选框

    :selected 选择的选项元素

    组合使用这些表单选择符可以更有针对性

    $('input[type="radio"]:checked') 选择所有选中的单选按钮(而不是复选框)

    $('input[type="password"],input[type="text"]:disabled') 选择所有密码输入字段和禁用的文本输入字段

    二、DOM遍历方法

    1) .filter()方法

    $('tr:even').addClass('alt')    等同于    $('tr').filter(':even').addClass('alt')

    .filter()方法十分强大,可以接受函数参数,通过传入参数,可以执行复杂的测试,以决定相应uansu是否应该保留在匹配的集合中。

    如要为所有外部链接添加一个类

    $('a').filter(function(){
    
      return this.hostname&&this.hostname!=location.hostname;
    
    }).addClass('external');

    .filter()方法会迭代所有匹配的元素,对每个元素都调用传入的函数并测试函数返回值。如果函数返回false,则从匹配集合中删除相应元素;如果返回true,则保留相应元素。

    2) .next()  .nextAll()

    只选择下一个最接近的同辈元素。要想选择后面的所有同辈元素,可以使用.nextAll()

    3) .prev()  .prevAll()

    4) .siblings()

    选择处于相同DOM层次的所有其他元素,无论这些元素处于当前元素之前还是之后。

    5) .addBack()

    使用.nextAll()选择了后面所有同辈元素后,再使用.addBack()可以将该元素也选中

    6) .parent()   .children()

    7).end()

    $('td:contains(Henry)')    //取得包含Henry的所有单元格
    .parent() //取得它的父元素
    .find('td:eq(1)') //在父元素中查找第2个单元格
    .addClass('highlight') //为该单元格添加类
    .end() //恢复到包含Henry的单元格的父元素
    .find('td:eq(2)') //在父元素中找到第3个单元格
    .addClass('highlight') //给他添加类

    三、访问DOM元素

    1).get()

    var tag=$('#my-ele').get(0).tagName

    或者var tag=$('#my-ele')[0].tagName

    2) $()

    $()函数可以将DOM元素作为参数,这样可以方便地将引用DOM元素的this转换为jQuery对象。

    通过在事件处理程序中使用$(this),可以为相应的元素创建jQuery对象,然后就如果使用CSS选择符找到该元素一样对它进行操作。

  • 相关阅读:
    例7-13
    例7-11
    例7-1
    例6-5
    例6-3
    例6-2
    例6-1
    例5-9
    例5-8
    例5-7
  • 原文地址:https://www.cnblogs.com/YangqinCao/p/5514429.html
Copyright © 2011-2022 走看看