jquery DOM&事件
2016-09-08 本文已影响53人
Nicklzy
说说库和框架的区别?
-
库是将代码集合成的一个产品,供程序员调用。面向对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式而成的库也叫函数库。
在函数库中的可直接使用的函数叫库函数。开发者在使用库的时候,只需要使用库的一部分类或函数,然后继续实现自己的功能。 -
框架则是为解决一个(一类)问题而开发的产品,框架用户一般只需要使用框架提供的类或函数,即可实现全部功能。可以说,框架是库的升级版。
开发者在使用框架的时候,必须使用这个框架的全部代码。
jquery 能做什么?
write less ,do more
- HTML文档遍历和处理
- HTML 元素选取、操作
- HTML 事件函数
- 动画
- Ajax
- 跨浏览器
jquery 对象和 DOM 原生对象有什么区别?如何转化?
- jQeury对象是通过jQuery的API构造的jQuery对象(类数组),拥有自己的属性和方法。
- DOM原生对象是通过DOM的API构造的DOM对象(DOM节点),也拥有自己的属性和方法。
var a = $('.name');
var b = document.querySelector('.name');
console.log(a);
console.log(b);
console.log(a[0]);//转化为dom对象
console.log($(b));//转化为jQuery对象
jquery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?
- 基础语法是:$(selector).action()
其中selector是选择器名称,和css选择器一样,action是jquery对象的方法。 - bind jquery1.7版本前可用
$('a').bind('click', function() {
alert("That tickles!")
}); - unbind
$('a').unbind('click');//解除元素的事件绑定 - delegate
$('#container').delegate('a', 'click', function() {
alert("That tickles!")
});
JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。(速度比live快) - live
$('a').live('click', function() {
alert("That tickles!")
});
JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与’a’这一CSS选择器是否匹配,如果都是的话,则执行函数。 - on 绑定事件(推荐)
.on( events [,selector ] [,data ], handler(eventObject)
$( "#members" ).on( "click", "li a", function( e ) {} ); - off 解除事件绑定
.off( events [, selector ] [, handler ] )
jquery 如何展示/隐藏元素?
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
本质上是修改dom.style.display属性
jquery 动画如何使用?
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?
- html获取
.html()
- 文本获取
.text()
括号内无参数是获取,有参数是修改内容。
如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
-
val()
设置或返回表单字段的值 -
attr()
设置或返回元素的属性