1. 说说库和框架的区别？
-
库（ Library ）
库是将代码集合成的一个产品，可供调用。 -
框架（ Framework ）
框架是为解决一个（一类）问题而开发的产品，倾向于提供整套的解决方案，框架用户一般只需要使用框架提供的类或函数，则可实现全部功能。可以说，框架是库的升级版。
库就是一些封装好的常用函数方法（工具箱）；框架是一套搭好的架子，往里面填充内容即可。另外，框架可以提供相应的库或者基于库来实现，但是库一半不会具备框架的规范性。
2. jquery 能做什么？
JQuery 是一个快的、体积小的、功能丰富的 JS 库。它提供了一套简单易用的跨浏览器 API 让操作和遍历 HTML，事件处理、动画等等。
3. jquery 对象和 DOM 原生对象有什么区别？如何转化？
JQuery 对象是 包装过的 DOM 原生对象
转化：
- jquery 转 DOM:
var $div = $('#div'); // jquery 对象
var div = $div[0]; // [index] 方式转为 DOM 对象
var div = $div.eq(0); // eq(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 如何展示/隐藏元素？
- 展示元素
$('#btn').on('click', function() {
$('#div').show(800);
})
// .show(duration, complete)
// duration (默认: 400) 一个字符串或者数字决定动画将运行多久
// complete 在动画完成时执行的函数
- 隐藏元素
$('#btn').on('click', function() {
$('#div').hide(800);
})
6. jquery 动画如何使用？
.animate()根据一组 CSS 属性，执行自定义动画
.animate( properties , duration , easing , complete )
// params 参数定义形成动画的 CSS 属性
// duration (默认: 400)一个字符串或者数字决定动画将运行多久。("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000)
// easing (默认: swing)一个字符串，表示过渡使用哪种缓动函数
// complete 在动画完成时执行的函数
$('#btn').on('click',function() {
$('#div').animate( {
opacity:0.5,
left:'50px',
height:100px
}, 5000, function() {
console.log('动画完成');
} );
});
7. 如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
- 获取和设置元素内部HTML内容
$('#ct').html() // 获取元素内部 HTML 内容
$('#ct').html( '<div>设置 ct 内的 HTML 内容</div>' ) // 设置元素内部HTML内容
- 获取和设置元素内部文本
$('#ct').text() // 获取元素内部文本
$('#ct').text( '设置ct' ) // 设置元素内部文本
8. 如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
- 获取和设置表单用户输入或者选择的内容
$('.input').val() // 获取表单用户输入或者选择的内容
$('.input').val( '设置表单内容' ) // 设置表单用户输入或者选择的内容
- 获取和设置元素属性
$('#img').attr( 'src' ) // 获取元素属性
$('#img').attr( 'src', './images/1.png' ) // 设置元素属性
网友评论