1.說說庫和框架的區(qū)別？
- 庫：庫里面有很多方法，當(dāng)你需要時(shí)就可以到庫里面拿去調(diào)用。
- 框架：就是一個(gè)模型，相當(dāng)于一個(gè)空殼，里面沒有內(nèi)容，需要你自己往框架里面填充東西。
2.jquery 能做什么？
- 獲取HTML元素
- 操作HTML元素
- 操作CSS
- 為頁面添加動(dòng)態(tài)效果
- 簡化常見的JavaScript任務(wù)
- 統(tǒng)一AJAX操作
3.jquery 對(duì)象和 DOM 原生對(duì)象有什么區(qū)別？如何轉(zhuǎn)化？
- 區(qū)別：jquery無法使用DOM對(duì)象的任何方法，同理DOM對(duì)象也不能使用jQuery里的方法。
- 轉(zhuǎn)化：
jquery 對(duì)象轉(zhuǎn)化成DOM 對(duì)象：
var $a = $("#header");
var a = $a[0];
DOM 對(duì)象轉(zhuǎn)化成jquery 對(duì)象：
var a = document.getElementById("header");
var $a = $(a);
4.jquery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？
- 事件綁定：
$('button').on('click', function(){
console.log($(this));
});
(1)bind()向匹配元素添加一個(gè)或多個(gè)事件處理器，綁定單個(gè)事件的使用方法：
$(selector).bind(event,data,function(){});
(2)live:向當(dāng)前或未來的匹配元素添加一個(gè)或多個(gè)事件處理器，綁定單個(gè)事件的使用方法：
$(selector).live(event,data,function(){});
(3)delegate:為指定的元素（被選元素的子元素）添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。使用 delegate() 方法的事件處理程序適用于當(dāng)前或未來的元素（比如由腳本創(chuàng)建的新元素）。
$(selector).delegate(childSelector,event,data,function(){});
(4)on:其實(shí)是將以前的綁定事件方法作了統(tǒng)一
$("div").on("click", "p", function(){
alert($(this).text());
});
- 推薦使用on()
- 使用on綁定事件使用事件代理:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
</head>
<body>
<div id="header">頭部</div>
<div class="ct">
<div class="inner">inner1</div>
<div class="inner">inner2</div>
<div class="inner">inner3</div>
</div>
<button class="btn1">添加最后</button>
<button class="btn2">添加最前</button>
<script>
$('.btn1').on('click', function(){
$('.ct').append('<div class="inner">inner...</div>');
});
$('.btn2').on('click', function(){
$('.ct').prepend('<div class="inner">inner...</div>');
});
</script>
</body>
</html>
5.jquery 如何展示/隱藏元素？
- 展示：
$(".btn1").on("click", function(){
$("#ct").show();
});
- 隱藏：
$(".btn2").on("click", function(){
$("#ct").hide();
});
6.jquery 動(dòng)畫如何使用？
$(".btn").on("click", function(){
$("#ct").animate({width: 100px});
});
7.如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容？如何設(shè)置和獲取元素內(nèi)部文本？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
</head>
<body>
<div id="header">頭部</div>
</body>
</html>
結(jié)果
8.如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容？如何設(shè)置和獲取元素屬性？
使用.val() （括號(hào)里不包含任何參數(shù)）來獲取表單用戶輸入或者選擇的內(nèi)容；當(dāng).val()括號(hào)里面有值時(shí)則是設(shè)置匹配的元素集合中每個(gè)元素的值。
使用.atrr() （括號(hào)里為屬性名時(shí)）可獲取元素的屬性；
獲取元素屬性
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
</head>
<body>
<div id="header">頭部</div>
<script>
console.log($('#ct-img').attr('src'));
</script>
</body>
</html>
運(yùn)行結(jié)果
設(shè)置元素屬性
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
</head>
<body>
<div id="header">頭部</div>
<a >鏈接</a>
<script>
console.log($('#ct-img').attr('src'));
</script>
</body>
</html>
結(jié)果
