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

 

 

版权声明:本文原创发表于 博客园,作者为 小跳蚤 本文欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则视为侵权。
posted @ 2013-05-19 19:57  小跳蚤  阅读(186)  评论(0编辑  收藏  举报