[JavaScript知识库]jquery基础整理(2) 动画函数 属性函数

val方法 可以获取到表单元素的value值 比原生js方便很多
html代码

<input value = "输入框value值"/>

js代码

console.log($("input").val())

attr 标签属性 函数
传两个参数 就是标签属性的set方法
传一个参数 就是标签属性的get方法
代码演示

$("div").attr("title","title属性");  //将div的title属性值改为 "title属性"

将div的title属性值改为 “title属性”

console.log($("div").attr("title"));  //打印出div标签属性title的值

打印出div标签属性title的值

addClass 添加class removeClass删除class

$("div").addClass("xxx");//给div添加上xxx 的类名

给div添加上xxx 的类名

$("div").removeClass("xxx");//从div上删除xxx 的类名

从div上删除xxx 的类名

animate 动画函数
可以在第一个参数中写明要修改元素的哪些样式
第二个参数就是修改这些样式的动画持续多久
代码演示
Css代码

div{
	width: 10em;
	height: 10em;
	background: red;
}

Hmtl代码

<div>元素</div>

Js代码

$("div").animate({
	"height": "20em",
	"width": "20em"
},800)

这里我们改变了元素的高宽度
定时 0.8秒执行完动画效果

有时候我们给用户触碰时触发一个animate 动画 但用户又触碰一次
两个动画会叠加 就是等待第一个动画执行完才会走第二个
但很多时候是第二个动画触发第一个动画就不要走了
那么可以在每个animate之前执行一次stop
stop函数 结束元素动画

$("div").stop();

delay 暂停动画
举例说明

Css代码

div{
	width: 70%;
	height: 20em;
	background: red;
	margin: auto;
}

Html代码

<div></div>

Js代码

$("div").animate({
	"width": "0%"
},800).delay(1000)
.animate({
	"width": "70%"
},800)

运行效果是 元素先动画宽度收到0% 然后暂停1秒 宽度又回到百分之七十

hide 动画隐藏 show 动画显示

$("div").hide(1000)   //元素隐藏收起动画  1秒内完成

元素隐藏收起动画 1秒内完成

$("div").show(1000)  //元素显示展开动画  1秒内完成

元素显示展开动画 1秒内完成

toggle 动画函数
这个函数的话会根据元素显示状态变化效果
如果当前元素隐藏 则toggle会执行出show的效果
如果元素显示 那么则执行hide
代码如下

$("div").toggle(1000)

fadeIn 淡入 fadeOut 淡出

$("div").fadeIn();   //隐藏元素慢慢显示的动画效果

隐藏元素慢慢显示的动画效果

$("div").fadeOut();   //显示元素慢慢隐藏的动画效果

显示元素慢慢隐藏的动画效果

fadeToggle 判断动画
如果当前元素是隐藏则执行fadeIn 如果当前元素显示的 那就执行fadeOut

$("div").fadeToggle();

slideUp 元素收起 slideDown 元素展开
这两个控制的是元素高度

$("div").slideUp();  //元素高度慢慢减到0

元素高度慢慢减到0

$("div").slideDown();  //元素高度慢慢从0回到原本的高度

元素高度慢慢从0回到原本的高度

slideToggle 判断元素是否全部展开了
如果展开了执行slideUp 否则执行slideDown

$("div").slideToggle();

ajax虽然很常用 但网上资源太多 那这里也就不做概述了