jQuery 就是一个 JS 库,它并不是一门独立的语言。jQuery 存在的原因是纯 JS 操作 DOM 并不方便。
我们可以使用 <script>
标签向网页中引入 jQuery。在服务器上存储 js 代码并通过制定路径引入网页(使用托管的 CDN-内容分发网络上的特定版本 jQuery)。CDN 一般比服务器快很多,也能利用浏览器的缓存特性,在产品中使用 jQuery 的精简版本(min
),该版本文件体积非常小,加载速度更快。
$
是一个函数,接受传入参数,返回一个对象,甚至是带有一些方法的对象,和其它 JS 对象一样。
选择器
按标签选择
let listElements;
listElement = $('li');
按类选择
let articles;
articles = $('.article-item');
按 ID 选择
let nav;
nav = $('#nav');
重新访问树结构(遍历方法)
jQuery 为我们提供了在 DOM 树里遍历的方法。
如果选择了 ID 为 Cameron
的节点,我能通过调用 .parent()
方法选择我的直接父元素
。该方法能向 DOM 树上遍历一层
,所以现在我就选择了 ID 为 MarkSuzanne
的元素。
我们可以通过 .parents()
来选择我的父元素、祖父元素以及更上层的祖先元素。向 .parent()
方法传入其他选择器来筛选一些特定的父元素
。比如我只想要我的祖父元素 JerryJudy
,我们可以通过 .parent('#JerryJudy')
来选择它。
值得注意的是,.parent()
方法只遍历了 DOM 树的上一层,如果想要向上不只一层,那么就要用 .parents()
能让我们调用 DOM 树中所有的父元素
。
同样的,我们也能使用 .children()
方法向下遍历 DOM 树并选择我们的子元素。该方法创建了一个 jQuery 集合,这个集合包括所有的直接子元素
。也就是说该方法只遍历了一层
。
但如果想要查询子元素的子元素,假使存在的话,我们使用 .find()
方法来找到它们。该方法向下遍历不只一层 DOM 树。与 parent
和 parents
类似。
最后是 sblings()
方法,该方法返回当前元素的所有兄弟元素
。
let articleList, h1, kids, parents;
articleList = $('.article-list');
h1 = articleList.sublings('h1');
kids = articleList.find('*');
parents = articleList.parents('div');