jQuery.js基础介绍

简介

• 是一个快速、简洁的javascript库
• write less, do more
• j就是javascript，Query查询

基本使用

• 安装：

  • 官网下载
  • 页面引入css和js

• 入口函数：

  //方式1
  $(function(){
      //此处是页面DOM加载完成的入口
  })
  //方式2
  $(document).ready(function(){
       //此处是页面DOM加载完成的入口
  })
  

  不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码

• 顶级对象$

  • $是jQuery的别称，使用$替换jQuery
  • $是jQuery的顶级对象，相当于原生js中的window，用$就可以调用jQuery中的方法

• DOM对象和jQuery对象

  1. DOM对象：用原生js获取过来的对象就是DOM对象

     var div = document.querySelector('div')
     

  2. jQuery对象：用jQuery方式获取过来的就是jQuery对象。本质：通过$把DOM元素进行包装(伪数组形式存储)

     $('div')
     

  3. jQuery对象只能使用jQuery方法，DOM对象则使用原生的js属性和方法

     $('div').style.display = none //错误
     div.hide() //错误
     

  4. 这两个对象之间可以相互转换

     1. DOM对象转换为jQuery对象：$(DOM对象)

        var mydiv = document.querySelector('div')
        $(div)  //注意不加引号
        

     2. jQuery对象转换为DOM对象：

        1. $('div')[index] index是索引
        2. $('div').get(index) index是索引

        加索引是因为jQuery返回的是伪数组形式

常用API

1. jQuery 选择器

   ​ 1.基本选择器 $('css选择器')

   

   <div class='nav'></div>
   $(function(){
       console.log($('.nav'))
   })
   

   ​ 2.层级选择器

   

   3.隐式迭代

   遍历内部DOM元素(伪数组形式存储)的过程

   • 给匹配到的所有元素循环遍历，执行相应的方法，而不用自己循环

     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     $('div').css('background','pink')
     //这样不用循环就可以给4个div统一设置背景颜色
     

     4.筛选选择器

   

   5.筛选方法

   

   注意：都是方法，所以都带括号( )

   $(function(){
       console.log($('div').parent())
   })
   

   补充：.parents(选择器) 返回指定祖先元素

   <div class='one'>1
       <div class='two'>2
           <div class='three'>3
               <div class='four'>4</div>
           </div>
       </div>
   </div>
   $('.four').parents('.two')
   

   6.案例下拉菜单：

   //入口
   $(function(){
       //鼠标经过
      $('.nav'>li).mouseover(function(){    //$(this) 当前元素 不加引号
      //show() 显示元素 hide()隐藏元素
      $(this).children('ul').show()
      }) 
       //鼠标离开
       $('.nav>li').mouseout(function(){
          $(this).children('ul').hide()
       })
     
   })
   

   7.排他思想

   <button>按钮1</button>
   <button>按钮2</button>
   <button>按钮3</button>
   <button>按钮4</button>
   <button>按钮5</button>
   $(function(){
        //1 隐式迭代 给所有按钮绑定点击事件
       $('button').click(function(){
        //2 当前元素变化背景颜色
        $(this).css('background','pink')
        //3 其余兄弟去掉背景颜色
        $(this).slibings('button').css('background','')
       })
   })
   

   8.链式编程 节省代码量

   $(this).css('color','red').sibling().css('color','')
   //可以应用于排他思想
   //可以灵活组合 例如
   $(this).siblings().children('li').css('color','blue')
   //给当前元素的兄弟元素的子元素li设置样式
   

   使用链式编程一定注意是哪个对象执行样式

   补充：

   1. jQuery得到当前元素索引号$(this).index()
   2. :checked选择器查找被选中的表单元素

2. jQuery 样式操作

   1. 操作css方法

      1. 参数只写属性名，则返回属性值 查询功能

         $('div').css('width')

      2. 参数是属性名，属性值 设置一组样式，属性名必须加引号，属性值是数字可以不用跟单位和引号

         $('div').css('属性','值')

      3. 参数可以是对象形式，方便设置多组样式。属性名可以不加引号

         $(this).css({color:'white',font-size:20,backgroundColor:'red'})

   2. 设置类样式方法

      1. 添加类

         $('div').addClass('current')

      2. 删除类

         $('div').removeClass('current')

      3. 切换类 添加和删除来回切换

         $('div').toggleClass('current')

      • 类操作和className的区别
        • 原生js中className会覆盖元素原先的类名，会删除原先类名
        • jQuery里面类操作只是对指定类进行操作，不会删除原先的类名

