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

1. jQuery 能做什么？

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

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

• 区别：
  DOM对象 ：W3C标准用于操作文档的API。具体点来说就是指 HTML 文本中的所有被标签标记的东西 ，在js里可以用 getElementById 等传统的方法获得的对象，拥有原生对象的属性和方法。
  jQuery对象：将DOM原生对象进行封装后得到的类数组对象，可以使用jq对象的方法和属性
• 转化：
  • jquery提供了两种方法将一个jquery对象转换成一个DOM对象，[index]和. get(index)

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

  • 使用 $(DOM对象)就可以将DOM对象转化为jQuery对象

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

• 绑定事件：一般使用on: $(XX).on( events [,selector ] [,data ], handler(eventObject) )这是1.7版本后统一的写法。
• .bind()为一个元素绑定一个事件处理程序。
• .unbind()从元素上删除一个以前附加事件处理程序。
• .delegate()
  为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素

$("table").delegate("td", "click", function() {
  $(this).toggleClass("chosen");
})

• .live() 附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。
• .on() 在选定的元素上绑定一个或多个事件处理函数
• .off() 移除一个事件处理函数。

4. jQuery 如何展示/隐藏元素？

• .hide()隐藏匹配的元素
• .show() 显示匹配
• .toggle()显示或隐藏匹配元素的元素 通过改变CSS的display属性，匹配的元素将被立即显示或隐藏，没有动画。如果元素是最初显示，它会被隐藏，如果隐藏的，它会显示出来

5. jQuery 动画如何使用？

• . 基本特效
  .hide(),.show(),.toggle()

• 自定义
  .animate()根据一组 CSS 属性，执行自定义动画

  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 )
  

  所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。（例如，width, height或者left可以执行动画，但background-color不能，除非使用jQuery.Color()插件。）属性值的单位像素（px）,除非另有说明。单位em和 %需要指定使用。
  .clearQueue()从列队中移除所有未执行的项
  当.clearQueue()方法被访问的时候，所有在这个列队中未执行的函数将被移除
  .delay() 设置一个延时来推迟执行队列中后续的项
  .dequeue()执行匹配元素队列的下一个函数
  当.dequeue()被调用的时候，列队中的下一个函数将从这个列队中被移除，然后再执行。这个执行的函数中也应当直接或间接的包含 .dequeue()语句，这样才能继续执行队列中的其它函数，所以,这个序列可以继续。
  .finish() 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画
  jQuery.fx.interval 这个属性可以设置动画每秒运行帧数。默认是13毫秒。该属性值越小，在速度较快的浏览器中（例如，Chrome），动画执行的越流畅，但是会影响程序的性能并且占用更多的 CPU 资源。
  .queue() 显示在匹配的元素上的已经执行的函数列队。在匹配元素上操作已经附加函数的列表
  .stop() 当一个元素调用.stop()，当前正在运行的动画（如果有的话）立即停止

• 渐变
  .fadeIn()通过淡入的方式显示匹配元素
  fadeOut()通过淡出的方式隐藏匹配元素
  fadeTo()调整匹配元素的透明度
  fadeToggle()通过匹配的元素的不透明度动画，来显示或隐藏它们

• 滑动
  .slideDown()用滑动动画显示一个匹配元素。
  .slideToggle()用滑动动画显示或隐藏一个匹配元素。
  .slideUp()用滑动动画隐藏一个匹配元素。

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

• 设置元素内部 HTML 内容$('div').html('\<h1\>Hello world\</h1\>')
• 获取元素内部 HTML 内容var $content = $('div').html()
• 设置元素内部文本$('div').text('Hello world')
• 获取元素内部文本var $title = $('h1').text()

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

• 设置表单用户输入或者选择的内容$('#username").val('textarea')
• 获取表单用户输入或者选择的内容var $username = $('#username").val()
• 设置元素属性$("div").attr("color","#fff") || $('div').prop('color','red')
• 获取元素属性$("div").attr("color") || $('div').prop('color')

8. 使用 jQuery实现如下效果 demo

预览- http://js.jirengu.com/puqiz/2/edit

9. 使用 jQuery 实现如下效果 demo

预览- http://js.jirengu.com/zarut/4/edit?html,output

10. 实现如下效果 demo

预览- http://js.jirengu.com/pogan/1/edit?output

11.完成 左右切换的 Tab 效果

无动画效果预览- http://js.jirengu.com/zibew/1/edit?html,css,js,output
tab 上下滑动预览- http://js.jirengu.com/tubox/1/edit?html,css,js,output
tab 左右滑动预览- http://js.jirengu.com/robov/1/edit?html,css,js,output