题目1： jQuery 能做什么
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
题目2： jQuery 对象和 DOM 原生对象有什么区别？如何转化？
区别：
- 1、jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型，两者不等价；
- 2、jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。
转化：
jQuery对象转成DOM对象： 两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);
(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。代码如下:
var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象 alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象 如：代码如下:
var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
DOM对象转成jQuery对象: 对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象) 如：
var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
转换后，就可以任意使用jQuery的方法了。 通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。
参考文档
题目3：jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
- .on()方法 提供绑定事件处理的所有功能。并且比．click(function(){})占用内存小，推荐使用．
.on( events [, selector ] [, data ], handler(eventObject) )(jQuery 1.7添加）
事件名称可以添加指定的event namespaces（命名空间） 来简化删除或触发事件。例如，"click.myPlugin.simple"为 click 事件同时定义了两个命名空间 myPlugin 和 simple。通过上述方法绑定的 click 事件处理，可以用.off("click.myPlugin") 或 .off("click.simple")删除绑定到相应元素的Click事件处理程序，而不会干扰其他绑定在该元素上的“click（点击）” 事件。
$('xxx').on.('click','a',function(){})//例子
- bind:从jQuery 1.7开始，on方法是将事件处理程序绑定到文档（document）的首选方法。对于早期版本，.bind()方法用于直接附加一个事件处理程序到元素上。处理程序附加到jQuery对象中当前选中的元素，所以，在.bind()绑定事件的时候，这些元素必须已经存在。
- delegate:从jQuery 1.7开始，.delegate()已经被.on()方法取代。但是，对于早期版本，它仍然是使用事件代理（委派）最有效的方式。以下两种是两种方法的等效方法：
// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );
- live:从jQuery1.7开始， .live()方法已经过时了。请使用.on()附加事件处理程序。 旧版本的jQuery中用户，应优先使用.delegate()来取代.live()。
$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+
- off:off()方法移除用.on()绑定的事件处理程序。如果一个简单的事件名称，比如提供"click"，那么所有 这种类型的事件（包括直接和委派）从元素上被移除。对于写插件，或者基于大型代码而编程时，最好是通过名字空间进行事件绑定或移除操作，这样就不会意外的移除其它代码添加的事件处理函数。在一个特定的命名空间中的所有类型的事件，可以从一个元素中删除，只是提供了一个命名空间，比如 ".myPlugin"。在移除事件处理时，至少要提供名字空间或事件名.
on事件代理
- 优势：可以给未创建的后代元素绑定事件外，代理事件的另一个好处就是，当需要监视很多元素的时候，代理事件的开销更小。
例如，在一个表格的 tbody 中含有 1,000 行，下面这个例子会为这 1,000 元素绑定事件：
$("#dataTable tbody tr").on("click", function(event){
alert($(this).text());
});
委派事件的方法只有一个元素的事件处理程序，tbody，并且事件只会向上冒泡一层（从被点击的tr 到 tbody ）:
$("#dataTable tbody").on("click", "tr", function(event){
alert($(this).text());
});
注意: 委托事件不能用于SVG.
使用对象同时添加多个事件处理函数
<!DOCTYPE html>
<html>
<head>
<style>
.test { color: #000; padding: .5em; border: 1px solid #444; }
.active { color: #900;}
.inside { background-color: aqua; }
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div class="test">test div</div>
<script>$("div.test").on({
click: function(){
$(this).toggleClass("active");
},
mouseenter: function(){
$(this).addClass("inside");
},
mouseleave: function(){
$(this).removeClass("inside");
}
});</script>
</body>
</html>
题目4：jQuery 如何展示/隐藏元素？
- 隐藏元素：.hide( [duration ] [, easing ] [, complete ] )
- 展示元素：.show( [duration ] [, easing ] [, complete ] )
题目5： jQuery 动画如何使用？
- $('xxx').animate( properties [, duration ] [, easing ] [, complete ] )
描述: 根据一组 CSS 属性，执行自定义动画。
Example: 第一个按钮要执行的动画中，使用了 queue: false 选项，该动画使元素的宽度扩大到了总宽 90%,并且 文字大小也变大了。一旦字体大小改变完了，边框的动画就会开始。 第二个按钮要执行的动画中，包含了一系列动画，当前一个动画完成时，后一个动画就会开始。
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#bca;
width:200px;
height:1.1em;
text-align:center;
border:2px solid green;
margin:3px;
font-size:14px;
}
button {
font-size:14px;
}
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<button id="go3">» Animate Both</button>
<button id="go4">» Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
<script>
$( "#go1" ).click(function(){
$( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
.animate({ fontSize: "24px" }, 1500 )
.animate({ borderRightWidth: "15px" }, 1500 );
});
$( "#go2" ).click(function(){
$( "#block2" ).animate({ width: "90%" }, 1000 )
.animate({ fontSize: "24px" }, 1000 )
.animate({ borderLeftWidth: "15px" }, 1000 );
});
$( "#go3" ).click(function(){
$( "#go1" ).add( "#go2" ).click();
});
$( "#go4" ).click(function(){
$( "div" ).css({ width: "", fontSize: "", borderWidth: "" });
});
</script>
</body>
</html>
题目6：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
- $('xxx').html()不加参数就是获取集合中第一个匹配元素的ＨＴＭＬ内容．
$('xxx').html(htmlString)设置每一个匹配元素的html内容． - $('xxx').text()得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，
$('xxx').text(textSting)设置匹配元素集合中每个元素的文本内容为指定的文本内容．
题目7：如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
- $().val()获取匹配的元素集合中第一个元素的当前值
.val()方法主要用于获取表单元素的值，比如 input, select 和 textarea。对于 <select multiple="multiple"> 元素, .val()方法返回一个包含每个选择项的数组，如果没有选择性被选中，它返回null。 - $().val(value)设置匹配的元素集合中每个元素的值例子
<!DOCTYPE html>
<html>
<head>
<style>
p { color:blue; margin:8px; }
</style>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<input type="text" value="some text"/>
<p></p>
<script>
$("input").keyup(function () {
var value = $(this).val();
$("p").text(value);
}).keyup();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<p>Type something and then click or tab out of the input.</p>
<input type="text" value="type something" />
<script>
$('input').bind('blur', function() {
$(this).val(function( i, val ) {
return val.toUpperCase();
});
});
</script>
</body>
</html>
- $('xxx").attr(attributeName)获取匹配的元素集合中的第一个元素的属性的值
- $('xxx").attr(attributeName,value)设置每一个匹配元素的一个或多个属性。
$('#greatphoto')
.attr('title', 'Photo by Kelly Clark')
$('#greatphoto').attr({
alt: 'Beijing Brush Seller',
title: 'photo by Kelly Clark'
});
网友评论