jQuery 学习

1. 概述

• jQuery 是一个快速、简洁的 Javascript 库。

2. jQuery 下载

• 官网地址：https://jquery.com/
• 版本：
  • 1x：兼容 IE 678 等低版本浏览器，官网不再更新
  • 2x：不兼容 IE 678 等低版本浏览器，官网不再更新
  • 3x：不兼容 IE 678 等低版本浏览器，官网主要更新维护的版本

3. 入口函数

• 等待 DOM 结构渲染完毕即可执行内部代码，不必等待所有外部资源加载完毕，相当于原生js中的 DOMContentLoaded

$(function(){
    ...
});
    
$(document).ready(function(){
    ...
});

4. 顶级对象$

• 是 jQuery 的别称，在代码中可以使用 jQuery 代替 `,但一般为了方便，通常使用$`
• 是 jQuery 的顶级对象，相当于原生Javascript中的 window。把元素利用``包装成 jQuery 对象，就可以调用 jQuery 的方法。

5. jQuery对象

• DOM 对象：用原生 js 获取过来的对象
  • 示例代码：
    • var dat = document.querySelector('div')
• jQuery 对象：用 jQuery 方式获取过来的对象
  • 示例代码：
    • $('div')

注意：jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScript 属性和方法

• DOM 对象转换为 jQuery 对象：$(DOM对象)

  • 示例代码：

    • var div = document.querySelector('div');
      $(div);
      

• jQuery 对象转换为 DOM 对象：

  • 方法一：$('div')[index](index为索引号)

    • $('div')[0]
      

  • 方法二：$('div').get(index)

    • $('div').get(0)
      

6.jQuery 选择器

基础选择器

• 语法：$("选择器")

• 名称	用法	描述
  ID 选择器	$("#id")	获取指定ID的元素
  全选选择器	$('*')	匹配所有的元素
  类选择器	$(".class")	获取同一类class元素
  标签选择器	$("div")	获取同一类标签的所有元素
  并集选择器	$("div,p,li")	选取多个元素
  交集选择器	$("li.current")	交集元素

层级选择器

• 名称	用法	描述
  子代选择器	$("ul>li")	使用>号，获取亲儿子层级的元素；注意：并不会获取孙子层级的元素
  后代选择器	$("ul li")	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

隐式迭代

• 定义：遍历内部 DOM 元素（伪数组形式存储）的过程叫做隐式迭代。

• jQuery 设置样式

  • $('div').css('属性'，‘值’)

筛选选择器

筛选方法

排他思想

• 当前设置样式，其余的兄弟元素清除样式

• <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  <button>按钮</button>
  
  <script>
      $(function(){
      $("button").click(function(){
          //当前的元素变化
          $(this).css("background","red");
          //其余按钮去掉背景颜色
          $(this).siblings("button").css("background","");
      })
  })
  </script>
  

链式编程

• 语法：$(this).css("color","red").siblings().css("color","");

7. jQuery 样式操作

操作 css 方法

