jquery DOM&事件

2016-10-27 本文已影响44人泰格_R

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

库：将一些常用的方法进行封装方便使用，类似一个工具箱（API）。原生JS实现起来较为复杂的操作或功能,都可以被封装组成库中,以备使用.比如jQuery,Underscore等。
框架：可以理解为一个半成品，一个房子骨架（框架）已经搭好了使用者只要往里面砌砖头（内容）就可以了。比如angular,bootstrap就是框架。

2.jquery 能做什么？

jquery能方便的操作DOM(元素节点、文本节点、属性节点)，还能对元素增加事件处理、动画特效、以及AJAX。jquery对各浏览器有一定兼容性。

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

jquery对象只能使用jquery中封装好的对象和方法，DOM对象只能使用javascript原生的属性和方法。二者可以相互转化，jquery转原生DOM对象用数据成员索引号即$(select)[i]，原生DOM对象转换成jquery对象用$()包裹即$(this)

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

$(select).bind()//对目标元素绑定事件，jquery1.9以前旧版本先已删除
$(select).unbind()//解除目标元素绑定的事件，jquery1.9以前旧版本先已删除
$(select).delegate()//对目标元素绑定事件代理，jquery1.9以前旧版本先已删除
$(select).live()//将事件代理绑定到$(document)元素上，jquery1.9以前旧版本先已删除

$(select).on()//对目标元素绑定一个或多个事件处理函数
$(select).off()//移除目标元素绑定的事件处理函数

on绑定事件的写法如下：

$(select).on("click","li a",function(){ 
todo.......
}) //在符合$(select)选择器条件的元素上绑定事件代理函数，只要选择器条件内的li a元素有事件发生，事件代理函数就会被激活

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

$(select).hide(speed,callback)//隐藏
$(select).show(speed,callback)//显示
$(select).toggle(speed,callback)//显示和隐藏切换

$(selector).fadeIn(speed,callback);  //淡入
$(selector).fadeOut(speed,callback);  //淡出
$(selector).fadeToggle(speed,callback); //淡入和淡出切换
$(selector).fadeTo(speed,opacity,callback);  //渐变到透明度  $div1.fadeTo('slow', 0.5);

$(selector).slideDown(speed,callback);  //滑入
$(selector).slideUp(speed,callback);  //滑出
$(selector).slideToggle(speed,callback); //滑入和滑出切换

speed参数可使用slow/fast/毫秒数，控制显示/隐藏的速度。callback参数是隐藏或显示完成后所执行的函数名称。

6.jquery 动画如何使用？

$(selector).animate({params},speed,callback);
必选参数{ params }:定义形成动画的 CSS 属性,用 { } 定义。
可选参数speed:控制动画效果时长（slow/fast/毫秒数）
可选参数 callback:动画完成后所执行的函数名称

$("#btn15").on('click', function(){
    $div3.animate({
width:'80px',
        height: '80px',
        left: '0px',
        top: '0px'
    }, 500);
});

作用链写法：$div2.slideDown(1000).fadeOut(1000)//先滑入，然后淡出
作用链写法：

$div3.animate({width:'150',height:'150px'})
.animate({left:'200px'})
.animate({top:'200px'})
.animate({left:'0px'})
.animate({top:'0px'})
.animate({width:'80px',height:'80px'})//可将多个动画效果连接起来依次执行

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

$(select).html()//获取目标元素内部的html内容（包括文本内容）
$(select).html("<div><a href="123">abcde</a></div>") //设置目标元素html内容
$(select).text()//获取目标元素
$(select).text("<span>abcde</span>")//设置目标元素文本内容

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

$(select).val()//获取表单输入内容
$("input:checked").val()//获取表单元素中选中选项的内容
$(select).attr("src") //获取目标元素的src属性对应的属性值
$(select).attr("src","/img.png")//设置目标元素src属性的属性值为/img.png