进阶14：jQuery

题目1： jQuery 能做什么？

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

• 选择网页元素
• 改变结果集
• 元素的操作：取值和赋值
• 元素的操作：移动
• 元素的操作：复制、删除和创建
• 工具方法
• 事件操作
• 特殊效果
• AJAX

jQuery 对象和 DOM 原生对象有什么区别？如何转化？

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

jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

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

各参数意义：

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

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

image.png image.png

jQuery 如何展示/隐藏元素？

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

jQuery 动画如何使用？

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

如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

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

如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

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

题目8： 使用 jQuery实现如下效果

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

题目9：. 使用 jQuery 实现如下效果

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

题目10：实现如下效果

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

题目11： 模仿视频6，完成 左右切换的 Tab 效果

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