問答

1. 說說庫和框架的區(qū)別？

庫是將代碼集合成的一個產(chǎn)品，面向?qū)ο蟮拇a組織形式而成的庫也叫類庫。面向過程的代碼組織形式而成的庫叫函數(shù)庫命咐。
框架則是為解決一個(一類)問題而開發(fā)的產(chǎn)品，框架用戶一般只需要使用框架提供的類或函數(shù)谐岁，即可實現(xiàn)全部功能醋奠￠痪剩框架是庫的升級版。
開發(fā)者在使用框架的時候窜司，必須使用這個框架的全部代碼沛善。

2. jquery 能做什么？

1.方便快捷獲取DOM元素
　　如果使用純JavaScript的方式來遍歷DOM以及查找DOM的某個部分編寫很多冗余的代碼塞祈，而使用jQuery只需要一行代碼就足夠了金刁。例如，找到所有應(yīng)用了.content class樣式的div中所有的P標(biāo)簽议薪，只需要下面的一行代碼：
$('div.content').find('p');
2.動態(tài)修改頁面樣式
　　使用jQuery我們可以動態(tài)的修改頁面的CSS即使在頁面呈現(xiàn)以后尤蛮。jQuery仍然能夠改變文檔中某個部分的類或者個別的樣式屬性。例如斯议，找到頁面所有的ul標(biāo)簽的第一個li子標(biāo)簽产捞，然后為它們增加名為active的樣式，代碼如下：
$('ul > li:first').addClass('active');
3.動態(tài)改變DOM內(nèi)容
　　使用jQuery我們可以很容易地對頁面DOM進行修改哼御，例如坯临，為ID為"Container"的元素添加一個鏈接：
$('#container').append('<a href="more.html">more</a>');
4.響應(yīng)用戶的交互操作
　　jQuery提供了截獲形形色色的頁面事件（比如用戶單擊某個鏈接）的適當(dāng)方式，而不需要使用事件處理程序拆散HTML代碼恋昼。此外看靠，它的事件處理API也消除了經(jīng)常困擾Web開發(fā)人員瀏覽器的不一致性。

$('button.show-details').click(function() {
   $('div.details').show();3 });

上面的代碼表示：為使用的.show-details樣式的button元素添加一個click事件液肌，事件就是：顯示使用.details樣式的DIV衷笋。
5.為頁面添加動態(tài)效果
　　jQuery中內(nèi)置的一批淡入、擦除之類的效果矩屁，以及制作新效果的工具包辟宗，為此提供了便利。

$(function () {
   $("#btnShow").click(function () {
     $("#msubject").hide("slow");
     });
 });

6.統(tǒng)一Ajax操作
　　jQuery統(tǒng)一了多種瀏覽器的Ajax操作吝秕，使得開發(fā)人員更多的專注服務(wù)器端開發(fā)泊脐。

 function (data, type) {
 // 對Ajax返回的原始數(shù)據(jù)進行預(yù)處理
 return data
 // 返回處理后的數(shù)據(jù)
 }

