1- jQuery 中先舷， $(document).ready()的意思：
- $(document).ready()表示頁面的dom元素已經(jīng)加載完畢甫窟，這是為了防止在頁面加載元素加載完之前對dom元素進(jìn)行操作粗井，相當(dāng)于document.onload()或者window.onload()方法。window.onload是所有元素餐济、圖片絮姆、外部資源都加載完執(zhí)行秩霍，而$(document).ready()只需要DOM元素加載完成铃绒。所以onload比$().ready()要慢
//下面兩種寫法全部是等價(jià)的
$(document).ready(function(){});
$(function(){})
2- $node.html()和$node.text()的區(qū)別總結(jié)
$node.html()是獲取節(jié)點(diǎn)html DOM樹的方法颠悬，例如： $node.html(); //得到的是 <p>我是文本</p>
$node.text()是獲取節(jié)點(diǎn)里的文本內(nèi)容赔癌，例如：$node.html(); //得到的是 ：我是文本
<div class="test1">
<p>我是文本</p>
</div>
$('.test1').html() //<p>我是文本</p>
$('.test1').text() //我是文本
3- $.extend 的作用和用法：
- $.extend() 是將兩個(gè)或更多對象的內(nèi)容合并到第一個(gè)對象灾票。如果有相同屬性的值刊苍，那么最終值會(huì)被最后一個(gè)對象的值覆蓋班缰，如果沒有悼枢，則是添加馒索。
第一個(gè)參數(shù)設(shè)置為true，為深拷貝旨怠；設(shè)置為false鉴腻，是淺拷貝爽哎。不設(shè)置默認(rèn)是淺拷貝 - 用法：
$.extend( target [, object1 ] [, objectN ] ) //將object1课锌，...渺贤，objectN合并到target。還可以寫成var target = $.extend(object1, objectN);
$.extend( [deep ], target, object1 [, objectN ] ) //deep 深拷貝志鞍，如果對象中有多層的嵌套數(shù)據(jù)瞭亮，deep參數(shù)設(shè)置為true,則可以實(shí)現(xiàn)深拷貝
例子:
var obj = {}
var obj1 = {
name:'obj1',
age:'1',
friends:[1,2,3]
}
var obj2 = {
name:'obj2',
sex:'male'
}
//1淺拷貝
$.extend(obj,obj1)
console.log(obj) //name:'obj1',age:'1',friends:Array(3)
//深拷貝
$.extend(true,obj,obj1)
//2
$.extend(obj,obj1,obj2)
console.log(obj) //name:'obj2',age:'1',friends:Array(3),sex:'male'
//3
var opts = $.extend({},obj1,obj2)
console.log(opts) //原理同2,存在的替換，不存在的添加
//4
$.extend($.fn,obj2)
//5
$.fn.extend(obj2)
//.extend常見用法
function getPeople(obj){
var defalut = {
name:'hunger',
age:'30',
sex:'male'
}
//var opts = {}
var opts = $.extend({},defalut,obj)
console.log(opts)
}
4- jQuery 的鏈?zhǔn)秸{(diào)用：
- 鏈?zhǔn)秸{(diào)用就是分步驟地對jQuery對象實(shí)現(xiàn)各種操作述雾，例如
//對id為Test的對象進(jìn)行了三項(xiàng)操作:字體顏色設(shè)置為紅色;顯示對象;移除"style"樣式
$("#Test").css('color','red').show(200).removeClass('style');
- 鏈?zhǔn)秸{(diào)用的作用：
- 代碼精簡街州。鏈?zhǔn)秸{(diào)用能大大精簡代碼量，多項(xiàng)操作一行代碼玻孟；
- 優(yōu)化性能唆缴。使用鏈?zhǔn)讲僮鳎胁僮鞔a共享一個(gè)jQuery對象黍翎，省去了逐步查詢DOM元素的性能損耗
5- jQuery 中 data 函數(shù)的作用：
在目標(biāo)元素上存儲(chǔ)或獲取自定義數(shù)據(jù)。用于擴(kuò)展元素上的數(shù)據(jù)匣掸。
//存儲(chǔ)值
.data( key, value )
.data( key, value ) //設(shè)置對應(yīng)的key和value
.data( obj )//可以直接設(shè)置一個(gè)object值
//獲取值
.data( key )
.data( key ) //獲取對應(yīng)key的值
.data()//返回一個(gè)object趟紊，內(nèi)容是所有存儲(chǔ)在元素上的數(shù)據(jù)，格式是 key:value
通過data()函數(shù)存取的數(shù)據(jù)都是臨時(shí)數(shù)據(jù)碰酝，一旦頁面刷新霎匈，之前存放的數(shù)據(jù)都將不復(fù)存在。該函數(shù)屬于jQuery對象(實(shí)例)送爸。如果需要移除通過data()函數(shù)存放的數(shù)據(jù)铛嘱，可以使用removeData()函數(shù)。
6小練習(xí)：
- 寫出以下功能對應(yīng)的 jQuery 方法：
- 給元素 $node 添加 class active袭厂，給元素 $noed 刪除 class active
- 展示元素$node, 隱藏元素$node
- 獲取元素$node 的 屬性: id墨吓、src、title纹磺， 修改以上屬性
- 給$node 添加自定義屬性data-src
- 在$ct 內(nèi)部最開頭添加元素$node
- 在$ct 內(nèi)部最末尾添加元素$node
- 刪除$node
- 把$ct里內(nèi)容清空
- 在$ct 里設(shè)置
html <div class="btn"></div> - 獲取帖烘、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距橄杨、包括內(nèi)邊距秘症、包括邊框照卦、包括外邊距)
- 獲取窗口滾動(dòng)條垂直滾動(dòng)距離
- 獲取$node 到根節(jié)點(diǎn)水平、垂直偏移距離
- 修改$node 的樣式历极，字體顏色設(shè)置紅色窄瘟，字體大小設(shè)置14px
- 遍歷節(jié)點(diǎn)，把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍
- 從$ct 里查找 class 為 .item的子元素
- 獲取$ct 里面的所有孩子
- 對于$node趟卸，向上找到 class 為'.ct'的父親蹄葱，在從該父親找到'.panel'的孩子
- 獲取選擇元素的數(shù)量
- 獲取當(dāng)前元素在兄弟中的排行
$node.addClass('active')// 給元素 $node 添加 class active
$node.removeClass('active')// 給元素 $noed 刪除 class active
$node.show()// 展示元素$node
$node.hide(5000)// 隱藏元素$node
// 獲取元素$node 的 屬性: id、src锄列、title
$node.attr('id')
$node.attr('src')
$node.attr('title')
// 修改以上屬性
$node.attr('id','xxx')
$node.attr('src','xxx')
$node.attr('title','xxx')
$node.attr('data-src','xxx')// 給$node 添加自定義屬性data-src
// 在$ct 內(nèi)部最開頭添加元素$node
$ct.prepend('$node')
$node.prependTo('$ct')
// 在$ct 內(nèi)部最末尾添加元素$node
$ct.append('$node')
$node.appendTo('$ct')
$node.remove()// 刪除$node
$ct.empty()// 把$ct里內(nèi)容清空
$ct.html('<div class="btn"></div>')// 在$ct 里設(shè)置 html <div class="btn"></div>
//獲取图云、設(shè)置$node 的寬度、高度(分別不包括內(nèi)邊距邻邮、包括內(nèi)邊距竣况、包括邊框、包括外邊距)
//高度
$node.height()//不包括內(nèi)邊距
$node.innerHeight()//包括內(nèi)邊距
$node.outerHeight()//包括邊框
$node.outerHeight(true);//包括外邊距
//寬度
$node.width()//不包括內(nèi)邊距
$node.innerWidth()//包括內(nèi)邊距
$node.outerWidth()//包括邊框
$node.outerWidth(true);//包括外邊距
$(window).scrollTop()// 獲取窗口滾動(dòng)條垂直滾動(dòng)距離
// 獲取$node 到根節(jié)點(diǎn)水平筒严、垂直偏移距離
$node.offset().left
$node.offset().top
// 修改$node 的樣式丹泉，字體顏色設(shè)置紅色，字體大小設(shè)置14px
$node.css({
'color':'red',
'font-size':'14px'
})
// 遍歷節(jié)點(diǎn)鸭蛙，把每個(gè)節(jié)點(diǎn)里面的文本內(nèi)容重復(fù)一遍
$node.each(function(){
console.log($this.text())
})
$ct.find('.item')// 從$ct 里查找 class 為 .item的子元素
$ct.children()// 獲取$ct 里面的所有孩子
$node.parent('.ct').children('.panel')// 對于$node摹恨，向上找到 class 為'.ct'的父親，在從該父親找到'.panel'的孩子
$node.length// 獲取選擇元素的數(shù)量
$node.index()// 獲取當(dāng)前元素在兄弟中的排行
7小練習(xí)：
- 用jQuery實(shí)現(xiàn)以下操作:
- 當(dāng)點(diǎn)擊$btn 時(shí)娶视，讓 $btn 的背景色變?yōu)榧t色再變?yōu)樗{(lán)色
- 當(dāng)窗口滾動(dòng)時(shí)晒哄，獲取垂直滾動(dòng)距離
- 當(dāng)鼠標(biāo)放置到$div 上，把$div 背景色改為紅色肪获，移出鼠標(biāo)背景色變?yōu)榘咨?/li>
- 當(dāng)鼠標(biāo)激活 input 輸入框時(shí)讓輸入框邊框變?yōu)樗{(lán)色寝凌，當(dāng)輸入框內(nèi)容改變時(shí)把輸入框里的文字小寫變?yōu)榇髮懀?dāng)輸入框失去焦點(diǎn)時(shí)去掉邊框藍(lán)色孝赫，控制臺(tái)展示輸入框里的文字
- 當(dāng)選擇 select 后较木，獲取用戶選擇的內(nèi)容
jQuery動(dòng)畫實(shí)現(xiàn)
范例參考1代碼
范例參考2代碼
8- 用 jQuery ajax 實(shí)現(xiàn)如下效果。`當(dāng)點(diǎn)擊加載更多會(huì)加載數(shù)據(jù)展示到頁面效果預(yù)覽
- get方式
<div class="container">
<div class="box">內(nèi)容1</div>
<div class="box">內(nèi)容2</div>
</div>
<div class="getmore">
<a id="more" href="#">加載</i>更多</a>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script>
var $container = $(".container");
var $more = $('#more');
$more.on('click', function(){
$more.html("<i class='iconfont icon-dengdai1'></i>");
function getMoreNews() {
$.ajax({
// get 方式可以將參數(shù)直接加載URL的后面
//url: '/getmore?newsCount=' +$container.children().length,
url: '/getmore',
method: 'GET',
// data中存放的就是向服務(wù)器傳遞的參數(shù)青柄，使用get方法劫映，服務(wù)器通過 req.query.參數(shù)名 來獲取參數(shù)
data: {
newsCount: $container.children().length
}
}).done(function(news){
for(var i =0; i< news.result.length; i++){
var html = '';
html += "<div class='box'>";
html += news.result[i];
html += "</div>";
$container.append($(html));
}
$more.text("加載更多");
}).fail(function(jqHXR, textStatus){
console.log(textStatus);
})
}
setTimeout(getMoreNews, 1000);
});
</script>
服務(wù)器端
// 使用req.query.參數(shù)名 來獲取參數(shù)
app.get('/getmore', function(req, res){
var newsCount = Number(req.query.newsCount);
var news = [];
for(var i=1; i<=5; i++){
console.log(i);
news.push('內(nèi)容'+ (i+newsCount));
}
res.send({
result: news
});
});
- post方式
<div class="container">
<div class="box">內(nèi)容1</div>
<div class="box">內(nèi)容2</div>
</div>
<div class="getmore">
<a id="more" href="#">加載</i>更多</a>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script>
var $container = $(".container");
var $more = $('#more');
$more.on('click', function(){
$more.html("<i class='iconfont icon-dengdai1'></i>");
function getMoreNews() {
$.ajax({
url: '/getmore',
method: 'POST', //這里修改為POST
data: {
newsCount: $container.children().length
}
}).done(function(news){
for(var i =0; i< news.result.length; i++){
var html = '';
html += "<div class='box'>";
html += news.result[i];
html += "</div>";
$container.append($(html));
}
$more.text("加載更多");
}).fail(function(jqHXR, textStatus){
console.log(textStatus);
})
}
setTimeout(getMoreNews, 1000);
});
</script>
服務(wù)器端
app.post('/getmore', function(req, res){
// 使用req.body.參數(shù)名 來獲取參數(shù)
var newsCount = Number(req.body.newsCount);
var news = [];
for(var i=1; i<=5; i++){
console.log(i);
news.push('內(nèi)容'+ (i+newsCount));
}
res.send({
result: news
});
});
9- 實(shí)現(xiàn)一個(gè)天氣預(yù)報(bào)頁面，UI 如下圖所示(僅供參考刹前，可自由發(fā)揮)。數(shù)據(jù)接口:
-
獲取天氣
- 接口：http(s)://weixin.jirengu.com/weather
- 服務(wù)端支持 CORS 跨域調(diào)用雌桑，前端可直接使用 ajax 獲取數(shù)據(jù)喇喉，返回?cái)?shù)據(jù)以及使用方式參考 http://api.jirengu.com18
-
更多接口
- 學(xué)習(xí)總結(jié)
動(dòng)手+查文檔是學(xué)習(xí) jQuery 最有效的方法
