JQuery是一个快速，简洁的JavaScript库，它简化了遍历HTML文档，处理事件，执行动画以及向网页添加Ajax交互的方式。

jQuery 如何获取元素

  1.    jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他Javascript库的根本特点。
  3. 使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。
  5. 选择表达式可以是CSS选择器：
  7. 　　$(document) //选择整个文档对象
  9. 　　$('#myId') //选择ID为myId的网页元素
  11. 　　$('div.myClass') // 选择class为myClass的div元素
  13. 　　$('input[name=first]') // 选择name属性等于first的input元素
  15. ===========================================================================
  17. 也可以是jQuery特有的表达式：
  19. 　　$('a:first') //选择网页中第一个a元素
  21. 　　$('tr:odd') //选择表格的奇数行
  23. 　　$('#myForm :input') // 选择表单中的input元素
  25. 　　$('div:visible') //选择可见的div元素
  27. 　　$('div:gt(2)') // 选择所有的div元素，除了前三个
  29. 　　$('div:animated') // 选择当前处于动画状态的div元素

jQuery 的链式操作是怎样的

  1. $('div').find('h3').eq(2).html('Hello');
  3. 分解开来，就是下面这样：
  5. 　　$('div') //找到div元素
  7. 　　　.find('h3') //选择其中的h3元素
  9. 　　　.eq(2) //选择第3个h3元素
  11. 　　　.html('Hello'); //将它的内容改为Hello
  13. 这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。

jQuery 如何创建元素

  1. const $div = $('<div>1</div>')
  2. $div.appendTo(document.body)
  3. $div.append('<div>1</div>')

jQuery 如何移动元素

  1. jQuery设计思想之五，就是提供两组方法，来操作元素在网页中的位置移动。
  2. 一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。
  4. 假定我们选中了一个div元素，需要把它移动到p元素后面。
  7. 第一种方法是使用.insertAfter()，把div元素移动p元素后面：
  9. 　　$('div').insertAfter($('p'));
  12. 第二种方法是使用.after()，把p元素加到div元素前面：
  14. 　　$('p').after($('div'));
  16. 表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。
  17. 但是实际上，它们有一个重大差别，那就是返回的元素不一样。
  18. 第一种方法返回div元素，第二种方法返回p元素。
  1. 使用这种模式的操作方法，一共有四对：
  3. 　　.insertAfter()和.after()：在现存元素的外部，从后面插入元素
  5. 　　.insertBefore()和.before()：在现存元素的外部，从前面插入元素
  7. 　　.appendTo()和.append()：在现存元素的内部，从后面插入元素
  9. 　　.prependTo()和.prepend()：在现存元素的内部，从前面插入元素

jQuery 如何**修改元素的属性**

  1. .remove() 不保留被删除元素（类似直接删除）
  2. .detach() 保留被删除元素，有利于重新插入文档时使用（类似剪切，后面待用）
  3. .empty() 清空元素内容（但是不删除该元素）

后半段摘自@Ashine

jQuery的特点：闭包+链式操作

API是什么样子的

window.jQuery = function (selector) {
const elements = document.querySelectorAll(selector)

API = 对象（对象是{ key：value }）
API = { “addClass”：function( ) { console.log ( elements ) }
//访问了外部的elements，这是闭包
//闭包：函数访问外部的变量
API = { addClass( ) { console.log ( elements ) }

链式操作

return api
api.addClass(‘red’)**.addClass(‘blue’)**
黄色的返回的api是黄色的部分，,然后再去点蓝色的部分

api.addClass(‘red’)**.addClass(‘blue’).addClass(‘blue’)
api.addClass(‘red’) //**class=“test red”
**.addClass(‘blue’) //**class=“test red blue”
**.addClass(‘blue’) //class=“test red blue green”

函数里的this

obj.fn (p1) // 函数里的this 就是 obj
obj.fn.call(obj,p1)
return api = return this

注意看下面两段代码**
const api 然后 return api，可以直接改为 return

  1. window.jQuery = function (selector) {
  2.     const elements = document.querySelectorAll(selector)
  3.     //api 可以操作elements
  4.     const api = {
  5.         //闭包：函数访问外部的变量
  6.         addClass(className) {
  7.             for (let i = 0; i < elements.length; i++) {
  8.                 elements[i].classList.add(className)
  9.             }
  10.             return this // this 等价于 api（函数）
  11.         }
  12.     }
  13.     return api
  14. }
  1. window.jQuery = function (selector) {
  2.     const elements = document.querySelectorAll(selector)
  3.     //api 可以操作elements
  4.     return {
  5.         //闭包：函数访问外部的变量
  6.         addClass(className) {
  7.             for (let i = 0; i < elements.length; i++) {
  8.                 elements[i].classList.add(className)
  9.             }
  10.             return this // this 等价于 api（函数）
  11.         }
  12.     }
  13. }

注意下面代码等价（代码的演变过程）

  1. const api = jQuery('.test') //不返回元素们，返回的是API对象
  2. api.addClass('red').addClass('blue').addClass('green')
  1. const x = jQuery('.test') //不返回元素们，返回的是API对象
  2. x.addClass('red').addClass('blue').addClass('green'
  1. const x = jQuery('.test') //不返回元素们，返回的是API对象
  2. x.addClass('red')
  3.  .addClass('blue')
  4.  .addClass('green')
  1. jQuery('.test') //不返回元素们，返回的是API对象
  2.     .addClass('red')
  3.     .addClass('blue')
  4.     .addClass('green')
  1. jQuery('.test') //不返回元素们，返回的是API对象
  2. .addClass('red')
  3. .addClass('blue')
  4. .addClass('green')

链式风格，也叫jQuery风格，特殊函数jQuery
jQuery（选择器）函数用于获取对应的元素
但是它不返回元素
他返回一个对象，可以操作对应的元素，这个对象称之为 jQuery的构造函数。