jQuery基础效果

$(document).ready(function(){}这句话的意思是页面加载完成后执行,

等同于js中的window.onload,大家学了jQuery的话应该就会知道

?

$(document).ready(function(){//这行代码意思是页面加载后执行

?????????? $("#bun1").click(function(){//#是ID的意思? .是Class的意思?? $("#bun1")选择你需要用到的元素,这句话的意思是我要给一个ID为bun1的元素加点击事件

?????????? $(".h11").hide(‘fast‘)//一样$(".h11")选择元素,选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)?????????? ?

??????????

?????????? })

??????????

??????? })

时间: 2024-10-13 16:40:30

jQuery基础效果的相关文章

【jquery基础教程】jquery事件及操作大汇总

在学习Javascript语言中,有一个优秀的Javascript库是大家都会遇到的--jquery,今天小编汇总了jquery事件及操作,现在一起来看看jquery基础教程吧! 事件 bind()        向匹配元素附加一个或更多事件处理器 blur( )        触发.或将函数绑定到指定元素的 blur 事件 change()        触发.或将函数绑定到指定元素的 change 事件 click()        触发.或将函数绑定到指定元素的 click 事件 dblc

JQuery基础知识(2)

JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒. 可选的 callback 参数是滑动完成后所执行的函数名称. 2.JQuery slideUp();用于向上滑动元素 语法: $(selector).slideUp(speed,callback

JQuery基础知识(1)

JQuery基础知识(1) 对JQuery学习中遇到的小细节进行了整理和总结 1.JQuery hide()和show()方法,分别对选中的元素进行隐藏和显示,语法:hide()和show分别有对应的参数,即hide(speed);隐藏的速度进行了限定.hide(1000)/show(1000); 2.JQuery toggle()方法用来切换hide()和show();可以用speed参数进行控制显示和隐藏的速度. JQuery的淡入淡出 1.JQuery fadeIn();此方法可以携带不同

Jquery基础之事件操作

事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事件处理机制,极大的增强了事件处理的能力. 一.DOM加载事件 页面加载完毕后浏览器会通过javascript为Dom元素加载事件,使用Javascript时候使用的是window.onload方法,而Jquery使用的是$(document).ready()方法,下表 展示两个事件的异同.    w

jquery基础教程 - 第一章 JQUERY入门

Jquery基础教程 - 第一章 JQUERY入门 内容提要 1.jquery能做什么 2.jquery为什么如此出色 3.第一个jquery驱动的页面 4.纯javascript与jquery 5.开发工具 6.小结 1.jquery能做什么 取得文档中的元素 -- jQuery为准确的获得需要检查或操纵的文档元素,提供了可靠而富有效率的选择符机制. 找到所有应用了.content class样式的div中所有的P标签             $('div.content').find('p'

jquery 基础汇总---导图篇

最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以及jQuery的一些属性和样式, 选择器的简介详见:http://www.cnblogs.com/amy-1205/p/5849568.html 事件篇,主要是鼠标事件,表单事件,键盘事件,事件的绑定和解绑以及自定义事件 动画篇,学习后制作出以下效果:隐藏和显示.上卷下来.淡入淡出.也可以通过自定义

jquery基础教程学习笔记一

最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注意的有: 1.事件传播,包括了事件捕获和事件冒泡,以及怎么消除事件传播的影响,以及应用事件传播. 主要的方法有:a.根据事件目标来确定操作,即event.target b.阻止事件传播,即event.stopPapogation c.理解默认事件和jquery事件的区别还有阻止默认事件,即preventDef

jQuery基础——DOM篇

jQuery基础--DOM篇 在javascript中如何创建节点? 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及的一点方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHTML 加入文档:appendChild 例子: document.addEventListener('click',function(){ //创建2个div元素 var rightdiv = document.cre

Jquery基础教程第二版学习记录

本文仅为个人jquery基础的学习,简单的记录以备忘. 在线手册:http://www.php100.com/manual/jquery/第一章:jquery入门基础jquery知识:jquery能做什么:为什么需要jquery. 第二章:选择符工厂函数$()css选择符属性选择符自定义选择符DOM遍历方法 第三章:事件jQuery.noConflict([extreme]):运行这个函数将变量$的控制权让渡给第一个实现它的那个库.常用方法:(包括键盘,鼠标事件)blur([[data],fn]