jquery DOM&事件

问答

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

库是封装好的一系列方法函数，方便重复使用，提供了很多API，类似于工具包
框架是一个已经搭建好的雏形，只需要往里面填东西就可以了

2.jquery 能做什么？

jQuery的宗旨是写得更少，做得更多，针对js代码封装了一些较为复杂的函数，解决了一些兼容问题。

强大的选择器
方便的操作DOM
较好的浏览器兼容性
方便的Ajax和事件操作
链式调用
方便的处理动画

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

jquery对象是通过jquery选择器选择的，只能使用jquery的属性和方法。
DOM 原生对象是通过通过原生js选择器选择的，只能使用原生js的属性和方法。
dom->jquery，加$(dom)
jquery->dom, jquery元素是以数组形式展现，选取数组的第几项就能转换为dom元素
var $p1 = $('.p1'); var p1 = $p1[0]; //转换为dom元素

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

bind():为一个元素绑定一个事件处理程序，一般用在jq1.7之前

$(".item").bind("click",function () { alert($(this).text());})

unbind():从元素上删除一个以前绑定的事件处理程序，用在jq1.7以前
```
 $(".item").unbind()//删除所有事件类型的处理程序
 
```
delegate():为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素,即事件代理
```
 $('#container').delegate('a', 'click', function() { alert("That tickles!") });
 
```
live():附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。
```
 $('a').live('click', function() { alert("That tickles!") });
 
```

on():在选定的元素上绑定一个或多个事件处理函数。

$('div').on('click', function(e){
 console.log(this);
 console.log(e);
 });

off:移除一个事件处理函数


 $("#unbind").click(function () {
 $("body").off("click", "#theone", aClick)
 .find("#theone").text("Does nothing...");
 });

推荐使用on

使用on绑定事件使用事件代理的写法:


 // 事件委托或者事件代理，想让div 下面所有的span绑定事件，可以把事件绑定到div上
 $('div').on('click', 'span', function(e){
 console.log(this);
 console.log(e);
 });

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

显示：
```
$(selector).show(speed,callback);
```
隐藏：
```
$(selector).hide(speed,callback);
```

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
本质上是修改dom.style.display属性

6.jquery 动画如何使用？

Query animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback);

简单用法实例：


 
 

 
 $(".btn").on("click",function() {$(".box").animate({ width:"200px" })})

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

text() 设置或返回所选元素的文本内容，无内容时是获取，有内容时是设置
html() 设置或返回所选元素的内容（包括 HTML 标记），无内容时是获取，有内容时是设置

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

val() 设置或返回表单字段的值，无内容时是获取，有内容时是设置
attr() 设置或返回元素的属性，无内容时是获取，有内容时是设置

获取


 这是段落中的粗体文本。

 
 这是链接[站外图片上传中……(1)]

设置：


 $('#test').html('hello'); $('#test').text('hello2');
 $('#test-input').val('小明');
 $('#test-a').attr('href','http://www.baidu.com');
 $('#test-img').attr('src', $('#test-img').attr('data-src'));

版权归吴秀芳和饥人谷所有，若有转载，请注明来源