认识jQuery函数和对象

◼ jQuery是一个工厂函数( 别名$ )，调用该函数，会根据传入参数类型来返回匹配到元素的集合，一般把该集合称为jQuery对象。

   如果传入假值：返回一个空的集合。
   如果传入选择器：返回在在documnet中所匹配到元素的集合。
   如果传入元素：返回包含该元素的集合。
   如果传入HTML字符串，返回包含新创建元素的集合。
   如果传入回调函数：返回的是包含document元素集合, 并且当文档加载完成会回调该函数。
   因为函数也是对象，所以该函数还包含了很多已封装好的方法。如：jQuery.noConflict、jQuery.ready等

◼ jQuery函数的参数：

   jQuery( selector [, context ] ) ：selector 是字符串选择器；context 是匹配元素时的上下文，默认值为 document
       ✓ jQuery( selector [, context ] )
       ✓ jQuery( element )
       ✓ jQuery( elementArray )
       ✓ jQuery()
    jQuery( html [, ownerDocument ] )
       ✓ jQuery( html [, ownerDocument ] )
       ✓ jQuery( html )
    jQuery( callback )

    // 1.假值： ''  false  null undefined NAN....
    // console.log( jQuery('') )

    // 2.字符串（选择器）
    // console.log( jQuery('ul li') )

    // 3.字符串（ html string）
    // console.log( jQuery('<div>') ) // 创建了一个div元素
    // document.createElement('div')  

    // var $els = jQuery(`
    //   <div>我是div</div><p>我是一个p</p>
    // `)
    // $els.appendTo('body')
    // console.log($els)


    // 4.元素类型
    // var bodyEl = document.querySelector('body')
    // console.log(jQuery(bodyEl))


    // 5.监听文档的解析完成
    // var $doc =jQuery(function() {

    // })
    // console.log(jQuery($doc))

认识jQuery对象

◼ jQuery对象是一个包含所匹配到元素的集合，该集合是类数组(array-like)对象。
    jQuery对象是通过调用jQuery函数来创建的。
    jQuery对象中会包含N（>=0）个匹配到的元素。
    jQuery 对象原型中包含了很多已封装好的方法。例如：DOM操作、事件处理、动画等方法。
◼ 下面我们通过调用jQuery函数来新建一个jQuery对象，例如：
    $() 新建一个空的jQuery对象
    $(document)  新建一个包含document元素的jQuery对象
    $('选择器')  新建一个包含所选中DOM元素的jQuery对象

   //1.创建一个空的jQuery对象
    console.log(jQuery())
    //2.创建一个匹配到document元素的集合->jQuery对象
    console.log(jQuery(document))
    //3.匹配多个li元素的集合
    // console.log(jQuery('ul li'),)
    // 查找div里面的li元素
    console.log(jQuery('ul li',document.querySelector('div')))

jQuery对象 与DOMElement的区别

jQuery对象 与DOM Element 的转换

◼ jQuery对象转成DOM Element
  .get(index)： 获取 jQuery 对象中某个索引中的 DOM 元素。
    ✓ index一个从零开始的整数，指示要检索的元素。
    ✓ 如果index超出范围（小于负数元素或等于或大于元素数），则返回undefined。
  .get() : 没有参数，将返回jQuery对象中所有DOM元素的数组。
◼ DOM Element转成jQuery对象
  调用jQuery函数或者$函数
  例如：$(元素)

   // 拿到jQuery转成DOM-Element对象
    const $li = jQuery("ul li")
    // console.log($li)
    // 方式一
    // console.log("%O",$liEl[0])
    // const liEl = $liEl[0]
    // 方式二:
    console.log($li.get())//获取到匹配元素集合中所有元素
    console.log($li.get(0))//获取到匹配元素集合中的某一个元素
    //2.DOMElement 转成jQuery对象
    // const ulEl = document.querySelector("ul")
    // console.log("%O",ulEl)
    // // 目的想调用jQuery对象中的方法
    // console.log(jQuery(ulEl))//jQuery.fn.init {0: ul, length: 1}