jQuery基础(一)

发表于

开始

1
2
3
4
5
6
7
8
9
//两种开始方式
$(function(){
	//jQuery 代码
})
$(document).ready(function(){
	// jQuery 代码
})

事件

jQuery 是为事件处理特别设计的

鼠标事件： 

click dblclick：点击事件，单击和双击

mouseenter mouseleave mousedown mouseup：鼠标移上去、移开、点下去、点击松开

hover(function, function) 第一个函数是 `mouseenter` 第二个函数是 `mouseleave` 

focus blur：焦点，获取焦点和失去焦点

键盘事件：

keypress keydown keyup

1
2
3
$().keydown(function(event){
	//通过 event.which 可以知道按下的是哪个键
})

效果

  • 效果一般都是在事件触发之后表现出来

显示和隐藏

hide( ) 显示

show( ) 隐藏

toggle( ) 用来切换 hide 和 show

1
$(selector).xxx(speed, callback)

淡入淡出

fadeIn( ) 淡入

fadeOut( ) 淡出

fadeToggle( ) 切换 fadeIn 和 fadeOut

fadeTo( ) 渐变给不透明度

1
2
3
4
$(selector).xxx(speed, callback)
//fadeTo
$(selector).fadeTo(speed, opacity, callback)

滑入滑出

slideDown( ) 滑入

slideUp( ) 滑出

slideToggle( ) 切换 slideDown 和 slideUp

1
$(selector).xxx(speed, callback)

动画

animate( )

1
2
3
4
5
$(selector).animate({
	params
	}, speed, callback)
//params 参数定义形成动画的 CSS 属性，在json中，CSS的属性要用驼峰命名法 padding-left => paddingleft

也可以用相对值

1
2
3
4
5
$(selector).animate({
	left: '250px',
	height: '+=150px',
	width: '+=100px'
})

使用队列功能，添加几个动画，使动画依次进行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$('button').click(
	let div = $('div')
	div.animate({
		height:'300px',
		opacity: '0.4'
	}, slow).animate({
		width:'300px',
		opacity: '0.8'
	}, slow).animate({
		height:'100px',
		opacity: '0.4'
	}, slow).animate({
		height:'100px',
		opacity: '0.8'
	}, slow)
)
//四个动画依次进行，链式调用

stop( ) 停止动画

1
2
3
4
5
$(selector).stop(stopAll, goToEnd)
//stopAll 清除动画队列，默认 false
//goToEnd 立即完成当前动画，默认是 false