jQuery DOM & 事件

1. 说说库和框架的区别？

• 库（ Library ）
  库是将代码集合成的一个产品，可供调用。

• 框架（ Framework ）
  框架是为解决一个（一类）问题而开发的产品，倾向于提供整套的解决方案，框架用户一般只需要使用框架提供的类或函数，则可实现全部功能。可以说，框架是库的升级版。

库就是一些封装好的常用函数方法（工具箱）；框架是一套搭好的架子，往里面填充内容即可。另外，框架可以提供相应的库或者基于库来实现，但是库一半不会具备框架的规范性。

2. jquery 能做什么？

JQuery 是一个快的、体积小的、功能丰富的 JS 库。它提供了一套简单易用的跨浏览器 API 让操作和遍历 HTML，事件处理、动画等等。

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

JQuery 对象是 包装过的 DOM 原生对象

转化：

1. jquery 转 DOM:

  var $div = $('#div');  // jquery 对象
  var div = $div[0];  // [index] 方式转为 DOM 对象
  var div = $div.eq(0);  // eq(index) 方式转为 DOM 对象

2. DOM 转 jquery

  var div = document.getElementById('div');  // DOM 对象
  var $div = $(div);  // 用 $() 转化，直接用 $ 包裹就行

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

• bind: 为一个元素绑定一个事件处理程序。在 jQuery 3.0 中，.bind() 已被标记为弃用

  $('#foo').bind('click', function() {
    alert('User clicked on "foo."');
  });

• unbind: 用 .bind() 方法绑定的事件处理程序可以使用 .unbind() 移除。在 jQuery 3.0 中，.unbind() 已被标记为弃用

  '#foo').unbind();

• delegate: 事件代理,在 jQuery 3.0 中，.delegate() 已被标记为弃用

  $("body").delegate("p", "click", function() { 
    $(this).toggleClass("chosen");
  });

• live: 该事件会在事件冒泡中传递给其所有的祖辈元素，一直传递到document 对象为止。从 jQuery 1.7 开始，该函数被标记为已过时；从jQuery 1.9 开始被移除

  $("#btn a").live("click",function(){
    console.log('1');  // 如果有新的 a 元素创建，也会触发该事件
  });

• on： 提供绑定事件处理的所有功能

  $( "#div" ).on( "click", function() {
    console.log('1');
  });

on() 方法可以将以上各种事件绑定的方法都替代掉

• off: 移除 .on() 绑定的事件处理函数

  $("p").off()  // 去除所有段落上的事件

• on() 绑定事件代理

  $('ul').on('click', 'li', function() {
    console.log( $(this).text() );
  })

5. jquery 如何展示/隐藏元素？

• 展示元素

  $('#btn').on('click', function() {
    $('#div').show(800);
  })
  // .show(duration, complete)
  // duration (默认: 400) 一个字符串或者数字决定动画将运行多久
  // complete 在动画完成时执行的函数

• 隐藏元素

  $('#btn').on('click', function() {
    $('#div').hide(800);
  })

6. jquery 动画如何使用？

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

  .animate( properties , duration , easing , complete  )
  // params 参数定义形成动画的 CSS 属性
  // duration (默认: 400)一个字符串或者数字决定动画将运行多久。("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000)
  // easing (默认: swing)一个字符串，表示过渡使用哪种缓动函数
  // complete 在动画完成时执行的函数

  $('#btn').on('click',function() {
    $('#div').animate( {
      opacity:0.5,
      left:'50px',
      height:100px
     }, 5000, function() {
      console.log('动画完成');
     } );
  });

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

• 获取和设置元素内部HTML内容

  $('#ct').html()  // 获取元素内部 HTML 内容
  $('#ct').html( '<div>设置 ct 内的 HTML 内容</div>' )  // 设置元素内部HTML内容

• 获取和设置元素内部文本

  $('#ct').text()  // 获取元素内部文本
  $('#ct').text( '设置ct' )  // 设置元素内部文本

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

• 获取和设置表单用户输入或者选择的内容

  $('.input').val()  // 获取表单用户输入或者选择的内容
  $('.input').val( '设置表单内容' )  // 设置表单用户输入或者选择的内容

• 获取和设置元素属性

  $('#img').attr( 'src' )  // 获取元素属性
  $('#img').attr( 'src', './images/1.png' )  // 设置元素属性

代码

1. task25-1 效果预览
2. task25-2 效果预览
3. task25-3 效果预览