《关于jQuery》

jQuery设计思想

jQuery是一种JavaScrip数据库。

jQuery的基本设计思想和主要用法，就是 "选择某个网页元素，然后对其进行某种操作" 。这是它区别于其他Javascript库的根本特点。

也可以称jQuery是一个特殊函数

1. jQuery(选择器)用于获取对应的元素
2. 它不返回这些元素
3. 返回一个对象，成为jQuery狗操出来的对象，即api
4. 可以对这个对象进行某些操作

jQuery操作

1.获取元素

• $(document) // 选择整个文档对象
• $('div.myClass') // 选择 class 为 myClas s的 div 元素
• $('#xxx') // 选择 id 为 xxx 的网页元素
• $('#xxx').find('.red') // 查找 #xxx 里的 .red 元素
• $('#xxx').index() // 获取排行第几（从0开始）
• $('#xxx').parent() // 选择#xxx元素的父元素
• $('#xxx').children() // 选择#xxx元素的子元素
• $('#xxx').siblings() // 选择#xxx元素的兄弟元素
• $('#xxx').next() // 选择#xxx元素的下一个元素
• $('#xxx').prev() // 选择#xxx元素的上一个元素
• $('#xxx').closest('form')//选择离#xxx元素的最近的那个form父元素
• $('.red').each(fn) // 遍历并对每个元素执行 fn 操作
• $('div').has('p') // 选择包含p元素的div元素
• $('div').not('.myClass') // 选择class不等于myClass的div元素
• $('div').filter('.myClass') // 选择class等于myClass的div元素
• $('div').first() // 选择第1个div元素
• $('div').eq(5) // 选择第6个div元素

2.链式操作

就是将选中的元素，对他进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来，比如：

$('div').find('h3').eq(2).html('Hello');

展开来就是：

$('div') // 找到div元素

　　　.find('h3') // 选择其中的h3元素

　　　.eq(2) // 选择第3个h3元素

　　　.html('Hello'); // 将它的内容改为Hello

还提供了.end()方法，可以退后一步：

$('div')

　　　.find('h3')

　　　.eq(2)

　　　.html('Hello')

　　　.end() // 退回到选中所有的h3元素的那一步**

　　　.eq(0) // 选中第一个h3元素

　　　.html('World'); // 将它的内容改为World

3.创建元素

创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了

• $('<div>我是新增的div</div>') // 创建div元素
• $('<div>我是新增的div</div>').appendTo(document.body) // 将创建的div元素插入到body中
• .append(content) // 在末尾处添加内容

4.移动元素

• $('div').insertAfter($('p')) // 把 div 元素移动到 p 元素后面
• $('div').after($('p')) // 把 p 元素加到 div 元素后面
• $('div').insertBefore($('p')) // 把 div 元素移动到 p 元素前面
• $('div').before($('p')) // 把 p 元素加到 div 元素前面

5.删除元素

• remove() // 将匹配的元素移除
• .empty() // 从DOM中一处匹配元素的所有子节点

6.修改元素的属性

• $('div').text(?) // 读写文本内容
• $('div').html(?) // 读写 HTML 内容
• $('div').attr('title', ?) // 读写属性
• $('div').css({color: 'red'}) // 读写 style
• $('div').addClass('blue') // 添加className
• $('div').on('click', fn) // 添加点击事件
• $('div').off('click', fn) // 移除点击事件

jQuery 用到了哪些设计模式

1. 不用 new 的构造函数
2. $(支持多种参数)，这个模式叫做重载
3. 用闭包隐藏细节
4. $div.text() 即可读也可写，getter / setter
5. $.fn 是$.prototype 的别名，这叫别名
6. jQuery 针对不同浏览器使用不同代码，这叫适配器