帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:Select  对象  Javascript  对象创建  选择器  JAVA  唯一  UNIQ  
JavaScript object that creates unique CSS selector for given object.

  • 源代码名称:css-selector-generator
  • 源代码网址:http://www.github.com/fczbkk/css-selector-generator
  • css-selector-generator源代码文档
  • css-selector-generator源代码下载
  • Git URL:
    git://www.github.com/fczbkk/css-selector-generator.git
  • Git Clone代码到本地:
    git clone http://www.github.com/fczbkk/css-selector-generator
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/fczbkk/css-selector-generator
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • CSS选择器生成器

    为给定的DOM元素创建唯一CSS选择器的JavaScript对象。

    在任何现代浏览器中都应该能正常工作。 它没有外部依赖关系。

    它还生成较短的选择器,并且比许多其他库更快和/或者更健壮- 请参见这个比较,并选择最佳的替代方案。

    :如何使用

    // first, create instance of the object with default optionsmy_selector_generator =newCssSelectorGenerator;// create (or find reference to) any elementmy_element =document.createElement('div');document.body.appendChild(my_element);// then you can get unique CSS selector for any referenced elementmy_element_selector =my_selector_generator.getSelector(my_element);

    最常见的用例是为任何引用的元素查找一个惟一的CSS选择器。 例如,如果你的用户选择了页面上的任何元素,就可以使用它:

    // track every clickdocument.body.addEventListener('click', function (event) {
     // get reference to the element user clicked onvar element =event.target;
     // get unique CSS selector for that elementvar selector =my_selector_generator.getSelector(element);
     // do whatever you need to do with that selectorconsole.log('selector', selector);
    });

    命令行选项

    在创建实例时,或者通过 setOptions() 方法,你可以设置选项:

    custom_options = {selectors: ['tag', 'id', 'class']};// set options when creating an instancemy_selector_generator =newCssSelectorGenerator(custom_options);// or set options latermy_selector_generator.setOptions(custom_options);

    选择器

    默认值: ['id', 'class', 'tag', 'nthchild']

    到目前为止,唯一可用的选项是构造惟一CSS选择器时将使用的选择器类型列表。 你可能需要调整这里列表以进行浏览器兼容性。

    注意:生成器在测试它们的唯一性时保持选择器的顺序。 所以如果你设置 ['class','id'] 并且元素将具有惟一的类名和 ID,结果选择器将包含类名,即使ID是强的。 另外,保留 nthchild 选择器,因为它总是生成惟一选择器,它将阻止使用任何其他选择器类型 behind。

    可用值:

    • 'tag' - 标记选择器,比如 pdiv
    • 'id' - ID选择器 比如 #myElement
    • 'class' - 类选择器它将获取元素的所有类名。 比如 .myClass.firstClass.secondClass
    • 'nthchild' - n 子选择器。 它由IE9和更高版本支持,但是为每个可能的元素创建一个惟一的CSS选择器是必要的。 可以从列表中删除向后浏览器兼容性,然后确保对要目标的每个元素使用IDs或者类名。 比如 :nth-child(0)
    • 'attribute' - 属性选择器与IE7兼容,更高。 它不会为元素和类 NAME 属性的ID创建匹配的对。 默认情况下禁用这里类型的选择器。 比如 [rel=someRel]

    Bug 报告,功能请求和联系人

    在 GitHub Bug 中,如果你发现任何,如果你有功能请求或者任何问题,请在GitHub服务器上或者向我发送一个关于 riki@fczbkk.com

    许可证

    CSS选择器生成器是在 UNLICENSE许可证发布的。 随便用什么方法。



    文章标签:JAVA  Javascript  对象  Select  选择器  UNIQ  唯一  对象创建  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语