jQuery

一、说说库和框架的区别?

  • 库( Library):库试讲代码集合成的一个产品,供程序员调用。面对对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式而成的库也叫函数库。
    在函数库中的可以直接使用的函数叫库函数。开发者在使用库的时候,只需要使用库的一部分类或函数,然后继续实现自己的功能。
  • 框架(framework):框架则是为解决一个(一类)问题而开发的产品,框架用户一般只需要使用框架提供的类或函数,就可以实现全部功能。可以说,框架是库的升级版。
    开发者在使用框架的时候,必须使用这个框架的全部代码。
  • 框架和库的比较可以想像为:
    假如我们要买一台电脑。框架为我们提供了已经装好的电脑,我们只要买回来就能用,但你必须把整个电脑买回来。这样用户自然轻松许多,但会导致很多人用一样的电脑,或你想自定义某个部件将需要修改这个框架。
    而库就如自己组装的电脑。库为我们提供了很多部件,我们需要自己组装,如果某个部件库未提供,我们也可以自己做。库的使用非常灵活,但没有框架方便。
  • 框架与类库的区别主要表现在以下几个方面:
    (1)从结构上说,框架内部是高内聚的,而库内部是相对松散的。
    (2)框架封装了处理流程的控制逻辑,而库几乎不涉及任何处理流程和控制逻辑。
    (3)框架具有控制反转能力,而库没有。对于库中的元素来说,通常是由我们的应用来调用它;而框架在适当的时候会自己调用我们应用中的逻辑。
    (4)框架专注于特定的领域,而库更通用的。

二、jquery能做什么?

  • jquery是一个快速、简洁和功能丰富的JavaScript库。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
  • jQuery通常能为我们提供以下功能:
    1、方便快捷获取DOM元素。例如:找到所有以div中应用了.content class样式的p标签。
    $('.content').find('p');
    2、修改页面样式。即使是在css页面呈现之后,jQuery仍能改变文档中某个部分的类或者个别的样式属性。例如:找到页面所有的ul标签的第一个li子标签,然后为它们增加名为active的样式.
    $('ul>li:first').addClass('active');
    3、改变文档的内容。可以改变文本、插入或翻转图像、列表重新排序,甚至对 HTML文档的整个结构都能重写和扩充。例如:为IDcontainer的元素添加一个连接。
    $('#container').append('more');
    4、响应用户的交互操作。jquery提供了截获形形色色的页面事件(比如用户单击某个链接)的适当方式,而不需要使用事件处理程序拆散HTML代码。例如:为使用的.show-details样式的button元素添加一个click事件,事件就是:显示使用.details样式的DIV
$('button.show-details').click(function() {
   $('div.details').show(); 
 });

5、为页面添加动态效果。
$('div.details').slideDown();
6、简化常见的JavaScript任务。除了这些完全针对文档的特性之外,jQuery也改进了对基本的JavaScript数据结构(例如迭代和数组操作等)。

 $.each(obj, function(key, value) {
     total += value;
 });

7、统一Ajax操作。jQuery统一了多种浏览器的Ajax操作,使得开发人员更多的专注服务器端开发。

三、jquery对象和DOM原生对象有什么区别?如何转化?

  • DOM原生对象和jquery对象的区别:
    1.js获取的dom是一个对象,jquery对象就是一个伪数组对象,是选择出来元素的数组集合。
    jquery选择器得到的jquery对象和标准的JavaScript中的document.getElementByld()取得的dom对象是两种不同的对象类型,两者不等价。
    2.jquery无法使用DOM对象的任何方法,同理DOM对象也不能使用jquery里的方法。
  • 相互 转换:
    1.jquery对象转换为原生DOM对象
var $li = $('li'); //jquery对象
var li = $li[0]; //DOM对象
var $div = $('div');  //jquery对象
var div = $div.get(0);  //DOM对象

2.DOM对象转换成jquery对象
对于DOM对象,只需用$()DOM对象包装起来,就可得到jQuery对象。

var li = document.getElementByid('li'); //DOM对象
var $li = $(li);  //jquery 对象

