1.JQuery能做什么?
选择网页元素
改变结果集
元素的操作
工具方法
事件操作
特殊效果
AJAX
2.JQuery对象与DOM原生对象有什么区别?如何转化?
jquery对象通常用jquery的方法$(’’)来得到,可以使用jquery提供的方法来操作html的数据,DOM原生对象只能用js提供的方法,如getElementById,getElementByTagName,有的获取的是一个元素,有的获取的是一个数组。需要再强调注意的是:DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。
JQuery对象转化Dom对象:$('#id')[index]
DOM对象转化JQuery对象:$(document.querySeletor('#id'))
3.JQuery如何绑定事件?bind
、unbind
、delegate
、live
、on
、off
都有什么作用?推荐使用哪种?使用on
绑定事件使用事件代理的写法?
jquery使用on绑定事件
$('#btn').on('click', function(){ })
$('.box ul').on('click', 'li', function(){ })
$('.box').on('click', {name:'hunger'}, function(){ })
bind为一个元素绑定一个事件处理程序。
$('#btn').bind('click', function(){})
unbind从元素上删除一个以前附加事件处理程序。
$('#btn').unbind('click')
delegate为所有匹配选择器(selector参数)的元素绑定一个或多个事件处理函数,基于一个指定的根元素的子集,匹配的元素包括目前已经匹配到的和未来可能匹配到的元素。
$('.box ul').delegate('li', 'click', function(){})
live附加一个事件处理器到匹配目前选择器的所有元素,现在和未来。
$('.box ul').live('click', function(){})
on在选定的元素上绑定一个或多个事件处理函数。
off移除一个事件处理函数 $('.box ul').off('click')
推荐使用 on off
$('.box>ul').on('click','li',function(){
console.log(this);
var str = $(this).text();
$('#wrap').text(str);
});
$('#btn').on('click',function(){
var value = $('#ipt').val();
$('.box>ul').append('<li>'+value+'</li>')
});
4.jQuery如何展示/隐藏元素?
显示元素 $('.class').show()
等同于 $('.class').css('display','none')
隐藏元素 $('.class').hide()
切换的方式显示或隐藏元素 $('.class').toggle()
淡入的方式显示元素$('.class').fadeIn()
淡出的方式隐藏元素$('.class').fadeOut()
调整透明度显示或隐藏元素 $('.class').fadeTo('slow',0.5,function(){...})
滑动动画显示元素 $('.class').slideDOwn()
滑动动画隐藏元素 $('.class').slideUp()
滑动动画显示或隐藏元素 $('.class').slideToggle()
5.jQuery动画如何使用?
自定义动画方法 animate(properties[,duration][,easing][,completer])
properties是一个CSS属性和值的对象,动画将根据这组对象移动。
$('#clickme').click(function(){
$('#book').animate({
opacity: 0.5,
left: '+=20',
height: 'toggle'
},5000,function(){
//animate complete
});
});
6.如何设置和获取元素内部HTML内容?如何设置和获取元素内部文本?
设置元素内部HTML内容 $node.html('htmlContent')
获取元素内部HTML内容 $node.html()
设置元素内部文本 $node.text('textContent')
获取元素内部文本 $node.text()
7.如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
设置表单用户输入的内容 $node.val('newValue')
获取表单用户输入的内容 $node.val()
设置元素属性 $node.attr('attributeName')
获取元素属性 $node.atr()