3. 动画效果

   

   1. 显示隐藏

      1. show([speed],[easing],[fn])
         • 参数都可以省略 无动画效果
         • speed 速度
           • slow
           • normal
           • fast
           • 动画时长的毫秒数 1000
         • easing 切换效果
           • swing 默认 先慢后快
           • linear 匀速
         • fn 回调函数 在动画完成时执行的函数 每个元素执行一次
      2. hide([speed],[easing],[fn])
      3. toggle([speed],[easing],[fn])

   2. 滑动事件

      1. slideDown([speed],[easing],[fn])
      2. slideUp([speed],[easing],[fn])
      3. slideToggle([speed],[easing],[fn])

   3. 事件切换

      hover([over],out) 鼠标移入和移出的复合写法

      • over 鼠标移入时触发的函数
      • out 鼠标移出时触发的函数

      $('div').hover(function(){
          $(this).children('ul').slideDown(200)
      },function(){
          $(this).children('ul').slideUp(200)
      })
      

      • 如果只写一个函数，那么鼠标移入和移出都会触发这个函数

      $('div').hover(function(){
          $(this).children('ul').slideToggle(200)
      })
      

   4. 停止动画排队

      动画一旦触发就会执行，如果多次触发，就会造成多个动画排队执行

      • stop() 停止动画效果

        • stop写到动画或者效果的前面，相当于停止结束上一次的动画

        $('div').hover(function(){
            //写在动画效果前面
            $(this).children('ul').stop.slideToggle(200)
        })
        

   5. 淡入淡出

      1. fadeIn([speed],[easing],[fn])

      2. fadeOut([speed],[easing],[fn])

      3. fadeToggle([speed],[easing],[fn])

      4. 渐进的方式调整不透明毒

         fadeTo([speed],opacity,[easing],[fn])

         • opcity参数必须写 0-1

      案例：

      

      $(function()){
        $('.wrap li').hover(function(){
         //鼠标移入时，其他li标签透明度：0.5
         $(this).siblings().stop().fadeTo(400,0.5) 
      }),function(){
         //鼠标移出，其他li透明度恢复为1
         $(this).siblings().stop().fadeTo(400,0.1) 
      }
        }
      

   6. 自定义动画

      animate(params,[speed],[easing],[fn])

      • params 想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，其他复合属性需要用驼峰命名法

        <button>移动<button>
        <div width = '200px' height = '200px' background-color='red' position='absoute'></div>
        $(function(){
            $('button').click(function(){
                $('div').animate({
                    left:500,
                    top:300,
                    opcity:0.4,
                    width:300
                },500)
            })
        })
        

        案例：王者荣耀手风琴效果

        

4. 属性操作

   1. 设置或获取元素固有属性值

      • 元素固有属性即元素本身自带的属性，比如a元素里的href input元素里的type

      • element.prop('属性名') 获取属性值

        <a href='www.baidu.com' tltle='1'></a>
        $(function(){
            console.log($('a').prop('href'))
            console.log($('a').prop('title'))
        })
        

      • element.prop('属性','属性值')

        <input type='checkbox' name='男' id='' checked>
         $(function(){
            $('input').change(function(){
               console.log($(this).prop('checked'))
            })
        })
        

   2. 设置或获取元素自定义属性

      • element.attr('属性名') 获取属性值

        <div data-index='1'></div>
        $(function(){
            console.log($('div').attr('data-index'))
        })
        

      • element.attr('属性名','属性值')

   3. 数据缓存data()

      可以在指定元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据将都被移除

      <span></span>
      $(function(){
          //存储数据
          $('span').data('uname','andy')
          //读取数据
          console.log($('span').data('uname'))
      })
      

      还可以获取h5自定义属性：

      • 不用写data-
      • 返回的是数字型

      <div data-index='1'></div>
      $(function(){
          console.log($('div').data('index'))
      })
      

5. jQuery 操作内容文本值

   1. 获取设置元素内容 html()

      <div><span>123</span></div>
      //获取
      console.log($('div').html()) //标签也会输出 不是纯文本
      //设置
      $('div').html('456') //<span>123</span>被替换为456
      

   2. 获取设置元素文本内容 text() 返回字符型

      <div><span>123</span></div>
      //获取
      console.log($('div').text()) //123 纯文本
      //设置
      $('div').text('456') //123被替换为456
      

   3. 获取设置表单值 val()

      <input type='text' value='请输入内容'>
          //获取value值
       console.log($('input').val())
          //设置value值
       $('input').val('123')
      

