jQuery库应用

此笔记是我在拉勾学习课程过程中的总结，文字原创，笔记里很多技巧和知识是老师总结的，如果有侵权，请联系本人！

一、jQuery

简介

  • jquery 是一个高效，精简并且功能丰富的 javascript 工具库
  • query 本身是选择的意思，主要对 javascript 中选择元素的方法进行了大量优化
  • jquery 确实极大的简化了 DOM 操作，让编程变得更加高效简单

$()方法

在 jQuery 中，只有一个全局变量，避免全局变量污染。经典错误： is not defined.

jQuery对象

$() 方法获取到的内容叫做 jQuery 对象

内部封装了大量的属性和方法,比如 .css() 和 .html() 和 .animate() 等方法都是jQuery 对象的方法。

通过 $() 获取的元素是一组元素，进行操作时是批量操作。

jQuery 对象和原生 js 对象转换

  • jQuery对象只能使用jQuery对象方法
  • 原生js对象只能使用原生js对象方法
  • jQuery实际是一个类数组对象，内部包含所有的原生js对象，以及jQuery的方法和属性.
//   通过$() 方法获取到的是 jq对象
    //  获取的是一组html元素，会进行批量操作
    // $("p").css("background-color","pink");
    // $("p").html("nihao");
    // $("p").animate({"width":500},1000);

    //jQuery 对象不能更实用原生js 对象的方法
    //  console.log($("p").innerHTML);//报错
    // $("p").style.backgroundColor = "blue";//报错

    // 原生js也不可以使用jQuery方法
    // var ps = document.getElementsByTagName("p");
    // ps[0].html("haha");//报错
    
    // 打印输出jq对象
    console.log($("p"));//封装了原生 js的类数组对象

jQuery对象中原生js对象的个数
$().length

$().size()

jQuery对象和原生js之间的转换
jQuery 转原生：直接利用数组下标方式，得到 jQuery 封装的原生对象。
原生转 jQuery：将原生对象用 $() 方法包裹即可。

// // 获取jq对象中原生js对象的个数
    // console.log($("p").length);
    // console.log($("p").size());

    // jQuery对象转换为原生 js对象
    var $ps = $("p");
    $ps[0].innerHTML = "你好";

    // 原生 js 对象，转换为 jq 对象
    var op = document.getElementsByTagName("p")[0];
    $(op).css("background-color","skyblue")

jQuery选择器

Css2.1和css3选择器
这个网址可以找到选择器
https://jquery.cuishifeng.cn/

//   基础选择器
    $("*")
    $("p")
    $(".box")
    $("#demo")
    // 高级选择器
    $(".box p").html("nihao")

    // 表单对象属性选择器
    // $("input:disabled").css("background-color","red");
    // $("input:enabled").css("background-color","red");
    // 表单选择器
    $(":input").css("background-color","blue");
    $(":text").css("background-color","red");

筛选选择器

$(":first") 第一个
$(":last") 最后一个
$(":eq(index)") 下标为 index 的项
$(":gt(index)") 大于下标为 index 的项
$(":lt(index)") 小于下标为 index 的项
$(":odd") 下标为奇数的项
$(":even") 下标为偶数的项
$(":not(selector)") 去除所有与给定选择器匹配的元素

筛选方法

筛选方法和选择器类似 ，只不过是封装了对应的筛选方法

  //   筛选选择器
        $("p:first").css("background-color","skyblue");//第一个
        $("p:last").css("background-color","skyblue");//最后一个
        $("p:eq(5)").css("background-color","skyblue");//第五项，从0开始数
        $("p:gt(5)").css("background-color","skyblue");//大于第五项
        $("p:lt(5)").css("background-color","skyblue");//x小于第五项
        $("p:odd").css("background-color","skyblue");//奇数项
        $("p:even").css("background-color","skyblue");//偶数项
        $("p:not(:eq(6))").css("background-color","skyblue");//去除某一项
        $("p:not(:eq(.para))").css("background-color","skyblue");//去除类名为para的项

        // 筛选方法
        $("p").first().css("background-color","skyblue")
        $("p").last().css("background-color","skyblue")
        $("p").eq(4).css("background-color","skyblue")

