jQuery
jQuery 本身就是用 JavaScript 来写的，它只是把 JavaScript 中最常用的功能封装起来，以方便开发者快速开发
用到的一些设计模式
- 不用 new 的构造函数，这个模式没有专门的名字
-
$(支持多种参数)，这个模式叫做重载 - 用闭包隐藏细节，这个模式没有专门的名字
-
$div.text()即可读也可写，getter / setter -
$.fn是$.prototype的别名，这叫别名 jQuery 针对不同浏览器使用不同代码，这叫适配器
jQuery的功能
获取元素
特殊函数jQuery(选择器)用于获取对应元素，但它却不返回这些元素，返回一个对象，称为jQuery构造出来的对象，这个对象可以操作对应的元素
将选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。
这个选择表达式可以是CSS选择器
$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass') // 选择class为myClass的div元素
$('input[name=first]') // 选择name属性等于first的input元素
或是一些jQuery特有的表达式比如
$('a:first') //选择网页中第一个a元素
('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
更可以缩小获取的范围，这就运用到了jQuery中很重要的设计思想——过滤器，比如
$('div').has('p'); // 选择包含p元素的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
链式操作
jQuery的设计思想之一，选取元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来，比如：
$('div').find('h3').eq(2).html('Hello');
分解开来，就是下面这样：
$('div') //找到div元素
.find('h3') //选择其中的h3元素
.eq(2) //选择第3个h3元素
.html('Hello'); //将它的内容改为Hello
此外jQuery还提供了一个end函数，可以后退一步：
$('div')
.find('h3')
.eq(2)
.html('Hello')
.end() //退回到选中所有的h3元素的那一步
.eq(0) //选中第一个h3元素
.html('World'); //将它的内容改为World
创建元素
只要把新元素直接传入jQuery的构造函数就行了
$('<div><span>1</span></div>') 创建 div
.appendTo(document.body) 插入到 body 中
移动元素
方法一：直接移动这个元素,用到了.insertAfter()
$('div').insertAfter($('p'))把div移动到p标签的后面
方法二：移动其他元素，使得目标元素到达正确的位置,使用.after()
$('p').after($('div'));把p元素加到div元素前面
两种方法的区别是：第一种方法返回div元素，第二种方法返回p元素。
类似的用法用四对：
.insertAfter()和.after() //在现存元素的外部，从后面插入元素
.insertBefore()和.before() //在现存元素的外部，从前面插入元素
.appendTo()和.append() //在现存元素的内部，从后面插入元素
.prependTo()和.prepend() //在现存元素的内部，从前面插入元素
删除元素：
$div.remove() //不保留被删除元素的事件
$div.empty()//清空元素内容（但是不删除该元素）
复制元素：
$div.clone()
修改元素属性
$div.text(?) 读写文本内容
$div.html(?) 读写 HTML 内容
$div.attr('title', ?) 读写属性
$div.css({color: 'red'}) 读写 style
$div.addClass('blue’)
$div.on('click', fn)
$div.off('click', fn)
上文提到过jQuery的设计模式有一点就是使用同一个函数，来完成取值（getter）和赋值（setter），即"取值器"与"赋值器"合一。到底是取值还是赋值，由函数的参数决定。
$('h1').html(); //html()没有参数，表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值
使用原型可以节约内存
把共用属性（函数）全都放到 $.prototype$.fn = $.prototype
然后让 api.__proto__ 指向 $.fn
网友评论