循環 鏈式調用 選擇元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>day1</title>
</head>
<body>
<!-- <div class="wrapper">
<ul>
<li data="Duyi">1</li>
<li data="cstDuyi">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul> -->
<!-- <div class="wrapper">
<div class="demo">
241
<span>span1</span>
</div>
<div class="demo">
<p>p1</p>
</div>
<div class="demo">
<span>span2</span>
</div>
</div> -->
<div class="demo">1</div>
<div class="demo">2</div>
<div class="demo">3</div>
<!-- <script src="/jQuery/jquery-3.4.1.js"></script> -->
<script>
// $('.wrapper').css({width:'100px',height:'100px',backgroundColor:'red'});
// css selector
// console.log($('.wrapper ul li'));
// jquery selector
// odd 偶數 even 奇數 eq(num) 第幾個 first 第一個
// $('.wrapper ul li:eq(-3)').css('backgroundColor','red');
// console.log($('.wrapper ul li:first'))
// 屬性選擇 li必須有data 這個屬性且這個屬性必須以Duyi結尾
// $('li[data $= "Duyi"]').css('border', '1px solid black');
// null undefined 容錯機制 因爲js是單線程的 所以要防止報錯
var selector = null;
// dom jquery 包裝成jQuery方法
// console.log($(undefined)); // jquery 對象 什麼都沒有
// console.log($(selector)); // jquery 對象 什麼都沒有
var colorsArr = ['red', 'blue', 'orange'];
// $('.wrapper .demo').each(function (index, ele) {
// console.log(ele, $(ele));
// $(ele)
// .find('span')
// .css({
// color: colorsArr[index]
// });
// })
// dom
// $('.demo').css({color : colorsArr[1]});
// function
// DOMContentLoaded 先觸發
// window.onload = function(){} 再觸發
// window.onload = function(){
// console.log('window.onload')
// }
// $(function(){
// console.log('DOMContentLoaded')
// }) // 還是在window.onload時間線之後
// $(document).ready(function(){
// console.log('DOMContentLoaded')
// })
// 兩個
// console.log($('.wrapper ul'))
// console.log($('ul','.wrapper'));
// $() 對象
// jQuery 庫 封閉了作用域 閉包
(function () {
function jQuery(selector) {
return new jQuery.prototype.init(selector); // init的原型鏈上有css的方法
}
jQuery.prototype.init = function (selector) {
// var this = {}
// 選出 dom 標籤 並且包裝成jQuery對象 返回
// id class
this.length = 0;
if (selector.indexOf('.') != -1) {
var dom = document.getElementsByClassName(selector.slice(1));
} else if (selector.indexOf('#') != -1) {
var dom = document.getElementById(selector.slice(1));
}
if (dom.length == undefined) { // 只有一個dom
this[0] = dom;
this.length++;
} else { // 你有很多個dom Elements
// 循環dom
for (var i = 0; i < dom.length; i++) {
this[i] = dom[i];
this.length++;
}
}
// return this;
}
jQuery.prototype.css = function (config) {
// 循環操作每一個dom
for (var i = 0; i < this.length; i++) {
for(var attr in config){
this[i].style[attr] = config[attr]; // 這裏如果加了px那麼就只能修改像素值了 對於顏色透明度就會使其失效
}
}
return this; // 鏈式操作的精髓 又返回了一個函數本身
}
jQuery.prototype.init.prototype = jQuery.prototype;// init的原型鏈上有css的方法
window.$ = window.jQuery = jQuery;// 內部jQuery的函數被保存到了window上所有沒有被釋放 就是閉包
})();
$('.demo')
.css({width: '100px', height: '100px', backgroundColor: 'orange'})
.css({color: 'red'})
console.log($('.demo'))
</script>
</body>
</html>