1. jQuery 中， $(document).ready()是什么意思？
當DOM準備就緒時，指定一個函數(shù)來執(zhí)行。與load事件要在頁面所有內容加載完后才執(zhí)行不同，read事件只要在DOM結構完全加載后，就可以執(zhí)行。使用read方法，能保證在DOM準備好后就執(zhí)行函數(shù)，所以，這里是進行所有事件綁定及運行其它jQuery代碼的地方。
2.$node.html()和$node.text()的區(qū)別?
-
html()
1.不傳參
html()：不管取得的jQuery對象是否為多個，只獲取匹配的第一個元素的html內容。這個函數(shù)不能用于XML文檔。但可以用于XHTML文檔，返回的是一個String//html頁面代碼 <div> <p><span>早上</span></p> <p><span>好</span></p>; </div> //jquery代碼 $("p").html(); //結果 <span>早上</span>;2.傳參
html(val)：設置每一個匹配元素的html內容。這個函數(shù)不能用于XML文檔。但可以用于XHTML文檔。如果傳參包括HTML節(jié)點，則會以生成元素節(jié)點的形式添加。返回一個jQuery對象//html頁面代碼 <div>這里會顯示： <p></p> <p></p> </div> //jquery代碼 $("p").html("<span>早上</span>"); -
text()
1.不傳參
text()：取得所有匹配元素的內容并返回拼接后的字符串。結果是由所有匹配元素包含的文本內容組合起來的文本。返回的是一個String//html頁面代碼 <div> <p><span>早上</span></p> <p><span>好</span></p>; </div> //jquery代碼 $("p").text();
2.傳參
text(val)：設置所有匹配元素的文本內容，與 html()類似，但如果傳參包含’<’或’>’，將會轉義成文本顯示在文本節(jié)點中。返回一個jQuery對象
//html頁面代碼
<div>這里會顯示：
<p></p>
<p></p>
</div>
//jquery代碼
$("p").text("<span>早上</span>");
3.$.extend 的作用和用法?
作用：
當我們提供兩個或多個對象給$.extend()，對象的所有屬性都添加到目標對象（target參數(shù)）。
如果只有一個參數(shù)提供給$.extend()，這意味著目標參數(shù)被省略。在這種情況下，jQuery對象本身被默認為目標對象。這樣，我們可以在jQuery的命名空間下添加新的功能。這對于插件開發(fā)者希望向 jQuery 中添加新函數(shù)時是很有用的
用法：
//目標對象（第一個參數(shù)）將被修改，并且將通過$.extend()返回。然而，如果我們想保留原對象，我們可以通過傳遞一個空對象作為目標對象：
var object = $.extend({}, object1, object2);
//如果第一個對象的屬性本身是一個對象或數(shù)組，那么它將完全用第二個對象相同的key重寫一個屬性。這些值不會被合并。
//如果將 true作為該函數(shù)的第一個參數(shù)，那么會在對象上進行遞歸的合并。
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
// Merge object2 into object1
$.extend( object1, object2 );
4.jQuery 的鏈式調用是什么？
jQuery最方便的一點就是，它的大部分方法返回的都是jQuery對象，因此可以鏈式操作。也就是說，后一個方法可以緊跟著寫在前一個方法后面。
5.jQuery 中 data 函數(shù)的作用
data函數(shù)可以讀取html標簽中的data-xxx自定義屬性,并且為標簽對象儲存各種自定義屬性
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
//獲取屬性
$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";
//設置屬性
$( "div" ).data( "role","newPage" )
6.寫出以下功能對應的 jQuery 方法：
-
給元素 $node 添加 class active，給元素 $noed 刪除 class active
$node.addClass('active'); $node.removeClass('active'); -
展示元素$node, 隱藏元素$node
$node.show(); $node.hide(); -
獲取元素$node 的 屬性: id、src、title， 修改以上屬性
$node.attr('id'); $node.sttr('src'); $node.sttr('title'); $node.attr('id','1'); $node.sttr('src','2'); $node.sttr('title','3'); -
給$node 添加自定義屬性data-src
$node.attr('data-src','123'); -
在$ct 內部最開頭添加元素$node
$ct.prepend('node'); -
在$ct 內部最末尾添加元素$node
$ct.append('node'); -
刪除$node
$node.remove(); -
把$ct里內容清空
$ct.html(''); -
在$ct 里設置 html <div class="btn"></div>
$ct.html('<div class="btn"></div>'); -
獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)
//不包括內邊距 $node.height(); //讀取高度 $node.width(); //讀取寬度 $node.height('50px'); //設置高度 $node.width('50px'); //設置寬度 //包括內邊距 $node.innerHeight(); //讀取高度 $node.innerWidth(); //讀取寬度 $node.innerHeight( '50px' ); //設置高度 $node.innerHeight( '50px' ); //設置高度 //包括邊框 $node.outerHeight(); //讀取高度 $node.outerwidth(); //讀取寬度 $node.outerHeight('50px'); //設置高度 $node.outerwidth('50px'); //設置寬度 //包括外邊距 $node.outerHeight(true); //讀取高度 $node.outerwidth(true); //讀取寬度 -
獲取窗口滾動條垂直滾動距離
$node..scrollTop(); -
獲取$node 到根節(jié)點水平、垂直偏移距離
$node.offset(); -
修改$node 的樣式，字體顏色設置紅色，字體大小設置14px
$node.css({'color':'red','font-size':'14px'}); -
遍歷節(jié)點，把每個節(jié)點里面的文本內容重復一遍
$element.each(function(){ var $this = $(this); $this.text($this.text()+$this.text()); }); -
從$ct 里查找 class 為 .item的子元素
$ct.children('.item'); -
獲取$ct 里面的所有孩子
$ct.children(); -
對于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
$node.parents('.ct').find('.panel'); -
獲取選擇元素的數(shù)量
$('div').length;
7.用jQuery實現(xiàn)以下操作
-
當點擊$btn 時，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{色
var $btn = $('#btn');
$btn.on('click', function(e) {
var $this = $(this);
$this.css({
'background-color': 'red'
});setTimeout(function() { $this.css({ 'background-color': 'blue' }) }, 1000) }) -
當窗口滾動時，獲取垂直滾動距離
$(window).on('scroll', function(e) { var scrollTop = $(this).scrollTop(); console.log(scrollTop); }) -
當鼠標放置到$div 上，把$div 背景色改為紅色，移出鼠標背景色變?yōu)榘咨?/p>
var $div = $('#div'); $div.on('mouseenter', function(e) { $(this).css({ 'background-color': 'red' }); }) $div.on('mouseleave', function(e) { $(this).css({ 'background-color': '#fff' }); }) -
當鼠標激活 input 輸入框時讓輸入框邊框變?yōu)樗{色，當輸入框內容改變時把輸入框里的文字小寫變?yōu)榇髮?，當輸入框失去焦點時去掉邊框藍色，控制臺展示輸入框里的文字
var $input = $('input'); $input.on('focus', function(e) { $(this).css({ 'outline': '2px solid blue' }); }) $input.on('blur', function(e) { $(this).css({ 'outline': 'none' }); console.log($(this).val()); }) $input.on('keyup', function(e) { var $this = $(this); var valStr = $this.val(); valStr = valStr.toUpperCase(); $this.val(valStr); }) -
當選擇 select 后，獲取用戶選擇的內容
var $select = $('#select'); $select.on('change', function(e) { console.log($(this).val()); })
8.用 jQuery ajax 實現(xiàn)如下效果。當點擊加載更多會加載數(shù)據展示到頁面
<html>
<head>
</head>
<style>
.ct {
width: 800px;
margin: 50px auto;
}
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
ul li {
height: 22px;
padding: 10px;
margin: 10px;
border: 1px solid #777;
cursor: pointer;
}
ul li:hover {
background: yellowgreen;
}
#load-more {
display: block;
width: 80px;
height: 40px;
line-height: 40px;
border: 1px solid #E27272;
border-radius: 5px;
color: #E27272;
text-decoration: none;
text-align: center;
margin: 10px auto;
}
#load-more:hover {
background-color: #E27272;
color: #000;
}
#load-more.disabled {
background-color: #ccc;
color: #777;
border-color: #777;
}
#load-more img {
height: 40px;
width: 40px;
}
</style>
<body>
<div class="ct">
<ul class="content-ct">
<li>測試1</li>
<li>測試2</li>
<li>測試3</li>
</ul>
<a href="javascript:void(0)" id="load-more" data-sending="false">加載更多</a>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
$(function() {
var $btn = $('#load-more')
var index = 1;
var length = 5;
$btn.on('click', function() {
if (isSending()) {
return false;
}
$.ajax({
url: '/news',
method: 'get',
data: {
index: index,
length: length
}
}).done(function(result) {
render(result);
index = index + length;
//完成請求后解鎖
setSending(false);
loadMoreDisplay(isSending());
}).fail(function(jqXHR, textStatus) {
consloe.log(textStatus);
});
//設置鎖
setSending(true);
//設置按鈕樣式
loadMoreDisplay(isSending);
})
function setSending(val) {
$btn.data('sending', val)
}
function isSending() {
return $btn.data('sending') === 'true' ? true : false;
}
function render(content) {
var $ul = $('.content-ct');
var $df = document.createDocumentFragment();
content.forEach(function(element) {
var $li = $('<li></li>');
$li.text(element);
$ul.append($li);
});
}
function loadMoreDisplay(isSending) {
if (isSending) {
$btn.html('');
} else {
$btn.html('加載更多');
}
}
})
</script>
</body>
</html>