val方法 可以获取到表单元素的value值 比原生js方便很多
html代码
<input value = "输入框value值"/>
js代码
javascript">console.log($("input").val())
attr 标签属性 函数
传两个参数 就是标签属性的set方法
传一个参数 就是标签属性的get方法
代码演示
javascript">$("div").attr("title","title属性"); //将div的title属性值改为 "title属性"
将div的title属性值改为 “title属性”
javascript">console.log($("div").attr("title")); //打印出div标签属性title的值
打印出div标签属性title的值
addClass 添加class removeClass删除class
javascript">$("div").addClass("xxx");//给div添加上xxx 的类名
给div添加上xxx 的类名
javascript">$("div").removeClass("xxx");//从div上删除xxx 的类名
从div上删除xxx 的类名
animate 动画函数
可以在第一个参数中写明要修改元素的哪些样式
第二个参数就是修改这些样式的动画持续多久
代码演示
Css代码
div{
width: 10em;
height: 10em;
background: red;
}
Hmtl代码
<div>元素</div>
Js代码
javascript">$("div").animate({
"height": "20em",
"width": "20em"
},800)
这里我们改变了元素的高宽度
定时 0.8秒执行完动画效果
有时候我们给用户触碰时触发一个animate 动画 但用户又触碰一次
两个动画会叠加 就是等待第一个动画执行完才会走第二个
但很多时候是第二个动画触发第一个动画就不要走了
那么可以在每个animate之前执行一次stop
stop函数 结束元素动画
javascript">$("div").stop();
delay 暂停动画
举例说明
Css代码
div{
width: 70%;
height: 20em;
background: red;
margin: auto;
}
Html代码
<div></div>
Js代码
javascript">$("div").animate({
"width": "0%"
},800).delay(1000)
.animate({
"width": "70%"
},800)
运行效果是 元素先动画宽度收到0% 然后暂停1秒 宽度又回到百分之七十
javascript">$("div").hide(1000) //元素隐藏收起动画 1秒内完成
元素隐藏收起动画 1秒内完成
javascript">$("div").show(1000) //元素显示展开动画 1秒内完成
元素显示展开动画 1秒内完成
toggle 动画函数
这个函数的话会根据元素显示状态变化效果
如果当前元素隐藏 则toggle会执行出show的效果
如果元素显示 那么则执行hide
代码如下
javascript">$("div").toggle(1000)
fadeIn 淡入 fadeOut 淡出
javascript">$("div").fadeIn(); //隐藏元素慢慢显示的动画效果
隐藏元素慢慢显示的动画效果
javascript">$("div").fadeOut(); //显示元素慢慢隐藏的动画效果
显示元素慢慢隐藏的动画效果
fadeToggle 判断动画
如果当前元素是隐藏则执行fadeIn 如果当前元素显示的 那就执行fadeOut
javascript">$("div").fadeToggle();
slideUp 元素收起 slideDown 元素展开
这两个控制的是元素高度
javascript">$("div").slideUp(); //元素高度慢慢减到0
元素高度慢慢减到0
javascript">$("div").slideDown(); //元素高度慢慢从0回到原本的高度
元素高度慢慢从0回到原本的高度
slideToggle 判断元素是否全部展开了
如果展开了执行slideUp 否则执行slideDown
javascript">$("div").slideToggle();
ajax虽然很常用 但网上资源太多 那这里也就不做概述了
