jQuery笔记

jQuery如何获取元素？

jQuery的基本设计思想和主要用法，就是 “选择某个网页元素，然后对其进行某种操作” 。
使用jQuery的第一步，就是将一个选择表达式，放进构造函数jQuery()，然后得到被选中的元素

// 可以将构造函数简写为'$'，选择表达式也可以是CSS选择器
const api = jQuery(document) // 选择整个文档对象
const api = jQuery('.test') = $('.test') // 选择class为test的元素

jQuery 的链式操作是怎样的？

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

$('.test')  //选中所以为test的元素
.find(".child") // 查找并选择class为child的元素 
.addClass("red") // 添加red class 
.addClass("blue")// 添加blue class 
.addClass("green") // 添加green class

之所以能实现链式操作，原理在于每一步的jQuery操作，返回的都是一个jQuery对象。

// 一个简单jQuery封装
window.$ = window.jQuery = function(selector){
  let elements = document.querySelectorAll(selector);
  return { 
    addClass(className){
      for(let i = 0; i < elements.length; i++){
        elements[i].classList.add(className);
      }
      return this; // 返回jQuery对象本身,支持链式操作。
    }
  }

$('.test').addClass("red")

jQuery如何创建元素

创建元素非常简单，只需要把新元素直接传入jQuery的构造函数即可

$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');

如何移动元素

假定我们选中了一个div元素，需要把它移动到p元素后面。

第一种方法是使用.insertAfter()，把div元素移动p元素后面：

$('div').insertAfter($(p))

第二种方法是使用.after，把p元素加到div元素前面：

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

表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。你可以根据需要，选择到底使用哪一种方法。

使用这种模式的操作方法，一共有四对：

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

jQuery 如何修改元素的属性

jQuery的设计思想之一：使用同一个函数，来完成getter和setter, 通过重载的方法，实现取值或赋值操作。

$('h1').html();  // html没有参数，表示取出h1的值
$('h1').html('Hello');  // html()有参数Hello,表示对h1进行赋值
复制代码

常见的getter/setter函数：

.html()  // 取出或者设置HTML内容
.text()  // 取出或设置text内容
.attr()  // 取出或设置某个属性的值
.width()  // 取出或设置某个元素的宽度
.height()  // 取出或设置某个元素的高度
.val()  // 取出或设置某个表单元素的值

需要注意的是：如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，只取出第一个元素的值（text()是例外，它取出所有元素的text内容）