6. 元素操作

   1. 遍历元素

      jquery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同的操作，就需要用到遍历

      • 方式1：$('div').each(function(index,domEle){ })

        1. each()方法遍历匹配的每一个元素。主要用DOM处理
        2. 里面的回调函数有2个参数：index是每个元素的索引，domEle是每个DOM对象，不是jquery对象
        3. 要想使用jquery方法，需要给这个dom元素转换为jquery对象$(domEle)

        <div>1</div>
        <div>2</div>
        <div>3</div>
        $(function(){
            var color_arr = ['red','blue','green']
            $('div').each(function(i,domEle){
                console.log(i)
                console.log(domEle)
                //要想使用jquery方法，需要给这个dom元素转换为jquery对象
                $(domEle).css('color',arr[i])
                //因为.text()取过来的是字符 所以要parseInt()
                sum += parseInt($(domEle).text())
            })
        })
        

      • 方式2：$.each(object,function(index,element){})

        • $.each()可以遍历任何一个对象
        • 主要用于遍历数据，处理数据
        • index是每个元素的索引，element是索引对应的内容

        var arr = ['1','2','3','4']
        $.each(arr,function(i,ele){
          console.log(i);
          console.log(ele)
               }) //0 '1' 1 '2' 2 '3'
        

   2. 创建元素

      $('<li></li>') 动态创建了li标签

   3. 添加元素

      1. 内部添加 生成变为父子关系

         element.append('内容')

         把内容放入匹配元素内部最后面，类似于原生appendChild

         element.prepend('内容')

         把内容放入匹配元素内部最前面

      2. 外部添加 生成完兄弟关系

         element.after('内容') //把内容放入目标元素后面

         element.before('内容')//把内容放入目标元素前面

      <ul>
          <li>原先的li</li>
      </ul>
      <div class='test'>我是原先的div</div>
      $(function(){
          //1 创建元素
          var li = $('<li>我是后来创建的li</li>')
          //2 添加元素
          //内部
          $('ul').prepend(li)
          //外部
          var div = $('<div>我是后来的</div>')
          $('.test').after(div)
          //3 删除元素
          $('ul').remove();
      })
      

   4. 删除元素

      • element.remove() 删除匹配的元素 不需要参数
      • element.empty() 删除匹配的元素集合中所有的子节点 不删除自身
      • element.html("")清空匹配的元素内容 利用html()方法 不删除自身

7. 尺寸、位置操作

   1. 尺寸

      

      • 以上参数为空 获取相应值 返回的是字符型
      • 以上参数为数字 则是修改相应值

   2. 位置

      1. offset() 设置或获取元素偏移

         • 返回的是元素相对于文档的偏移坐标 跟父级无关

         • .offset().top 相对于文档的顶部偏移坐标

           .offset().left 相对于文档的左侧偏移坐标

           //设置偏移
           $('div').offset({
               top: 200,
               left: 200
           })
           

      2. position() 获取元素偏移

         • 返回元素相对于带有定位的父级元素偏移距离，如果父级都没有定位，则以文档为准

         • 只能获取，不能设置

         • .position().top

           .position().left

      3. scrollTop()/scrollLeft() 设置或获取元素被滚动条卷去的头部和左侧

         $(function(){
             $(window).scroll(function(){
                 console.log($(document).scrollTop())
             })
         })
         

jQuery事件

1. 事件注册

   • 单个事件注册

     • element.事件(function(){ })

     • $('div').click(function(){事件处理程序})

