1.jQuery 能做什么?
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器。
jquery 能做:
1.选择网页元素
2.改变结果集
3.元素的操作:取值和赋值
4.元素的操作:移动
5.元素的操作:复制、删除和创建
6.工具方法
7.事件操作
8.特殊效果
9.AJAX
2. jQuery 对象和 DOM 原生对象有什么区别?如何转化?
jquery对象是通过jQuery去获取的类数组对象,拥有 jQuery 的属性和方法
DOM对象是通过原生js去获取的对象,拥有原生对象的方法和属性
DOM对象转化成jQuery对象: 用$符号包裹,$(dom)
jQuery对象转化成DOM对象:使用下标,$('selector')[index]
3.jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?
-
绑定事件:选择元素;on/off方法绑定事件;调用相关API
用法:$(dom).on( events [,selector ] [,data ], handler(eventObject) )
- 作用:
.bind() 为一个元素绑定一个事件处理程序
.unbind() 从元素上删除以前附加的一个事件处理程序
.delegate() 为所有匹配选择器(selector参数)的元素绑定一个或多个事件处理函数,基于一个指定的根元素的子集,匹配的元素包括那些目前已经匹配到的元素,也包括那些今后可能匹配到的元素。
.live() 附加一个事件处理器到匹配目前选择器的所有元素,现在和未来。
.on() 在选定的元素上绑定一个或者多个事件;
.off() 移除一个事件处理函数
- 推荐:使用 on/off 方法统一进行事件绑定、委托和解绑。
- 事件代理:
$('#box>ul').on('click','li',function(){
var value = $(this).text()
$('#output').text(value)
}) //本例中,'#box>ul'为事件代理的父元素,'li'为事件代理的目标元素
4.jQuery 如何展示/隐藏元素?
区别:
hide隐藏的效果是从右下到左上的慢慢折叠缩小,而fadeOut的淡出效果是整体淡化直至消失,slideUp为从下至上卷起。css中的
display:none
和display:block
也可以隐藏、展示元素。
5.jQuery 动画如何使用?
.animate( properties [, duration ] [, easing ] [, complete ] ) //用法
properties:一个CSS属性和值的对象,动画将根据这组对象移动
duration:一个字符串或者数字决定动画将运行多久
easing:一个字符串,表示过渡使用哪种缓动函数
complete:在动画完成时执行的函数。
var actions = [
{width: 80, height: 80, left: 0,top:0},
{left: '200px'},
{top: '200px'},
{left: 0},
{top: 0},
{width: '80px', height: '80px'}
] //可以将CSS属性和值的对象新建数值,从中遍历,得到对象的移动轨迹,形成动画
actions.forEach(function(action){
$('#box-1').animate(action)
})
6.如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?
$('').html() //获取
$('').html(value) //设置
$('').text();
$('').text(value);
7.如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
$('').val() //获取表单元素的值,如`input`, `select` 和`textarea`
$('').val(value) //设置表单元素的内容
$('').attr( attributeName ) //获取匹配元素的属性值
$('').attr( attributeName,value) //更改匹配元素的属性值