进阶14：jQuery

题目1： jQuery 能做什么？

JQuery 是个JS库，一些效果JS要用繁重的代码才能实现，但可以通过jQ一些封装好的方法方便快捷，简单明确的就能实现。jQ缺点是，代码是很多是意大利面条式，修改困难。

区别：
1. jQuery对象和DOM原生对象是两种不同的对象类型，两者不等价。
2. 方法不一样，jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。
转化：
1. DOM原生对象转化为jQuery对象：
  $(document.querySelector('.div1'))
2. jQuery对象转化为DOM原生对象：
  $('.div1>li')[index]

在1.7之前的版本中jQuery处理事件有多个方法， (google 搜索: jquery live bind degelate)作用各不相同，后来统一的使用on/off方法:
.on( events [,selector ] [,data ], handler(eventObject) )

各参数意义：

events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件
data：当一个事件被触发时，要传递给事件处理函数的event.data
handler(eventObject)：事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false

bind/unbind:为一个元素绑定/接触绑定一个事件处理程序。jq1.7版本前的绑定和解绑写法。
delegate:为指定的元素（属于被选元素的子元素）添加一个或
多个事件处理程序，并规定当这些事件发生时运行的函数
live:这种方法是将页面的document元素作为事件代理元素，太消耗资源，已经过时。在新版本中推荐用.on()法，即时在旧版本中，也推荐使用.delegate()方法来取代.live()方法。
on:在选定的元素上绑定一个或多个事件处理函数，提供绑定事件处理的所有功能
off:用来移除on绑定的事件处理函数。

image.png

方法	效果
.hide	用于隐藏元素，没有参数的时候等同于直接设置display属性
.show	用于显示元素，用法和hide类似
.toggle	用来切换元素的隐藏、显示，类似于toggleClass，用法和show、hide类似

http://js.jirengu.com/zimuyamuwe/1/edit
自定义动画http://js.jirengu.com/saweyesesa/1/edit

$(selector).html(); //没有值时则是获取
$(selector).html('xxx'); // 设置
$(selector).text(); //没有值时则是获取内部文本
$(selector).text('xxx');//设置

$('input').val(); // 获取
$('input').val('想要设置的内容')
$(selector).attr('id'); // 获取元素属性
$(selector).attr('id', '设置的元素属性值');

http://js.jirengu.com/wifuzejife/2/edit

http://js.jirengu.com/pucowuyemi/6/edit

http://js.jirengu.com/tininusovo/1/edit

http://js.jirengu.com/qujebagebo/1/edit