四、jquery中如何绑定事件?bindunbinddelegateliveonoff都有什么作用?推荐使用哪种?使用on绑定事件代理的写法?

  • jquery绑定事件的方法有: bind()live()delegate()on()。解除绑定的方法有:unbind()die()undelegate()off()`。
  • bind()live()delegate()逐渐被on()替代。unbind()die()undelegate()逐渐被off()代替。off()on()方法给api带来更多的便利。推荐使用该方法。
  • on()方法在被选元素及子元素上添加一个或多个事件处理程序。
$('.child').on('click',function(){
    console.log('ok')
})  //监听子元素
$('.parent').on('click','.child',function(){
    console.log('ok')
})  //监听父元素
  • off()移除事件处理程序。
    $('.parent').off('click');

五、jquery如何展示/隐藏元素?

基本的展示和隐藏元素

  • 隐藏:.hide([duration ] [,easing ] [,complete ])用于隐藏元素,没有参数的时候等同于直接设置display属性。例如:
 $('.target').hide(); //等价于 $('.target').css('display', 'none')

 $('#book').hide(300, 'linear', function() {
    alert('Animation complete.');
  }) // 300秒之内缓慢的沿直线的形式消失并弹出一个对话框
  • 展示:.show( [duration ] [, easing ] [, complete ] )用法与hide类似。
  • 隐藏、展示切换:.toggle( [duration ] [, easing ] [, complete ] )用来切换元素的隐藏、显示,类似于toggleClass,用法和showhide类似。
    其中参数的意义:
    duration:动画持续多久;
    easing:过渡使用哪种缓动函数,jQuery自身提供"linear""swing"
    complete:在动画完成时执行的函数。

渐变式展示和隐藏

  • 渐入方式展示:.fadeIn( [duration ] [, easing ] [, complete ] )
  • 渐出方式隐藏:.fadeOut( [duration ] [, easing ] [, complete ] )
    调整匹配元素的透明度:.fadeTo( duration, opacity [, easing ] [, complete ] )
  • 渐入和渐出间的切换:.fadeToggle( [duration ] [, easing ] [, complete ] )通过匹配元素的不透明度动画,来显示或隐藏它们,方法执行匹配元素的不透明度动画。元素不透明度一旦达到0,display样式属性设置为none
    其中参数的意义和上一条中相同。例如:
$("button:first").click(function() {
     $("p:first").fadeToggle("slow", "linear");
});

滑动式展示和隐藏

  • 下滑方式展示:.slideDown( [duration ] [, easing ] [, complete ] )
  • 上滑方式隐藏:.slideUp( [duration ] [, easing ] [, complete ] )
  • 下滑和上滑间的切换:.slideToggle( [duration ] [, easing ] [, complete ] )
    其中参数的意义和上一条中相同。
$('#book').slideDown('slow', function() {
  //Animation complete.
});

六、jquery动画如何使用?

  • 上面几个简单的动画不能满足需求的时候,jquery提供了自定义动画行为的方法:
  • .animate( properties [, duration ] [, easing ] [, complete ] )
    参数意义:
    properties:一个CSS属性和值的对象,动画将根据这组对象移动。
    例1
    例2
    参考
  • .clearQueue
    清除动画队列中未执行的动画。
  • .finish
    停止当前动画,并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态。
  • .stop( [clearQueue ] [, jumpToEnd ] )
    停止当前正在运行的动画。
    参数意义:
    clearQueue(default: false)
    jumpToEnd(default: false)

七、如何设置和获取元素内部html内容?如何设置和获取元素内部的文本?

$('div').html('abc');     //设置元素内部HTML内容为"abc"

$('div').html();     //获取元素内部HTML内容

$('div').text('abc');     //设置元素内部文本为"abc"

$('div').text();     //获取元素内部文本

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

$('input').val('abc');     //设置表单用户输入或者选择的内容为"abc"

$('input').val();     //获取表单用户输入或者选择的内容

$('div').attr('class','abc');     //设置元素的class属性为"abc"

$('div').attr('class');     //获取元素的class属性

你可能感兴趣的:(jQuery)