jQuery基础知识

 

1.$(document).ready

 文档加载完毕的时候发生

例如：$(document).ready(function()){alert(‘document是获取整个文档对象’);})

2.鼠标点击事件

例如：

$(document).ready(function){

$(‘div’).click(function(){

alert(‘’test);

})

})

<div id=”test1”>test1</div>

<div id=”test2”>test2</div>

3.增加样式和删除样式

$(document).ready(function){

$(‘div’).addClass(‘background-color’,’red’);

$(‘div’).click(function(){

$(this).removeClass(‘‘background-color’,’red’’);

})

})

$(this)是传过来的当前对象，不是所有对象

4.渐变效果实现

fadeout(speed,callback)渐变浅，完成后回调callback, callback可选

fadeIn(speed,callback)渐变深，完成后回调callback, callback可选

fadeTo(speed,opacity,callback)调整到opacity，opacity为0-1可选

speed(string|number),string可选为slow，normal,fast,number为毫秒数

例如：

$(document).ready(function){

$(‘#test1’).click(function(){

$(‘#test2’).fadeOut(‘slow’,function(){

Alert(‘慢慢消失’)；

})

$(‘#test3’).click(function(){

$(‘#test2’).fadeIn(‘slow’,function(){

Alert(‘慢慢出现’)；

})

$(‘#test4’).click(function(){

$(‘#test2’).fadeTo(‘slow’,1,function(){

Alert(‘慢慢变化’)；

})

 

})

<div id=”test1”>test1</div>

<div id=”test2”>test2</div>

<div id=”test3”>test3</div>

<div id=”test4”>test4</div>

5.滑动效果实现

slideDown(speed,callback)动态显示，通过id.slidDown这样的用法把id向下滑动打开

slideUp(speed,callback)动态隐藏，实际上是把id.slideUpde的id向上滑动隐藏

slideToggle(speed,callback)同时具备上述两个功能

例如：

$(document).ready(function){

$(‘#test1’).click(function(){

$(‘#test2’).slideDown(‘slow’);

})

$(‘#test3’).click(function(){

$(‘#test2’).slideUp(‘slow’);

})

$(‘#test4’).click(function(){

$(‘#test2’).slideToggle(‘slow’);

})

 

})