二、 jQuery常用方法

操作标签的方法

html()方法

相当于原生js中的innerHTML方法，用于设置标签内部内容
可以传递一个参数，自定义字符串内容
获取：文本和内部标签
设置：设置标签时，标签被渲染。

text()方法

text() 方法相当于原生 JS 中的 innerText 属性，用来获取或设置标签内部文字

 //   获取元素
    var $box = $(".box")
    // text() 方法相当于 innerText 属性
    // 获取，获取所有的额标签内部的文字内容，忽略标签
    console.log($box.text());

    // 设置，会将书写的内容都当成普通文字，不会按照标签加载
    $box.text("putongwenben<p>这是段落</p>")

val()方法

val() 方法相当于原生 JS 中的 value 属性，用来获取或设置表单元素内容。

 // 通过 val() 进行获取
    console.log($box.val())
    console.log($input.val())
    console.log($ta.val())
// 设置内容
    $input.val("haha")
    $ta.val("haha")

Attr（）方法

作用：用来获取或者设置标签的属性值。

removeAttr() 方法

作用：移除标签的属性
语法：removeAttr(name);

      // 获取元素
        var $pic = $(".pic")

        // 标签属性设置：需要传2个参数
        // $pic.attr("src","images/cat2.jpg")
        $pic.attr("hobby","sleep")
        
        // 获取标签属性的值：需要一个参数
        console.log($pic.attr("alt"));
        console.log($pic.attr("hobby"));
        // 删除属性方法 removeAttr();
        $pic.removeAttr("hobby")

Prop()方法

针对：selected、checked、disabled 等表单元素的属性
• 获取
语法：('input').prop('属性名'); • 设置 语法：('input').prop('属性名',值);

 <input type="button" value="按钮" class="btn" id="btn" disabled = "disabled">
    <input type="checkbox" value="北京" class="choose" id="box" checked = "checked">huahau
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        // 获取元素
        var $btn = $(".btn");
        var $choose = $(".choose");
        var btn = document.querySelector(".btn");

        // console.log(btn);
        // console.log(btn1);
        // console.log(btn3);
        // console.log(btn4.box);

        // 获取disabled属性值
        // console.log(btn.disabled);//布尔值true
        // console.log($btn.attr("disabled"));//字符串disabled
        // console.log($btn[0].disabled);// 布尔值true

        // prop()方法，直接操作就是布尔值
        console.log($choose.prop("disabled"));
        console.log($btn.prop("checked"));

        // 设置属性值
       $btn.prop("disabled",true) 
       $choose.prop("checked",false)

操作样式的方法

Css()方法

用于调用或者更改css属性值
• 一个参数：调用 css 属性，得到的是某个元素的计算后样式的字符串。
• 两个参数：设置 css 样式，第二个参数可以是字符串，如果带单位的数字的属性值，可以写成带单位的字符串格式、不带单位的字符串、纯数字、带 += 等赋值运算的字符串。
• css() 方法的第一个参数，复合属性的单一属性写法可以是驼峰命名法，也可以是横线写法。
• 可以给同一个对象同时设置多条 css 属性，将多条属性的属性和属性值写成对象格式。

   // 获取元素
    var $box = $(".box")
    
    // css() 传一个参数：获取对应的属性值
    console.log($box.css("width"));//会得到最终加载到页面的值
    // 符合属性的单一属性写法，既可以写横线，也可以驼峰命名
    console.log($box.css("background-color"));//返回rgb字符串
    console.log($box.css("backgroundColor"));

    // css（）传入两个参数：设置或更改对应属性值
    // $box.css("width","400px")
    // $box.css("width","400")
    // $box.css("width",400)
    // $box.css("width","+=400px")

    // 设置多条属性，可以使用对象形式的参数
    $box.css(
        {
            "width":200,
            "height":300
        })

类名添加方法

addClass()添加类名

jQuery对象.addClass('类名')

removeClass() 移除类名

jQuery对象.removeClass();
参数：字符串格式的类名。
• 不传参数，表示删除所有的类名

toggleClass（）类名切换

