題目1： 說(shuō)說(shuō)庫(kù)和框架的區(qū)別？
庫(kù)：很多工具的集合条舔，實(shí)現(xiàn)一個(gè)效果可以使用工具簡(jiǎn)化流程
框架：結(jié)構(gòu)框架梨水，依據(jù)框架填充內(nèi)容

庫(kù)是將代碼集合成的一個(gè)產(chǎn)品，供程序員調(diào)用僚饭。面向?qū)ο蟮拇a組織形式而成的庫(kù)也叫類庫(kù)震叮。面向過(guò)程的代碼組織形式而成的庫(kù)也叫函數(shù)庫(kù)。
在函數(shù)庫(kù)中的可直接使用的函數(shù)叫庫(kù)函數(shù)鳍鸵。開(kāi)發(fā)者在使用庫(kù)的時(shí)候苇瓣，只需要使用庫(kù)的一部分類或函數(shù)，然后繼續(xù)實(shí)現(xiàn)自己的功能偿乖。

框架則是為解決一個(gè)(一類)問(wèn)題而開(kāi)發(fā)的產(chǎn)品击罪，框架用戶一般只需要使用框架提供的類或函數(shù)，即可實(shí)現(xiàn)全部功能贪薪∠苯可以說(shuō)，框架是庫(kù)的升級(jí)版古掏。
開(kāi)發(fā)者在使用框架的時(shí)候损话，必須使用這個(gè)框架的全部代碼侦啸。

題目2： jquery 能做什么槽唾？

• 選擇網(wǎng)頁(yè)元素
• 改變結(jié)果集
• 元素的操作：取值和賦值
• 元素的操作：移動(dòng)
• 元素的操作：復(fù)制、刪除和創(chuàng)建
• 工具方法
• 事件操作
• 特殊效果
• AJAX

題目3： jquery 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別光涂？如何轉(zhuǎn)化庞萍？
DOM 原生對(duì)象，原生JS對(duì)象有自己的屬性和方法忘闻；
jQuery對(duì)象是對(duì)原生JS對(duì)象的封裝钝计，jQuery對(duì)象有自己的屬性和方法與原生JS對(duì)象不同；
用法區(qū)別
將DOM對(duì)象轉(zhuǎn)換為jQuery對(duì)象加$符齐佳，如$(btn)
將jQuery對(duì)象轉(zhuǎn)換為DOM對(duì)象加下標(biāo)私恬，如$('.btn')[0]

題目4：jquery中如何綁定事件？bind炼吴、unbind本鸣、delegate、live硅蹦、on荣德、off都有什么作用闷煤？推薦使用哪種？使用on綁定事件使用事件代理的寫法涮瞻？
.on( events [,selector ] [,data ], handler(eventObject) )

• bind():bind()向匹配元素添加一個(gè)或多個(gè)事件處理器鲤拿。
  $(selector).bind(event,data,function)

• unbind():通過(guò) .unbind(eventType,false) 解除bind()函數(shù)綁定。

• delegate():delegate() 為指定的元素（被選元素的子元素）添加一個(gè)或多個(gè)事件處理程序署咽，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)近顷。使用 delegate() 方法的事件處理程序適用于當(dāng)前或未來(lái)的元素（比如由腳本創(chuàng)建的新元素）。
  $(selector).delegate(childSelector,event,data,function)

• live():live() 向當(dāng)前或未來(lái)的匹配元素添加一個(gè)或多個(gè)事件處理器艇抠。
  $(selector).live(event,data,function)

• on():on() 為指定的元素,添加一個(gè)或多個(gè)事件處理程序幕庐，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。使用 on() 方法的事件處理程序適用于當(dāng)前或未來(lái)的元素（比如由腳本創(chuàng)建的新元素）家淤。
  $(selector).on(event,childselector,data,function)

• off():主要用于解除由on()函數(shù)綁定的事件處理函數(shù)异剥。off所解除元素的綁定事件，其中選擇器必須和on綁定事件時(shí)所用的選擇器一致絮重。

