temp的使用
链式操作
----------------------------------------------------------------------
Tips:
window.$ = jQuery
区别 DOM 的API 和 jQuery 的 API
---------------------------------------------------------------------
-------------------------------------------------------------------
jQuery 的原理 ：
接受一个 旧的 对象，
返回一个 新的对象 ，
新的对象 有 新的 API ，
新的 API 还是 调用 旧的 API
---------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul>
<li id="item1">选项1</li>
<li id="item2">选项2</li>
<li id="item3">选项3</li>
<li id="item4">选项4</li>
<li id="item5">选项5</li>
</ul>
</body>
</html>
-------------------------------------------------------------------
window.jQuery = function(node){
return{
getSiblings:function(){
var allChildren = node.parentNode.children
var array = {
length:0
}
for(let i = 0 ;i<allChildren.length; i++){
if(allChildren[i] !== node){
array[array.length] = allChildren[i]
array.length += 1
}
}
return array
},
addClass:function(classes){
for(let key in classes){
var value = classes[key]
var methodName = value ? 'add' : 'remove'
node.classList[methodName](key)
}
}
}
}
var node2 = jQuery(item3)
console.log(jQuery)
console.log(node2)
console.log(node2.getSiblings())
node2.addClass({'a':true,'b':true,'c':true})
console.log(item3)
-------------------------------------------------------------
jQuery 的 进一步 理解
----------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul>
<li id="item1">选项1</li>
<li id="item2">选项2</li>
<li id="item3">选项3</li>
<li id="item4">选项4</li>
<li id="item5">选项5</li>
</ul>
</body>
</html>
------------------------------------------------------------------
.red{
color:red
}
.blue{
color:blue
}
---------------------------------------------------------------------
window.jQuery = function(nodeOrSelector){
let node
if(typeof nodeOrSelector === 'string'){
node = document.querySelector(nodeOrSelector)
}else{
node = nodeOrSelector
}
return{
getSiblings:function(){
var allChildren = node.parentNode.children
var array = {
length:0
}
for(let i = 0 ;i<allChildren.length; i++){
if(allChildren[i] !== node){
array[array.length] = allChildren[i]
array.length += 1
}
}
return array
},
addClass:function(classes){
for(let key in classes){
var value = classes[key]
var methodName = value ? 'add' : 'remove'
node.classList[methodName](key)
}
}
}
}
var node2 = jQuery('#item3')
var node3 = jQuery('ul > li:nth-child(4)')
console.log(jQuery)
console.log(node2)
console.log(node2.getSiblings())
node2.addClass({'red':true,'b':true,'c':true})
node3.addClass({'blue':true,'b':false,'c':true})
console.log(item3)
-----------------------------------------------
--------------------------------------------
jQuery的本质理解，批量处理
---------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul>
<li id="item1">选项1</li>
<li id="item2">选项2</li>
<li id="item3">选项3</li>
<li id="item4">选项4</li>
<li id="item5">选项5</li>
</ul>
</body>
</html>
---------------------------------------------------------------------------
.red{
color:red
}
.blue{
color:blue
}
.background-color{
background: yellow;
}
--------------------------------------------------------------------
window.jQuery = function(nodeOrSelector){
let nodes = {}
if(typeof nodeOrSelector === 'string'){
// nodes = document.querySelectorAll(nodeOrSelector) //伪数 组
let temp = document.querySelectorAll(nodeOrSelector) //伪数组
for(let i = 0 ;i <temp.length; i++){
nodes[i] = temp[i]
}
nodes.length = temp.length
}else if (nodeOrSelector instanceof Node){
nodes = {0:nodeOrSelector,length:1} //伪数组
}
nodes.addClass = function(classes){
for(let key in classes){
var value = classes[key]
var methodName = value ? 'add' : 'remove'
for(let i = 0;i<nodes.length;i++){
nodes[i].classList[methodName](key)
}
}
}
// nodes.getText = function(){
// var texts = []
// for(let i = 0; i<nodes.length; i++){
// texts.push(nodes[i].textContent)
// }
// return texts
// }
// nodes.setText = function(text){
// for(let i = 0;i<nodes.length; i++){
// nodes[i].textContent = text
// }
// }
nodes.text = function(text){
if(text === undefined){
var texts = []
for(let i = 0; i<nodes.length; i++){
texts.push(nodes[i].textContent)
}
return texts
}else{
for(let i = 0;i<nodes.length; i++){
nodes[i].textContent = text
}
}
}
return nodes
}
var node2 = jQuery('ul > li')
node2.addClass({'blue':true,'b':false,'background-color':true})
// node2.setText('hi')
// console.log(node2.getText())
console.log(node2.text())
node2.text('hello')
console.log(node2.text())
网友评论