jQuery第二天(操作样式、属性、节点、动画）

╰+攻爆jí腚メ 2022-01-20 08:11 273阅读 0赞

# 02.jQuery操作样式 #

### 1. css操作 ###

*  功能：设置或者修改样式，操作的是style属性。
 *  操作单个样式
 *  特点：jQ的css方法都是行内样式；

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

*  设置多个样式

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

### 2. class操作 ###

*  添加样式类

//name: 需要添加的样式类名，注意参数不要带点.
    addClass(name);
    //例子，给所有的div添加one的样式。
    $("div").addClass("one");
    复制代码

*  移除样式类

//name:需要移除的样式雷鸣
    removeClass("name");
    //例子，给所有的div添加one的样式。
    $("div").removeClass("one");
    复制代码

*  判断是否有某个样式类

//name: 用于判断的样式的类名，返回值为true false
    hasClass(name)
    //例子，判断第一个div是否有one的样式类
    $("div").hasClass("one");
    复制代码

*  切换样式类

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

## jQuery操作属性 ##

### 1. attr操作 ###

*  设置单个属性

//第一个参数：需要设置的属性名
    //第二个参数：对应的属性值
    attr(name,value);
    //用法举例
    $("img").attr("title","xxxx");
    复制代码

*  设置多个属性

//参数是一个对象，包含了需要设置的属性名和属性值
    attr(Obj);
    //用法举例
    $("img").attr({
        title:"xxx",
        alt:"xxx",
        style:"xxx"
    });
    复制代码

*  获取属性

//传需要的获取的属性名称，返回对应的属性值
    attr(name,);
    //用法举例
    $("img").attr("title");
    复制代码

*  移除某个属性  
    `removeAttr(name)`
 *  【02-05-美女相册案例】

### 2. prop操作 ###

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

//设置属性
    $("xxx").prop("checked",true);
    //获取属性
    $("xxx").prop("checked");//返回true或者false
    复制代码

*  【02-07-prop方法-表格全选案例】

## jQuery动画 ##

*  jQuery提供了三组基本动画，这些动画都是标准的、有规律的效果，jQuery还提供了自定义动画的功能

### 1. 三组基本动画 ###

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

show([speed],[callback]);
    //speed(可选)：动画的执行的持续时间
        //1.如果不传，就没有动画效果。如果是slide和fade系列，会默认normal
        //2.毫秒值（比如1000）,动画在1000毫秒执行完成（推荐）
        //3.固定字符串：slow(200ms)、normal(400ms)、fast(600ms ),如果传其他字符串，则默认normal。
    //callback(可选)：执行完动画后执行的回调函数
    复制代码

*  【02-11-下拉菜单案例】
 *  【02-12-京东轮播图】

### 2. 自定义动画 ###

*  animate:自定义动画

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

*  【02-14-手风琴案例】

### 3. 动画队列与停止动画 ###

*  在同个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行（联想：火车进站）。

//stop方法：停止正在执行的动画效果
    stop(clearQueue,jumpToEnd);
    //第一个参数：是否清除队列
    //第二个参数：是否跳转到最终效果
    复制代码

*  【02-17-音乐导航】

## jQuery节点操作 ##

### 1. 创建节点 ###

//$(htmlStr)
    //htmlStr: html格式的字符串
    $("<span>这是一个span元素</span>")
    复制代码

### 2. 添加节点 ###

//添加到子元素的最后面：被添加的对象.append(添加的对象)---添加的对象.appendTo(被添加的对象) 
    //添加到子元素的最前面: 被添加的对象.prepend(添加的对象)---添加的对象.prependTo(被添加的对象)
    //添加到自身元素的前面: before
    //添加到自身元素的后面: after
    复制代码

*  【02-20-微博发布案例】
 *  【02-22-弹幕效果】

### 3.清空节点与删除节点 ###

*  empty：清空指定节点的所有元素，自身保留

$("div").empty();//清空div的所有内容(推荐使用，会清除子元素上绑定的内容，源码)
    $("div").html("");//使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。
    复制代码

*  remove: 相比于empty,自身也删除

$("div").remove();
    复制代码

*  【03-12-表格删除功能】

### 4.克隆节点 ###

*  作用: 复制匹配的元素

//复制$(selector)所匹配到的元素(深度复制)
    //clone(true)-----false: 不传参数也是深度复制，不会复制事件----true: 是深度复制，会复制事件
    //返回值为复制的新元素,和原来的元素没有了任何关系了.即修改新元素,不会影响到原来的元素.
    $(selector).clone();
    复制代码

\------------------------------------------------------记录于 2019.4.26 jQuery(一)