题目１：jQuery能做什么？
jquery是一个js工具类库，封装了常用的DOM操作方法，有更好的兼容性，利用jquery提供的api,可以完成以下工作：
- ajax操作
- 第三方插件可以使用
- 事件绑定操作
- 元素样式的操作
- DOM事件的操作
- 动画设置
题目2： jQuery 对象和 DOM 原生对象有什么区别？如何转化？
- DOM对象，即是我们用原生(javascript)获得的对象,jQuery对象，即使用jQuery类库的选择器获取的对象，jQuery对象是通过包装DOM对象产生的对象，它是jQuery独有的。
var domObj = document.getElementById("id"); // dom对象
var $Obj = $("#id"); // jQuery对象;
注意：在jQuery对象中无法使用DOM对象的任何方法。
- jQuery对象和DOM对象的相互转换。
jQuery对象转换成DOM对象
var $node = $("#node"); // jQuery对象
var node = $node[0]; // DOM对象
DOM对象转换成jQuery对象
var node = document.getElementById("id"); //DOM对象
var $node = $(node); //jQuery对象
题目3：jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
绑定事件的几个例子：
// 普通的绑定事件，最简单的事件用法
$('div').on('click', function(e){
console.log(this);
console.log(e);
});
// 事件代理，想让div下的所有span标签绑定事件，可以把事件绑定在div上
$('div').on('click', 'span', function(e){
console.log(this);
console.log(e);
});
// 在绑定事件的时候给事件传递一些参数
$('div').on('click', {name: 'Byron', age: 24}, function(e){
console.log(e.data);
});
// 简写第一种方法
$('div').click(function(e){
console.log(this);
console.log(e);
});
bind() // 向匹配元素附加一个或多个事件处理器
$("p").bind("click",function(){
alert("The paragraph was clicked.");
});
$("p").on("click",function(){
alert("The paragraph was clicked.");
});
delegate() // 向匹配元素的当前或未来的子元素附加一个或多个事件处理器
$("#div1").on("click","p",function(){
$(this).css("background-color","pink");
});
$("#div2").delegate("p","click",function(){
$(this).css("background-color","pink");
});
live() //为当前或未来的匹配元素添加一个或多个事件处理器
$("#div1").on("click",function(){
$(this).css("background-color","pink");
});
$("#div2").live("click",function(){
$(this).css("background-color","pink");
});
以上三种方法在jQuery1.8之后都不推荐使用，官方在1.9时已经取消使用live()方法了，所以建议都使用on()方法。
unbind() // 从匹配元素移除一个被添加的事件处理器
题目4：jQuery 如何展示/隐藏元素？
基础
1. 通过jQuery，使用 hide()和show()方法来隐藏和显示HTML元素。
$("#hide").click(function(e){
$('p').hide();
});
$("#show").click(function(e){
$('p').show();
});
2. 通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
$('button').click(function(e){
$('p').toggle();
});
3. 通过toggleClass()的方法切换class
<button>点击</button>
<p class='tumble'>Some time</p>
$('button').click(function(){
$('p').toggleClass('hover');
});
第一次点击
<p class='tumble hover'>Some time</p>
第二次点击
<p class='tumble'>Some time</p>
渐变的方式显示和隐藏
fadeIn() 显示 和 fadeOut()隐藏 的方法 和 fadeToggle() 切换显示和隐藏
$('p').fadeOut(); // 隐藏
$('p').fadeIn(); // 显示
$('p').fadeToggle(); // 切换显示和隐藏
滑动的方式显示和隐藏
slideDown() 显示和 slideUp() 隐藏 slideToggle() 切换显示和隐藏
$('p').slideUp(); // 隐藏
$('p').slideDown(); // 显示
$('p').slideToggle(); // 切换显示和隐藏
题目5： jQuery 动画如何使用？
jquery提供了自定义动画行为的方法
.animate(properties [, duration ] [, easing ] [, complete ])
1. properties是一个CSS属性和值的对象,动画将根据这组对象移动。
2. duration (default: 400)：一个字符串或者数字决定动画将运行多久。
//默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如：1000) ）
3. easing (default: swing)：一个字符串，表示过渡使用哪种缓动函数。
//jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件
4. step：每个动画元素的每个动画属性将调用的函数。
//这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
5. complete：在动画完成时执行的函数
实例
<button>点击</button>
<div id="animation" style = "position: relative; background-color: red; width: 80px; height: 80px" ></div>
<script>
$('button').on('click',function(){
var action = [
{width: "80px", height: "80px", },
{width: "150px", height: "150px",},
{left: "200px"},
{width: "80px", height: "80px",'border-radius':'50%' },
{top: "200px"},
{width: "150px", height: "150px",'border-radius':"0px"},
{left: "0px"},
{top: "0px"},
{width: "80px", height: "80px", }
];
$.each(action , function(idx, data){
$("#animation").animate(data);
});
});
</script>
题目6：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
html内容
$('body').html(); // 获取元素内部HTML内容
$('body').html('123') //设置元素内部HTML内容
元素内部文本
$('body').text(); // 获取元素内部
$('body').text('123') //设置元素内部
题目7：如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
获取设置表单用户输入或选择的内容
$('input').val(); // 获取表单的内容
$('input').val('newValue'); // 设置表单的内容
获取设置元素的属性
１．attr方法
$('div').attr('id'); // 获取 div 的 id 的属性
$('div').attr('id', 'newId'); // 设置div 的id 属性为newId
$('div').attr({
id: 'newId',
class: 'newClass'
});
２．css方法
获取
$(this).css('background-color');
$(this).css({
"width",
"height",
"color",
"background-color"
});
设置
$(this).css('background-color', 'red');
$(this).css({
width: '100px',
height: '20px',
color: 'red'
});
