问答
1.说说库和框架的区别？
库的的概念和意义是用来提供一些方法的集合，避免重复定义相同功能的函数，并有一定的模式兼容性。
而所谓框架，更应该是按照开发者按照框架的设计去做一些事，而非简单的工具集的概念，框架可以提供相应的库或者基于库来实现，但库一般不会具备框架的规范性。
他们都是对原生代码的封装，一个注重整体，一个注重细节，框架帮助你解决“代码如何组织”的问题，类库帮助你解决“如何把代码写得更少/巧/强壮”的问题；它们解决的是不同层面的问题。
2.jquery 能做什么？
- jQuery是一个兼容多浏览器的JavaScript库，它封装了很多方法，可以让使用者代码写的更少，更轻松。
- 它的功能有HTML文档操作、事件处理、动画设计和Ajax交互。
3.jquery 对象和 DOM 原生对象有什么区别？如何转化？
Jquery 对象是 DOM 原生对象包装后形成的。他们都有自己特定的方法，不能相互使用。
转化：
- jQuery对象转成DOM对象
var $div = $('#div');//jquery对象
var div = $div[0];//[index]方式转为DOM对象
- DOM对象转成jQuery对象
var div = document.getElementById('div');//DOM对象
var $div = $(div);//用$()转化
4.jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
- bind:为一个元素绑定一个事件处理程序。在jQuery 3.0中，.bind()已被标记为弃用。
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
- unbind:用.bind()方法绑定的事件处理程序可以使用.unbind()移除。在jQuery 3.0中，.unbind()已被标记为弃用。
$('#foo').unbind();
- delegate:事件代理,在jQuery 3.0中，.delegate()已被标记为弃用。
$("body").delegate("p", "click", function() {
$(this).toggleClass("chosen");
});
- live:该事件会在事件冒泡中传递给其所有的祖辈元素，一直传递到document
对象为止。从jQuery 1.7开始，该函数被标记为已过时；从jQuery 1.9开始被移除。
$("#btn a").live("click",function(){
console.log('1');//如果有新的a元素创建，也会触发该事件。
});
- on：提供绑定事件处理的所有功能。
$( "#div" ).on( "click",function() {
console.log('1');
});
on()方法可以将以上各种事件绑定的方法都替代掉。
- off:移除.on()绑定的事件处理函数。
$("p").off() //除所有段落上的事件：
- on()绑定事件代理：
$('ul').on('click','li',function(){
console.log($(this).text());
})
5.jquery 如何展示/隐藏元素？
- 展示元素：
.show(duration,complete)
duration (默认: 400) 一个字符串或者数字决定动画将运行多久。
complete 在动画完成时执行的函数。
$('#btn').on('click',function(){
$('#div').show(800);
})
- 隐藏元素：
.hide(duration,complete)
$('#btn').on('click',function(){
$('#div').hide(800);
})
demo预览
6.jquery 动画如何使用？
.animate()根据一组 CSS 属性，执行自定义动画。
语法:.animate( properties , duration , easing , complete )
properties 参数定义形成动画的 CSS 属性。
duration (默认: 400)一个字符串或者数字决定动画将运行多久。("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000)
easing (默认: swing)一个字符串，表示过渡使用哪种缓动函数。
complete 在动画完成时执行的函数。
如：
$('#btn').on('click',function(){
$('#div').animate({
opacity:0.5,
left:'50px',
height:100px;
},5000)
})
demo预览
7.如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
- 获取和设置元素内部HTML内容
$('#ct').html() //获取元素内部HTML内容
$('#ct').html('设置ct内的HTML内容') //设置元素内部HTML内容
- 获取和设置元素内部文本
$('#ct').text()//获取元素内部文本
$('#ct').text('设置ct') //设置元素内部文本
8.如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
- 获取和设置表单用户输入或者选择的内容
$('.input').val() //获取表单用户输入或者选择的内容
$('.input').val('设置表单内容') //设置表单用户输入或者选择的内容
- 获取和设置元素属性
$('#img').attr('scr') //获取元素属性
$('#img').attr('scr','./images/1.png') //设置元素属性
代码
task25-1：效果预览
task25-2：效果预览 a href="#"会跳转到本页面顶部，一般建议写成javascript:void(0);点了没有反应，写#点了会跳一下。
task25-3：效果预览