进阶14 JQuery

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

如果把做一个网站比喻成搭建一个房子，库就是搭建房子的各种工具，比如扳手，锤子，使用工具，可以把原本复杂的事情变得简单。如果不使用工具，一样可以达到目的，只不过过程会比较复杂，JQuery封装了很多功能，在我们想使用时，直接调用即可，而如果用原生JS，则要自己一步步用代码去实现
框架就类似于房子的框架，它已经为我们准备好了大体的结构，我们需要按照框架的要求和限制，不断地往框架里面填充内容，这样就能搭好房子

2、 jQuery 能做什么？

jQuery 是一个 JavaScript 库，它提供了一些方便使用的 API，能让一些繁复的 JavaScript 工作变得简单，比如：HTML 文档元素的遍历和操作、事件的处理、动画效果、Ajax 请求等。
jQuery 将这些基本地功能都封装起来，并且这些功能都是跨浏览器的，让你不用再操心细节和浏览器兼容性。

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

DOM原生对象是JS调用document的API
JQuery对象是将原生DOM对象封装过的JQuey对象,是JQ特有的。
它们各自有各自的一套逻辑与使用方法，两者不可混淆，JQuery语法相对于原生JS更加简单

var btn = document.querySelector('#btn');
var $btn = $('#btn');

//DOM原生对象转换jQuery对象
var $btn1 = $(btn); //相当于调用$函数


//jQuery对象转换DOM原生对象
var btn1 = $btn[0];//利用数组下标

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

jQuery 中绑定事件，用on：$(selector).on(events [,selector ][,data ], handler(eventObject))
bin 和 unbind 是 jQuery 早期版本中的绑定事件和解绑事件的方法，现已弃用
delegate 和 live是 jQuery 早期版本中的进行事件代理的方法，现已弃用
on 和 off 是现在最新版本的 jQuery 推荐使用的事件绑定和解绑的方法
例如

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

在这里的选择器，简单的选择器比复杂的选择器性能更好，比如
$( "#commentForm" ).on( "click", ".addNew", addComment )比下面这种写法更好
$( "body" ).on( "click", "#commentForm .addNew", addComment ).

5、jQuery 如何展示 / 隐藏元素？

• $(selector).show()
• $(selector).hide()

6、jQuery 动画如何使用？

语法：

.animate( properties [, duration ] [, easing ] [, complete ] )
properties是css属性，如width,height,left等，但background-color不能使用动画，即这个属性是可以用数值来衡量计算的

比如

$("#right").click(function () {
    $(".block").animate({ left: '+50px' }, "slow");
});
$("#left").click(function () {
    $(".block").animate({ left: '-50px' }, "slow");
}); 

也可以同时修改多个属性

    $( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000,'swing');

预览demo

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

$(selector).html(HTMLString)
$(selector).html()
$(selector).text(textString)
$(selector).text()

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

$(selector).val(string)
$(selector).val()
$(selector).attr(attributeName, attributeValue)
$(selector).attr(attributeName)

练习一

demo

练习二

demo

练习三

demo