jQuery的小结

162 阅读2分钟

1. jQuery 如何获取元素

jQuery的用法,就是选择网页中某个元素,然后对其进行某种操作。所以选择正确的元素是非常重要的。

   $('#idxx'); // 选择 id=idxx 的元素,返回值为 单个元素。
   $(element); // 选择指定元素名称匹配所有元素,返回值为 元素集合。
   $('.className');  // 选择 class = className 的元素, 返回值为 元素集合。
   $("*");  // 选择匹配所有元素,返回值为 元素集合。
   $('selector1, selector2');  // 将多个选择器匹配的结果合并在一起后返回, 返回值为 元素集合。
   $( ancestor, descendant); // 根据 ancestor 任何有效的选择器,descendant 用来删选后代元素的选择器,后代元素可能是孩子,孙子,等等等。返回值为 元素集合。
   $(parent>child);  // 根据父元素,匹配选择子元素。返回值为 元素集合。
   $(prev + next);  // 匹配 prev 后面紧挨着的相邻的 同级 元素。返回的为 元素集合。
   $('div:first');  // 选择 div 中的第一个 div,也可以使用 $('div').first() ,返回值为 单个元素。
   $('div:last');  // 选择 div 中的最后一个元素 div,也可以使用 $('div').last() ,返回值为 单个元素。
   $('div:eq(5)');  // 选择 div 中的第六个元素 div,也可以使用 $('div').eq(5) 当然也可以是 gt(index)、lt(index),返回值为 单个元素。
   $('div').filter('.className');  // 选择 class 为 className的div元素。
      

上面只是列举了一小部分选择器,选择器大致分为基本选择器、层次选择器、过滤选择器和表单选择器,过滤选择器还可以继续分为简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性过滤选择器。至于各个选择器的细节以及用法,可以去查看jQuery的中文文档以及阮一峰的博客

2. jQuery 的链式操作是怎样的

链式操作就是最终选中网页元素以后,可以对它进行一系列操作,并且所有操作可以连接在一起,以链条的形式写出来。

$('.test').find('.child1').addClass('blue').addClass('red')

其原理就是每一步操作的jQuery返回的都是一个jQuery对象,使得操作可以连接在一起。下面是简单实现 find 和 addClass 的方法。

window.$ = window.jQuery = function (selectorOrArrayOrTemplate) {
  let elements;
  if (typeof selectorOrArrayOrTemplate === "string") {
    if (selectorOrArrayOrTemplate[0] === "<") {
      elements = [createElement(selectorOrArrayOrTemplate)];
    } else {
      elements = document.querySelectorAll(selectorOrArrayOrTemplate);
    }
  } else if (selectorOrArrayOrTemplate instanceof Array) {
    elements = selectorOrArrayOrTemplate;
  }
  function createElement(string) {
    const container = document.createElement("template");
    container.innerHTML = string.trim();
    return container.content.firstChild;
  }
  return {
    oldApi: selectorOrArrayOrTemplate.oldApi,
    addClass(className) {
      for (let i = 0; i < elements.length; i++) {
        elements[i].classList.add(className);
      }
      // 返回值可以是 api,实现链式操作
      return this;
    },
    find(selector) {
      let array = [];
      for (let i = 0; i < elements.length; i++) {
        const elementsArray = Array.from(
          elements[i].querySelectorAll(selector)
        );
        array = array.concat(elementsArray);
      }
      array.oldApi = this;
      // 如果返回 return array,那就不能实现链式操作了。所以需要返回一个新的api
      return jQuery(array);
    },
    end() {
      return this.oldApi;
    },
  };
};

3. jQuery 如何让创建元素

jQuery动态创建元素,使用的就是 document.createElement,配合标签元素 .innerHTML, 可以在指定父元素的内部末尾创建新的元素,并且覆盖元素内部的内容。使用jQuery创建元素的方法非常简单,只需要把新的元素直接传入jQuery的构造函数就行了。

$('<div>hello world</div>')

4. jQuery 如何移动元素

提供了两组方法,用来操作元素在网页中的位置移动,另一组方法是移动其他元素,使得目标元素移动到我们逍遥的位置。

  • 第一种方法就是使用 .insertAfter(),把div元素移动到 p 元素的后面:
$("div").insertAfter($("p"));

第二种方法就是使用 .after(),把 p 元素加到 div 元素的前面:

$("p").after($("div"));

还有其他的四队的操作方法

.insertAfter()  和 .after():现存元素的外部, 从后面插入
.insertBefore() 和 .before():在现存元素的外部,从前面插入元素
.appendTo() 和 .append():在现存元素的内部,从后面插入元素
.prependTo() 和 .prepend():在现存元素的内部,从前面插入元素

5. jQuery 如何修改元素属性

常见使用的方法就是attr方法,根据传递的参数不同有不同的情况:

  • 只传递一个参数的情况

当传递的是字符串名称时,便是获取匹配元素的集合中的第一个元素的属性值。

  • 传递的为两个参数的情况

当传递的为匹配的字符串名称和属性值时候,表示设置一个或多个属性值。
当传递的为匹配的字符串名称和函数时候,.attr(attributeName,function(index,attr)),这个函数返回用来设置的值,this指向当前的元素接收表示元素在匹配集合中的索引位置的参数和表示元素上原来的该属性值的参数。

prop方法,与attr方法不同的是,prop方法也是用来获取和设置属性的值,但是prop 添加属性名称,该属性就会生效。另外prop() 方法适用于 Boolean 值的操作。