jQuery入门

1.jQuery简介

jQuery可以用简洁的代码完成javascript的一些操作，而且克服了不同浏览器平台的兼容性，创始人美国的John Resig ，2006年1月创建了jQuery项目，Write less,do more.

• 特色

  • 快速获取文档元素
  • 提供漂亮的页面动态效果
  • 创建AJAX无刷新网页（AJAX是异步JavaScript和XML的简称，可以开发出灵敏无刷新的网页）
  • 提供对JavaScript 语言的增强
  • 增强事件处理
  • 更改网页内容

• 特征

  • 利用CSS选择器提供高速的页面元素查找行为
  • 提供了一个抽象层来标准化各种常见的任务，可以解决各种浏览器的兼容问题
  • 将复杂的代码精简化，提供连缀编程模式（允许相同元素上运行多条jQuery命令，一条接一条）

2.jQuery对象

(1) 核心方法 $()

$()是jQuery库中最重要、最核心的方法jQuery()的简写，主要用来选择页面元素或执行功能方法

• 7个重载
  
  • $() 返回空jQuery对象
  • $(elements) 将DOM元素转换为jQuery对象
  • $(callback) <=> $(document).ready(callback) DOM文档载入后的执行方法
  • $(expression,[content]) 接受字符串去匹配一个或多个元素
  • $(html)动态创建由jQuery对象封装的DOM元素
  • $(html,props) 不仅创建还会设置该DOM元素的属性和事件
  • $(html,[ownerDocument]) 不仅创建还指定DOM元素所在的文档

(2) jQuery库延迟等待加载模式

window.onload = function(){}; （会被上一次覆盖）
<=>$(document).ready(function(){})
<=> $(function(){}) （不会被覆盖）
为了等待所有DOM元素加载后才会执行与DOM元素相关的操作，所以要延迟

(3) jQuery对象与DOM对象间的转换

jQuery对象 :又称“jQuery对象集”，是jQuery库特有的对象

DOM对象 :使用原生JavaScript代码获得的对象

jQuery对象无法调用DOM对象的方法，反之亦然
jQuery库中包含了所有的DOM操作

• jQuery对象 转换为DOM 对象

  • [index]
    jQuery对象是一个特殊的数组对象，即使只有一个元素，jQuery对象仍然是一个数组，数组里保存的是DOM对象。
    var $cr = $("#div3");
var cr = $cr[0];

  • get(index)方法
    var $cr = $("#div3");
var cr = cr.get(0);

• DOM对象 转换为jQuery对象

  • $(dom对象)
    用$()把DOM对象包装起来

• tips:

  • 不确定是什么对象可以用$()得到一个jQuery对象
  • 变量是jQuery对象，就在变量标识符前面加上$