阮一峰 jQuery
不要学jquery mobile
获取某个节点的所有兄弟姐妹
ul>li[id=item$]{选项$}*5
tab后结果
找某一个节点的所有兄弟姐妹
children只获取元素节点，不获取文本节点
function getSiblings(node){
varallChildren = node.parentNode.children
vararray={
length:0
}
for(let i=0;i
if(allChildren[i]!==node){
array[array.length]=allChildren[i]
array.length+=1
}
}
return array
}
搜索 方应杭== ===
给一个节点添加class
方法一：
item3.classList.add('a')
item3.classList.add('b')
item3.classList.add('c')
方法二：
var classes = ['a','b','c']
classes.forEach(value)=>(item3.classList.add(value))
方法三：
var classes ={'a':true,'b':false,'c':true} //用hash
for (let key in classes){
varvalue = classes[key]
if(value){
item3.classList.add(key)
}
else{
item3.classList.remove(key)
}
}
结果item3的class就为a b c
封装以下
function addClasses(node,classes){
for (let key in classes){
varvalue = classes[key]
if(value){
node.classList.add(key)
}
else{
node.classList.remove(key)
}
}
}
addClasses(item3,{a:true,b:false,c:true})
代码优化
如果存在类似的代码，那么就存在优化的可能
function addClasses(node,classes){
for (let key in classes){
varvalue = classes[key]
varmethodName = value? 'add':'remove'
node.classList[methodName](key)
}
}
一个对象，要调其方法：
obj.x()
obj['x']()
////////////////////////////////////////以下叫做 命名空间
window.ffdom = {}
ffdom.getSiblings = getSiblings
ffdom.addClasses = addClasses
ffdom.getSiblings(item3)
以上的问题是如果别人也用了getSiblings、addClasses，那么这里ffdom用就会把别人的覆盖掉
所以改成下面的
window.ffdom = {}
ffdom.getSiblings = function (node){
varallChildren = node.parentNode.children
vararray={
length:0
}
for(let i=0;i
if(allChildren[i]!==node){
array[array.length]=allChildren[i]
array.length+=1
}
}
return array
}
ffdom.addClasses = function (node,classes){
for (let key in classes){
varvalue = classes[key]
varmethodName = value? 'add':'remove'
node.classList[methodName](key)
}
}
/////////////////////////////////////////
另一种方法
修改prototype属性
Node.prototype.getSiblings = function(){
var allChildren = this.parentNode.children
vararray={
length:0
}
for(let i=0;i
if(allChildren[i]!==this){
array[array.length]=allChildren[i]
array.length+=1
}
}
return array
}
console.log(item3.getSiblings())
或者
console.log(item3.getSiblings.call(item3))
Node.prototype.addClasses = function(classes){
for (let key in classes){
varvalue = classes[key]
varmethodName = value? 'add':'remove'
this.classList[methodName](key)
}
}
item3.addClasses({a:true,b:false,c:true})
或者
item3.addClasses.call(item3,{a:true,b:false,c:true})
/////////////////////////////////////////
以上方法的问题：谁都可以修改prototype属性，会容易被相互覆盖
如下解决：
自己做一个构造函数
window.Node2 = function(node){
return {
getSiblings:function(){
var allChildren =node.parentNode.children
var array={
length:0
}
for(leti=0;i
if(allChildren[i]!==node){
array[array.length]=allChildren[i]
array.length+=1
}
}
return array
},
addClasses:function(classes){
for (let key in classes){
var value = classes[key]
var methodName = value?'add':'remove'
node.classList[methodName](key)
}
}
}
}
var node2 = Node2(item3)
node2.getSiblings()
node2.addClasses({a:true,b:false,c:true})
把上面的Node2改叫法：jQuery
///////////////////////////////////////////////////////////////////////
jQuery里除了传入node节点，还可以传选择器 Selector
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(leti=0;i
if(allChildren[i]!==node){
array[array.length]=allChildren[i]
array.length+=1
}
}
return array
},
addClasses: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 node2 = jQuery('ul>li:nth-child(3)')
node2.getSiblings()
node2.addClasses({red:true,b:false,c:true})
jQuery实际上是一个函数，其接受一个参数，这个参数可能是节点或选择器，然后返回一个方法对象去操作这个节点或者选择器
/////////////////如果需要操作所有的li，即多个节点
window.jQuery = function(nodeOrSelector){
letnodes = {}
if(typeof nodeOrSelector === 'string'){
let temp = document.querySelectorAll(nodeOrSelector) //伪数组
for(let i = 0 ;i
{
nodes[i] = temp[i]
}
nodes.length = temp.length
}else if(nodeOrSelector instanceof Node){
nodes = {
0:nodeOrSelector,
length:1}
}
nodes.getSiblings = function(){
}
nodes.addClasses = function(classes){
for (let key in classes){
var value = classes[key]
var methodName = value?'add':'remove'
for(let i =0 ;i
nodes[i].classList[methodName](key)
}
}
nodes.getText = function (){ //获取文本
let texts= []
for(i=0;i
texts.push(nodes[i].textContent)
}
return texts
}
nodes.setText = function(text){ //设置文本
for(let i= 0; i
nodes[i].textContent = text
}
}
//把set和get合并
nodes.text = function(text){
if(text === undefined){
let texts= []
for(i=0;i
texts.push(nodes[i].textContent)
}
return texts
}
else {
for(let i= 0;i
nodes[i].textContent = text
}
}
}
return nodes
}
var node2 = jQuery('ul>li')
node2.getSiblings()
node2.addClasses({a:true,b:false,c:true})
console.log(node2)
console.log(node2.getText())
node2.setText('hi')
var text = node2.text() //没给参数，说明想获取
node2.text('hi') //给了参数，说明想设置
node2[0].classList.add('blue')也是可以的；这里node2[0]即nodeOrSelector
操作一个你访问不到的变量，闭包的意义
{0:li ,1:li,length:5,addClasses:f,text:f}
var nodes = jQuery('ul>li')
x.onclick = function (){
nodes.toggleClass('red') //toggle开关、切换
}
var nodes = jQuery('ul>li')
x.onclick = function (){
nodes.addClass(function(index , currentClass){
return 'c_'+index
})
}
这里index是索引，表示添加c_加索引的class 比如c_0 c-1
var nodes = jQuery('ul>li')
var classes =['red','green','blue','yellow','black']
x.onclick = function (){
nodes.addClass(function(index , currentClass){
return classes[index]
})
}
window.$=jQuery
网友评论