JQuery 复习
1. 基本语法
$(selector).action()
$定义一个Jquery语句
selector选择某个html元素
action操作html元素的方法
2. 文档准备好事件
$(document).ready(function(){
})
为Doucement Ready事件处理器已防止jQuery再页面没有完全载入前就执行
也可简写为：
$(function(){
})
3. 选择html标记
#id选择 选择定义了id的属性的元素
.class选择 选择定义了class的属性的元素
$("*") 选择所有的元素
$("this") 选择当前的元素
$("p.intro") 选择所有class=intro的p元素
$("p:first") 选择第一个p元素
$("ul li:first") 选择第一个ul元素的第一个li元素
$("ul li:first-child") 选择每一个ul的第一个元素
$("[href]") 选择所有带href标签的元素
$("a['target=_blank']")选择所有target=_blank的a元素
$("tr:even") 选择所有偶数行元素
$("tr:odd") 选择所有奇数行元素
4. 事件
基本语法 $("p").click()(单击事件)————>$("p").click(function(){})(单击事件的处理函数)
常见的事件：
$(doucement).ready() 文档准备好事件 在文档完全载入后执行
click() 单击事件
dbclick() 双击事件
mouseenter() 鼠标进入html元素时触发
mouseleave() 鼠标离开html元素时触发
mousedown() 按下鼠标左键时触发
mouseup() 释放鼠标左键时触发
hover() 鼠标放在某个元素时触发，位mouseenter和mouseleave组合
focus() 表单输入域获得焦点时调用
blur() 表单输入域失去焦点时调用
5. 显示/隐藏内容
基本语法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback); speed可以用slow，fast，数字代表微秒
toggle() 实现交替显示和隐藏内容
6. 显示的淡入淡出效果
fadeIn();
fadeOut();
fadeToggle();
fadeTo();
基本语法：
fadeIn(speed,callback);
7. 滑动效果
slideDown();
slideUp();
slideToggle();
基本语法：
slideDown(speed,callback);
8. 动画效果
基本语法：
$(selector).animate({params},speed,callback); 必选参数params，定义css用于动画效果的属性
$("#button1").animate({left:'250px',opacity:0.5,height:'+=150px',width:'+=150px'},3000);
9. 终止动画
基本语法：
$(selector).stop(stopAll,goToEnd);
10. 方法链 将多个方法连接在一起
$("p").css("color", "red").slideUp(2000).slideDown(2000);
11. Html Get
改变及其操作html属性的方法
text() 设置或取得指定元素的文本内容
html() 设置或取得指定元素的内容包含标签
val() 设置或取得表单某个输入域的值
attr() 为属性赋值
12. 添加html元素
append() 在指定元素的尾部添加一个新内容
prepend() 在指定元素的前部添加新内容
after() 在指定元素后添加新内容
before() 在指定元素前添加新内容
append和prepend指在选中的元素的本身的前面和后面，而before和after指在选中的前面和后面(都支持插入多个元素)
13. 删除html元素
remove() 删除指定的元素（包括子元素）
empty() 清空指定元素的子元素
14. 设置或取得元素的CSS class
addClass() 为指定的元素添加一个或多个CSS类
removeClass() 为指定的元素删除一个或多个CSS类
toggleClass() 为指定的元素在添加/删除CSS类之间切换
css() 设置或取得CSS类型属性 支持多个css属性css({“propertyname“:”value“,”propertyname“:”value“,…});
15. 操作html元素的大小
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
参考资料：http://blog.csdn.net/mapdigit/article/details/8635630
浙公网安备 33010602011771号