jQuery函数

navicat：数据库管理工具

BootCDN：找第三方资源
CDN：在线加速
jQuery API中文手册/jQuery123.com

$===jQuery
console.log($);
结果：function jQuery(selector,context)   

jquery.js     学习
jquery.min.js 压缩代码，(项目上线时)部署环境 

toArray()方法：类数组对象->数组
可把JQuery对象转成数组，再用数组的方法

jQuery的方法都是对类数组中元素的批量操作

helloworld中间拼变量：
'hello'+name+'world'和""和``一样
模板字符串(es6)：`hello${name}world`

jQuery中回调函数中的第一个参数是index

针对元素的类操作——用途：animate动画库时
addClass(class|fn)
removeClass([class|fn])
toggleClass(class|fn[,sw])——切换类

prop方法：html元素  本身就有的属性
attr方法：html元素  自定义属性
    属性值是true或false，如checked默认选中、selected(select)
                         disabled(禁用组件)

一、 jQuery是什么，怎么用

例子：

<script src="../js/jquery.js"></script>
  <script> 
    //$(函数)——文档加载完后执行的函数
    $(function(){
      var $one=$('#one');  //因为右边的返回值是jQuery对象，加不加$标识都行                            
      console.log(one);    //Object{0:div#one}
      console.log($('.two')); //Object{0:div.two,1:div.two}

      //jQuery对象->dom节点，用[index]
      console.log(one[0]);    //<div id="one">
      //dom节点->jQuery对象，用jQuery函数
      console.log($(one[0])); //Object{0:div#one}

      //在body内追加节点
      var child=$(`
        <div>one</div>
        <div>one</div>
        <div>one</div>
        <div>one</div>
        <div>one</div>
        <div>one</div>
      `);
      $('.two').append(child);  //往class="two"后追加子节点
    })
 </script>

<div id="one">one</div>
<div class="two">two</div>
<div class="two">two</div>
结果：one
     two
     6个one
     two
     6个one

二、使用

1、在线访问方式cdn：别人提供了服务器，直接用服务器上的资源就行
2、离线访问，下载，通过script标签引入

四、参数

调用原型中的属性和方法

$代表jQuery对象，前3个都返回jQuery对象
(dom节点、"选择器字符串"、"html代码片段"(创建节点)、匿名函数）

1、类型转换：dom节点->jquery对象
  用jQuery操作过的内容-->jQuery对象(类数组对象) 里存放dom节点    
2、$('.one')——选中class为one的元素
3、$div=$("<div>hello</div>")
4、$(function(){})相当于window.onload=function(){} 文档结构加载完再执行

dom节点->jQuery对象：var $div=$('div');
jQuery对象->dom节点：$div[index]/遍历/过滤/映射jQuery对象
因为JQuery获取到的对象是一个数组，要转化为js对象就要使用下标

  $parent.append($div);
  {
    0:dom节点
  }

五、事件绑定

事件处理程序内的this指向dom节点

//有的参数可以省略，event,选择器[selector],参数,handler
事件绑定/代理：.on(event,[selector],参数,handler)，可理解为on是对Element元素事件绑定的封装
事件解绑：.off(event,[selector],handler)   
仅执行一次的事件：one(event,[selector],handler)
模拟触发：trigger(event,参数)
快捷绑定：.click(参数,handler)

例子：

<script src="../js/jquery-3.5.1.js"></script>
  <style>
    .parent {
      border: 1px solid blue;
      overflow: hidden;  /*清除浮动产生的影响*/
    }

    .child {
      width: 100px;
      height: 100px;