7.簡化常見的JavaScript任務(wù)。
　　除了這些完全針對文檔的特性之外烁峭，jQuery也改進了對基本的JavaScript數(shù)據(jù)結(jié)構(gòu)（例如迭代和數(shù)組操作等）容客。

  total += value;
});```
#####3.jquery 對象和 DOM 原生對象有什么區(qū)別？如何轉(zhuǎn)化约郁？
jquery 對象是將原生DOM對象經(jīng)過包裝后的對象缩挑，可以使用jQuery專屬方法，是一個數(shù)組對象
jQuery可使用數(shù)組方法轉(zhuǎn)原生:`jQuery[i]`
原生轉(zhuǎn)jQuery：`$(原生)`
#####4.jquery中如何綁定事件鬓梅？bind供置、unbind、delegate绽快、live芥丧、on紧阔、off都有什么作用？推薦使用哪種续担？使用on綁定事件使用事件代理的寫法擅耽？

$(".click").click(function(){
console.log( $(this) );
})
$(".click").bind("click",function(){
console.log(this);
})
$(".click").on(“click”,function(e){
console.log(e.target)
})
$(".click").parents("ct").on(“click”,".click",function(e){
console.log(e.target)
}) //事件代理

\*bind 為元素添加一個綁定事件
\*unbind 解除一個元素綁定事件 
\*delegate 相當(dāng)于事件代理（可指定元素）為元素添加一個或多個綁定事件
\*live 相當(dāng)于使用了事件代理（對于根節(jié)點），為元素添加一個或多個綁定事件
\*on 在被選元素及子元素上添加一個或多個事件處理程序 （最建議使用的方法）
\*off 是用來移除.on()方法添加的事件處理程序
#####5.jquery 如何展示/隱藏元素物遇？

$(".show").show([duration ] [,easing ] [,complete ])
//duration：動畫持續(xù)多久
//easing：表示過渡使用哪種緩動函數(shù)乖仇，jQuery自身提供"linear" 和 "swing"
//complete：在動畫完成時執(zhí)行的函數(shù)
$(".hide").hide([duration ] [,easing ] [,complete ])

$(".switch").toggle( [duration ] [,easing ] [,complete ] )
//用來切換元素的隱藏、顯示询兴，類似于toggleClass这敬，用法和show、hide類似

$(".move").fadeIn( [duration ] [, easing ] [, complete ] )
//淡入
$(".move").fadeOut( [duration ] [, easing ] [, complete ] )
//淡出

$("xxx").fadeTo( duration, opacity [, easing ] [, complete ] )
//調(diào)整匹配元素的透明度蕉朵，方法通過匹配元素的不透明度做動畫效果
$("xxx").fadeToggle( [duration ] [, easing ] [, complete ] )
//通過匹配的元素的不透明度動畫崔涂，來顯示或隱藏它們，方法執(zhí)行匹配元素的不透明度動畫始衅。當(dāng)被可見元素調(diào)用時冷蚂，元素不透明度一旦達到0，display樣式屬性設(shè)置為none 汛闸，所以元素不再影響頁面的布局蝙茶。

$("xxx").slideDown( [duration ] [, easing ] [, complete ] )
//用滑動動畫顯示一個匹配元素，方法將給匹配元素的高度的動畫诸老，這會導(dǎo)致頁面的下面部分滑下去隆夯，彌補了顯示的方式
$("xxx").slideUp( [duration ] [, easing ] [, complete ] )
//用滑動動畫隱藏一個匹配元素，方法將給匹配元素的高度的動畫别伏，這會導(dǎo)致頁面的下面部分滑上去蹄衷，當(dāng)一個隱藏動畫后，高度值達到0的時候厘肮，display 樣式屬性被設(shè)置為none愧口，以確保該元素不再影響頁面布局。 display 樣式屬性將被設(shè)置為none类茂，以確保該元素不再影響頁面布局耍属。
$("xxx").slideToggle( [duration ] [, easing ] [, complete ] )
//用滑動動畫顯示或隱藏一個匹配元素，方法將給匹配元素的高度的動畫巩检，這會導(dǎo)致頁面中厚骗，在這個元素下面的內(nèi)容往下或往上滑。display屬性值保存在jQuery的數(shù)據(jù)緩存中兢哭，所以display可以方便以后可以恢復(fù)到其初始值领舰。
如果一個元素的display屬性值為inline，然后是隱藏和顯示，這個元素將再次顯示inline提揍。當(dāng)一個隱藏動畫后，高度值達到0的時候煮仇，display 樣式屬性被設(shè)置為none劳跃，以確保該元素不再影響頁面布局。

#####6.jquery 動畫如何使用浙垫？

$("xxx").animate( properties [, duration ] [, easing ] [, complete ] )
//properties是一個CSS屬性和值的對象,動畫將根據(jù)這組對象移動刨仑。

例如：

$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});

停止：

$("xxx").stop( [clearQueue ] [, jumpToEnd ] )

如：

$('#hoverme-stop-2').hover(function() {
$(this).find('img').stop(true, true).fadeOut();
}, function() {
$(this).find('img').stop(true, true).fadeIn();
});

#####7.如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容？如何設(shè)置和獲取元素內(nèi)部文本夹姥？
獲取元素內(nèi)部HTML：`$("xxx").html()`
獲取元素內(nèi)部內(nèi)部文本：`$("xxx").text()`
上述括號內(nèi)無內(nèi)容代表獲取杉武，有內(nèi)容代表設(shè)置。
#####8.如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容辙售？如何設(shè)置和獲取元素屬性轻抱？
設(shè)置或者獲取表單用戶輸入內(nèi)容`$('#input').val()`
設(shè)置或者獲取表單選擇內(nèi)容`$('input:checked')或$(':checked')`
設(shè)置或者獲取元素屬性`$("div").attr(e,d)`
e代表獲取，d代表需要設(shè)置的屬性旦部，為空時代表獲取
獲取帶有某個屬性的元素`$('[data-img]')`或者`$('[data-img="xxx“]')`
###代碼
[預(yù)覽1](http://book.jirengu.com/jirengu-inc/jrg-renwu3/homework/%E8%81%82%E6%94%BF/25/task25-1/task25-1.html)
[預(yù)覽2](http://book.jirengu.com/jirengu-inc/jrg-renwu3/homework/%E8%81%82%E6%94%BF/25/task25-2/task25-2.html)
[預(yù)覽3](http://book.jirengu.com/jirengu-inc/jrg-renwu3/homework/%E8%81%82%E6%94%BF/25/task25-3/task25-3.html)
#####1. 使用 jquery實現(xiàn)如下效果
![](http://upload-images.jianshu.io/upload_images/2304286-1b01c2831a105992.gif?imageMogr2/auto-orient/strip)
[github](https://github.com/jirengu-inc/jrg-renwu3/blob/master/homework/%E8%81%82%E6%94%BF/25/task25-1/task25-1.html)
代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>task25-1</title>
<style>
html,body,ul,li{
margin: 0;
padding: 0;
}
#nav{
position: relative;
left: 20px;
top: 20px;
}
#nav>ul{
float: left;
}
#nav>ul li{
list-style: none;
}
.clear:after{
content: "";
display: block;
clear: both;
}
.firstNav{
float: left;
width: 200px;
color: white;
background: #de272e;
padding: 10px 5px 10px 20px;
border-bottom: 1px solid #ccc ;
}
.firstNav a{
font-family: "宋體";
font-size: 18px;
text-decoration: none;
color: white;
padding-right: 100px;
}
.firstNav div{
display: inline-block;
}
.secondNav{
border: 1px solid #ccc;
}
.secondNav a{
display: inline-block;
font-size: 14px;
text-decoration: none;
color: black;
margin: 10px 70px 10px 10px;
}
.secondNav:nth-of-type(2){
position: relative;
top: 38px;
}
.secondNav:nth-of-type(3){
position: relative;
top: 76px;
}
.secondNav:nth-of-type(4){
position: relative;
top: 116px;
}.secondNav:nth-of-type(5){
position: relative;
top: 152px;
}
</style>
</head>
<body>
<div id="nav">
<ul class="firstNavCt">
<li class="clear">
<div class="firstNav">
<a href="#">珠寶玉器</a>
<div>></div>
</div>
</li>
<li class="clear">
<div class="firstNav">
<a href="#">珠寶玉器</a>
<div>></div>
</div>
</li>
<li class="clear">
<div class="firstNav">
<a href="#">珠寶玉器</a>
<div>></div>
</div>
</li>
<li class="clear">
<div class="firstNav">
<a href="#">珠寶玉器</a>
<div>></div>
</div>
</li>
<li class="clear">
<div class="firstNav">
<a href="#">珠寶玉器</a>
<div>></div>
</div>
</li>
</ul>
<ul class="secondNavCt">
<li class="secondNav">
<div>
<ul>
<li>
<a href="#">翡翠</a>
<a href="#">玉石</a>
</li>
<li>
<a href="#">寶石</a>
<a href="#">水晶</a>
</li>
<li>
<a href="#">瑪瑙</a>
<a href="#">珍珠</a>
</li>
<li>
<a href="#">鉆石</a>
<a href="#">琥珀</a>
</li>
<li>
<a href="#">和田</a>
<a href="#">琥珀</a>
</li>
</ul>
</div>
</li>
<li class="secondNav">
<div>
<ul>
<li>
<a href="#">翡翠</a>
<a href="#">玉石</a>
</li>
<li>
<a href="#">寶石</a>
<a href="#">水晶</a>
</li>
<li>
<a href="#">瑪瑙</a>
<a href="#">珍珠</a>
</li>
<li>
<a href="#">鉆石</a>
<a href="#">琥珀</a>
</li>
</ul>
</div>
</li>
<li class="secondNav">
<div>
<ul>
<li>
<a href="#">翡翠</a>
<a href="#">玉石</a>
</li>
<li>
<a href="#">寶石</a>
<a href="#">水晶</a>
</li>
<li>
<a href="#">瑪瑙</a>
<a href="#">珍珠</a>
</li>
</ul>
</div>
</li>
<li class="secondNav">
<div>
<ul>
<li>
<a href="#">翡翠</a>
<a href="#">玉石</a>
</li>
<li>
<a href="#">寶石</a>
<a href="#">水晶</a>
</li>
</ul>
</div>
</li>
<li class="secondNav"></li>
</ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
<script>
$(".secondNav").hide();
$(".firstNav").on("mouseenter",function(e){
var index = $(".firstNav").index(this);
$(".secondNav").eq(index).show();
})
$(".firstNav").on("mouseleave",function(e){
var index = $(".firstNav").index(this);
console.log(this);
$(".secondNav").eq(index).hide();
})
</script>
</body>
</html>

#####2. 使用 jquery 實現(xiàn)如下效果
![](http://upload-images.jianshu.io/upload_images/2304286-a41dddb87b877e71.gif?imageMogr2/auto-orient/strip)
[github](https://github.com/jirengu-inc/jrg-renwu3/blob/master/homework/%E8%81%82%E6%94%BF/25/task25-2/task25-2.html)
代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>task25-2</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
<style>
html,body,ul,li{
margin: 0;
padding: 0;
}
.clear:after{
content: "";
display: block;
clear: both;
}
li{
list-style: none;
color: black;
}
.ct{
margin: 20px 0 0 20px;
}
.nav{
width: 189px;
heigth: 20px;
border: 1px solid #ccc;
padding: 0;
}
.nav>li{
float: left;
height: 14px;
text-align: right;
padding: 12px 0px 12px 0px;
}
.nav>li>a{
text-decoration: none;
font-size: 14px;
color: black;
padding:0px 10px 0px 10px;
border-right: 0.5px solid #ccc;
}
.goods-ct>li{
width: 676px;
border: 1px solid #ccc;
float: left;
}
.marginF{
margin-left: -20px;
margin-bottom: -20px;
/border: 1px solid red;/
}
.goods{
font-family: "Arial", "Verdana", "宋體";
text-align: center;
font-size: 14px;
width: 210px;
height: 210px;
border: 0.5px solid #eee;
margin-left: 20px;
margin-bottom: 20px;
float: left;
}
.price{
color: #f00;
}
.background{
background: #ccc;
}
.cover{
position: relative;
top: -217px;
background: #ccc;
width: 210px;
height: 210px;
border: 0.5px solid #ccc;
margin-right: 20px;
margin-bottom: 20px;
float: left;
opacity: 0;
}
.more{
text-decoration: none;
display: block;
width: 70px;
height: 30px;
line-height: 30px;
text-align: center;
color: red;
border: 1px solid red;
border-radius: 10px;
margin: 100px auto;
background: #fff;
}
</style>
</head>
<body>
<div class="ct">
<ul class="nav clear">
<li>
<a href="#">熱門</a>
</li>
<li>
<a href="#">珠寶首飾</a>
</li>
<li>
<a href="#">奢侈品</a>
</li>
</ul>
<ul class="goods-ct clear">
<li>
<ul class="marginF clear">
<li class="goods">

#####3. 實現(xiàn)如下效果
![](http://upload-images.jianshu.io/upload_images/2304286-37fd046198f7ad20.gif?imageMogr2/auto-orient/strip)
[github](https://github.com/jirengu-inc/jrg-renwu3/blob/master/homework/%E8%81%82%E6%94%BF/25/task25-3/task25-3.html)
代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>task25-3</title>
<style>
html,body,ul,li{
margin: 0;
padding: 0;
}
.clear:after{
content: "";
display: block;
clear: both;
}
li{
list-style: none;
color: black;
}
.ct{
margin: 20px 0 0 20px;
}
.nav{
padding: 0;
}
.goods-ct>li{
width: 676px;
border: 1px solid #ccc;
float: left;
}
.marginF{
margin-left: -20px;
margin-bottom: -20px;
}
.goods{
font-family: "Arial", "Verdana", "宋體";
text-align: center;
font-size: 14px;
width: 210px;
height: 210px;
border: 0.5px solid #eee;
margin-left: 20px;
margin-bottom: 20px;
float: left;
}
.price{
color: #f00;
}
.background{
background: #ccc;
}
.cover{
position: relative;
top: -224px;
background: #ccc;
width: 210px;
height: 210px;
border: 0.5px solid #ccc;
margin-right: 20px;
margin-bottom: 20px;
float: left;
opacity: 0;
}
.more{
text-decoration: none;
display: block;
width: 70px;
height: 30px;
line-height: 30px;
text-align: center;
color: red;
border: 1px solid red;
border-radius: 10px;
margin: 100px auto;
background: #fff;
}
.add{
width: 50px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 2px;
border: 1px solid #f00;
margin-top: 5px;
}
.add>a{
color: #f00;
text-decoration: none;
}
</style>
</head>
<body>
<div class="ct">
<div class="nav clear">
<h2>珠寶首飾</h2>
</div>
<ul class="goods-ct clear">
<li>
<ul class="marginF clear">
<li class="goods">

本文版權(quán)歸本人（簾外修竹）所有祈搜，轉(zhuǎn)載須說明來源