JQuery学习

欢迎使用JQuery

我先在学不会JQuery寸步难行，学习成果如下：

选择、修饰和增强

页面准备就绪

$(document).ready(function()){
alert("文档准备就绪！")
})；
等价于
$(function(){
alert("文档准备就绪！")
})；

选择：“核心业务”

选择标签：$('p')
选择id：$('#p')
选择class：$('.p')

进一步选择
选择名为fancy的class的<div>里的<p>元素内的全部<span> 元素：$("div.fancy p span")
重点：标签.class名，父标签 空格 子标签

筛选器:$('#celebs tbody tr:even').length
:even 保留索引号为偶数的元素，删除其余元素，
：odd 保留奇数
：first 第一个
：last 最后一个
：eq 指定选择范围，例如第三个元素

使用多个选择器
$('p,div,h1,input')

修饰：处理css

读取：
$('p').css('font-size')

设置：
$('p').css('background-color','#dddddd');
$('p').css({
'background-color':'#dddddd',
'color':'#666666',
});

添加和删除类
外部css写好，在html声明好后
$('p').addClass('class_name1 class_name2 class_name3')

增强：用JQuery添加特效

隐藏：
$('p').hide();

显示：
$('p').show();

切换：
$('p').toggle();

click事件处理器
$('p').click(function(){
$('#xxx').hide();
});

this刚刚点击的控件
$('p').click(function(){
$(this).hide();
});

创建新元素：
$('<p>A B C D</p>').addClass(''xxx');

创建插入按钮
insertAfter 新元素作为兄弟元素添加到该元素之前
insertBefore 新元素作为兄弟元素添加到该元素之后
prependTo  appendTo新元素作为子元素插入到该元素
$('p').insertAfter ('#xxx'');
$('p').insertBefore ('#xxx'');
$('p').prependTo  ('#xxx'');
$('p').appendTo('#xxx'');

删除：
$('p').remove();
$('p').remove(':contains("Singer")');

修改：
text和html
$('p').html('<>xxx<>');
$('p').text('<>xxx<>');

动画、滚动和调整大小

基本动画：
淡入淡出：用发出的Out，fadeIn，代替hide，show,fadeToggle替换toggle
.fadeToggle('slow')
.fadeToggle(1000)
时间跨度：slow、fast、normal正常，毫秒为单位的描述
slideDown滑下、slideUp滑上、slideToggle滑动切换

回调函数：
$('p').slideToggle('slow',function(){
'回调内容！'
})

鼠标悬停：
$(p).hover(function(){
$(this).addClass('xxx');
},function(){
$(this).removerClass('xxx');
});
切换class:
$(p).click(function(){
$(this).toggleClass('xxx');
});

动画：
$('p').animate({
padding:'20px',
fontSize:'30px'
},2000);

鼠标经过时摆动
$(p).hover(function(){
$(this).animate({paddingLeft:'+=15px'},200);
},function(){
$(this).animate({paddingLeft:'-=15px'},200);
});

颜色动画 下载color animation
$('p').animate({'brackgraoudColor','#ff9f5f'},2000);

缓冲：
swing优雅
linear高效
easeInCirc
easeInOutExpo
easeOutBack
easeOutElastic
easeOutBounce
easeInOutElastic
$(p).hover(function(){
$(this).animate({paddingLeft:'+=15px'},200，‘linear’);
},function(){
$(this).animate({paddingLeft:'-=15px'},200,'swing');
});