1.bind()函數(shù)只能針對(duì)已經(jīng)存在的元素進(jìn)行事件的設(shè)置冤寿；但是live(),on(),delegate()均支持未來(lái)新添加元素的事件設(shè)置；
2.bind()函數(shù)在jquery1.7版本以前比較受推崇青伤，1.7版本出來(lái)之后督怜，官方已經(jīng)不推薦用bind()，替代函數(shù)為on(),這也是1.7版本新添加的函數(shù)狠角，同樣号杠，可以用來(lái)代替live()函數(shù)，live()函數(shù)在1.9版本已經(jīng)刪除丰歌；
3.live()函數(shù)和delegate()函數(shù)兩者類似姨蟋，但是live()函數(shù)在執(zhí)行速度，靈活性和CSS選擇器支持方面較delegate()差些立帖；
推薦用delegate(),高版本jquery可以使用on()來(lái)代替眼溶。

// 事件委托或者事件代理，想讓div 下面所有的span綁定事件晓勇，可以把事件綁定到div上

    console.log(this);
    console.log(e);
});```

題目5：jquery 如何展示/隱藏元素堂飞？
- 展示元素：$( this ).css( "display", "block" );

- 隱藏元素：$( this ).css( "display", "none" );

題目6： jquery 動(dòng)畫如何使用？
基礎(chǔ)
- .hide([duration ] [,easing ] [,complete ])
用于隱藏元素绑咱，沒(méi)有參數(shù)的時(shí)候等同于直接設(shè)置display屬性绰筛。

- .show( [duration ] [, easing ] [, complete ] )
用于顯示元素，用法和hide類似描融。

- .toggle( [duration ] [, easing ] [, complete ] )
用來(lái)切換元素的隱藏铝噩、顯示，類似于toggleClass稼稿，用法和show薄榛、hide類似讳窟。

漸變
- .fadeIn( [duration ] [, easing ] [, complete ] )
通過(guò)淡入的方式顯示匹配元素，參數(shù)含義和上面相同敞恋。

- .fadeOut( [duration ] [, easing ] [, complete ] )
通過(guò)淡出的方式隱藏匹配元素丽啡。

- .fadeTo( duration, opacity [, easing ] [, complete ] )
調(diào)整匹配元素的透明度，方法通過(guò)匹配元素的不透明度做動(dòng)畫效果硬猫。

- .fadeToggle( [duration ] [, easing ] [, complete ] )
通過(guò)匹配的元素的不透明度動(dòng)畫补箍，來(lái)顯示或隱藏它們，方法執(zhí)行匹配元素的不透明度動(dòng)畫啸蜜。當(dāng)被可見(jiàn)元素調(diào)用時(shí)坑雅，元素不透明度一旦達(dá)到0，display樣式屬性設(shè)置為none 衬横，所以元素不再影響頁(yè)面的布局裹粤。

滑動(dòng)
- .slideDown( [duration ] [, easing ] [, complete ] )
用滑動(dòng)動(dòng)畫顯示一個(gè)匹配元素，方法將給匹配元素的高度的動(dòng)畫蜂林，這會(huì)導(dǎo)致頁(yè)面的下面部分滑下去遥诉，彌補(bǔ)了顯示的方式。

- .slideUp( [duration ] [, easing ] [, complete ] )
用滑動(dòng)動(dòng)畫隱藏一個(gè)匹配元素噪叙，方法將給匹配元素的高度的動(dòng)畫矮锈，這會(huì)導(dǎo)致頁(yè)面的下面部分滑上去，當(dāng)一個(gè)隱藏動(dòng)畫后睁蕾，高度值達(dá)到0的時(shí)候苞笨，display 樣式屬性被設(shè)置為none，以確保該元素不再影響頁(yè)面布局子眶。 display 樣式屬性將被設(shè)置為none瀑凝，以確保該元素不再影響頁(yè)面布局。

- .slideToggle( [duration ] [, easing ] [, complete ] )
用滑動(dòng)動(dòng)畫顯示或隱藏一個(gè)匹配元素壹店，方法將給匹配元素的高度的動(dòng)畫猜丹，這會(huì)導(dǎo)致頁(yè)面中芝加，在這個(gè)元素下面的內(nèi)容往下或往上滑硅卢。display屬性值保存在jQuery的數(shù)據(jù)緩存中，所以display可以方便以后可以恢復(fù)到其初始值藏杖。

自定義
- .animate( properties [, duration ] [, easing ] [, complete ] )

- .animate( properties, options )

題目7：如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容将塑？如何設(shè)置和獲取元素內(nèi)部文本？
設(shè)置元素內(nèi)部html：$('div').html('123')
獲取元素內(nèi)部html：$('div').html()
設(shè)置元素內(nèi)部文本：$('div').text('123')
獲取元素內(nèi)部文本：$('div').text()

題目8：如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容蝌麸？如何設(shè)置和獲取元素屬性点寥？

$('input').val()

為元素屬性賦值：.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) )
獲取元素特定屬性的值：.attr(attributeName)


題目9： 使用 jquery實(shí)現(xiàn)如下效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.nav-aside{
background: #c7171e;
width: 200px;
}

.category .cate-title{
    display: block;
    color: #fff;
    border-bottom: 1px dotted #de272e;
    margin: 0 10px;
    padding: 10px;
    font-size: 14px;
}

.category{
    position: relative;
}

.category .panel{
    color: #fff;
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 14px;
}

.category .child-products{
    position: absolute;
    top: 0;
    left: 200px;
    background: #fff;
    border: 1px solid #ccc;
    width: 210px;
    font-size: 12px;
    display: none;
}

.child-products li{
    float: left;
    width: 55px;
    padding: 10px 20px;
}

ul, li{
    list-style: none;
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
}

</style>
</head>
<body>
<div class="area-nav">
<ul class="nav-aside">
<li class="category">
<a href="#" class="cate-title">珠寶玉器</a>
<span class="panel">></span>
<ul class="child-products">
<li>翡翠</li>
<li>玉石</li>
<li>寶石</li>
<li>水晶</li>
<li>瑪瑙</li>
<li>珍珠</li>
<li>鉆石</li>
<li>琥珀</li>
<li>和田</li>
<li>琥珀</li>
</ul>
</li>
<li class="category">
<a href="#" class="cate-title">珠寶玉器</a>
<span class="panel">></span>
<ul class="child-products">
<li>翡翠</li>
<li>玉石</li>
<li>寶石</li>
<li>水晶</li>
<li>瑪瑙</li>
<li>珍珠</li>
</ul>
</li>
<li class="category">
<a href="#" class="cate-title">珠寶玉器</a>
<span class="panel">></span>
<ul class="child-products">
<li>翡翠</li>
<li>玉石</li>
<li>寶石</li>
<li>水晶</li>
</ul>
</li>
<li class="category">
<a href="#" class="cate-title">珠寶玉器</a>
<span class="panel">></span>
<ul class="child-products">
<li>翡翠</li>
<li>玉石</li>
<li>寶石</li>
<li>水晶</li>
<li>瑪瑙</li>
<li>珍珠</li>
</ul>
</li>
<li class="category">
<a href="#" class="cate-title">珠寶玉器</a>
<span class="panel">></span>
<ul class="child-products">
<li>翡翠</li>
<li>玉石</li>
<li>寶石</li>
<li>水晶</li>
</ul>
</li>
</ul>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$('.nav-aside .category').on('mouseenter', function(){
$(this).find('.child-products').css('display', 'block');
})

  $('.nav-aside .category').on('mouseleave', function(){
      $(this).find('.child-products').css('display', 'none');
  })  

</script>
</body>
</html>