1. 参数只写属性名，则是返回属性值

   • $(this).css("color")

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

   • $(this).css("color","red);

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

   • $(this).css({
         width:400,
         height:400,
         backgroundColor:"red"
     })
     

设置类样式方法

• 作用等同于 classList，可以操作类，注意操作类里面的参数不要加点

1. 添加类
   • $("div").addClass("current");
2. 移除类
   • $("div").removeClass("current");
3. 切换类
   • $("div").toggleClass("current");

• 注意：类操作只是对指定的类进行操作，不影原先的类名。如 addClass 相当于追加类名，不会覆盖原来的类

8.jQuery 效果

显示隐藏效果

• 语法规范：
  • 显示效果语法：show([speed,[easing],[fn]])
  • 隐藏效果语法：hide([speed,[easing],[fn]])
  • 切换效果语法：toggle([speed,[easing],[fn]])
• 显示参数
  • 参数都可以省略
  • speed：三种预定速度之一的字符串（"slow","normal","fast"）或表示动画时长的毫秒数值（如：1000）
  • easing：用来指定切换效果，默认是“swing”，可用参数“linear”
  • fn：回调函数，在动漫完成时执行的函数，每一个元素执行一次

滑动效果

• 语法规范：
  • 下滑效果语法：slideDown([speed,[easing],[fn]])
  • 上滑效果语法：slideUp([speed,[easing],[fn]])
  • 滑动切换效果语法：slideToggle([speed,[easing],[fn]])
• 显示参数
  • 参数都可以省略
  • speed：三种预定速度之一的字符串（"slow","normal","fast"）或表示动画时长的毫秒数值（如：1000）
  • easing：用来指定切换效果，默认是“swing”，可用参数“linear”
  • fn：回调函数，在动漫完成时执行的函数，每一个元素执行一次

事件切换

• 语法：hover([over,]out)
  • over：鼠标移到元素上要触发的函数（相当于mouseenter）
  • out：鼠标移出元素要触发的函数（相当于mouseleave）

动画队列及其停止排队方法

1. 动画或效果队列
   • 动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行
2. 停止排队
   • 语法：stop()
   • 注意：stop() 写到动画或者效果的前面，相当于停止结束上一次的动画

淡入淡出效果

• 语法规范：

  • 淡入效果：fadeIn([speed,[easing],[fn]])
  • 淡出效果：fadeOut([speed,[easing],[fn]])
  • 淡入淡出切换效果：fadeToggle([speed,[easing],[fn]])

• 显示参数

  • 参数都可以省略

  • speed：三种预定速度之一的字符串（"slow","normal","fast"）或表示动画时长的毫秒数值（如：1000）

  • easing：用来指定切换效果，默认是“swing”，可用参数“linear”

  • fn：回调函数，在动漫完成时执行的函数，每一个元素执行一次

• 渐进方式调整到指定的变透明度：fadeTo([[speed],opacity,[easing],[fn]])

  • 效果参数：
    • opacity透明度必须写，取值 0~1 之间
    • speed：三种预定速度之一的字符串（"slow","normal","fast"）或表示动画时长的毫秒数值（如：1000）（必写）
    • easing：用来指定切换效果，默认“swing”，可用参数“linear”

自定义动画 animate

• 语法：animate(params,[speed],[easing],[fn])
  • 参数
    • params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则采取小驼峰命名法。其余参数都可以省略。
    • speed：三种预定速度之一的字符串（"slow","normal","fast"）或表示动画时长的毫秒数值（如：1000）
    • easing：用来指定切换效果，默认是“swing”，可用参数“linear”
    • fn：回调函数，在动漫完成时执行的函数，每一个元素执行一次

9.jQuery 属性操作

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

• 元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，<input>里的type

1. 获取属性语法
   • prop(“属性”)
2. 设置属性语法
   • prop("属性","属性值")

• 示例代码：

  • $("a").prop("href");
    $("a").prop("title","标题");
    

设置或者获取元素自定义属性值

• 自定义属性指用户自己给元素添加的属性。

1. 获取属性语法
   • attr("属性") //类似原生 getAttribute()
2. 设置属性语法
   • attr("属性","属性值") //类似原生 setAttribute()

• 示例代码：

  • $("div").prop("index");
    $("div").prop("index",4);
    

数据缓存

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

• 附加数据语法：data("name","value) //向被选中元素附加数据

• 获取数据语法：data("name") //向被选元素获取数据

10. jQuery 内容文本值

普通元素内容

• 语法：

  • 获取元素内容：html() （相当于原生 innerHTML）
  • 设置元素内容：html(”内容“)

• 示例代码：

  • $("div").html()
    $("div").html("data")
    

普通元素文本内容

• 语法：

  • 获取元素内容：text() （相当于原生 innerText）
  • 设置元素内容：text(”内容“)

• 获取设置表单值：val()

11. jQuery 元素操作

遍历元素

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

• 语法1：

  • $("div").each(function(index,domEle){ })
    • each() 方法遍历匹配的每一个元素，主要用 DOM 处理。
    • 参数：index 是每个元素的索引号；demEle 是每个 DOM 元素对象，不是 jQuery 对象
    • 使用 jquery 方法，需要给这个 dom 元素转换为 jquery 对象 （$(domEle)）

• 语法2：

  • $.each(object,function(index,element){ })

    • $.each() 方法可用于遍历任何对象
    • 参数：index 是每个元素的索引号；element 是遍历内容

  • 示例代码：

    • $.each($("div"),function(index,element){
          console.log(index)
          console.log(element)
      })
      

创建元素

• 语法：$("<li></li>")

添加元素

内部添加

• 语法：
  • element.append("内容")
    • 把内容放入匹配元素内部的最后面
  • element.prepend("内容")
    • 把内容放入匹配元素内部的最前面

外部添加

• 语法：
  • element.after("内容")
    • 把内容放入目标元素后面
  • element.before("内容")
    • 把内容放入目标元素前面

删除元素

• 语法：

  • element.remove()
    • 删除匹配的元素
  • element.empty()
    • 删除匹配的元素集合中所有的子节点
  • element.html("")
    • 清空匹配的元素内容

• 示例代码：

  • //创建元素
    var li = $("<li>li 元素</li>");
    //内部添加
    $("ul").append(li);
    $("ul").prepend(li);
    //外部添加
    var div = $("<div>div 元素</div>");
    $("ul").after(div);
    $("ul").before(div);
    //删除元素
    $("ul").remove();
    $("ul").empty();
    $("ul").html("");
    

12. jQuery 尺寸、位置操作

尺寸操作

以上参数为空，则是获取相应值，返回的是数字型。

如果参数为数字，则是修改相应值。

• 示例代码：

  • $("div").width()  //获取宽度
    $("div").width(300)  //设置宽度
    

位置操作

offset()

1. offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
2. 该方法有2个属性 left、top。offset().left 用于获取距离文档左侧的距离，offset().top 用于获取距离文档顶部的距离。
3. 可以设置元素的偏移：offset({top:10,left:30})

position()

• position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。

scrollTop()/scrollLeft()

• scrollTop() 方法设置或返回被选元素被卷去的头部。

• 示例代码：

  • <div class="box"></div>
    $(.box).scrollTop();   //获取div被卷去的头部
    

jQuery 事件处理

事件注册

单个事件注册

语法：element.事件(function(){ })

• 示例代码：
  • $("div").click(function(){ //内容 })

事件处理

• 语法：element.on(events,[selector],fn)

  • on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
  • events：一个或多个用空格分隔的事件类型，如“click”或“keydown”
  • selector：元素的子元素选择器

• 示例代码：

  • //添加多个不同的事件
    $("div").on({
        click: function(){
            $(this).css("background","skyblue");
        },
        mouseenter:function(){
            $(this).css("background","red")
        }
    })
    //当处理事件类似时
    $("div").on("mouseenter mouseleave",function(){
        $(this).toggleClass("类名");
    })
    

事件委托

• 定义：把原来加给子元素身上的事件绑定在父元素身上

• 语法：element.on(events,[selector],fn)

  • on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
  • events：一个或多个用空格分隔的事件类型，如“click”或“keydown”
  • selector：元素的子元素选择器

• 示例代码：

  • $("ul").on("click","li",function(){  //将子元素li的click事件绑定在父元素ul上
        
    });
    

  • 在此之前有bind()，live()，delegate()等方法来处理事件绑定或者事件委托，现在可以用 on 代替。

动态创建

• 动态创建的元素，click() 没有办法绑定事件，on() 可以给动态生成的元素绑定事件。

• 示例代码：

  • $("ol li").click(function(){
        alert(11)
    });
    var li = $("<li>创建li</li>");
    $("ol").append(li);
    

解绑事件

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

  • 示例代码：

    • $("div").off();  //解除了div身上的所有事件
      $("div").off("click");  //解除了div身上的点击事件
      $("ul").off("click","li");  //解除事件委托
      

自动触发事件

1. 元素.事件()
   • 语法：$("div").click()
2. 元素.trigger("事件")
   • 语法：$("div").trigger("click")
3. 元素.triggerHandler("事件")
   • 语法：$("div").triggerHandler("click")
   • 注意：不会触发元素的默认行为

• 示例代码：

  • $("div").on("click",function(){
        alert("HHH")
       // $("div").click();
        $("div").trigger("click")
    })
    

jQuery 事件对象

• 事件被触发，就会有事件对象产生

• 语法：

  • element.on(events,[selector],function(event){ })
  • 阻止默认行为：event.preventDefault()
  • 阻止冒泡：event.stopPropagation()

• 示例代码：

  • $(function(){
        $(document).on("click",function(){
            alert("点击了document");
        })
        $("div").on("click",function(event){
            alert("点击了div");
            event.stopPropagation();
        })
    })
    

jQuery 对象拷贝

• 语法：

  • $.extend([deep],target,object1,[objectN])
  • deep：如果为 true 为深拷贝，默认为 false 浅拷贝
  • target：要拷贝的对象
  • object1：待拷贝的第一个对象
  • 注意：
    • 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
    • 深拷贝，前面加 true ，完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象

• 示例代码：

  • $(function(){
        var targetObj = {};
        var obj = {
            id:1,
            name:"pg"
        }
        $.extend(targetObj,obj)
    })