簡化版本身完成jQuery
1. == 與===
只管不要用 == 劃定規矩太龐雜
用===只需要注重兩點,1.NaN===NaN,false,2.一切對象===也都是false,由於地點不一樣.
2.本身寫jQuery與用jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-Study</title>
<script src="01_myjQuery1.js"></script>
<script src="jQuery3.3.1min.js"></script>
<style>
.red{
color: red;
}
.blue{
color: blue;
}
.big{
font-size: larger;
}
.green{
color: green;
}
.pink{
color: pink;
}
</style>
</head>
<body>
<!--ul>li[id=item$]{這是li$}*8-->
<ul>
<li id="item1">這是li1</li>
<li id="item2">這是li2</li>
<li id="item3">這是li3</li>
<li id="item4" class="xxx">這是li4</li>
<li id="item5">這是li5</li>
<li id="item6">這是li6</li>
<li id="item7">這是li7</li>
<li id="item8">這是li8</li>
</ul>
<button id="x">x</button>
<ol id="ol2">
<li id="i1">1</li>
<li id="i2">2</li>
<li id="i3">3</li>
<li id="i4">4</li>
<li id="i5">5</li>
</ol>
</body>
<script>
console.log('直接運用');
console.log(getSiblings(item1));
console.log('直接運用');
addClass(item2,{a:true,xxx:false,c:true});
console.log(item2);
</script>
<script src="UseJquery.js"></script>
</html>01_myjQuery1.js
// 獲得兄妹結點
//傳入的參數是一個節點,返回兄妹結點的數組
function getSiblings(node) {
var allSilings = node.parentNode.children;
var siblingsArray = {length:0};
for (let i = 0; i < allSilings.length; i++) {
if (allSilings[i]!==node){
siblingsArray[siblingsArray.length] = allSilings[i];
siblingsArray.length++;
}
}
return siblingsArray;
}
//增加或刪除class
//傳入的第一個參數是結點,第二個參數是對象, 這個對象里是key:value,key就是要操縱的class,value推斷操縱範例,true增加,false刪除
function addClass(node,object){
for (let key in object){
//對象挪用要領的兩種體式格局:
// obj.f()
// obj['f']()
var methodName;
methodName = object[key] ? 'add':'remove';
node.classList[methodName](key);
/*上面兩句代碼相當於
if (object[key]) {
node.classList.add(key);
}else {
node.classList.remove(key);
}*/
}
}
window.mydom = {};
mydom.getSiblings = getSiblings;
mydom.addClass = addClass;//定名空間,經常使用的設想或許組合就叫做設想形式.哈希,數組,都是一種設想形式
//所以jQuery就是如許來的,jQuery就是一個定名空間,內里有許多函數.
// 定名空間作用:1.輕易辨認庫,2.假如都放在window里,可能會掩蓋別的庫,所以定名空間是為了防備掩蓋別的函數
window.onload = function () {
// 測試
// 怎樣直接運用item3.addclass()?,item3.getSiblings()?
// 要領一:給原型鏈加公有屬性公有要領,然則有缺點,輕易掩蓋
Node.prototype.getSiblings = function () {
var allSilings = this.parentNode.children;//誰挪用這個函數,this就是誰
var siblingsArray = {length:0};
for (let i = 0; i < allSilings.length; i++) {
if (allSilings[i]!==this){
siblingsArray[siblingsArray.length] = allSilings[i];
siblingsArray.length++;
}
}
return siblingsArray;
}
let item3 = document.getElementById('item3');
// console.log(item3.getSiblings.call(item3));假如用cal.第一個參數就是函數里的this,假如不必call(),那末this就自動變成了item3
console.log(' 要領一:');
console.log(item3.getSiblings());//測試勝利
Node.prototype.addClass = function (object) {
for (let key in object){
var methodName;
methodName = object[key] ? 'add':'remove';
this.classList[methodName](key);
}
}
// item3.addClass.call(item3,{a:true,xxx:false,c:true});;假如用call.第一個參數就是函數里的this,假如不必call(),那末this就自動變成了item3
console.log(' 要領一:');
item3.addClass.call(item3,{a:true,xxx:false,c:true});
// item3.addClass({a:true,xxx:false,c:true});
console.log(item3);//測試勝利
// 怎樣直接運用item3.addclass()?,item3.getSiblings()?
// 要領二:由於要領一在原型中增加函數輕易掩蓋,所以本身做一個相似的Node出來
var Node2 = function (node) {// 將要操縱的結點傳進去,然後返回一個對象,這個對象里給增加了有操縱這個節點要領,所以對象.要領就能夠完成操縱了,而不需要mydom.addclass(item3,...)如許了
return{
getSiblings: function () {
var allSilings = node.parentNode.children;
var siblingsArray = {length:0};
for (let i = 0; i < allSilings.length; i++) {
if (allSilings[i]!==node){
siblingsArray[siblingsArray.length] = allSilings[i];
siblingsArray.length++;
}
}
return siblingsArray;
},
addClass:function (object) {
for (let key in object){
var methodName;
methodName = object[key] ? 'add':'remove';
node.classList[methodName](key);
}
}
}
}
let item4 = document.getElementById('item4');
var item4obj = Node2(item4);
console.log(' 要領二:');
console.log(item4obj.getSiblings());//測試勝利
console.log(' 要領二:');
item4obj.addClass({a:true,xxx:false,c:true});
console.log(item4);//測試勝利
// 改成jQuery
var jQuery = function (nodeOrSelector) {//將Node2改成jQuery,jQuery能夠依據挑選器去找到對應的元素
var node;
if(typeof nodeOrSelector==="string"){
node = document.querySelector(nodeOrSelector);
}else {
node = nodeOrSelector;
}
return{
getSiblings: function () {
var allSilings = node.parentNode.children;
var siblingsArray = {length:0};
for (let i = 0; i < allSilings.length; i++) {
if (allSilings[i]!==node){
siblingsArray[siblingsArray.length] = allSilings[i];
siblingsArray.length++;
}
}
return siblingsArray;
},
addClass:function (object) {
for (let key in object){
var methodName;
methodName = object[key] ? 'add':'remove';
node.classList[methodName](key);
}
}
}
}
let item5 = document.getElementById('item5');
var $item5 = jQuery(item5);
console.log(' 改成jQuery要領:');
console.log($item5.getSiblings());
console.log(' 改成jQuery要領:');
$item5.addClass({red:true,xxx:false,c:true});
console.log(item5);//測試勝利
var child3 = jQuery('ul>li:nth-child(3)');
child3.addClass({blue:true});
// jQuery操縱多個節點
var jQueryS = function (nodeOrSelector) {
var node = {};
if (typeof nodeOrSelector ==='string'){
var temp = document.querySelectorAll(nodeOrSelector);//先用querySelectorAll獵取這個偽數組
for (let i = 0; i < temp.length; i++) {
node[i] = temp[i];
}
node.length = temp.length;//將偽數組凈化,凈化成只要0123值和length的偽數組
} else if(nodeOrSelector instanceof Node){// 假如是node,也將其轉化成偽數組
node[0] =nodeOrSelector;
node.length = 1;
}
node.getSiblings = function () {
};
node.addClass = function (classesArray) {//傳入class數組,給挑選的多個節點都加上數組中class
classesArray.forEach(value=>{
for (let i = 0; i < node.length; i++) {
node[i].classList.add(value);
}
})
}
node.getTexts = function () {
var texts=[];
for (let i = 0; i < node.length; i++) {
texts.push(node[i].textContent);
}
return texts;
}
node.setTexts = function (text) {
for (let i = 0; i < node.length; i++) {
node[i].textContent = text;
}
}
//set和get兼并
node.text = function (text) {
if (text===undefined){
var texts=[];
for (let i = 0; i < node.length; i++) {
texts.push(node[i].textContent);
}
return texts;
}else{
for (let i = 0; i < node.length; i++) {
node[i].textContent = text;
}
}
}
return node;
}
var allNodes = jQueryS('ul>li:nth-child(even)');//偶數孩子
allNodes.addClass(['big','green']);
console.log(allNodes.getTexts());
console.log(allNodes.text());
// console.log(allNodes.text(1));//測試勝利
//總結:jQuery的作用就是將挑選其挑選的元素放到一個對象里,這個對象里有01234標序,代表每個挑選的元素,有length代表一切元素加起來統共的長度,有種種要領,addclass,gettext等等.就是懺悔了如許一個hash
};
UseJquery.js
var $nodes = $('ul>li:nth-child(even)');//注重$nodesjQuery聲明的變量前面要加一個$,防備殽雜,由於jQuery聲明的變量只能用jQuery的api,不能用dom的api.
console.log($nodes);
x.onclick = function () {
$nodes.toggleClass('pink');//toggle,開關,切換
// console.log(1);
}
var colorArray = ['blue','yellow','red','pink','big']
var $nodes2 = $('#ol2>li');
$nodes2.addClass(function (index,currentClass) {
return colorArray[index];//ol內里的每個li加了'blue','yellow','red','pink','big'這幾個屬性
})
//https://www.jquery123.com/addClass/
3.this 和 arguments
f.call(asThis, input1,input2)
个中 asThis 會被當作 this，[input1,input2] 會被當作 arguments
制止運用 f(input1, input2)，由於學會 .call 才明白 this
this 和 arguments
function f(){
'use strict'
console.log(this)
console.log(arguments)
return undefined
}
f.call(1,2,3) // this 為 1，arguments 為 [2,3]
this 的值究竟是什麼？一次說清楚—方應杭
this定義:this是call的第一個參數.
this定義:this是call的第一個參數.
this定義:this是call的第一個參數.
「逐日一題」JS中的閉包是什麼？—方應杭
關於原型鏈:
「逐日一題」什麼是 JS原型鏈？—方應杭
dom就是一個定名的空間,定名的所屬對象
函數庫:特定品種的API
jQueryMobil已過期,不要學
jQuery的原型
測試代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>
console.log($.prototype)
console.log($.prototype.__proto__)
console.log($.prototype.__proto__ === Object.prototype)//繼續自Object
</script>
</head>
<body>
</body>
</html>效果以下:
就像Boolea,Array一樣,
他的原型就是jQuery.prototype
總結：本身完成jquery例子
var myjQueryS = function(node){
var Node = {}
Node.length = 0
if((typeof node)==='string'){
var nodearr = document.querySelectorAll(node)
for (let index = 0; index < nodearr.length; index++) {
let element = nodearr[index];
Node[index] = element
Node.length++
}
}else{
Node['0'] = node
Node.length++
}
Node.addClass = function(addclass){
for (let index = 0; index < Node.length; index++) {
let element = Node[index]
element.classList.add(addclass)
}
}
Node.text = function(text){
if(text===undefined){
let textArr = []
for (let index = 0; index < Node.length; index++) {
let element = Node[index]
textArr.push(element.textContent)
}
return textArr
}else{
for (let index = 0; index < Node.length; index++) {
let element = Node[index]
element.textContent = text
}
}
}
return Node
}
var $div = myjQueryS('div')
console.log($div)
$div.addClass('xxx')
console.log($div.text())
// $div.text('xxx')
