jQuery 能做什么?
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。 [1]
作用:
- 方便快捷获取DOM元素
$('div.content').find('p');
- 动态修改页面样式
$('ul > li:first').addClass('active');
- 动态改变DOM内容
$('#container').append('<a href="more.html">more</a>');
- 响应用户的交互操作
$('button.show-details').click(function() {
$('div.details').show();
});
- 统一Ajax操作
function (data, type) {
// 对Ajax返回的原始数据进行预处理
return data // 返回处理后的数据
}
- 简化常见的JavaScript任务
$.each(obj, function(key, value) {
total += value;
});
jQuery 对象和 DOM 原生对象有什么区别?如何转化?
jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象。但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对象并没有提供,所以需要转换回JS对象,才能进行操作。另外一种情况可能是,你使用某些第三方库,接口函数只能接受JS对象或者jQuery对象,那么你就需要在这两者之间进行转换。
1、将jQuery转换为dom对象的方法 [index] 或者.get(index):
a、$(“#form”)[index] ,该方法获取form元素的dom对象
b、$(“#form”).get(index)
2、将js的dom对象转换为jQuery对象,对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象) :
Var a=document.getElementById(“form”);
$a=$(a);
通过对象转换后$a就成为了封装的jQuery对象,可以调用jQuery封装好的方法
jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?
- on():在选定的元素上绑定一个或多个事件处理函数,提供绑定事件处理的所有功能。
$('button').on('click',function(){
$('.test').append('<p>新增内容'+ ($('p').length+1) +'</p>')
console.log($('p').length)
})
off():用来移除on绑定的事件处理函数。
jQuery 如何展示/隐藏元素?
通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素,并隐藏已显示的元素:
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
jQuery 动画如何使用?
jQuery animate() - 操作多个属性
生成动画的过程中可同时使用多个属性:
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
jQuery animate() - 使用相对值
也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
下面的例子把 <div> 元素往右边移动了 100 像素,然后增加文本的字号:
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?
$(‘selector’).html():获取元素内部HTML。
$(‘selector’).html(‘…’):设置元素内部HTML。
$(‘selector’).text():获取元素内部文本。
$(‘selector’).text(‘…’):设置元素内部文本。
如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
$(‘selector’).val():获取表单用户输入值;
$(‘selector’).val(‘…’):设置输入值;
$(‘selector’).attr(‘name’):获取元素属性;
$(‘selector’).attr(‘name’,’xxx’):设置元素属性的值;
网友评论