关于jQuery

1.库和任务的区别

框架与库之间最本质区别在于控制权：you call libs, frameworks call you（控制反转）

image.png

库：库更多的是一个封装好的特定的一个集合，提供给开发者使用，而且是特定于某一方面的集合（方法和函数），库没有控制权，控制权在使用者手中，在库中查询需要的功能在自己的应用中使用，我们可以从封装的角度去理解库。

框架：顾名思义就是一套架构，会基于自身的特点向用户提供一套相当完整的解决方案，而且控制权在框架本身，使用者要找框架所规定的某种规范进行开发。

2.jquery 能做什么？

write less,do more.
1.方便快捷获取DOM元素
2.动态修改页面样式
3.动态改变DOM内容
4.响应用户的交互操作
5.为页面添加动态效果
6.统一Ajax操作
7.简化常见的JavaScript任务

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

DOM:document.getElementById("id").innerHTML;
jQuery:$("#id").html();
如果这样使用$("#id").innerHTML是错误的，一个是jQuery对象，一个是DOM对象，对象类型不同，二者之间不等价。
转化：

D转J.png jQuery转DOM.png

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

<div id="foo"></div>
<script>
$('#foo').click(function(){
console.log('hello');
});
</script>

1.7版本之后统一用on/off方法
绑定事件一般用：.on( events [,selector ] [,data ], handler(eventObject) )
bind()绑定事件方法，已经被废弃。
unbind()属于一种解绑方式，也已被废弃。
delegate()为备选元素的子元素添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。该方法的事件处理程序适用于当前或未来的元素（比如由脚本创建新的元素）,已弃用。
live() 为元素绑定事件，不仅仅是现在存在，也包括以后该元素新出现后，已弃用。

.on( events [,selector ] [,data ], handler(eventObject) )推荐使用

bind()、live() 和 delegate() 方法的替代品。该方法给 API 带来很多便利，它简化了 jQuery 代码库,可以添加一个或多个事件处理程序。
如需移除事件处理程序，请使用 off()方法。如需添加只运行一次的事件然后移除，请使用one()方法。

$('div').on('click', 'span', function(e){
    console.log(this);
    console.log(e);
});

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

$(selector).hide(speed,callback); 隐藏元素
$(selector).show(speed,callback);显示元素
$(selector).toggle(speed,callback);切换 hide() 和 show()
$(selector).fadeIn(speed,callback);淡入已隐藏的元素
$(selector).fadeOut(speed,callback);淡出已显示元素
$(selector).fadeToggle(speed,callback); 切换 fadeIn() 与 fadeOut()
$(selector).fadeTo(speed,opacity,callback);允许渐变为给定的不透明度（值介于 0 与 1 之间）
$(selector).slideDown(speed,callback);用于向下滑动元素
$(selector).slideUp(speed,callback);用于向上滑动元素
$(selector).slideToggle(speed,callback);切换slideDown() 和 slideUp()
speed :"slow"、"fast" 或毫秒。
callback 函数在显示或隐藏后执行

6： jquery 动画如何使用？

$("button").click(function(){
  $("div").animate({left:'250px'}); //向左移动250px;
}); 
//animate() 方法用于创建自定义动画。
提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，首先 CSS position 设为 relative、fixed 或 absolute！

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

$(selector).html() - 设置或返回所选元素的内容（包括 HTML 标记）
$(selector).text() - 设置或返回所选元素的文本内容

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

$("button").on('click',function(){
            alert("Value: " + $("#test").val());
        });  //获取内容的值

$("button").on('click',function(){
            alert("Value: " + $("#test").text());
        });//获取内容

$("button").on('click',function(){
            alert("Value: " + $("#test").val());
        });//获取HTML

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
}); //设置text

$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});  //设置HTML 

$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});//设置val