• 若这个类名存在，则会移除该类名。否则添加该类名
• 参数：字符串格式的类名。
• 优点：三个方法只操作参数部分的类名，不影响原有的其他类名。

hasClass()检测类名是否存在

返回值是布尔值

 // jQuery 中的类名控制方法，只会操作指定的类名，不会影响其他类名
        // 点击按钮 添加，让元素增加一个类名
        $btn1.click(function() {
            $box.addClass("demo")
            // 删除指定的类名，如果不传参数，全部删除
            // $box.removeClass()
        })
        $btn2.click(function() {
            // $box.removeClass("demo")
            // 删除指定的类名，如果不传参数，全部删除
            $box.removeClass("demo")
        })
        // 点击按钮切换 ，让元素在一个类名中进行添加或删除的自动切换
        $btn3.click(function() {
            $box.toggleClass("demo")
        })
// 判断一个类名是否加载
        console.log($box.hasClass("demo"));
        // 模拟 切换 类名的效果
        $btn3.click(function () {
            if (!$box.hasClass("demo")) {
                $box.addClass("demo")
            } else {
                $box.removeClass("demo")
            }
        })

jQuery常用事件方法

• 事件方法与原生 JS 事件方法名称类似，不需要写 on。
• 事件方法需要 jQuery 对象打点调用，小括号内的参数是事件函数。

click方法和onclick法法相同，不做介绍

mouseenter（）方法

鼠标进入一个元素触发的事件。

mouseleave()方法

鼠标离开元素触发事件
注意：mouseenter 和 mouseleave 没有事件冒泡。
在使用时替换 mouseover 和 mouseout 更加合适。

hover()方法

hover 事件相当于将 mouseoenter 和 mouseleave 事件进行了合写。
• 参数：有两个参数，第一个参数是鼠标移上执行的事件函数，第二个参数是鼠标离开执行事件函数。

 // hover方法，对mouseenter和mouseleave进行了合并书写
        $box.hover(function() {
            // 鼠标移入
            $box.addClass("demo")
        },function () {
            // 鼠标移出
            $box.removeClass("demo")
        })

        // jQuery 中增加了自己的事件类型：mouseenter 和mouseleave
        // 不会出现事件冒泡
        $box.mouseenter(function() {
            console.log("box-mouse-in");
        })

        $box.mouseleave(function () {
            console.log("mouse-box-out");
        })

        $parents.mouseenter(function() {
            console.log("box-mouse-in");
        })

        $parents.mouseleave(function () {
            console.log("mouse-box-out");
        })

jQuery事件操作和插件

on方法注册事件

简单注册：jQuery 对象.on('事件名',事件处理程序);
事件委托的实现：jQuery 对象.on('事件名','选择器',事件处理程序);
选择器：子孙元素
注意：在事件处理程序中，this 代表的是子孙元素（所点最先触发的）

 // 简单注册事件的方式
        // $("input").click(function () {
        //     alert(1)
        // })

        // 使用 on 方法注册简单事件
        // on() 方法的封装的底层实际是 addEventListener()
        $("input").on("click",function () {
            alert(2)
        })
        $("input").on("click",function () {
            alert(3)
        })
        // jQuery 中事件委托
        //  on（）方法传递三个参数
        // 参数1： 事件类型
        // 参数2：进行委托的子元素的选择器
        // 参数3：事件处理程序
        $("ul").on("click",'li',function() {
            // 事件委托过程中，事件函数的内部this 不是指向事件源，二是指向触发事件的，委托子元素
            alert($(this).text());
        })

Off方法移除事件

jQuery 对象.off('click',事件处理程序名称)
• 解绑事件委托注册的事件：jQuery 对象.off('click',‘选择器’,事件处理程序名称)

 // 定义事件处理函数
         var fun1 = function () {
            alert(2)
        }; 
        var fun2 = function () {
            alert(3)
        };
        // 绑定简单事件
        $("input").on("click",fun1)
        $("input").on("click",fun2)
        // 解绑事件
        $("input").off("click",fun2)

        // 绑定事件委托的事件
        var fn1 = function () {            
            alert($(this).text())
        };
        var fn2 = function () {            
            alert($(this).index())
        };

         // 绑定事件委托的事件
         $("ul").on("click", "li", fn1)
        $("ul").on("click", "li", fn2)

        // 解绑委托事件
        $("ul").off("click",'li',fn2)

