jQuery基础效果-创新互联
jQuery基础效果
成都创新互联长期为千余家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为果洛州企业提供专业的成都做网站、成都网站制作,果洛州网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。$(document).ready(function(){}这句话的意思是页面加载完成后执行,
等同于js中的window.onload,大家学了jQuery的话应该就会知道
$(document).ready(function(){//这行代码意思是页面加载后执行
$("#bun1").click(function(){//#是ID的意思 .是Class的意思 $("#bun1")选择你需要用到的元素,这句话的意思是我要给一个ID为bun1的元素加点击事件
$(".h21").hide('fast')//一样$(".h21")选择元素,选Class名为11的元素
})
解释完了,jQuery就是这么简单
现在来学习基础效果
1隐藏和显示
隐藏的代码是hide(speed,function)
第一个参数可以是 毫秒 slow fast 第二个参数,就是完成隐藏后执行的函数
显示的是代码show(speed,function)
第一个参数可以是 毫秒 slow fast 第二个参数,就是完成隐藏后执行的函数
如果你要弄隐藏和显示的效果,你需要2个按钮一个隐藏,一个显示,有个代码可以让你给一个按钮施加2个效果,既可以隐藏也可以显示,那就是
toggle(speed,function)
第一个参数可以是 毫秒 slow fast 第二个参数,就是完成隐藏后执行的函数
代码如下
$(document).ready(function(){
$('#bun1').click(function(){
//$('#div1').hide(2000)//隐藏 隐藏的速度是2秒完成
// $('#div1').show(2000)//显示 显示的速度为2秒完成
$('#div1').toggle(2000)//既可以隐藏也可以显示
})
})
2淡入淡出
淡入隐藏的元素(把元素隐藏的给淡入出来,可以给人看到)
fadeIn(speed,function)
第一个参数可以是 毫秒 slow fast 第二个参数,就是完成隐藏后执行的函数
淡出显示的元素(把元素淡出,隐藏起来,我总是容易弄混)
fadeout(speed,function)
第一个参数可以是 毫秒 slow fast 第二个参数,就是完成隐藏后执行的函数
既可以淡入又可以淡出
fadeToggle(speed,function)
第一个参数可以是 毫秒 slow fast 第二个参数,就是完成隐藏后执行的函数
给淡入淡出的元素设置透明度
fadeTo(speed,opacity,function)
第一个参数可以是 毫秒 slow fast 第三个参数,就是完成隐藏后执行的函数 opacity是必须的参数(值为0-1之间)
代码如下
$(document).ready(function(){
$('#bun1').click(function(){
//$('#div1').fadeOut(2000)//淡出
//$('#div1').fadeIn(2000)//淡入
//$('#div1').fadeToggle(2000)既可以淡入又可以淡出
$('#div1').fadeTo(2000,0.2)
})
})
3滑动
向下滑动
slideDown(speed,function)
第一个参数可以是 毫秒 slow fast 第二个参数,就是完成隐藏后执行的函数
向上滑动
slideUp(speed,function)
第一个参数可以是 毫秒 slow fast 第二个参数,就是完成隐藏后执行的函数
既能向上又能向下
slideToggle(speed,function)
第一个参数可以是 毫秒 slow fast 第二个参数,就是完成隐藏后执行的函数
代码如下
$(document).ready(function(){
$('#bun1').click(function(){
//$('#div1').slideDown(2000)//向下滑动隐藏到消失
//$('#div1').slideUp(2000)//向上滑动隐藏到消失
$('#div1').slideToggle(2000)//既可以向上又可以向下
})
})
4动画
animate({params},speed,function)用于创建自定义动画
参数params必选 为形成动画的css属性
speed参数可以是 毫秒 slow fast function参数,就是完成隐藏后执行的函数
$(document).ready(function(){
$('#bun1').click(function(){
$('#div1').animate({height:'200px',width:'200px'},2000)
})
})
Animate({})里面写多个css样式会同时执行
如果这样写,就会排队执行,先执行第一个,然后第二个,接着第三个,依次执行
$('#div1').animate({height:'200px'},2000)
$('#div1').animate({width:'200px'},2000)
还有一种写法是在原本的宽度上架200像素 使用+=,具体的其他用法,遇到才知道
$('#div1').animate({height:'+=200px'},2000)
stop(stopALL,goToEnd)用来停止动画
stopAll参数是否清除动画队列,默认是false,是停止当前动画,执行队列中的下一个动画
goToEnd参数是否立即完成当前动画,默认是false
因此stop()不加参数的用法是清楚当前动画,执行队列中的下一个,具体用法,根据实际应用了
5 chaining技术的作用:能把动作/方法链接起来。
只需要再动画之后加.就可以链接起来
$(document).ready(function(){
$('#bun1').click(function(){
$('#div1').animate({height:'+=200px'},2000).css('background','yellow').animate({width:'+=100px'},2000)
})
})
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页名称:jQuery基础效果-创新互联
链接URL:http://scyanting.com/article/ceciph.html