jQuery选择器
2017-04-01 本文已影响0人
Chy18
题目1: 说说库和框架的区别?
库: 类似于小工具的集合,需要用的时候直接调用就可以,作用是简化流程
框架:类似于房子的构架,对其进行填充来创建项目
题目2: jquery 能做什么?
jQuery是一个兼容多浏览器的JavaScript库,核心理念是write less,do more,它的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax等。除此之外,jQuery还提供API让开发者编写插件。总之,使用jQuery能使开发者很轻松的开发出功能强大的静态或动态页面
题目3: jquery 对象和 DOM 原生对象有什么区别?如何转化?
区别:DOM原生对象是个特殊的对象。jQuery对象是一个类数组对象。
转化:
DOM原生转jQuery:$(Element)
;
jQuery转DOM原生:Element[0]
;
题目4:jquery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?
- bind/ unbind
用于jquery1.7之前,是老的绑定事件的写法,已废弃 - delegate
为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。 - live
为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。也适用于当前或未来的元素(比如由脚本创建的新元素)。但是live是将document作为代理元素,不推荐使用。 - on/off
现在使用的绑定事件的写法(推荐使用)
// 普通事件绑定,最简单的用法
$('div').on('click', function(e){
console.log(this);
console.log(e);
});
// 事件委托或者事件代理,想让div 下面所有的span绑定事件,可以把事件绑定到div上
$('div').on('click', 'span', function(e){
console.log(this);
console.log(e);
});
题目5:jquery 如何展示/隐藏元素?
展示:.show([duration ] [,easing ] [,complete ])
隐藏:.hide([duration ] [,easing ] [,complete ])
duration:动画持续多久
easing:表示过渡使用哪种缓动函数,jQuery自身提供"linear" 和 "swing"
complete:在动画完成时执行的函数
没有参数的时候等同于直接设置display属性
$('#book').hide(300, function() {
alert('Animation complete.');
题目6: jquery 动画如何使用?
- .animate( properties [, duration ] [, easing ] [, complete ] )
properties是一个CSS属性和值的对象,动画将根据这组对象移动。
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
- .animate( properties, options )
options是一组包含动画选项的值的集合。 常用的选项:
1、duration (default: 400):一个字符串或者数字决定动画将运行多久。默认值: "normal", 三种预定速度的字符串("slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如:1000) )
2、easing (default: swing):一个字符串,表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing",其他效果可以使用jQuery Easing Plugin插件
3、step:每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
4、complete:在动画完成时执行的函数
$('li').animate({ opacity: .5, height: '50%' }, { step: function(now, fx) {
var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
$('body').append('<div>' + data + '</div>');
} });
题目7:如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?
- 如何设置和获取元素内部 HTML 内容?
html([string])
这是一个读写两用的方法,用于获取/修改元素的innerHTML:
1.当没有传递参数的时候,返回元素的innerHTML
2.当传递了一个string参数的时候,修改元素的innerHTML为参数值
$('span').html()
$('span').html('123')
- 如何设置和获取元素内部文本?
text()
和html方法类似,操作的是DOM的innerText值
题目8:如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
- 如何设置和获取表单用户输入或者选择的内容?
$('input').val()/.selected()/.checked()/.disabled()/.enabled() - 如何设置和获取元素属性?
$('xxx').attr();