分类: Javascript, jQuery

jQuery 快速复习






简单的归纳jQuery的运用,总结复习为主。不解释细节。
我对jQuery 理解归纳为 选择 然后 添加效果

对于添加效果,基本功能有三个(AJAX,Jquery UI 这里暂时不做解释)

  • 对网页内容进行修改 (Manipulating Page Content)
  • 根据 DOM EVENT进行修改 (Working with Events)
  • JQuery 的动态效果 (Animations and Effects)

选择 –> Selectors (点击连接有详细的Selector的说明和例子)

  • Attribute
  • Basic
  • Basic Filter
  • Child Filter
  • COntent Filter
  • Form
  • Hierarchy
  • jQuery Extensions
  • Visibility Filter

(上述分类参照jQuery API 文档
(我自己不大记得住全部,理解如何选择用ID,Class,Attribute 进行选择。更复杂的根据情况按照知识点查询。)

Manipulating Page Content

修改HTML 内容
Screen Shot 2013-07-21 at 6.49.23 PMScreen Shot 2013-07-21 at 6.51.53 PM

插入内容:
Screen Shot 2013-07-21 at 6.56.10 PM

包装selectors 整体,然后进行修改Screen Shot 2013-07-21 at 6.58.38 PM

修改CSS

Screen Shot 2013-07-21 at 7.03.57 PM Screen Shot 2013-07-21 at 7.02.16 PMScreen Shot 2013-07-21 at 7.04.52 PMScreen Shot 2013-07-21 at 7.05.45 PM

 

Working with Events

jQuery events 基本分为下面三个类型:

Screen Shot 2013-07-27 at 12.42.38 PM

 

添加|消除 Events:

Screen Shot 2013-07-27 at 9.32.46 PM

//(Selector).on("events",function());
$("#dataTable tbody tr").on("click", function(event){
alert($(this).text());
});

这里查找相应的事件名称

jQuery 快捷 Event

提供跨平台的浏览器事件功能 (不是很常用具体看连接)

JQuery 的动态效果 (Animations and Effects

  • show
  • hide
  • fade in
  • fade out
  • slide down
  • slide up
  • toggle

Screen Shot 2013-07-28 at 11.45.21 AM

Screen Shot 2013-07-28 at 11.49.08 AM Screen Shot 2013-07-28 at 11.52.43 AM

 

Customize Animation

Screen Shot 2013-07-28 at 11.58.58 AM Screen Shot 2013-07-28 at 12.01.11 PM

 
这里推荐一个jQuery 实例的系列。
JQuery 实例精选系列




发表评论