触发事件

Jq对象.trigger(“事件名”);

 // 可以利用 JQ 中的 trigger 方法，自动执行右按钮事件
    function autoPlay (){
      $(".arrow-right").trigger("click");
    }
   var timer = setInterval(autoPlay,1000);
  //  鼠标移上停止定时器
  $('.slider').on('mouseenter',function(){
    clearInterval(timer);
  })
  // 鼠标离开重新开启定时器
  $(".slider").on("mouseenter",function(){
    timer = setInterval(autoPlay,1000)
  })

事件对象e

鼠标事件对象相关属性
• 事件对象.clientX/Y 参照浏览器 e.clientX/Y
• 事件对象.pageX/Y 参照文档 e.pageX/Y
• 事件对象.offsetX/Y 参照元素 e.offsetX/Y
键盘事件对象
• 事件对象.keyCode 返回键码数字
• 事件对象.altKey/shiftKey/ctrlKey 返回是布尔值。 检测是否按下（true）
公共的属性或方法
• 属性
事件对象.target 最初触发事件的DOM元素
事件对象.currentTarget 在事件冒泡阶段中的当前DOM元素
• 方法：
事件对象.preventDefault(); 阻止默认行为
事件对象.stopPropagation(); 阻止事件冒泡

// 键盘按下事件中，获取键码的数字
        $(document).keydown(function (e) {
            console.log(e.keyCode)
        })

节点操作

$(this) 自己

在 jQuery 中将 this 关键字传递给 $() 方法，得到就是指向自己的 jQuery 对象，就可以使用 JQ 的方法。

parent() 父级

jQuery 对象都有一个 parent() 方法，得到的是自己的父亲级。
父级得到的也是一个 jQuery 对象，直接继续打点调用 JQ 方法和属性。

children() 子级

jQuery对象内部有一个children()方法，可以找到所有自己元素对象
得到的是jQuery对象可以继续调用jq的方法和属性
获得子集元素，不限制标签类型
Children()可以传参数：参数是字符串格式的选择器，进行二次筛选

sibilings()兄弟

• jQuery 对象通过调用 siblings() 方法可以得到除了自己以外的所有同级元素（兄弟）组成 jQuery 对象，找到的只能是亲的兄弟，不能是叔叔家的兄弟。
• 得到 jQuery 对象可以继续使用 JQ 的方法和属性。
• siblings() 方法得到的 jQuery 对象可以进行二次选择，通过给参数传递字符串格式的选择器。

     $ps.click(
            function () {
                // 让点击的自己 颜色变红色
                // this 的指向时触发事件的事件源的原生 js 对象
                // 需要转换成jQuery 对象
                // $(this).css("background-color","red")
                // // 找到事件源的父级元素，添加黄色背景
                // $(this).parent().css("background-color","yellow")
                // 查找兄弟元素
                // $(this).siblings().css("background-color","skyblue")
                $(this).siblings("h2").css("background-color", "skyblue")
            }
        )
        $box.click(function () {
            // 点击父级，子集元素变色
            // $(this).children().css("background-color","yellow")
            // $(this).children(".p1").css("background-color","yellow")
            // $(this).children("h2").css("background-color","yellow")
        })

链式调用

find() 后代元素

jQuery 对象可以利用 find() 方法，传递一个参数，参数部分规定的选择器，查找所有后代。
• 参数是字符串格式的选择器。

兄弟元素

• next() 下一个兄弟
• prev() 前一个兄弟
• nextAll() 后面所有兄弟
• prevAll() 前面所有兄弟
可以传递字符串格式参数进一步选择

parents() 祖先级

选择指定对象包括body在内的所有祖先级

