jQuery 快速入门

jQuery简介

• jQuery是一个快速、简洁的JavaScript框架
• jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情
• 它封装JavaScript常用的功能代码，优化HTML文档操作、事件处理、动画设计和Ajax交互

导入方式

• 本地文件

  <script type="text/javascript" src="jquery-1.11.3.min.js"></script>

• CDN(远程)

  <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>

• 说明：

  • 使用jQuery必须指定版本(可以通过文件名或目录)，因为不同版本有兼容问题，还可能有BUG。
  • 带min的版本是压缩版本，压缩就是删除了多余的用于格式控制的空格、回车等字符，以节约空间。
  • 使用CDN若没有指定协议，表示是自适应协议
  • jQuery代码要写在传递的匿名函数中，命名函数可以指定多个

• 使用：

  jQuery(document).ready(function(){
  	alert(123)
  })
  
  $(document).ready(function(){
  	alert(456)
  })
  
  $(function(){
  	alert(789)
  })
  

选择器

• 基本：id、class、tagname、组合
• 层级：
  • ancestor descendant：指定祖先的所有指定后代元素
  • parent > child：parent下的直接子元素child
  • prev + next：匹配所有紧接在 prev 元素后的 next 元素
  • prev ~ siblings：匹配 prev 元素的所有同辈 siblings 元素
• 基本：first、last、not、even、odd、eq、lt、gt、header、animated
• 内容：contains、empty、has、parent
• 可见性：visible、hidden
• 属性：键手册
• 子元素：first-child、last-child、nth-child、only-child
• 表单：input、text、password、file、hidden、…
• 表单对象属性：enabled、disabled、checked、selected

文档处理

• 内部插入：append、appendTo、prepend、prependTo
• 外部插入：after、before、insertAfter、insertBefore
• 包裹：wrap、unwrap、wrapAll、wrapInner
• 替换：replaceWith、replaceAll
• 删除：empty、remove、detach
• 复制：clone

筛选

• 过滤：见手册
• 查找：children、parent、next、prev、find、siblings
• 串联：end，回到最近的一次破坏性操作之前的状态

事件

• on/bind：添加事件
• off/unbind：删除事件
• one：绑定一次性事件
• delegate：代理
• undelegate：取消代理
• hover：光标的移入移除事件，可以同时绑定两个事件
• 单个事件：click、dblclick、…

效果

• 基本：show、hide
• 滑动：slideDown、slideUp、slideToggle
• 淡入淡出：fadeIn、fadeOut、fadeTo、fadeToggle
• 自定义：animated

属性

• 属性：attr/prop、removeAttr/removeProp
• CSS：addClass、removeClass、toggleClass
• HTML：html、text、val

CSS

• css：css样式的获取与设置
• 位置：offset、position、scrollTop、scrollLeft
• 尺寸：width、innerWidth、outerWidth