2020-04-06 jQuery

jQuery操作样式

css操作

功能：设置或者修改样式，操作的是style属性。
操作单个样式

    //name：需要设置的样式名称
    //value：对应的样式值
    css(name, value);
    //使用案例
    $("#one").css("background","gray");//将背景色* 修改为灰色

设置多个样式

    //参数是一个对象，对象中包含了需要设置的样式名和样式值
    css(obj);
    //使用案例
    $("#one").css({
        "background":"gray",
        "width":"400px",
        "height":"200px"
    });

获取样式

    //name:需要获取的样式名称
    css(name);
    //案例
    $("div").css("background-color");

注意：获取样式操作只会返回第一个元素对应的样式值。

隐式迭代：

设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。

class操作

添加样式类

    //name：需要添加的样式类名，注意参数不要带点.
    addClass(name);
    //例子,给所有的div添加one的样式。
    $(“div”).addClass(“one”);

移除样式类

    //name:需要移除的样式类名
    removeClass(“name”);
    //例子，移除div中one的样式类名
    $(“div”).removeClass(“one”);

判断是否有某个样式类

    //name: 用于判断的样式类名，返回值为true false
    hasClass(name)
    //例子，判断是否有one的样式类
    $(“div”).hasClass(“one”);

切换样式类

    //name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
    toggleClass(name);
    //例子
    $(“div”).toggleClass(“one”);

jQuery操作属性

attr操作

设置单个属性

    //第一个参数：需要设置的属性名
    //第二个参数：对应的属性值
    attr(name, value);
    //用法举例
    $(“img”).attr(“title”,”哎哟，不错哦”);
    $(“img”).attr(“alt”,“哎哟，不错哦”);

设置多个属性

    //参数是一个对象，包含了需要设置的属性名和属性值
    attr(obj)
    //用法举例
    $("img").attr({
        title:"哎哟，不错哦",
        alt:"哎哟，不错哦",
        style:"opacity:.5"
    });

获取属性

    //传需要获取的属性名称，返回对应的属性值
    attr(name)
    //用法举例
    var oTitle = $("img").attr("title");
    alert(oTitle);

移除属性

    //参数：需要移除的属性名，
    removeAttr(name);
    //用法举例
    $("img").removeAttr("title");

prop操作

在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。

//设置属性
$(“input:checked”).prop(“checked”,true);
//获取属性
$(“input:checked”).prop(“checked”);//返回true或者false

jQuery动画

jquery提供了三组基本动画，这些动画都是标准的、有规律的效果，jquery还提供了自定义动画的功能。【演示动画例子】

三组基本动画

显示(show)与隐藏(hide)是一组动画：
滑入(slideUp)与滑出(slideDown)与切换(slideToggle)，效果与卷帘门类似
淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)

    show([speed], [easing], [callback]);
    //speed(可选)：动画的执行时间
         //1.如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal
         //2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
         //3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
    // easing(可选)： 动画效果，默认是swing，秋千，提供了一个linear 匀速的效果
    //callback(可选):执行完动画后执行的回调函数

自定义动画

animate: 自定义动画

    $(selector).animate({params},[speed],[easing],[callback]);
    // {params}：要执行动画的CSS属性，带数字（必选）
    // speed：执行动画时长（可选）
    // easing: 执行效果，默认为swing（缓动）  可以是linear（匀速）
    // callback：动画执行完后立即执行的回调函数（可选）

动画队列与停止动画

在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行。

//stop方法：停止动画效果
stop(clearQueue, jumpToEnd);
//第一个参数：是否清除队列
//第二个参数：是否跳转到最终效果

jQuery节点操作

创建节点

    //$(htmlStr)
    //htmlStr：html格式的字符串
    $("<span>这是一个span元素</span>");

添加节点

    // append  appendTo   都是添加到元素内部的最后面
    // prepend prependTo  都是添加到元素内部的最前面
    // before       添加到元素前面，做兄弟
    // after        添加到元素后面，做兄弟

清空节点与删除节点
- empty：清空指定节点的所有元素，自身保留(清理门户)
- remove：相比于empty，自身也删除（自杀）

    $(“div”).empty();//清空div的所有内容

    $(“div”).remove();

克隆节点

作用：复制匹配的元素

    // 复制$(selector)所匹配到的元素（深度复制）
    // cloneNode(true)
    // 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。
    $(selector).clone();