JQuery库（吃透前端！）

 一.JQuery是什么？如何理解jQuery?

JQuery是一个快速、小巧且功能丰富的JavaScript库。它使事情像文档遍历和操作、事件处理、动画和Ajax等变得更加简单，且有统一的、跨浏览器的API。借助于JQuery，用户可以更方便地处理HTML文档、事件、实现动画效果，并且方便地为网站提供Ajax交互。

---

 jQuery是一个js库，简称"JQ",其本质是javascript,重点是围绕着DOM进行操作

  二.jQuery有什么作用？

  可以提高web（网页 ）开发的效率（write less , do more），简化DOM操作，实现动画效果，简化事件处理，极大地简化了Web开发的复杂度，使得开发人员能够更快速地创建出具有吸引力的交互式网页应用。

 三.jQuery的用法！！！ 

1.文档遍历和操作(大部分的api，用的比较多)

$(dom).children()//获取所有子元素

$(dom).siblings()  // 获取目标元素的兄弟元素

$(dom).next()// 获取目标元素相邻的下一个元素

$(dom).prev()// 获取目标元素相邻的上一个元素

$(dom).find()// 找后代元素

$(dom).text()//设置标签的纯文本

$(dom).html()  // 超文本

$(dom).val()   // 获取输入框的值

$(dom).Attr()   //设置标签的属性

$(dom).removeAttr()   //删除标签的属性

$(dom).append()     //  往目标元素的尾部追加渲染字符串

$(dom).prepend()    //往目标元素的首位添加渲染字符串(倒过来添加)

$(dom).remove()     //删除标签

$(dom).index()  //获取索引

$(dom).prop()  //检测复选框的checked,select值

2.事件处理

事件就是指程序驱动行为。事件就是行为

原生JS写事件
dom.onclick = function(){}
dom.addEventListener("click",function(){})

jQ写事件
$dom.click(function(){  })
$dom.bind("click",function(){})
$dom.delegate("button","click",function(){})
$dom.on("click",function(){})
$dom.on("click","button",function(){})

3.预定义参数动画函数

 // 1给show或者hide 传递参数  ，毫秒值 / slow|fast  显示隐藏
    // 主要是控制标签的宽度 高度 透明度 最后dispay为none
    $('.btn-enter').on('click',function(){
      $('.box').show(1000,function(){
        // 动画结束执行function这个回调函数
        console.log('显示标签的动画完成');
      })
    })

 $('.btn-leave').on('click',function(){
      $('.box').hide(1000)
    })

 //原状态是显示的，调用这个api就隐藏； 否则反之 
    $('.btn-open-or-close').on('click',function(){
      $('.box').toggle(1000)
    })

 

// 2给fadeIn 或 fadeOut 传递参数，毫秒值  淡入淡出
    // 主要是控制标签的透明度 最后dispay为none
    $('.btn-fade-in').on('click',function(){
      $('.box').fadeIn(1000)
    })

    $('.btn-fade-out').on('click',function(){
      $('.box').fadeOut(1000)
    })

    // 3.slidedown和slideup 传递参数，毫秒值  下拉收起
    // 主要是控制标签的高度 最后dispay为none
    $(".btn-slide-down").on('click',function(){
      $('.box').slideDown(1000)
    })

    $(".btn-slide-up").on('click',function(){
      $('.box').slideUp(1000)
    })

4.自定义动画函数

利用jQuery封装好的animate函数，直接调用，传入对象，修改属性值

$(".btn-start").on("click", function () {
        $(".box").animate({ marginLeft: 500, width: 200, height: 200 }, 3000);
      });

      $(".btn-restore").on("click", function () {
        $(".box").animate({ marginLeft: 0, width: 500, height: 500 }, 3000);
      });

      $(".btn-stop").on("click", function () {
        $(".box").stop();
      });

5.jQuery拓展

在jQuery原有的基础上添加API的意思

 // 在jQuery对象的原型上添加方法
      $.fn.foo = function () {
        console.log("test");
      };

      $.fn.myRaduis = function () {
        $(this).css("borderRadius", "50%");
      };
      // 通过jQuery对象调用foo方法
      $(".box").foo();
      $(".box").myRaduis();