jQuery语法对应的DOM API ——选择元素 – WEB前端开发

我是创始人李岩:很抱歉!给自己产品做个广告,点击进来看看。  
英文原文: http://blog.garstasio.com/you-dont-need-jquery/selectors/
愚人码头注:

选择元素

有多少次你看到一个Web应用程序或库使用jQuery执行简单琐碎的元素选择?有多少次 这样写: $(#myElement') ? 或者这样 $('.myElement') ?嘘……你不需要用jQuery选择元素!这使用DOM API也很容易做到。

  1. IDs
  2. CSS Classes
  3. Tag Names
  4. Attributes
  5. Pseudo-classes
  6. Children
  7. Descendants
  8. Exclusion Selectors
  9. Multiple Selectors
  10. See a Pattern?
  11. Filling in the Gaps
  12. Next in this Series

By ID

jQuery

				// returns a jQuery obj w/ 0-1 elements
				$('#myElement');
			

DOM API

				// IE 5.5+
				document.getElementById('myElement');
			

…或者…

				// IE 8+
				document.querySelector('#myElement');
			

这两种方法返回一个 Element (元素)。 需要注意的是 使用 getElementById 比使用 querySelector 更高效 。

请问jQuery的语法提供任何好处吗?我没有看到一个。你呢?

By CSS Class

jQuery

				// returns a jQuery obj w/ all matching elements
				$('.myElement');
			

DOM API

				// IE 9+
				document.getElementsByClassName('myElement');
			

…或者…

				// IE 8+
				document.querySelectorAll('.myElement');
			

第一个方法返回的 HTMLCollection ,并且 效率最高的是第二个方法 。 querySelectorAll 总是返回一个 NodeList (节点列表) 。

同样,这里真的很简单的东西。为什么要使用jQuery?

By Tag Name

举个例子,选择页面上所有的 <div> 元素:

jQuery

$('div');

DOM API

				// IE 5.5+
				document.getElementsByTagName('div');
			

…或者…

				// IE 8+
				document.querySelectorAll('div');
			

正如预期的那样, querySelectorAll (返回 NodeList )比 getElementsByTagName (返回 HTMLCollection )效率低。

By Attribute(属性)

选择所有”data-foo-bar”值为”someval”的元素:

jQuery

$('[data-foo-bar="someval"]');

DOM API

					// IE 8+
					document.querySelectorAll('[data-foo-bar="someval"]');
				

DOM API和jQuery语法非常相似。

By Pseudo-class(伪类)

选择所有在指定表单中的当前无效(:invalid 伪类)字段。假设我们的表单 ID为”myForm”。

jQuery

$('#myForm :invalid');

DOM API

					// IE 8+
					document.querySelectorAll('#myForm :invalid');
				

Children(子元素)

选择一个特定元素的所有子元素。 假设我们的特定元素 ID为 “myParent”。

jQuery

$('#myParent').children();

DOM API

					// IE 5.5+
					// NOTE: This will include comment and text nodes as well.
					document.getElementById('myParent').childNodes;
				

…或者…

					// IE 9+ (ignores comment & text nodes).
					document.getElementById('myParent').children;
				

但是,如果我们只想找到特定的子元素呢?比如,有 “ng-click”属性的子元素?

jQuery

$('#myParent').children('[ng-click]');

…或…

$('#myParent > [ng-click]');

DOM API

					// IE 8+
					document.querySelector('#myParent > [ng-click]');
				

Descendants(后代元素)

找到#myParent下面所有”a”元素。

jQuery

$('#myParent A');

DOM API

					// IE 8+
					document.querySelectorAll('#myParent A');
				

Excluding Elements(排除元素)

选择所有 <div> 元素,排除那些有”ignore”样式类 <div> 元素。

jQuery

$('DIV').not('.ignore');

…或者…

$('DIV:not(.ignore)');

DOM API

					// IE 9+
					document.querySelectorAll('DIV:not(.ignore)');
				

Multiple Selectors(多重选择)

选择所有 <div> , <a><script> 元素。

jQuery

$('DIV, A, SCRIPT');

DOM API

					// IE 8+
					document.querySelectorAll('DIV, A, SCRIPT');
				

See a Pattern?

如果我们专注于选择器的支持,并且不需要处理IE8以下的浏览器,我们只需用这个替代jQuery:

					window.$ = function(selector) {
					var selectorType = 'querySelectorAll';
					if (selector.indexOf('#') === 0) {
					selectorType = 'getElementById';
					selector = selector.substr(1, selector.length);
					}
					return document[selectorType](selector);
					};
				

But I Want More!

对于绝大多数 项目中,选择器支持到Web API就足够了。但是,如果你不幸需要支持IE7?在这种情况下,你可能需要一些第三方的代码来提供一些帮助。

当然,你仅仅需要引入jQuery,但当你只需要支持现在先进的选择器时,为什么用这么大的代码库呢?相反,尝试一下micro-library(微小的库)完全专注于元素选择。考虑, Sizzle ,这恰好是jQuery使用的选择库。 Selectivizr 是另一种非常小的选择库,在很老的浏览器上也能支持CSS3选择器。

Next

下一篇:操作DOM元素,敬请期待!

本文被转载1次

首发媒体 Web前端开发 | 转发媒体

随意打赏

提交建议
微信扫一扫,分享给好友吧。