日夜谈——JQuery DOM&事件

JQuery

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

什么是库
<li>库的英语为 Library ( 简写 Lib )
<li>库是将代码集合成的一个产品，供程序员调用。面向对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式而成的库也叫函数库。
在函数库中的可直接使用的函数叫库函数。开发者在使用库的时候，只需要使用库的一部分类或函数，然后继续实现自己的功能。

什么是框架
<li>框架的英语为 Framework。
<li>框架则是为解决一个(一类)问题而开发的产品，框架用户一般只需要使用框架提供的类或函数，即可实现全部功能。可以说，框架是库的升级版。

例子：
假如我们要买一台电脑。框架为我们提供了已经装好的电脑，我们只要买回来就能用，但你必须把整个电脑买回来。这样用户自然轻松许多，但会导致很多人用一样的电脑，或你想自定义某个部件将需要修改这个框架。而库就如自己组装的电脑。库为我们提供了很多部件，我们需要自己组装，如果某个部件库未提供，我们也可以自己做。库的使用非常灵活，但没有框架方便。

详情请点击

2.jQuery 能做什么？

html元素的选取
html元素的操作
Css的操作
Dom事件处理
javascript特效和动画
Ajax
DOM的遍历
提供大量的插件

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

jQuery和DOM原生对象的区别？
<li>jQuery对象是通过jQuery的API构造的jQuery（伪数组），有属于自己的方法和属性。
<li>DOM原生对象是通过DOM的API构造的DOM对象（DOM节点），有属于自己的属性和方法。

example1.png

DOM对象转化JQuery对象

 var target1 = document.getElementsByClassName('target1');
 var $target1 = $(target1);//DOM对象传Jquery对象
 var target2 = $target1[0];//jquery对象传Dom对象

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

用途

绑定事件：bind，delegate，live，on。
解除绑定事件：unbind（与bind对应），off（与on对应）。

<li>目前，推荐使用on()去绑定事件，使用起来更方便，与原生JS的addEventListener()相似。

使用on绑定事件

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

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
//可选的 speed 参数规定隐藏/显示/toggle效果的速度,可取"slow"、"fast" 或毫秒；
//可选的 callback 参数是隐藏/显示/toggle完成后所执行的函数名称

demo

6.jquery 动画如何使用？

animate()

 $(selecotr).animate({params},speed,callback)
//params是必须的，设定动画的css属性。
//callback可选，是执行完动画之后再执行的函数。

用法:

$('.btn').on('click',function(){
  $('.animate').animate({
    width:'toggle',
    height:'toggle',
//     right:'+=400',
//     top:'+=400'
  },1000)
})

demo1
demo2

注：

当使用animate()进行top，left，right，bottom的操作时，记得把元素添加position属性。
同时，色彩动画并不包含在核心 jQuery 库中。需要从jquery官网里下载。

stop()

$(selector).stop(stopAll,goToEnd)
//可选的 stopAll 参数规定是否应该清除动画队列。默认是 false
//可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

demo

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

查找

查找所需要元素；
设置内容操作；

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

//查找内容
var text = $('.two').text()
var html = $('#wrapper').html()
var value = $('#input').val()
console.log(text)
console.log(html)
console.log(value)

demo

设置文本内容

//设置内容
var text = $('.two').text('hello world! ')
var html = $('.three').html('<h3>hello hungerVallery!</h3>')
var value = $('#input').val('kobe bryant')

demo

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

//attr()无法同时获取多个属性值
var attr = $('#wrapper').attr('class')
console.log(attr)

//attr()会覆盖原来的属性值
var attr = $('#wrapper').attr('class','small')

//attr()可以同时设置多个属性
$('#wrapper').attr(
  {
    style:"border:1px solid red",
    class:"box",
    title :"hello world"
  }
)

//获取表单内的内容
var val = $('#input').val()
console.log(val)

demo