初识JQuery

1.JQuery能做什么？

选择网页元素
改变结果集
元素的操作
工具方法
事件操作
特殊效果
AJAX

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

jquery对象通常用jquery的方法$(’’)来得到，可以使用jquery提供的方法来操作html的数据，DOM原生对象只能用js提供的方法，如getElementById，getElementByTagName,有的获取的是一个元素，有的获取的是一个数组。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。
JQuery对象转化Dom对象：$('#id')[index]
DOM对象转化JQuery对象：$(document.querySeletor('#id'))

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

jquery使用on绑定事件

  $('#btn').on('click', function(){ })
  $('.box ul').on('click', 'li', function(){ })
  $('.box').on('click', {name:'hunger'}, function(){ })

bind为一个元素绑定一个事件处理程序。
$('#btn').bind('click', function(){})
unbind从元素上删除一个以前附加事件处理程序。
$('#btn').unbind('click')
delegate为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括目前已经匹配到的和未来可能匹配到的元素。
$('.box ul').delegate('li', 'click', function(){})
live附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。
$('.box ul').live('click', function(){})
on在选定的元素上绑定一个或多个事件处理函数。
off移除一个事件处理函数 $('.box ul').off('click')
推荐使用 on off

   $('.box>ul').on('click','li',function(){
        console.log(this);
        var str = $(this).text();
        $('#wrap').text(str);
    });
    $('#btn').on('click',function(){
        var value = $('#ipt').val();
        $('.box>ul').append('<li>'+value+'</li>')
    });

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

显示元素 $('.class').show() 等同于 $('.class').css('display','none')
隐藏元素 $('.class').hide()
切换的方式显示或隐藏元素 $('.class').toggle()
淡入的方式显示元素$('.class').fadeIn()
淡出的方式隐藏元素$('.class').fadeOut()
调整透明度显示或隐藏元素 $('.class').fadeTo('slow',0.5,function(){...})
滑动动画显示元素 $('.class').slideDOwn()
滑动动画隐藏元素 $('.class').slideUp()
滑动动画显示或隐藏元素 $('.class').slideToggle()

5.jQuery动画如何使用？

自定义动画方法 animate(properties[,duration][,easing][,completer])
properties是一个CSS属性和值的对象，动画将根据这组对象移动。

  $('#clickme').click(function(){
    $('#book').animate({
      opacity: 0.5,
      left: '+=20',
      height: 'toggle'
    },5000,function(){
      //animate complete
    });
   });

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

设置元素内部HTML内容 $node.html('htmlContent')
获取元素内部HTML内容 $node.html()
设置元素内部文本 $node.text('textContent')
获取元素内部文本 $node.text()

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

设置表单用户输入的内容 $node.val('newValue')
获取表单用户输入的内容 $node.val()
设置元素属性 $node.attr('attributeName')
获取元素属性 $node.atr()

8.实现效果

9.实现效果

10.实现效果

11.模仿jQuery动画，实现左右切换的Tab效果

实现效果