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");

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

隐式迭代:

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

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:清空指定节点的所有元素,自身保留(清理门户)
$(“div”).empty();//清空div的所有内容
remove:相比于empty,自身也删除(自杀)
$(“div”).remove();

克隆节点

作用:复制匹配的元素
// 复制$(selector)所匹配到的元素(深度复制)
// cloneNode(true)
// 返回值为复制的新元素,和原来的元素没有任何关系了。即修改新元素,不会影响到原来的元素。
$(selector).clone();
最后修改:2021 年 06 月 23 日 01 : 43 PM
如果觉得我的文章对你有用,可以对我进行您主观即不限定金额大小的打赏。