diff options
Diffstat (limited to 'files/zh-cn/mozilla/add-ons/code_snippets/queryselector/index.html')
| -rw-r--r-- | files/zh-cn/mozilla/add-ons/code_snippets/queryselector/index.html | 114 |
1 files changed, 0 insertions, 114 deletions
diff --git a/files/zh-cn/mozilla/add-ons/code_snippets/queryselector/index.html b/files/zh-cn/mozilla/add-ons/code_snippets/queryselector/index.html deleted file mode 100644 index 364909681f..0000000000 --- a/files/zh-cn/mozilla/add-ons/code_snippets/queryselector/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: QuerySelector -slug: Mozilla/Add-ons/Code_snippets/QuerySelector -tags: - - $ - - $$ - - querySelector -translation_of: Archive/Add-ons/Code_snippets/QuerySelector ---- -<p> {{ fx_minversion_header(3.5) }}</p> - -<p>沿着其他框架，如jQuery或Prototype, 缩短“querySelector”的名称可以很方便：</p> - -<pre class="brush: js"> HTMLDocument.prototype.$ = function (selector) { - // Only for HTML - return this.querySelector(selector); - }; - $(`div`); - HTMLDocument.prototype.$$ = function (selector) { - // Only for HTML - return this.querySelectorAll(selector); - }; - $$(`div`);</pre> - -<pre class="brush: js">function $ (selector, el) { - if (!el) {el = document;} - return el.querySelector(selector); -} -function $$ (selector, el) { - if (!el) {el = document;} - return el.querySelectorAll(selector); - // Note: the returned object is a NodeList. - // If you'd like to convert it to a Array for convenience, use this instead: - // return Array.prototype.slice.call(el.querySelectorAll(selector)); -} -alert($('#myID').id); -</pre> - -<p>(请注意，在使用火狐浏览器控制台时，上述功能可自动使用.)</p> - -<p> XUL 甚至 XML可以很简单的支持（有以下两种替代方法，添加ChromeWindow.prototype 或者 Window.prototype，访问 this.document.querySelector, 或者根据jQuery 风格的链接，即在每个原型的$()方法中返回的‘this'</p> - -<pre class="brush: js">HTMLDocument.prototype.$ = function (selector) { // 只用于HTML - return this.querySelector(selector); -}; - -Example: - -<h1>Test!</h1> -<script> -HTMLDocument.prototype.$ = function (selector) { - return this.querySelector(selector); -}; -alert(document.$('h1')); // [object HTMLHeadingElement] -</script> -</pre> - -<pre class="brush: js">XULDocument.prototype.$ = function (selector) { // 只用于XUL - return this.querySelector(selector); -}; - -Example: - -<label value="Test!"/> -<script type="text/javascript"><![CDATA[ -XULDocument.prototype.$ = function (selector) { // 只用于XUL - return this.querySelector(selector); -}; - -alert(document.$('label')); // [object XULElement] -]]></script> -</pre> - -<pre class="brush: js">Document.prototype.$ = function (selector) { // 只用于XML - return this.querySelector(selector); -}; -var foo = document.implementation.createDocument('someNS', 'foo', null); // Create an XML document <foo xmlns="someNS"/> -var bar = foo.createElementNS('someNS', 'bar'); // add <bar xmlns="someNS"/> -foo.documentElement.appendChild(bar); -alert(foo.$('bar').nodeName); // gives 'bar' -</pre> - -<pre class="brush: js">Element.prototype.$ = function (selector) { // 可用于HTML,XUL,XML - return this.querySelector(selector); -}; - -HTML 例子: -<h1><a>Test!<a/></h1> -<script> -Element.prototype.$ = function (selector) { - return this.querySelector(selector); -}; -alert(document.getElementsByTagName('h1')[0].$('a').nodeName); // 'A' - -XUL 例子: -<hbox><vbox/></hbox> -<script type="text/javascript"><![CDATA[ -Element.prototype.$ = function (selector) { - return this.querySelector(selector); -}; -var XULNS = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'; -alert(document.getElementsByTagNameNS(XULNS, 'hbox')[0].$('vbox').nodeName); // vbox -]]></script> - -XML 例子: -<foo xmlns="someNS"><bar/></foo> in document earlier -var foo = document.getElementsByTagNameNS('someNS', 'foo')[0]; -alert(foo.$('bar')); - -</pre> - -<p>注意在XML中, # 'id'选择器将不能体现为'id'属性(因此一个这样名字的属性不一定是XML的ID，尽管他在HTML 和XUL中是这样的), 也不会对 <a href="/en/xml/xml:id" title="en/xml/id">xml:id</a> 起作用.</p> - -<p>然而，它将工作于指向没有无前缀属性选择器 (例如'id',但是不是 xml:id: <a class="external" href="http://www.w3.org/TR/selectors-api/#resolving" rel="freelink">http://www.w3.org/TR/selectors-api/#resolving</a>) (即使 CSS3 支持命名空间属性选择器: <a class="external" href="http://www.w3.org/TR/css3-selectors/#attrnmsp" rel="freelink">http://www.w3.org/TR/css3-selectors/#attrnmsp</a> 以及可能将xml:id 当作 #: <a class="external" href="http://www.w3.org/TR/css3-selectors/#id-selectors" rel="freelink">http://www.w3.org/TR/css3-selectors/#id-selectors</a> ).</p> |