一些问题
JQuery是一个javascript类库,那类库是什么,库和框架的区别有是什么呢?
- 库的英语为Library,是将代码集合成的一个产品,供程序员调用。面向对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式而成的库也叫函数库。在函数库中的可直接使用的函数叫库函数。开发者在使用库的时候,只需要使用库的一部分类或函数,然后继续实现自己的功能。
- 框架则是为解决一个(或一类)问题而开发的产品,框架用户一般只需要使用框架提供的类或函数,即可实现全部功能。可以说框架是库的升级版。开发者在使用框架的时候,必须使用这个框架的全部代码
jquery 能做什么?
- 简单快捷的获取DOM元素
- 响应用户的事件
- 动态的修改页面的样式
- 动态的修改DOM的内容
- 添加动画或者特效效果
- 统一Ajax操作
jquery 对象和 DOM 原生对象有什么区别?如何转化?
- DOM原生对象:通过原生js获取的dom节点是DOM元素;只能使用DOM元素的属性和方法。
- jquery对象:通过jquery选择器选择的元素是jquery对象;只能使用jquery的属性和方法
- 使用
$(dom)
函数可以将dom对象转化为jquery对象。 - jquery对象是类数组对象,使用索引想去数组的第几项就能将第几项转化为dom对象。
jquery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?
bind()
:最简单的绑定方法,JQuery扫描DOM中所有的JQuery选择器选择的元素,并将函数绑定到每个元素的事件上,例子:
$('a').bind('click', function() {
alert("That tickles!")
});
live()
:JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与a
这一CSS选择器是否匹配,如果都是的话,则执行函数,例子如下:
$('a').live('click', function() {
alert("That tickles!")
});
delegate()
:事件代理。JQuery扫描文档查找$(‘#container’)
,并使用click事件和a
这一CSS选择器作为参数把alert()
绑定到$(‘#container’)
上。任何时候只要有事件冒泡到$(‘#container’)
上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。on()
:推荐使用的方法,on事件绑定把上面三种方法统一了,用起来更方便。用法例子:
// Bind
$( "#members li a" ).on( "click", function( e ) {} );
$( "#members li a" ).bind( "click", function( e ) {} );
// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} ); //注意子元素参数位置
$( "#members" ).delegate( "li a", "click", function( e ) {} );
jquery 如何展示/隐藏元素?
$(selector).hide(speed,callback); //隐藏元素
$(selector).show(speed,callback); //展示元素
$(selector).toggle(speed,callback); //切换元素的可见状态,如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
- 可选的
speed
参数规定隐藏/显示的速度,可以使用这些值:"slow"
、"fast"
或毫秒。 - 可选的
callback
参数是隐藏或显示完成后所执行的函数名称。
jquery 动画如何使用?
jQuery animate()
方法用于创建自定义动画。
$(selector).animate({params},speed,callback);
- 必须的
params
参数定义形成动画的CSS属性。 - 可选的
speed
参数规定效果的时长,可以使用这些值:"show"
、"fast"
或毫秒 - 可选的
callback
参数是隐藏或显示完成后所执行的函数名称。
如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?
html()
设置或返回所选元素的内容(包括 HTML 标记)text()
设置或返回所选元素的文本内容
如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
val()
设置或返回表单字段的值attr()
设置或返回元素的属性
一些例子
下面是一些用JQuery实现的我们再网页上常用的部件
下拉菜单,右侧出现、代码
tab切换、代码
注意:
- 奢侈品2的a标签中的href
属性值设为了#页面会跳回顶部,将其设为javascript:void(0)
就不会出现这种情况了。
- 页面的默认锚点再页面顶部,当herf="#"
时,页面会跳转到锚点,javascript:void(0)
的作用是将连接变为一个死链接,既不会跳转也不会回到顶部。
点击加载更多、代码