jQuery

题目１：jQuery能做什么？

jquery是一个js工具类库，封装了常用的DOM操作方法，有更好的兼容性，利用jquery提供的api,可以完成以下工作：

• ajax操作
• 第三方插件可以使用
• 事件绑定操作
• 元素样式的操作
• DOM事件的操作
• 动画设置

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

1. DOM对象，即是我们用原生(javascript)获得的对象,jQuery对象，即使用jQuery类库的选择器获取的对象，jQuery对象是通过包装DOM对象产生的对象，它是jQuery独有的。

var domObj = document.getElementById("id"); // dom对象
var $Obj = $("#id"); // jQuery对象;

注意：在jQuery对象中无法使用DOM对象的任何方法。

2. 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'
});

题目8: 代码
题目9: 代码
题目10: 代码
题目11: 代码