jQuery學習筆記03
16_篩選_查詢孩子-父母-兄弟標籤.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>16_篩選_查詢孩子-父母-兄弟標籤</title>
</head>
<body>
<div id="div1" class="box" title="one">class為box的div1</div>
<div id="div2" class="box">class為box的div2</div>
<div id="div3">div3</div>
<span class="box">class為box的span</span>
<br/>
<div>
<ul>
<span>span文字1</span>
<li>AAAAA</li>
<li title="hello" class="box2">BBBBB</li>
<li class="box" id='cc'>CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two"><span>span文字2</span></li>
<span>span文字3</span>
</ul>
<span>span文字444</span><br>
<li>eeeee</li>
<li>EEEEE</li>
<br>
</div>
<!--
在已經匹配出的元素集合中根據選擇器查詢孩子/父母/兄弟標籤
1. children(): 子標籤中找
2. find() : 後代標籤中找
3. parent() : 父標籤
4. prevAll() : 前面所有的兄弟標籤
5. nextAll() : 後面所有的兄弟標籤
6. siblings() : 前後所有的兄弟標籤
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. ul標籤的第2個span子標籤
2. ul標籤的第2個span後代標籤
3. ul標籤的父標籤
4. id為cc的li標籤的前面的所有li標籤
5. id為cc的li標籤的所有兄弟li標籤
*/
$(function () {
var $ul = $('ul')
// 1. ul標籤的第2個span子標籤
$ul.children('span:eq(1)').css('background', 'red')
// 2. ul標籤的第2個span後代標籤
$ul.find('span:eq(1)').css('background', 'red')
// 3. ul標籤的父標籤
$ul.parent().css('background', 'red')
// 4. id為cc的li標籤的前面的所有li標籤
$ul.children('#cc').prevAll('li').css('background', 'red')
// 5. id為cc的li標籤的所有兄弟li標籤
$ul.children('#cc').siblings('li').css('background', 'red')
})
</script>
</body>
</html>
17_文件_增刪改.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>17_文件_增刪改</title>
</head>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 20px;
left: 10px;
background: blue;
}
.div2 {
position: absolute;
width: 100px;
height: 100px;
/*top: 50px;*/
background: red;
}
.div3 {
position: absolute;
top: 250px;
}
</style>
<body>
<ul id="ul1">
<li>AAAAA</li>
<li title="hello">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two">EEEEE</li>
<li>FFFFF</li>
</ul>
<br>
<br>
<ul id="ul2">
<li>aaa</li>
<li title="hello">bbb</li>
<li class="box">ccc</li>
<li title="hello">ddd</li>
<li title="two">eee</li>
</ul>
<!--
1. 新增/替換元素
* append(content)
向當前匹配的所有元素內部的最後插入指定內容
* prepend(content)
向當前匹配的所有元素內部的最前面插入指定內容
* before(content)
將指定內容插入到當前所有匹配元素的前面
* after(content)
將指定內容插入到當前所有匹配元素的後面替換節點
* replaceWith(content)
用指定內容替換所有匹配的標籤刪除節點
2. 刪除元素
* empty()
刪除所有匹配元素的子元素
* remove()
刪除所有匹配的元素
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. 向id為ul1的ul下新增一個span(最後)
2. 向id為ul1的ul下新增一個span(最前)
3. 在id為ul1的ul下的li(title為hello)的前面新增span
4. 在id為ul1的ul下的li(title為hello)的後面新增span
5. 將在id為ul2的ul下的li(title為hello)全部替換為p
6. 移除id為ul2的ul下的所有li
*/
$(function () {
//1. 向id為ul1的ul下新增一個span(最後)
$('#ul1').append('<span>append()新增的span</span>')
$('<span>appendTo()新增的span</span>').appendTo('#ul1')
//2. 向id為ul1的ul下新增一個span(最前)
$('#ul1').prepend('<span>prepend()新增的span</span>')
$('<span>prependTo()新增的span</span>').prependTo('#ul1')
//3. 在id為ul1的ul下的li(title為hello)的前面新增span
$('#ul1>li[title=hello]').before('<span>before()新增的span</span>')
//4. 在id為ul1的ul下的li(title為hello)的後面新增span
$('#ul1>li[title=hello]').after('<span>after()新增的span</span>')
//5. 將在id為ul2的ul下的li(title為hello)全部替換為p
$('#ul1>li[title=hello]').replaceWith('<p>replaceWith()替換的p</p>')
//6. 移除id為ul2的ul下的所有li
$('#ul2').empty()
});
</script>
</body>
</html>
18_事件繫結與解綁.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>18_事件繫結與解綁</title>
</head>
<style type="text/css">
* {
margin: 0px;
}
.out {
position: absolute;
width: 200px;
height: 200px;
top: 20px;
left: 10px;
background: blue;
}
.inner {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: red;
}
.divBtn {
position: absolute;
top: 250px;
}
</style>
<body style="height: 2000px;">
<div class="out">
外部DIV
<div class="inner">內部div</div>
</div>
<div class='divBtn'>
<button id="btn1">取消繫結所有事件</button>
<button id="btn2">取消繫結mouseover事件</button>
<button id="btn3">測試事件座標</button>
<a href="http://www.baidu.com" id="test4">百度一下</a>
</div>
<!--
1. 事件繫結(2種)：
* eventName(function(){})
繫結對應事件名的監聽, 例如：$('#div').click(function(){});
* on(eventName, funcion(){})
通用的繫結事件監聽, 例如：$('#div').on('click', function(){})
* 優缺點:
eventName: 編碼方便, 但只能加一個監聽, 且有的事件監聽不支援
on: 編碼不方便, 可以新增多個監聽, 且更通用
2. 事件解綁：
* off(eventName)
3. 事件的座標
* event.clientX, event.clientY 相對於視口的左上角
* event.pageX, event.pageY 相對於頁面的左上角
* event.offsetX, event.offsetY 相對於事件元素左上角
4. 事件相關處理
* 停止事件冒泡 : event.stopPropagation()
* 阻止事件預設行為 : event.preventDefault()
-->
<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
需求：
1. 給.out繫結點選監聽(用兩種方法繫結)
2. 給.inner繫結滑鼠移入和移出的事件監聽(用3種方法繫結)
3. 點選btn1解除.inner上的所有事件監聽
4. 點選btn2解除.inner上的mouseover事件
5. 點選btn3得到事件座標
6. 點選.inner區域, 外部點選監聽不響應
7. 點選連結, 如果當前時間是偶數不跳轉
*/
$(function () {
// 1.給class為out的div的點選事件繫結監聽函式，列印'out clicked'(用兩種方法繫結)
/*$('.out').click(function () {
console.log('out click1')
})*/
$('.out').on('click', function () {
console.log('out clicked2')
})
//2.給class為inner的div的滑鼠移入和滑鼠移出事件繫結監聽函式
/*$('.inner')
.mouseenter(function () {
console.log('進入...')
})
.mouseleave(function () {
console.log('離開...')
})*/
$('.inner')
.on('mouseenter', function () {
console.log('進入...')
})
.on('mouseleave', function () {
console.log('離開...')
})
/*$('.inner').hover(function () {
console.log('進入...')
}, function () {
console.log('離開...')
})*/
//3. 點選btn1解除inner上的所有事件監聽
$('#btn1').click(function () {
$('.inner').off()
})
//4.點選btn2解除inner上的mouseover事件
$('#btn2').click(function () {
$('.inner').off('mouseover')
})
//5. 點選btn3得到事件座標
$('#btn3').click(function (event) {
console.log(event.offsetX, event.offsetY)
console.log(event.clientX, event.clientY)
console.log(event.pageX, event.pageY)
})
//6. 點選.inner區域, 外部點選監聽不響應
$('.inner').click(function (event) {
console.log('click inner')
// 停止事件冒泡
event.stopPropagation()
})
//7. 點選連結, 如果當前時間是偶數不跳轉
$('#test4').click(function () {
var time = Date.now(event)
alert(time)
if(time%2===0) {
// 阻止事件預設行為
event.preventDefault()
}
})
})
</script>
</body>
</html>
19_事件_面試題.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>19_事件切換</title>
</head>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: olive;
}
.div2 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: red;
}
.div3 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 230px;
background: olive;
}
.div4 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: yellow;
}
.divText{
position: absolute;
top: 330px;
left: 10px;
}
</style>
<body>
<div class="divText">
區分滑鼠的事件
</div>
<div class="div1">
div1.....
<div class="div2">div2....</div>
</div>
<div class="div3">
div3.....
<div class="div4">div4....</div>
</div>
<!--
區別mouseover與mouseenter?
* mouseover: 在移入子元素時也會觸發, 對應mouseout
* mouseenter: 只在移入當前元素時才觸發, 對應mouseleave
hover()使用的就是mouseenter()和mouseleave()
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
$('.div1').mouseover(function () {
console.log('移入div1或其子元素')
}).mouseout(function () {
console.log('移出div1或其子元素')
})
$('.div3').mouseenter(function () {
console.log('移入div3元素')
}).mouseleave(function () {
console.log('移出div3元素')
})
$('.div3').hover(function () {
console.log('移入div33元素')
this.style.background = 'red'
}, function () {
console.log('移出div33元素')
this.style.background = 'blue'
})
</script>
</body>
</html>
20_事件委託1_引入.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>20_事件委託_引入.html</title>
</head>
<body>
<ul>
<li>11111</li>
<li>1111111</li>
<li>111111111</li>
<li>11111111111</li>
</ul>
<li>22222</li>
<br>
<button id="btn">新增新的li</button>
<br>
<!--
繫結事件監聽的問題: 新加的元素沒有監聽
-->
<script src="js/jquery-1.10.1.js"></script>
<script>
/*
需求：
1. 點選 li 背景就會變為紅色
2. 點選 btn1 就新增一個 li
*/
$(function () {
//1. 點選 li 背景就會變為紅色
$('ul>li').click(function () {
this.style.background = 'red'
})
//2. 點選 btn1 就新增一個li
$('#btn').click(function () {
$('ul').append('<li>xxxxxxxxxxxx</li>')
})
})
</script>
</body>
</html>
20_事件委託2.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>20_事件委託2</title>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<li>22222</li>
<br>
<button id="btn1">新增新的li</button>
<button id="btn2">刪除ul上的事件委託的監聽器</button>
<!--
1. 事件委託:
* 將多個子元素(li)的事件監聽委託給父輩元素(ul)處理
* 監聽回撥是加在了父輩元素上
* 當操作任何一個子元素(li)時, 事件會冒泡到父輩元素(ul)
* 父輩元素不會直接處理事件, 而是根據event.target得到發生事件的子元素(li), 通過這個子元素呼叫事件回撥函式
2. 事件委託的2方:
* 委託方: 業主 li
* 被委託方: 中介 ul
3. 使用事件委託的好處
* 新增新的子元素, 自動有事件響應處理
* 減少事件監聽的數量: n==>1
4. jQuery的事件委託API
* 設定事件委託: $(parentSelector).delegate(childrenSelector, eventName, callback)
* 移除事件委託: $(parentSelector).undelegate(eventName)
-->
<script src="js/jquery-1.10.1.js"></script>
<script>
$(function () {
//事件委託
$('ul').delegate('li', 'click', function () {
this.style.background = 'red'
})
$('#btn1').click(function () {
$('ul').append('<li>xxxxxxxxx</li>')
})
$('#btn2').click(function () {
// 移除事件委託
$('ul').undelegate()
})
})
</script>
</body>
</html>
21_淡入淡出.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>21_淡入淡出</title>
</head>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: red;
}
</style>
<body>
<button id="btn1">慢慢淡出</button>
<button id="btn2">慢慢淡入</button>
<button id="btn3">淡出/淡入切換</button>
<div class="div1">
</div>
<!--
淡入淡出: 不斷改變元素的透明度來實現的
1. fadeIn(): 帶動畫的顯示
2. fadeOut(): 帶動畫隱藏
3. fadeToggle(): 帶動畫切換顯示/隱藏
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求：
1. 點選btn1, 慢慢淡出
* 無參
* 有參
* 字串引數
* 數字引數
2. 點選btn3, 慢慢淡入
3. 點選btn3, 淡出/淡入切換，動畫結束時提示“動畫結束了”
*/
$(function () {
//1. 點選 btn1 實現 慢慢淡出
$('#btn1').click(function () {
// $('.div1').fadeOut()
// $('.div1').fadeOut(1000)
$('.div1').fadeOut('fast')
/*
fast: 200
normal: 400
fast: 600
*/
})
//2. 點選 btn3 實現 慢慢淡入
$('#btn2').click(function () {
$('.div1').fadeIn()
})
//3. 點選 btn3 實現 淡出/淡入切換
$('#btn3').click(function () {
$('.div1').fadeToggle(function () {
alert('動畫結束了')
})
})
})
</script>
</body>
</html>
22_滑動.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>22_滑動</title>
</head>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: red;
}
</style>
<body>
<button id="btn1">慢慢收縮</button>
<button id="btn2">慢慢展開</button>
<button id="btn3">收縮/展開切換</button>
<div class="div1">
</div>
<!--
滑動動畫
1. slideDown(): 帶動畫的展開
2. slideUp(): 帶動畫的收縮
3. slideToggle(): 帶動畫的切換展開/收縮
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求：
1. 點選btn1, 向上滑動
2. 點選btn3, 向下滑動
3. 點選btn3, 向上/向下切換
*/
$(function () {
//1. 點選 btn1 實現 向上滑動
$('#btn1').click(function () {
$('div').slideUp()
})
//2. 點選 btn3 實現 向下滑動
$('#btn2').click(function () {
$('div').slideDown()
})
//3. 點選 btn3 實現 向上/向下切換
$('#btn3').click(function () {
$('div').slideToggle(2000)
})
})
</script>
</body>
</html>
23_顯示與隱藏.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>23_顯示與隱藏</title>
</head>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 10px;
background: red;
display: none;
}
</style>
<body>
<button id="btn1">瞬間顯示</button>
<button id="btn2">慢慢顯示</button>
<button id="btn3">慢慢隱藏</button>
<button id="btn4">顯示隱藏切換</button>
<div class="div1">
</div>
<!--
顯示隱藏，預設沒有動畫
1. show(): (不)帶動畫的顯示
2. hide(): (不)帶動畫的隱藏
3. toggle(): (不)帶動畫的切換顯示/隱藏
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. 點選btn1, 立即顯示
2. 點選btn2, 慢慢顯示
3. 點選btn3, 慢慢隱藏
4. 點選btn4, 切換顯示/隱藏
*/
$(function () {
//1. 點選btn1, 立即顯示
$('#btn1').click(function () {
$('div').show()
})
//2. 點選btn2, 慢慢顯示
$('#btn2').click(function () {
$('div').show(1000)
})
//3. 點選btn3, 慢慢隱藏
$('#btn3').click(function () {
$('div').hide(2000)
})
//4. 點選btn4, 切換顯示/隱藏
$('#btn4').click(function () {
$('div').toggle()
})
})
</script>
</body>
</html>
24_自定義動畫.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>24_自定義動畫</title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 300px;
background: red;
}
</style>
</head>
<body>
<button id="btn1">逐漸擴大</button>
<button id="btn2">移動到指定位置</button>
<button id="btn3">移動指定距離</button>
<button id="btn4">停止動畫</button>
<div class="div1">
愛在西元前，學在尚矽谷
</div>
<!--
jQuery動畫本質 : 在指定時間內不斷改變元素樣式值來實現的
1. animate(): 自定義動畫效果的動畫
2. stop(): 停止動畫
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求：
1. 逐漸擴大
1). 寬/高都擴為200px
2). 寬先擴為200px, 高後擴為200px
2. 移動到指定位置
1).移動到(500, 100)處
2).移動到(100, 20)處
3.移動指定的距離
1). 移動距離為(100, 50)
2). 移動距離為(-100, -20)
4. 停止動畫
*/
var $div1 = $('.div1')
/*
1. 逐漸擴大
1). 寬/高都擴為200px
2). 寬先擴為200px, 高後擴為200px
*/
$('#btn1').click(function () {
// 1). 寬/高都擴為200px
/*$div1
.animate({
width: 200,
height: '200px'
}, 1000)*/
// 2). 寬先擴為200px, 高後擴為200px
$div1
.animate({
width: 200
}, 2000)
.animate({
height: 200
}, 2000)
})
/*
2. 移動到指定位置
1).移動到(500, 100)處
2).移動到(100, 20)處
*/
$('#btn2').click(function () {
// 1).移動到(500, 100)處
/*$div1
.animate({
left: 500,
top: 100
}, 1000)*/
// 2).移動到(100, 20)處
$div1
.animate({
left: 100,
top: 20
}, 1000)
})
/*
3.移動指定的距離
1). 移動距離為(100, 50)
2). 移動距離為(-100, -20)
*/
$('#btn3').click(function () {
// 1). 移動距離為(100, 50)
/*$div1.animate({
left: '+=100',
top: '+=50'
}, 1000)*/
//2). 移動距離為(-100, -20)
$div1.animate({
left: '-=100',
top: '-=20'
}, 1000)
})
/*
4. 停止動畫
*/
$('#btn4').click(function () {
$div1.stop() // 只停止當前執行的動畫(後面其它動畫還會執行)
// $div1.stop(true) // 停止所有動畫
// $div1.stop(true, true)
})
</script>
</body>
</html>
25_擴充套件外掛.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>25_擴充套件外掛</title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 10px;
background: red;
}
</style>
</head>
<body>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="籃球"/>籃球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="checkedAllBtn" value="全 選"/>
<input type="button" id="checkedNoBtn" value="全不選"/>
<input type="button" id="reverseCheckedBtn" value="反選"/>
<!--
1. 擴充套件jQuery的工具方法
$.extend(object)
2. 擴充套件jQuery物件的方法
$.fn.extend(object)
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/my_jQuery_plugin.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求：
1. 給 $ 新增4個工具方法:
* min(a, b) : 返回較小的值
* max(c, d) : 返回較大的值
* leftTrim() : 去掉字串左邊的空格
* rightTrim() : 去掉字串右邊的空格
2. 給jQuery物件 新增3個功能方法:
* checkAll() : 全選
* unCheckAll() : 全不選
* reverseCheck() : 全反選
*/
// 得到最大最小值
var a = 1
var b = 2
var result_min = $.min(a, b)
var result_max = $.max(a, b)
console.log(result_min)
console.log(result_max)
// 左trim 右trim
var str = ' 悟空 '
console.log('|' + str + '|')
var resultStrLeft = $.leftTrim(str)
console.log('|' + resultStrLeft + '|')
var resultStrRight = $.rightTrim(str)
console.log('|' + resultStrRight + '|')
//全選
$('#checkedAllBtn').click(function () {
$(':checkbox').checkAll()
})
//全不選
$('#checkedNoBtn').click(function () {
$(':checkbox').unCheckAll()
})
//反選
$('#reverseCheckedBtn').click(function () {
$(':checkbox').reverseCheck()
})
</script>
</body>
</html>
26_多庫共存.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>26_多庫共存</title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 10px;
background: red;
}
</style>
</head>
<body>
<!--
問題 : 如果有2個庫都有$, 就存在衝突
解決 : jQuery庫可以釋放$的使用權, 讓另一個庫可以正常使用, 此時jQuery庫只能使用jQuery了
API : jQuery.noConflict()
-->
<script src="js/myLib.js" type="text/javascript"></script>
<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//釋放$的使用權,讓另一個庫可以正常使用
jQuery.noConflict()
//使用的是myLib.js中的$
$()
//使用jQuery
jQuery(function () {
jQuery('body')
})
</script>
</body>
</html>
27_onload與ready.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window.onload與$(document).ready()</title>
</head>
<body>
<h1>測試window.onload與$(document).ready()</h1>
<img id="logo" src="https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-05-19/6fec71d56242b74eb24b4ac80b817eac.png">
<!--
區別: window.onload與 $(document).ready()
* window.onload
* 包括頁面的圖片載入完後才會回撥(晚)
* 只能有一個監聽回撥
* $(document).ready()
* 等同於: $(function(){})
* 頁面載入完就回撥(早)
* 可以有多個監聽回撥
-->
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
/*
需求：
1. 直接列印img的寬度，觀察其值
2. 在 $(function(){}) 中 列印 img 的寬度
3. 在 window.onload 中列印寬度
4. 在 img 載入完成後列印寬度
*/
var $logo = $('#logo')
console.log($logo.width()) // 0
$(function () {
console.log('$1()', $logo.width())
})
$(function () {
console.log('$2()', $logo.width())
})
window.onload = function () {
console.log('onload1()')
}
window.onload = function () {
console.log('onload2()', $logo.width())
}
$logo.on('load', function () {
console.log('load', this.width)
})
</script>
</body>
</html>
相關文章
- jQuery 學習筆記jQuery筆記
- jQuery學習筆記jQuery筆記
- jQuery學習筆記（ajax）jQuery筆記
- jQuery 學習系列筆記jQuery筆記
- Jquery學習筆記（一）jQuery筆記
- jQuery 學習筆記(二)jQuery筆記
- jQuery學習筆記（2）jQuery筆記
- jquery ajax學習筆記jQuery筆記
- Jquery學習筆記一jQuery筆記
- OpenResty學習筆記03：再探WAFREST筆記
- 《L03 Laravel 教程》 學習筆記Laravel筆記
- FPGA學習筆記03——UART串列埠FPGA筆記串列埠
- MongoDB權威指南學習筆記03MongoDB筆記
- jQuery學習系列筆記（二）jQuery筆記
- jquery備忘學習筆記jQuery筆記
- jQuery 學習筆記：jQuery 程式碼結構jQuery筆記
- jQuery原始碼學習筆記一jQuery原始碼筆記
- Jquery+Ajax+php學習筆記jQueryPHP筆記
- JavaWeb學習筆記_Day03_JavaScript詳解Web筆記JavaScript
- Git 的安裝與初次使用 —— Git 學習筆記 03Git筆記
- Libev 官方文件學習筆記 – 03：常用 watcher 介面筆記
- PHP + MySQL 學習筆記（七）--- jQuery 及 jQuery Mobile 簡介 + 兩個 練習PHPMySql筆記jQuery
- JQuery學習記錄jQuery
- jQuery 學習記錄jQuery
- Python 學習筆記-03-01-三大結構-分支Python筆記
- 4月10日學習筆記——jQuery選擇器筆記jQuery
- web基礎學習筆記(二十)之jquery動畫操作Web筆記jQuery動畫
- numpy的學習筆記\pandas學習筆記筆記
- 2020-11-14springboot學習筆記03Spring Boot筆記
- 組合語言學習筆記03——暫存器（CPU工作原理）組合語言筆記
- JQuery學習隨筆(三) - 事件jQuery事件
- 基於jquery的外掛turn.js學習筆記jQueryJS筆記
- IT學習筆記筆記
- 學習筆記筆記
- 7.3_前端筆記-jquery練習前端筆記jQuery
- Qt Creator 原始碼學習筆記03，大型專案如何管理工程QT原始碼筆記
- 刷題筆記03筆記
- 03《構建之法》閱讀筆記03筆記