// 兄弟元素查找
        // next()下一个兄弟
        // nextAll()下一个兄弟
        // prevAll()上一个兄弟
        // prev()上一个兄弟

        // parent()查找祖先级，查找body在内的祖先级
        $child.click(function () {
            // $(this).css("background-color","red")
            // .next().css("background-color","blue")
            // // 自己变红，上一个变蓝
            // $(this).css("background-color","red")
            // .prev().css("background-color","blue")
            // 自己变红色，前面兄弟变蓝，后面所有变黄
            // $(this).css("background-color", "red")
            //     .prevAll().css("background-color", "blue")
            // $(this).css("background-color", "red")
            //     .nextAll("p").css("background-color", "blue")
            $(this).css("background-color", "red")
                .parents("div").css("background-color", "blue")
           
        })

创建元素

$(‘<li></li>’)
追加元素1
  • 向父元素最后追加
    语法：父元素jQuery对象.append(新创建的jQuery对象);
    语法：新创建jQuery对象.appendTo('父元素选择器' 或 父元素jQuery对象);
  • 向父元素前面追加
    语法：父元素jQuery对象.prepend(新创建的jQuery对象);
    语法：新创建jQuery对象.prependTo('父元素选择器' 或 父元素jQuery对象);
追加元素2

想元素后面追加新的兄弟
Jq对象.after(新创建的jq对象)
新创建的jq对象.insertAfter(‘选择器’或 jQuery对象)
向元素前面追加新的兄弟
jQuery对象.before(新创建的jQuery对象);
新创建jQuery对象.insertBefore('选择器' 或 jQuery)

// 创建新元素
        var $newLi = $("<li>这是一个新的 li 元素</li>");
        console.log($newLi);

        // 获取ul元素
        var $ul = $("ul");
        var $oldLi = $('.old');
        // 向父元素最后添加新的子元素
        // ul.append($newLi);
        // $newLi.appendTo($ul);
        // $newLi.appendTo("ul");

        // 向父元素最前面添加新的子元素
        // $ul.prepend($newLi);
        // $newLi.prependTo($ul);
        // $newLi.prependTo('ul');

        // 向一个元素的后面追加兄弟元素
        $oldLi.after($newLi)
        $newLi.insertAfter($oldLi)

        // 向一个元素的前面追加兄弟元素
        $newLi.insertBefore($oldLi)
        $oldLi.before($oldLi)

删除对象

Jq对象.remove()

清空元素

  1. jQuery对象.empty(); 推荐使用， 清空内部的所有元素及元素相关的事件
  2. 清空方式2：jQuery对象.html(''); 仅仅清空内部的元素，不清清理内存中的元素的事件。
// 删除元素自己
        // $(".third").remove();
    
        // 清空元素内部的所有子节点
        // 方法1： empty() 方法，清除所有子节点的同事，清除子节点上的事件
        // $(".box").empty();
        // 方法2： html() 方法，将参数设置为空字符串,事件不会被清除
        // $(".box").html("");

克隆元素

jQuery对象.clone(布尔值); 返回克隆好的元素
参数默认false，表示仅克隆内容。True表示克隆内容和事件

 $(".box").click(function () {
            alert("你好");
        });

        // 获取 box 元素
        var $box = $(".box");
        // 克隆 box
        // var $newBox = $box.clone(false); //只克隆内容，不克隆事件
        var $newBox = $box.clone(true); //克隆内容，克隆事件
        // // 添加到 body 最后
        $("body").append($newBox);

操作元素尺寸

width（）和height()方法

获得元素内容的宽高
设置：
语法：jQuery 对象.width(数字); jQuery 对象.height(数字);

innerWidth() 和 innerHeight() 方法

操作的是内容区域+padding部分的内容（边框以内，不含边框）

outerWidth() 和 outerHeight() 方法

操作的是内容部分 + padding + border （边框以内，包含边框）

 var $box = $(".box");
        // 获取内容区域的大小
        // console.log($box.width());
        // 设置大小
        // $box.width(300)

        // 获取内容区域 + padding 区域的大小
        console.log($box.innerWidth());
        // 设置，将增加和减少的值设置给了width的值
        console.log($box.innerWidth(400));
        
        // 获取border 以及以内区域的大小
        console.log($box.outerWidth());
        // 设置，将增加或减少的值设置给了 width 属性
        $box.outerWidth(440)

