题目1: jQuery 能做什么?
- 方便快捷获取DOM元素
如果使用纯JavaScript的方式来遍历DOM以及查找DOM的某个部分编写很多冗余的代码,而使用jQuery只需要一行代码就足够了。例如,找到所有应用了.content class样式的div中所有的P标签,只需要下面的一行代码:
$('div.content').find('p');
- 动态修改页面样式
使用jQuery我们可以动态的修改页面的CSS即使在页面呈现以后。jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。例如,找到页面所有的ul标签的第一个li子标签,然后为它们增加名为active的样式,代码如下:
$('ul > li:first').addClass('active');
- 动态改变DOM内容
使用jQuery我们可以很容易地对页面DOM进行修改,例如,为ID为"Container"的元素添加一个链接:
$('#container').append('<a href="more.html">more</a>');
- 响应用户的交互操作
jQuery提供了截获形形色色的页面事件(比如用户单击某个链接)的适当方式,而不需要使用事件处理程序拆散HTML代码。此外,它的事件处理API也消除了经常困扰Web开发人员浏览器的不一致性。$('button.show-details').click(function() { $('div.details').show(); });
- 为页面添加动态效果
jQuery中内置的一批淡入、擦除之类的效果,以及制作新效果的工具包,为此提供了便利。$(function () { $("#btnShow").click(function () { $("#msubject").hide("slow"); }); });
上面的代码表示:为使用的.show-details
样式的button元素添加一个click事件,事件就是:显示使用.details
样式的DIV。
- 统一Ajax操作
jQuery统一了多种浏览器的Ajax操作,使得开发人员更多的专注服务器端开发。function (data, type) { // 对Ajax返回的原始数据进行预处理 return data // 返回处理后的数据 }
- 简化常见的JavaScript任务。
除了这些完全针对文档的特性之外,jQuery也改进了对基本的javascript数据结构(例如迭代和数组操作等)。$.each(obj, function(key, value) { total += value; });
题目2: jQuery 对象和 DOM 原生对象有什么区别?如何转化?
-
DOM原生对象:w3c标准用于操作文档的API。
-
jQuery对象:通过jQuery包装DOM对象后产生的对象。
-
区别:
- jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,两者不等价;
- jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。
例如:
$("#id").html();
document.getElementById("id").innerHTML;
意思是指:获取ID为id的元素内的html代码。这两段代码结果相同,但中间的取值过程不同。
即:$("#id").innerHTML
、document.getElementById("id").html()
之类的写法都是错误的。
-
相互转换:
jQuery对象转成DOM对象---两种转换方式:[index]
和.get(index)
- jQuery对象是一个数据对象,通过
[index]
的方法
如:
var $v = $("#v") ; //jQuery对象
var v = $v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
- jQuery本身提供,通过
.get(index)
方法
如:
var $v = $("#v"); //jQuery对象
var v = $v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
DOM对象转成jQuery对象:
对于DOM对象,只需用$()
把DOM对象包装起来,就可得到jQuery对象
如:
var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
- jQuery对象是一个数据对象,通过
题目3:jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?
- jQuery绑定事件用bind、或delegate、或live、或on
-
bind()
为一个元素绑定一个事件处理程序,示例如下:$(‘button’).bind(‘click’,function(){console.log(this)});
$(‘p’).bind(‘mouseenter mouseleave’,function({$(this).toggleClass(‘change’)});
-
unbind()
从元素上删除一个以前附加事件处理程序,示例如下:-
$('p').unbind('mouseenter');
在最简单的情况下,不带参数的.unbind() 将移除元素上所有绑定的处理程序
-
-
delegate()
为所有匹配选择器(selector参数)的元素绑定一个或多个事件处理函数,基于一个指定的根元素的子集,匹配的元素包括那些目前已经匹配到的元素,也包括那些今后可能匹配到的元素。 -
live()
附加一个事件处理器到匹配目前选择器的所有元素,现在和未来。这种方法是将页面的document元素作为事件代理元素,太消耗资源,已经过时。 -
on()
在选定的元素上绑定一个或多个事件处理函数。$('button').on('click',function(){ $('.test').append('<p>新增内容'+ ($('p').length+1) +'</p>'); console.log($('p').length); });
-
off()
移除用.on()
绑定的事件处理程序
绑定事件和解绑事件推荐使用on()
和off()
- 使用on绑定事件使用事件代理
//让.ct>ul中的所有li绑定事件 $('.ct>ul').on('click','li',function(){ var $this=$(this); var str=$this.text(); $('.wrap').text(str); })
题目4:jQuery 如何展示/隐藏元素?
- jQuery展示元素:
2.通过淡入的方式显示匹配元素$('.btn').on('click',function(){ $('.show').show(3000,'linear',function(){ alert('welcome'); }); });
3.用滑动动画显示一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分滑下去,弥补了显示的方式$('.btn').on('click',function(){ $('.show').fadeIn(3000); });
$(.btn).on('click',funtion(){ $('.show').sildeDown(3000); })
- jQuery隐藏元素
1.$('.show').hide(1000);
2.通过淡出的方式隐藏匹配元素
3.用滑动动画隐藏一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分滑上去,当一个隐藏动画后,高度值达到0的时候,display 样式属性被设置为none,以确保该元素不再影响页面布局。 display 样式属性将被设置为none,以确保该元素不再影响页面布局。$('.btn').on('click',funtion(){ $(.show).fadeOut(3000,'slow'); });
$('.btn').on('click',funtion(){ $(.show).fadeOut(3000,'slow'); });
题目5: jQuery 动画如何使用?
.animate( properties [, duration ] [, easing ] [, complete ] )
用法:jquery对象.animate(执行动作(一般都是css样式),回调函数(可选));
例子:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
#ct {
border: 1px solid black;
width: 100px;
height: 100px;
background: red;
position: relative;
}
</style>
</head>
<body>
<div id="ct">animate</div>
<button type="button">动画</button>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script>
$('button').on('click', function a() {
$('#ct').animate({
left: '300px',
}, 3000);
$('#ct').animate({
top: '300px',
left: '0'
}, 'slow');
$('#ct').animate({
left: '300'
}, 'slow');
$('#ct').animate({
left: '0',
top: '0'
}, 'slow');
});
</script>
</body>
</html>
题目6:如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?
- 获取元素内部HTML内容
console.log($('.html').html());
- 设置元素内部内容
$('.html').html('<p>设置内部HTML内容</p>');
- 获取元素内部文本
console.log($('.text').text());
- 设置元素内部文本
$(.text).text('设置元素内部文本');
题目7:如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
- 获取和设置表单用户输入或者选择的内容
$('input').val();
$('input').val('newValue');
当方法没有参数的时候返回input的value值,当传递了一个参数的时候,方法修改input的value值为参数值 - 获取和设置元素属性
//获取元素特定属性的值 var title = $( "em" ).attr( "title" ); //为元素属性赋值 $( ".greatphoto" ).attr( "alt", "Beijing Brush Seller" ); $( ".greatphoto" ).attr({ alt: "Beijing Brush Seller", title: "photo by Kelly Clark" }); $( ".greatphoto" ).attr( "title", function( i, val ) { return val + " - photo by Kelly Clark"; });
网友评论