一个jQuery的使用实例

jQuery的作者是John Resig
jQuery官网

jQuery实质上是一个函数，它接收一个节点或者选择器作为参数，调用相关API便可实现遍历和操作HTML文档，能让事件处理、动画和 Ajax 操作更加简单。

一个简单的实例：
HTML

//引入jQuery
  
  


选项1
选项2

CSS

.red{
  color:red;
}

JS

var $div = $('div')
$div.addClass('blue')  // 可将所有 div 的 class 添加一个 red
$div.text('hi')  // 可将所有 div 的 textContent 变为 hi

在页面引入jQuery

在 head中或在 body中添加script 标签，src 指向 jquery.js或 jquery.min.js文件的地址

使用 jQuery获取页面中id 为 xxx的元素
$('#xxx')或 jQuery('#xxx')

问题一
请说出 div 和 $div 的联系和区别
区别:
div 返回一个HTML DOM Object
$div 返回一个 jQuery Object,
两者不等价
$div是包装了dom对象后产生的，无法使用dom对象的任何方法，比如$('#x').innerHTML
为了区分两种情况，如果是dom对象，前面加$。
div变$div
对于已经是一个dom对象,只需要用$()把dom对象包装起来，就能获得一个jQuery对象了

$div变div
两种方法:

1. jQuery对象是一个数据对象，通过[index]的方法，得到相应的dom对象

var $x = $('#x') //jQuery对象
var x = $x[0] //DOM对象

2. jQuery本身提供方法，通过get(index)方法，得到相应的dom对象

var $v = $('#v') //jQuery对象
var v = $v.get(0) //DOM对象

div的属性和方法:

• getElementById(id) // 获取带有指定 id 的节点（元素）
• appendChild(node) // 插入新的子节点（元素）
• removeChild(node) // 删除子节点（元素）
• innerHTML // 节点（元素）的文本值
• parentNode // 节点（元素）的父节点
• childNodes // 节点（元素）的子节点
• attributes // 节点（元素）的属性节点
  ...

$div的属性方法: //就是jQuery对象的属性和方法

• addClass 增加一个class
• after在每个匹配的元素之后插入内容
• animate 创建自定义动画的函数
• append向每个匹配的元素内部追加内容
• appendTo把所有匹配的元素追加到另一个指定的元素元素集合中
• attr设置或返回被选元素的属性值
  ...
  问题二

请写出 $('li') 的结构。
$('li') 是一个对象，它自身的key有length，它的原型（共享属性）为 jQuery.prototype，jQuery.prototype 的 key 有 addClass、removeClass和css等