获取元素距离文档的位置

Jq对象.offset()
返回一个对象，包含元素位置
Offset()方法获取元素位置，参照文档，和定位无关

距离上级定位参考元素的位置

jQuery 对象.position();
• 返回的一个对象，对象中包含了元素的位置
• 注意：position() 方法获取的元素的位置,参照最近的定位元素（和定位有关系）

  // 获取元素局里文档的位置
        var $son = $(".son");
        var offsetObj = $son.offset()
        console.log(offsetObj);//{top: 100, left: 100}
        console.log(offsetObj.left);//100
        console.log(offsetObj.right);//100

        // 获取元素局里上级定位参考元素的位置
        // 和绝对定位差不多
        var positionObj = $son.position();
        console.log(positionObj);// {top: 50, left: 50}
        console.log(positionObj.left);//50

操作卷去的页面间距

Jq对象.scrollTop()
返回数字
设置：jQuery 对象.scrollTop(数字);

入口函数：

原生的window.onload

优点是可以多次出现，互相不影响，仅等待 DOM 树加载完成就立即执行

//语法1：
$(document).ready(function(){
// 获取元素
});
//语法2：
$(function(){
// 获取元素
});

示例：

   // onload事件加载时，值得是页面中所有的资源【dom树、音频、视频、图片等】加载完毕后，才能触发
        // 一个页面中只能出现一次
        window.onload = function () {
            console.log(1);
            var btn = document.getElementsByTagName("input")[0]
            console.log(btn);
        }
        // jQuery的入口函数
        // 仅仅需要等待页面中的 dom 树加载完毕就可以执行
        $(document).ready(function() {
            console.log(2);
            var btn = document.getElementsByTagName("input")[0]
            console.log(btn);
        })
        
        // 简化
        // 一个页面可以写多个 jQuery 入口函数，执行顺序按照前后顺序加载
        $(function() {
            console.log(3);
            var btn = document.getElementsByTagName("input")[0]
            console.log(btn);
        })

排序与动画

eq()方法

jQuery中获得的对象，在jq对象中会进行一个大排序，与原来的html结构无关。
eq()方法在jq对象中通过下标获取某个对象，下标是jq对象中大的排序的下标

 // 选择所有的 p 标签元素
        // var $ps = $("p");
        // 生成的jQuery 对象，内部包含所有的原生 js 对象
        // jQuery 对象是一个类数组对象，内部所有的数据进行一个大排序
        // 排序与自己原来的父级没关系，只与 在jQuery对象中的新的位置有关
        // 重点体现在 eq() 方法中
        // 给指定位置的对象添加颜色
        // $ps.eq(1).css("background-color","red")
        // $ps.eq(3).css("background-color","red")
 // 通过类名选择
        $(".cur").eq(2).css("backgroundColor","red")

index()方法

// index()方法获取下标时，排序新生成的 jQuery 对象无关
        // 他依赖于自身元素在父级中同级元素之间的位置
        // 需要获得在结构中的下标的时候用大排序eq()
        // 如果找原来结构中下标的位置的时候用index()
        // 添加点击事件
        $ps.click(function() {
            // 点击输出自己的 index()的值
            console.log($(this).index());
        })

each()方法
参数是一个函数。
• 作用：就是对 jQuery 对象中的元素每一个都执行函数内部的操作。
• each 方法的基本原理就是 for 循环，从对象的下标为 0 的项一直遍历到最后一项，然后对每一项进行操作。

  • Each内部有一个this，指向的是遍历的每一次的元素
    案例：让每个div内部的第二个元素变红 
