jQuery之美——基本选择器

上篇回顾：jQuery之美——测试操作

在jQuery的使用中，选择器是使用率最高的方法，那么从本篇文章开始，介绍jQuery的选择器的使用。依小编自己的看法就是一个WEB前端开发者使用jQuery选择器的方式与他的水平有直接关系。一个好的WEB前端开发者，一定会对jQuery选择器的使用有着一定的考究。因为在选择DOM元素上，与“性能”有着一定的联系。

<!-- html -->
<div id="div1" class="style1 style2">
    <span class="style3">web前端梦之蓝</span>
</div>

<!-- js -->
/* 选择 id 为 "div1" 的元素 */
$("#div1");
/* 选择 class 包含 "style1" 的元素 */
$(".style1");
/* 选择 class 包含 "style2" 的元素 */
$(".style2");
/* 选择 class 包含 "style1" 和 "style2" 的元素 */
$(".style1.style2");
/* 选择 元素标记名为 "div" 的元素 */
$("div");
/* 选择 元素标记名为 "div" 或 "span" 的元素 */
$("div,span");

在上述简短的代码中，向大家示例了jQuery 中最基本的选择器，有大家用过的，也有可能没用过的。已经用过的当作是一次复习，没有用过的当前是一次学习，可以自己去尝试一下它们的区别。

当然了jQuery的基本选择器中可不止这简单的几种，其它的方式在后续的文章中说明。

说到了选择器小编有一套自己的选择器优先级从左至右(高->低)：

ID选择器 -> 类名选择器 -> 元素标记名选择器

当元素有ID时，ID为最优先的选择条件，类名次之，元素标记名选择器可在有一定的结构关系时使用。

前端初学者在刚学习时可能会碰到这种错误：. html is not a function

当自己已经明确有正确的引用jQuery库时，提示当前元素的 html() 不是一个方法，这是当前元素非jQuery对象，只有jQuery对象才能使用jQuery的方法。请看下面的源码：

var spanEl=document.querySelector(".style3");
console.log(spanEl.html());

通过javaScript 原生方法获取了 ".style3"的span元素，调用 html() 时报错，错误信息为： Uncaught TypeError: spanEl.html is not a function

解决当前错误方法如下：

console.log($(spanEl).html());  //web前端梦之蓝

这种写法用的应该不多，但下面这种写法肯定用的不少

$(this).html();

通过将原生的DOM元素传给jQuery的选择器方法后，就能转为jQuery对象，就能正常的使用jQuery的方法了。大家可以在修改前开发者类似的错误时这样解决，小编见过太多的“未入门WEB前端开发者”，一段简短的代码中包含多种第三方库的方法，小编只能表示“真是TMD人才”！

用好了jQuery选择器是集：BUG少，效率高，性能好，美观于一体的事，提升你的 level  就从选择器开始吧！（选择器要用好，你的CSS水平也不能落下，写好布局是写好JS的前提）。

下一篇 子元素选择器 是重中之重，敬请期待！

下篇预告：jQuery之美——子元素选择器

更多精彩文章，敬请持续关注——WEB前端梦之蓝

用微信扫描下方的二维码可直接关注该公众号哦，或者打开微信公众号搜索 “web-7258”，关注后会在第一时间将最新文章推送给您哦