JQuery第一天

一、JQ入口函数
1、原生js的入口函数：等待html标签和dom树渲染完成,资源(图片,音频视频)都加载完成后执行

 window.onload = function () {
      console.log('原生js入口函数执行完成');
    };  

2、JQ的入口函数：等待htmlbq和dom树渲染完成,不需要等待资源(图片,音频)等加载完成后就执行了
    $(document).ready(function () { 函数体 });
    简写( 重点)
    语法 : $(function(){....})
二、JQ获取标签
1、JS的方式
     let theDiv = document.getElementById('myDiv');
2、JQ的方式
      语法: $('css选择器')
      注意:JQ获取标签返回的不是一个dom对象, 而是一个伪数组(有length,有下标,不可以使用数组        的方法)，是JQ对象
3、选择器的类型
      3.1、id选择器 => $('#id名字')     //如果说想获取到原生dom对象，可以通过下标获取: $('#id名字')[0]
      3.2、class选择器 =>$('.class名字')
      3.3、标签选择器 =>$('标签名字') => 获取同一类标签的所有元素
      3.4、交集选择器 =>$('标签名字.class名字') => 交集元素
      3.5、全选选择器 =>$('*') => 匹配所有元素
      3.6、并集选择器 =>$('div,p,ul') - 选择器与选择器是逗号相隔=>选取多个元素
      3.7、子代选择器 =>$('uL>li') => 使用>号, 获取的就是亲儿子层级的元素
      3.8、后代选择器 =>$('uL li')=> 使用的空格  获取的就是当前元素ul - 所有的li ,包括孙子 ,,,,
4、其他的方法
      4.1、选中css选择器集合中指定下表的标签===>筛选 eq（下标）=> $('标签名').eq(下标);
      4.2、父级==>元素.parent()  => 元素的父级元素 => $('元素').parent()
      4.3、子代元素  ==> 父级元素 .children() ===>$('父级元素').children()
      4.4、指定后代的查找==> .find('css选择器')==>$('父级元素').find('.class名字')
      4.5、兄弟元素===> .siblings() => 查找目标的兄弟们==>$('元素').siblings()
三、原生（JS）与JQ对象的互相转换
1、JS的方式
      let 变量名 = document.querySelector('#id名');
      变量名.style.属性名= '属性值';
2、JQ的方式
      注意：通过JQ获取标签返回的是一个JQ对象，没有style属性来设置，如果想使用JS的方式来设置，那就需要转换    
3、JQ 转 原生 =>通过下标
     $('#id名')[下标].style.属性名= '属性值';
4、原生 转 JQ =>$(原生DOM对象)
     $('css选择器').css('属性名',值)
四、JQ注册事件
1、$('css选择器').on('事件类型'，事件处理函数)
2、$('css选择器').事件类型(事件处理函数)
     注意：.事件类型 没有on
3、$('css选择器').on('事件类型','筛选器',事件处理函数)
     事件委托 将所有孩子们相同的事件 委托给父级或者更外层的元素绑定实现(利用了事件冒泡)
   

 例：$('ul').on('click', 'li', function () {
                  console.log('你好，事件委派', this);
                  // this指向的是当前点击的li
                  // 是一个dom对象
                   });

五、JQ操作样式
1.行内样式 style
      1.1 .css('属性名','值')                               //每次只能设置一个属性
      1.2 .css({属性名：'值',属性名：'值'})          //同时给标签设置多个属性
2.操作类名
      2.1、添加类=> .addClass('类名')==>  $('#id名').addClass('类名');
      2.2、移除类=> .removeClass('类名')==>  $('#id名').removeClass('类名');
      2.3、切换类=> .toggleClass('类名')==>  $('#id名').toggleClass('类名');  //有这个类名，就移除掉，没有就添加
      2.4、判断类=> .hasClass('类名')==>$('#id名').hasClass('类名'); 判断当前有没有这个类名 =>返回布尔值
六、链式编程
1、 概念：当前的对象被调用方法之后，会返回一个jq对象，我们可以使用这个对象继续调用其他的方法一直.下去
2、 返回一个对象(调用者本身)
七、JQ的鼠标事件
1、鼠标移入：$('css选择器').on('mouseenter',function () { 函数体}）
2、鼠标移出：$('css选择器').on('mouseleave',function () { 函数体}）
八、滑入与滑出
1、下拉 slideDown() ：$('css选择器').slideDown(1000)    //显示
2、上拉 slideUp()：$('css选择器').slideUp(1000)     //隐藏
3、切换 slideToggle()：$('css选择器').slideToggle(10000)   //显示就隐藏 / 隐藏就显示
九、淡入淡出
1、淡入==>fadeIn(毫秒值)
     $('css选择器').on('事件类型',function () {$('css选择器').fadeIn(1000);})
2、淡出==>fadeOut(毫秒值)
     $('css选择器').on('事件类型',function () {$('css选择器').fadeOut(1000);})
3、淡入淡出切换==>fadeToggle(毫秒值)
     $('css选择器').on('事件类型',function () {$('css选择器').fadeToggle(1000);})
4、修改透明度==>fadeTo(毫秒值,修改的透明度的值)
     $('css选择器').on('事件类型',function () {$('css选择器').fadeTo(1000, 0.3, function () {});})
十、显示与隐藏  'slow' - 600毫秒    'fast' - 200毫秒    'normal'  - 400毫秒 
1、show() - 显示 
     $('css选择器').show('毫秒值',function () {函数体}）（函数是回调函数，目的是告诉我们动画做完了）
2、hide() - 隐藏 
     $('css选择器').hide('毫秒值'）
3、toggle()  - 切换 （显示的话就隐藏 ,隐藏就显示）
     $('css选择器').toggle('毫秒值'）
十一、hover事件
     鼠标移入又移出（hover）事件：$('#myDiv').hover(function () {函数体 },function () {函数体 });
      //参数: 参数一和参数二都是function(){} , 中间是逗号相隔
      // 参数一 代表 的就是鼠标移入事件  - mouseenter
      // 参数二 鼠标移出事件            - mouseleave
十二、动画停止
      如果触发动画次数过多：
      JQ动画 - 动画队列   - 动画累加的效果
      前一个动画没做完,后面的只能在排队,等待前一个动画做完  
      如果我们不想要动画累加 - stop() 
      stop() 停掉当前标签身上所有的动画,只执行最后一次

例：       
          $('css选择器').stop().slideToggle(500)// 显示
         // $('div').slideToggle(500)  // 隐藏  - 排队等待
         // $('div').slideToggle(500)  // 显示  - 排队等待
         // $('div').slideToggle(500)  // 隐藏  - 排队等待

十三、自定义动画
       $('css选择器').stop().animate({修改的属性：修改的样式})
十四、补充
       index（）//获取当前的下标