// 选择所有的 box 元素
        var $box = $(".box");
        // 给每个 box 内部的第二个 p 添加红色
        $box.children().eq(1).css("background","red");
        //  each() 遍历
        // 将 jQuery 对象中的每一项单独拿出来进行操作
        $box.each(function () {
            // this 关键字，指向的是每一次遍历的元素对象
            // 就可以针对每一个元素进行单独操作
            $(this).children().eq(1).css("background","red");
        });
  • Each的函数可以传一个参数 i，i表示这一次的遍历对象在整体jQuery对象大排队中的下标位置
  • Each内部可以传一个参数i，表示每次遍历对象在整体jq对象中大排序的位置
        // 选择所有的 p标签
        var $ps = $(".box p")
        // 添加点击事件
        // $ps.click(function() {
        //     // 获取元素在父级中 兄弟间的下标
        //     console.log($(this).index());
        // })
        // 通过each方法，进行操作
        $ps.each(function (i) {
            // i记录的是这一次遍历是当前元素 在 jq对象中的大排序位置
            $(this).click(function () {
                // 这个颞部的this 就是事件源
                console.log(i);
                console.log($(this).index());
            })
        })

hide()和show()方法

• hide()：元素隐藏，隐藏的前提必须是元素 display:block；
• show()：元素显示，显示的前提必须是元素 display:none;
• toggle()：在元素隐藏和显示之间进行切换。
• 这三个方法可以设置元素的显示和隐藏效果，在过程中还可以出现过渡动画。
参数：
不传参无动画
传参数：单词格式："slow","normal", "fast"
数字参数：毫秒
过渡时，宽高随着透明度变化

        // 添加点击事件，让图片实现显示和隐藏
        $btn1.click(function(){
            $pic.hide(1000)
        })
        btn2.click(function(){
            $pic.show("normal")
        })
        $btn3/click(function(){
            $pic.toggle("fast")
        })

fadeIn和fadeOut方法

• fadeIn()：淡入，透明度逐渐增大最终显示。
• fadeOut()：淡出，透明度逐渐降低最终隐藏。
• fadeToggle()：切换效果。
• fadeTo()：淡入或淡出到某个指定的透明度。0-1之间
参数同上

animate()方法

语法：$(selector).animate(styles,speed,easing,callback)
参数1：css的属性名和运动结束为止的属性值的集合
2：可选，规定动画速度，默认normal，可以是slow，fast。也可以是数字
3：可选，规定在不同动画点中设置动画速度easing函数，值是swing和linear
4：可选，animate函数执行完成之后，要执行的函数

//  习惯将运动时间存储到变量中
        var during = 2000;
        $ps.click(function(){
             // 让自己的 left 的值变为 500
            // 使用 animate() 方法
            // 参数1： 运动的 css 的属性集，对象格式
            // 参数2： 运动时间，单词格式，数字格式
            // 参数3： 运动速度，可选 swing 和 linear
            // 参数4： 回调函数，在运动结束之后立即执行
            // $(this).animate({"left": 500},during,"swing",function () {
            // //     // 在运动结束后，让元素变红色
            // //     $(this).css("background","red")
            // // })
            // 所有的数值属性都可以运动
            $(this).animate({"width":500})
            $(this).animate({"width":500})
            $(this).animate({"backgroundColor":"#000"})
        })

动画排队现象

• ①同一个元素对象身上，如果定义了多个动画，动画会排队等待执行。
• ②如果是不同的元素对象都有动画，不会出现排队机制。
• ③如果是的其他非运动的代码，也不会等待运动完成。
• ④之前学习的自带动画的显示隐藏方法，如果设置给同一个元素，也有动画排队。
• 同一个元素身上的运动，可以简化成链式调用的方法。

delay()动画延迟

• delay：延迟的意思。
• 将 delay() 设置在某个运动方法之前，表示后面的运动要在规定的时间之后再执行，有延迟运动的效果。
• 参数：时间的数值，表示延迟的时间。
• 除了 animate 方法之外，其他的运动方法也有延迟效果。

<div class="box1"><span></span></div>
    <div class="box2"><span></span></div>

    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        // 获取元素
        var $box1 = $(".box1")
        var $box2 = $(".box2")
        var during = 2000;
        // 延迟
        $box1.animate({"left": 500},during);
        $box2.delay(2000).animate({"left": 500},during);
    </script>

stop()方法