2. 事件处理 多个事件

   1.on()方法在匹配元素上绑定一个或多个事件的事件处理函数

   • element.on(events,[selector],fn)
     • events: 一个或多个用空格分隔的事件类型，如'click','keydown'
     • selector: 元素的子元素选择器
     • fn 回调函数 即绑定在元素身上的侦听函数

   $('div').on({
        click:function(){
            
        },
       mouseenter:function(){
           
       }
   })
   //或者
   $('div').on('mouseenter mouseleave',function(){
       $(this).toggleClass('current')
   })
   

   2.on()可以执行事件委派操作。即把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
   </ul>
   //本来是利用隐式迭代将事件绑定在所有li元素上
   $('ul li').click();
   //事件委派 现在事件是绑定在ul父元素上，触发对象是li
   $('ul').on('click','li',function(){})
   

   3.on() 给未来动态生成的元素绑定事件

   动态创建的元素，click没有办法绑定事件，利用on()可以解决

   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
   </ul>
   $('ul').on('click','li',function(){
       alert('11')
   })
   var li = $('<li>4</li>')
   $('ol').append(li)
   //点击新生成li 会触发alert事件
   

   案例：评论发布案例

   <div class='box' id='pinglunqu'>
        <span>评论发布</span>
   <textarea name='' class='txt' cols='30' rows='10'></textarea>
   <button class='btn'>发布</button>
   $(function(){
       //1 点击发布按钮 动态创建一个小li 放入文本框和删除按钮 并且添加到ul中
       $('.btn').on('click',function(){
           var li = $('<li></li>')
           li.html($('.txt').val()+'<a href = 'javascript:;'>删除</a>')
           $('ul').prepend(li)
           li.slideDown()
           $('.txt').val('')
       })
       //点击删除按钮 可以删除当前评论留言 因为是动态添加的li 所以要用on绑定click事件
        $('ul').on('click','a',function(){
            $(this).parent().slideUp(function(){
                //因为slideUp只是设置display:none 并没有真正删除元素
                //slideUp(callback) slideUp可以设置回调函数 在slideUp执行完执行
                $(this).remove();
            })
        })
       
   })
   

   4.off()解绑事件

   可以移除通过on()方法添加的事件处理程序

   $('div').on({
        click:function(){
            
        },
       mouseenter:function(){
           
       }
   })
   //1  解绑所有事件
   $('div').off()
   //2 解绑指定事件
   $('div').off('click') //解除点击事件
   //3 解决事件委托
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
   </ul>
   $('ul').on('click','li',function(){})
   $('ul').off('click','li')
   

   5.一次性事件 one()

   如果有的事件只想触发一次，可以使用one()来绑定事件

   <p>只触发一次哦</p>
   $('p').one('click',function(){
       
   })
   

3. 自动触发事件 trigger()

   有些事件希望自动触发，比如轮播图自动播放功能跟右侧点击按钮一致，可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发

   1. 点击事件简写模式：element.click()
   2. element.trigger('事件')
   3. element.triggerHander('事件') 不会触发元素默认行为

   $('div').click()//1
   $('div').trigger('click')
   

4. 事件对象

   $('div').click()(function(event){
       console.log(event)//这个event就是事件对象
   })
   

   • 阻止默认行为：event.preventDefault()或者return false
   • 阻止冒泡: event.stopPropagation 给发生冒泡元素添加

jQuery其他事件

1. 拷贝对象 extend()

   把某个对象拷贝(合并)给另外一个对象使用

   $.extend([deep],target,object1,[objectN])

   • deep: 如果设置为true-深拷贝 默认为false-浅拷贝

     浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象

     深拷贝是新建一个一模一样的对象，修改目标对象不会影响被拷贝对象

   • target: 要拷贝对象

   • object1: 待拷贝对象

   var targetObj={
       id:0 //相同属性名会被覆盖
   }
   var obj = {
       id:1,
       name:'andy',
       msg:{
           age:18
       }
   }
   $.extend(targetObj,obj)
   //浅拷贝
   targetObj.msg.age=20
   console.log(targetObj) //20
   console.log(obj) //20 也被修改
   

2. 多库共存

   随着js流行其他js库也会使用$作为操作符，一起使用会引起冲突

   解决方法：把$操作符改成其他变量

   //1 如果$符号冲突 就使用jQuery
   //2 让jQuery释放对$的控制权 让用户自己决定
   var matx = jQuery.noConflict //这样matx就等于jquery的$
   

3. jQuery插件库

   

   自己用下载下来的demo文件复制html css js相关代码配置 或者根据文件直接配置

   1. 图片懒加载

   ​ 当页面滑动到可视区域，再显示图片

   ​ 使用方法：

   ​ 1. 插件库下载懒加载插件，配置相关代码 注意js必须在dom元素最下面引入 即</body>上方

   

   ​ 不需要可以把coverColor和coverDiv配置删除

   ​ 2. ctrl+F把所有<img src替换为<img data-lazy-src`

   2. 全屏滚动(fullpage.js)

      

      不会就按照demo文件源代码依次引入

      侧边栏样式：

      1. navigation: true

         

      2. 

      3. 其他样式自己根据说明页面探索

         

   3. bootstrap插件

      

补充：

• change事件

  • 当元素的值改变时发生 change 事件（仅适用于表单字段）
  • 当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。

• $(this).index()获取兄弟元素的索引号

  <div>
      <a></a>
      <a></a>
      <a></a>
  </div>
  $('div a').click(function(){
      console.log($(this).index()) //0 1 2
  })
  

  必须是亲兄弟

• unbind 移除被选元素的事件处理程序

  //移除所有 <p> 元素的事件处理程序
  $("button").click(function(){
      $("p").unbind();
  });
  

  版本1.7之后，on()和off()方法是元素移除事件处理程序的首选方法

• serialize() 序列化表单值