jQuery 中， $(document).ready()是什么意思？
頁面加載完成后，瀏覽器會通過JavaScript給DOM元素添加事件。在原生的JavaScript中,用的是window.onload方法，而在jQuery中使用的是$(document).ready()方法，$(document).ready()方法是事件模塊中最重要的一個函數。通過使用這個方法，可以在DOM載入就緒時就對其進行操縱并調用執行它所綁定的函數，但這并不是說明跟這些元素關聯的文件都下載完畢了。比如要對加載的圖片添加一些行為，例如點擊后圖片顯示或者隱藏，如果$(document).ready()方法進行設置，只要DOM元素加載完畢就可以操作了，不用等到所有圖片都下載完畢，但是使用window.onload操作，用戶必須等到所有圖片都下載完畢才可以操作。
$(document).ready()可以多次使用，比如
function a(){
console.log(a);
}
function b(){
console.log(b);
}
$(document).ready(function(){
a();
})
$(document).ready(function(){
b();
})
會依次輸出a 和b,但是使用window.onload的話，只會輸出后面那一個，因為把前面的覆蓋了。
$(document).ready()方法也可以寫成：
1.
$(function(){
....
})
2.
$().ready(function(){
...
})
注意！
使用$(document).ready()方法時，由于DOM準備完畢就會被執行，此時關聯的元素可能還沒加載完成，例如和圖片有關的html下載完畢，并且已經解析為DOM樹了，但可能圖片還未加載完畢，所以此時圖片的高度寬度等屬性不一定有效，要解決這個方法可以用load()方法，這里不細講了。
$node.html()和$node.text()的區別?
$node.html()，無參數時，用于獲取元素的HTML內容(包括文本內容和標簽)，
$node.html(val),val為元素的HTML內容，用于設置元素的HTML內容。
$node.text(),無參數時，用于獲取元素的文本內容。
$node.text(val),有參數時，用于設置元素的文本內容。
<body>
<p>
<a href="">哈哈哈</a>
</p>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
var html=$("p").html();
console.log(html);
console.log($("p").text());
</script>
$.extend 的作用和用法?
$.extend是一個添加屬性方法的入口，
函數原型：$.extend([deep,] target [, object1 ] [, objectN ] )
用法：
1.當我們提供兩個或多個對象給$.extend()，對象的所有屬性都添加到目標對象（target參數）。
2.如果只有一個參數提供給$.extend()，這意味著目標參數被省略。在這種情況下，jQuery對象本身被默認為目標對象。這樣，我們可以在jQuery的命名空間下添加新的功能。這對于插件開發者希望向 jQuery 中添加新函數時是很有用的。
目標對象（第一個參數）將被修改，并且將通過$.extend()返回，如果我們想保留原對象，我們可以將一個空對象作為目標對象：如:var obj = $.extend({}, object1, object2);進行對象屬性方法合并。
默認情況下， $.extend()執行的合并不會遞歸， 如果第一個對象的屬性本身是對象或數組，則它將被第二個或后續對象中具有相同鍵的屬性完全覆蓋。 這些值不合并，如果將 true作為該函數的第一個參數，那么會在對象上進行遞歸的合并。
用法：
1.$.extend()用來擴展jQuery靜態方法
$.extend({
exFunc:function (){
console.log("hah");
}
});
$.exFunc();
2.將a1,a2…aN的每一項合并為obj的每一項，并返回合并后的對象
var obj = {name:"xiaoming",age:20};
a1 = {name:"lihua",sex:"male"};
$.extend(obj,a1);
console.log(obj); //{name: "lihua", age: 20,sex:"male"}
3.想得到合并的結果，并不修改obj的結構
var newObj = $.extend({},obj,a1,a2...aN);
//newObj就是得到的新對象
4.在jQuery對象擴展一個命名空間
$.extend({nameScope:{}});
$.extend($.nameScope,{name:"tom"});
//將name添加到nameScope這個命名空間中
5.當extend的第一參數為布爾值,決定extend是深拷貝還是淺拷貝。
var src1 = {name:"tom",location:{city:"Beijing",county:"China"}};
var src2 = {name:"job",location:{live:"New York",county:"USA"}};
1.參數true，深拷貝
$.extend(true,src1,src2);
//合并后src1為：
{name: "job", location: {city: "Beijing",county: "USA",live: "New York"}}
里面的子元素也會進行合并
2.參數為false，淺拷貝。
$.extend(false,src1,src2);
合并后src1為：
{name: "job", location: {live:"New York",county:"USA"}}
里面的子元素不會合并，直接覆蓋
參考：http://api.jquery.com/jQuery.extend/
jQuery 的鏈式調用是什么？
對發生在同一個jQuery對象上的一組動作，可以直接連寫，而無需重復獲取對象。如：
$("#myphoto").show().siblings().hide();
jQuery 中 data 函數的作用
在jQuery中，可以通過data()方法將數據緩存，雖然使用全局變量或者局部變量可以將數據保存，但是變量不可以將數據緩存，而且不依附于某元素自身。如果使用data()方法可以針對元素定義數據，在元素中存取數據，從而避免數據被循環使用的風險，根據功能不同data有以下幾種使用格式：
1.根據元素中的名稱定義或者返回存儲的數據，調用格式為：
data([name]);
其中name為可以選參數，表示存儲數據的名稱。
2.根據元素中的名稱在元素上存儲或者設置數據，調用格式為：
data(name,value);
其中name表示要存儲數據的名稱，value表示要存儲的數據。
比如：在一個p元素上設置或者保存數據
<body>
<p> </p>
<div class="divtip"></div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
$(function(){
$("p").data("Data"); //初始值
$("p").data("Data","設置數據");
$(".divtip").append($("p").data("Data"));//顯示設置數據
})
</script>
</body
寫出以下功能對應的 jQuery 方法：
給元素 $node 添加 class active，給元素 $noed 刪除 class active
$node.addClass("active");//添加
$noed.removeClass("active");//刪除
展示元素$node, 隱藏元素$node
$node.show();//展示
$node.hide();//隱藏
$node.css("display","block");//展示
$node.css("display","none");//隱藏
獲取元素$node 的 屬性: id、src、title， 修改以上屬性
獲取屬性值：
$node.attr("id");
$node.attr("src");
$node.attr("title");
修改屬性：
$node.attr("id","val");
$node.attr("src","val");
$node.attr("title","val");
批量修改：
$node.attr({
"id":"val",
"src":"val",
"title":"val"
})
給$node 添加自定義屬性data-src
$node.attr("data-src","val");
在$ct 內部最開頭添加元素$node
$ct.prepend($node);
或者：
$node.prependTo($ct);
在$ct 內部最末尾添加元素$node
$ct.append($node);
或者：
$node.appendTo($ct);
刪除$node
$node.remove();//刪除后$node包含的所有后代都被刪除,刪除的是指向節點的引用。
把$ct里內容清空
$ct.empty();
在$ct 里設置 html <div class="btn"></div>
$ct.html("<div class="btn"></div>");
獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)
p{
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid;
margin: 10px;
}
<p></p>
不包括內邊距：
$node.width();//100
$node,height();/100
包括內邊距：
$node.innerWidth();//120
$node.innerHeight();//120
包括邊框：
$node.outerWidth();//122
$node.outerHeight();//122
包括外邊距：
$node.outerWidth(true);//142
$node.outerHeight(true);//142
獲取窗口滾動條垂直滾動距離
window.scrollTop();
獲取$node 到根節點水平、垂直偏移距離
$node.offset();
修改$node 的樣式，字體顏色設置紅色，字體大小設置14px
$node.css({
"color":"red",
"font-size":"14px"
})
遍歷節點，把每個節點里面的文本內容重復一遍
$.each(function(index){
console.log($(this).text())
})
從$ct 里查找 class 為 .item的子元素
$ct.find(".item");
獲取$ct 里面的所有孩子
$ct.children();
對于$node，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
$node.parents(".ct").find(".panel");
獲取選擇元素的數量
$node.length;
或者：
$node.size()
獲取當前元素在兄弟中的排行
$node.index()
用jQuery實現以下操作:
當點擊$btn 時，讓 $btn 的背景色變為紅色再變為藍色
<style>
.red {background: red; }
.blue{background: blue;}
</style>
$(function(){
$(".btn").on('click',function(){
$(".btn").addClass("red").toggleClass("blue")
})
})
當窗口滾動時，獲取垂直滾動距離
$(window).scroll(function(){
console.log($(window).scrollTop()+"px");
})
當鼠標放置到$div 上，把$div 背景色改為紅色，移出鼠標背景色變為白色
$(function(){
$div.on("mouseenter",function(){
$div.css("background","red");
});
$div.on("mouseleave",function(){
$div.css("background","blue");
})
});
當鼠標激活 input 輸入框時讓輸入框邊框變為藍色，當輸入框內容改變時
把輸入框里的文字小寫變為大寫，當輸入框失去焦點時去掉邊框藍色，控制臺展示輸入框里的文字
$(function(){
$('input').on("change",function(){
$(this).css("outline","blue");
if($(this).val().toLowerCase()){
$(this).on('keyup',function(){
var up= $(this).val().toUpperCase();
console.log(up);
});
}else {
console.log($(this).val());
}
});
});
當選擇 select 后，獲取用戶選擇的內容
<select name="" id="select">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
$("#select").on("change",function(){
console.log($("#select option:selected").text());
})
加載更多
router.js
app.get('/loadMore',function(req,res){
var index=req.query.page;
var len=req.query.length;
var data=[];
for(var i=0;i<len;i++){
data.push('新聞'+(parseInt(index)+i));
}
res.send({
status:0,
data:data
})
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul li {list-style: none}
a{
text-decoration: none;
color: #ff00ff;
}
.outer{
text-align: center;
width: 600px;
margin: 0 auto;
}
.wrap>li{
border: 1px solid #ddd;
text-align: center;
line-height: 2;
margin-bottom: 10px;
}
.wrap>li:hover{
background: #ddd;
}
#btn{
display: inline-block;
padding: 8px 20px ;
color: #fff;
background: #0000ff;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="outer">
<ul class="wrap">
</ul>
<a href="javascript:;" id="btn">加載更多</a>
</div>
</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
var pageIndex=0;
$("#btn").on('click',function() {
$.ajax({
url: '/loadMore',
data: {
page: pageIndex,
length: 5
},
type: 'get',
dataType: 'json',
success: function (ret) {
pageIndex=pageIndex+5;
appendHtml(ret.data);
},
error: function () {
alert("獲取數據異常")
}
});
});
function appendHtml(ret){
var html='';
for(var i=0;i<ret.length;i++){
var i;
html+='<li>'+ret[i]+'</li>';
console.log(ret[i]);
}
// $.each(ret,function(){
// html+='<li>'+this+'</li>';
// console.log(this)
// });
$('.wrap').append(html);
}
2.或者這樣寫也可以
var pageIndex=0;
$("#btn").on('click',function() {
$.ajax({
url:'/loadMore',
method:'get',
data:{
page:pageIndex,
length:5
}
}).done(function(ret){
if(ret.status===0){
pageIndex=pageIndex+5;
appendHtml(ret.data);
}else{
alert("獲取數據異常")
}
}).fail(function(){
alert("系統異常")
})
});
function appendHtml(ret){
var html='';
for(var i=0;i<ret.length;i++){
var i;
html+='<li>'+ret[i]+'</li>';
console.log(ret[i]);
}
// $.each(ret,function(){
// html+='<li>'+this+'</li>';
// console.log(this)
// });
$('.wrap').append(html);
}
3.這樣更簡單，不過不是很清楚，還是前面的寫法好
$("#btn").on('click',function() {
$.get('/loadMore',{page:pageIndex, length:5}).done(function(ret){
if(ret.status===0){
pageIndex=pageIndex+5;
appendHtml(ret.data);
}else{
alert("獲取數據異常")
}
}).fail(function(){
alert("系統異常")
})
});
function appendHtml(ret){
var html='';
for(var i=0;i<ret.length;i++){
var i;
html+='<li>'+ret[i]+'</li>';
console.log(ret[i]);
}
// $.each(ret,function(){
// html+='<li>'+this+'</li>';
// console.log(this)
// });
$('.wrap').append(html);
}
</script>
結果：
發現用for循環和$.each如果都寫this的話，獲取到的值是不一樣的，for循環獲取到的是window對象，結果發現是作用域的問題，但是不知道為何$,each的this指的是返回數組里面的值。