• stop() 作用：设置元素对象身上的排队的动画以何种方式进行停止。
• 有两个参数，都是布尔值。
• 参数1：设置是否清空后面的动画排队，如果是 true 表示清空，如果是 false 表示不清空只停止当前的一个动画。
• 参数2：设置当前动画是否立即完成，如果是 true 表示立即完成，对象会立刻走到结束位置，如果是 false 表示不完成当前动画，立即停止在当前位置。
• 默认情况下，两个参数值默认值为 false。
• 根据两个参数的值，可以得到四种停止方式。

解决动画排队问题

方法1
• 利用 stop() 方法。
• 在每一个运动函数之前都增加一个 stop(true)，表示在运动执行之前，会将前面排队的动画清空，然后停止在当前位置。
方法2：
利用函数节流方法，如果元素在运动，直接 return，不要执行后面的运动代码。
• 每个 jQuery 对象，都能调用一个 is() 方法，作用是显示元素对象的某种状态。
• 如果参数位置是 is(“:animated”),返回值是布尔值，true 表示正在运动，false 表示没有运动。

  // 将运动设置给事件，事件多次触发会积累动画出现动画排队
        // 清除动画排队方法1： 在每一次新的运动开始之前，去停止之前所有的动画排队
        // $box1.mouseenter(function () {
        //     $(this).children().stop(true).slideUp(during)
        // })
        // $box1.mouseleave(function () {
        //     $(this).children().stop(true).slideDown(during)
        // })

        // 清空动画排队方法2：使用函数节流方法
        $box1.mouseenter(function () {
            if($(this).children().is(":animated")){
                return;
            }
            $(this).children().stop(true).slideUp(during)
        })
        $box1.mouseleave(function () {
            if($(this).children().is(":animated")){
                return;
            }
            $(this).children().stop(true).slideDown(during)
        })

多库共存问题

关于 $ 冲突的问题

• 解决方案1：jQuery 中不使用 ,使用 jQuery • 解决方案2：jQuery 库释放 符合的使用权，用其他简单的符号代替
• jQuery.noConflict(); 释放 ,把 代表的函数返回给用户，用户可以用其他变量接收

<button>按钮</button>
    <!-- 引入一个jq的库 -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 引入另一个库 -->
    <script src="js/other.js"></script>
    <script>
        // 使用多个库
        // 问题：后面的其他库也有$ 的标识符
        // $("button").click(function(){
        //     alert(1);
        // })

        // 解决方法1：使用 jQuery 标识符选择
        jQuery("button").click(function(){
            alert(1);
        })
        // 解决方法2：释放 $ 符号
        jQuery.noConflict();
        console.log($);//undefined

        var $1 = jQuery.noConflict();
        $1("button").click(function(){
            alert(1);
        })
    </script>

jQuery 插件库

  • 获取插件，在搜索引擎上搜索插件
  • 插件使用方法:
    找到并且下载插件
    在项目外写一个demo(先学会使用，让后再加入的项目中)
    看源码，看文档
    注意：
    结构必须一致，标签名不一定
    样式，可以选择复制，也可以自定义
    先引入jquery再引入插件库
    复制源码，看文档
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,080评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,422评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,630评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,554评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,662评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,856评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,014评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,752评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,212评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,347评论 4赞 331
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,973评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2赞 349

推荐阅读更多精彩内容

  • JQuery常见应用
    1、 jQuery 中， $(document).ready()是什么意思？ 理想的页面加载方式：解析HTML结构...
    zh_yang阅读 461评论 4赞 3
  • Jquery知识点总结
    一：认识jquery jquery是javascript的类库，具有轻量级，完善的文档，丰富的插件支持，完善的Aj...
    xuguibin阅读 1,706评论 1赞 7
  • jQuery
    $() 方法 在 jQuery 中，只有一个全局变量 $, 这是 jQuery的一大特点，避免了全局变量的污染。 ...
    GongShengM阅读 218评论 0赞 0
  • jQuery
    什么是jQuery? jQuery是一个快速的、轻量的、功能丰富的js库。 jQuery的官网 http://jq...
    小五同学H阅读 246评论 0赞 0
  • Jquery
    [if !supportLists]第一章 [endif]介绍 [if !supportLists]一、[endi...
    海绵宝宝_b8a2阅读 277评论 0赞 0