Jquery

1. jquery
   jQuery3.4.1
   jquery知识点

   0. 特点
      批量操作，本身是一个类数组对象
      链式调用，dom方法调用完毕返回当前对象
      

      
      ${(}^{\prime }<span>hello</span{>}^{\prime }).appendTo($(.one))
      .css(“background”,“lightblue”)

   1. jQuery构造函数
      $ <=> jQuery

      1. $(回调函数)
         回调函数在当前文档加载完毕之后执行
         window.onload
         $(function(){})
      2. $(css3选择器)
         将css3选择器中指定的dom获取到，并且分装到jQuery对象
      3. $(dom)
         var one = document.getElementbyId(“one”);
         var $one = $(one)
      4. $(html)
         var $one = $(‘
         hello
         ’)
         dom -> jquery

   2. jQuery对象
      类数组对象，元素是DOM元素（Node节点对象）

      var $one = $(".one")
      $one.on(“click”,function(){

      })

   3. jQuery选择器
      核心选择器
      层次选择器
      属性选择器
      伪类选择器
      伪元素选择器

   4. 事件机制
      $dom.on(event[,子元素],handler)
      $dom.on({
      eventType:handler,
      eventType:handler,
      …
      }[,子元素])
      $dom.off(event[,子元素],handler)

       $("ul.left_nav").on("click","li",function(event){
       	this 		-> li
       	event.currentTarget -> li
       	target -> li/a/ul
       })
       将事件绑定在ul上，为li做代理，this指向
      

      trigger(xxx)
      模拟事件xxx
      one()
      绑定一次
      click(handler)
      => on(“click”,handler)
      dbclick()
      mouseover()
      mouseout()
      blur()
      focus()
      …

   5.1) dom操作
   empty()
   remove()
   clone() 拷贝jquery东西
   wrap() 在指定元素外包裹一个元素
   

   
   

   
   

   
   

   
   
   
   $(".inner").wrap($("
   "));
   append() 在元素内追加一个子元素
   prepend() 在元素内插入一个子元素
   html()
   text()
   after() 在元素追加一个兄弟元素
   before() 在元素前插入一个兄弟元素
   replaceAll()替换
   5.2） 遍历方法
   eq()
   filter()
   first()
   last()
   each(function(index,item){})
   map(function(index,item){})
   返回值为jQuery对象
   children() 获取孩子节点或对孩子节点进行过滤
   find() 对后代节点进行过滤
   parent() 获取孩父节点或对直接父节点进行过滤
   parents() 对所有父节点进行过滤
   siblings() 获取所有的兄弟节点
   5.2) 属性
   attr(key) 获取key的val
   attr(key,val) 设置key的为val
   prop(key)
   prop(key,val)
   val()
   css(key)
   css(key,val)
   addClass()
   removeClass()
   hasClass()
   
   $("#one").attr(“name”);
   $("#one").attr(“name”,“password”);

   6. ajax
      底层接口
      $.ajax(url,{
      method
      data
      dataType:json/xml/text/javascript…
      beforeSend
      success
      error
      complete
      processData
      contentType
      application/x-www-form-urlencoded
      text/plain
      multipart…

       		除了上面三种基础的请求外，都会发送一个前置options请求
       		application/json
       	async
       	...
      
       })
       $.ajax({})
       $.ajaxSetup({
      
       })
      

      速写方法
      $.get(url[,data][,handler][,dataType])
      $.post(url[,data][,handler][,dataType])

   7. 动画
      底层接口
      animate()
      快捷应用
      fadeIn
      fadeOut
      …

   8. bom
      间歇调用、超时调用
      setInterval(handler,毫秒数)
      setTimeout(handler,毫秒数)

      1. 定时与后台进行交互
      2. 动画
         呼吸灯 css3

2. 项目
   批量删除
   var ids = [1,3];
   =>
   ids=val&ids=val

3. bootstrap4.3

   0. 介绍
      html/css/js框架，方便创建一个响应式的，移动优先的网页

      1. 无需编写大量的基础的css代码
      2. 无需编写大量的基础的js代码
      3. js依赖jQuery、popper（定位）

      css布局
      css基础样式
      组件（结构，样式，功能）

      如果编写H5页面，并且这网页在手机中打开 -->

   1. hello world

      1. 导入依赖
         cdn
         本地
         模块化（es6）
      2. 应用
         .btn

   2. 布局(12栅格系统)
      浮动布局/伸缩盒布局/定位布局

      container
      在特定的屏幕都会有一个最大的宽度，一般不会占满整个屏幕
      container-fluid
      在任意屏幕下都会占满整个屏幕
      row
      行
      col
      列（极小屏中的列）
      实现响应式布局
      col 极小 [,576px]
      col-sm 小 [576px,768px]
      col-md 中 [768px,992px]
      col-lg 大 [992px,1200px]
      col-xl 极大 [1200px,]
      移动优先
      

      
      
      
      只有在大屏情况下一行显示两列
      border
      为盒子添加边框
      w-100
      换行后内容重组
      col-auto
      内容宽度自适应
      ml-auto
      margin-left:auto
      align-items-start、justify-content-start
      伸缩盒容器中元素的排列
      align-items: flex-start;
      no-gutters
      container-fluid
      width:100&;
      padding:0 15px;
      为了row可以占满整个屏幕
      margin:0 -15px;
      如果使用no-gutters表示margin:0 ;这样row左右两边就会出现空白
      order-1
      表示列的顺序，至少添加2个
      offert-3
      表示列的偏移
      嵌套关系
      row>col>row>col>row…

   3. 工具样式

      1. colors
         背景：
         bg-primary bg-success bg-danger bg-info bg-warning bg-dark bg-light
         文本：
         text-primary text-success text-danger text-info text-warning text-dark text-light
      2. border
      3. display
         d-block
         d-none
         d-lg-block
         …
      4. shadow
         …

   4. 内容

      1. reboot
         样式重置
      2. Tables
         table
         table-bordered
         table-hover
         table-dark、table-light、table-danger…
         table-sm
         table-responsive

   5. 基础组件

      1. alert
         类：alert、alert-primary、alert-link、close、alert-dismissable
         属性：data-dismiss
         方法：
         $().alert();
         $().alert(“close”); $().remove()
         $().alert(“dispose”);

      2. button
         类：btn、btn-primary、btn-outline-primary、.btn-lg 、.btn-sm、.btn-block、active、
         按钮组：btn-group
         属性：disabled

      3. carousel
         旋转木马，直接复制粘贴代码即可

      4. modal
         类：modal-sm、modal-lg、modal-xl、
         .modal 容器
         .modal-dialog 模态框容器
         modal-content
         modal-header
         modal-body
         modal-footer
         属性：data-dismiss、 data-target
         方法：
         $().modal(“show”) display:block
         $().modal(“hide”) display:none

      5. toast
         类
         toast toast-header toast-body
         方法
         // 初始化toast
         $().toast({
         animation:boolean
         autohide:boolean
         delay:number
         })
         $().toast(“show”)
         $().toast(“hide”)

      6. 表单
         form-group
         form-control
         form-control-sm 、form-control-lg

      7. collapse
         切换元素的显示与隐藏
         类
         collapse
         方法
         $().collapse(“toggle”);
         $().collapse(“show”);
         $().collapse(“hide”);

   6. 主题
      应用基础组件以及bs的样式完成一个半成品