jQuery选择器_Dom操作_样式_事件处理_动画

题目1： jQuery 能做什么？

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

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

• jQuery对象是jQuery自己封装返回的一个对象，用jQuery对象可以使用jQuery的方法

• DOM原生对象是DOM对象，用DOM对象可以使用的是原生js的方法

• jQuery对象转成DOM对象：
  两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index)

var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
或var v=$v.get(0)

• DOM对象转成jQuery对象:
  对于一个dom对象，只需要用$()把dom对象包装起来，就可以获得一个jquery对象了，方法为$(dom对象);

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

• 1、bind(type, [data], function(eventObject))，在选择的元素上绑定特定事件类型的函数。
  type：事件类型，如：click、change、mouseover等；
  data：传入的监听函数的参数，通过event.data取得，可选；
  function：监听函数，可传入event对象，这里的event是jQuery封装的event对象，与原生的event对象有区分。
  每新生成一个元素就要绑定一次，比较麻烦。
• 2、unbind：解除bind绑定的函数。
• 3、delegate(selector, type, [data], fn)，selector用来指定触发的目标元素，监听器被绑定在调用此方法的元素上。
• 4、delegate(selector, type, [data], fn)，selector用来指定触发的目标元素，监听器被绑定在调用此方法的元素上。
• 5、on(type, [selector], [data], fn )，没有selector时，就和bind一样，有selector时，就像delegate一样。
• 6、off：解除on绑定的函数。

推荐使用on

• 7.写法

// 事件委托或者事件代理，想让div 下面所有的span绑定事件，可以把事件绑定到div上
$('div').on('click', 'span', function(e){
    console.log(this);
    console.log(e);
});

题目4：jQuery 如何展示/隐藏元素？

• .hide([duration ] [,easing ] [,complete ])用于隐藏元素，没有参数的时候等同于直接设置 display 属性,即.css('display', 'none')
• .show( [duration ] [, easing ] [, complete ] )用于显示元素，用法和 hide 类似
• .toggle,用来切换元素的隐藏、显示，类似于 toggleClass ，用法和 show 、 hide 类似
• .fadeIn,通过淡入的方式显示匹配元素
• .fadeOut,通过淡出的方式隐藏匹配元素
• .fadeTo,调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果
• .fadeToggle,通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画
• .slideDown，用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式
• .slideToggle，用滑动动画显示或隐藏一个匹配元素
• .slideUp，用滑动动画隐藏一个匹配元素，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局

题目5： jQuery 动画如何使用？

• 1.animate( properties [, duration ] [, easing ] [, complete ] )
  properties是一个CSS属性和值的对象，动画将根据这组对象移动
  duration 规定效果的时长，取值为'slow', 'normal', 'fast'或毫秒数
  easing规定在不同动画点中设置动画速度函数，取值为swing，linear,其他效果可以使用 jQuery Easing Plugin插件
  complete函数执行完后，要执行的函数
• 2.animate( properties, options )
  duration (default: 400)：一个字符串或者数字决定动画将运行多久。默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如：1000) ）
  easing (default: swing)：一个字符串，表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件
  step：每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
  complete：在动画完成时执行的函数

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

$("selector").html() //获取元素内部 HTML 内容
$("selector").html('
段落
') //设置元素内部 HTML 内容
$("selector").text() //获取元素内部文本
$("selector").text('123') //设置元素内部文本

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

$('input').val() //获取内容
$('input').val('newValue') //设置内容
$("selector").attr(attributeName) //获取元素指定属性值
$("selector").attr(attributeName,value) //设置元素指定属性值

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

http://js.jirengu.com/xicamuzupo/1/edit?html,css,js

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

http://js.jirengu.com/cipaxerayi/1/edit?html,css,js

题目10：实现如下效果

http://js.jirengu.com/cecatepoyo/1/edit?html,css,js

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

http://js.jirengu.com/fabutugebo/1/edit?html,css,js

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

demo120

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

8-2.gif840x607 615 KB

题目10：实现如下效果

8-3-1.gif950x615 630 KB

Ps:当点击按钮时使用如下数据

var products = [ { img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg', name: '珂兰 黄金手 猴哥款', price: '￥405.00' },{ img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg', name: '珂兰 黄金转运珠 猴哥款', price: '￥100.00' },{ img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg', name: '珂兰 黄金手链 3D猴哥款', price: '￥45.00' }];

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