요소의 텍스트 콘텐츠를 얻을 수 있는 함수를 캡슐화합니다.
- php中世界最好的语言원래의
- 2018-05-24 15:19:372051검색
이번에는 요소의 텍스트 내용을 얻을 수 있는 함수의 캡슐화에 대해 소개하겠습니다. 요소의 텍스트 내용을 얻을 수 있는 함수 캡슐화의 노트는 무엇입니까? 봐.
A.1 논리적 단계
목표: 모든 형제 요소 + 요소의 요소 노드 가져오기
S1 상위 요소 노드 + 모든 하위 노드 가져오기
S2 반환할 의사 배열 개체 선언
S3 들어오는 자체 제거 요소 노드
S4는 array.length를 사용하여 첨자로 배열 내용을 전달합니다(i를 사용하는 경우 i를 건너뛸 수 있으며 순서가 맞지 않습니다)
S5 이 의사 배열을 반환합니다.
A.1 특정 코드
<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>
//S5 封装为函数(API)
function getSiblings(node){
var allChildren = node.parentNode.children; //S1 获取li的父元素节点 + 其所有子节点
var array = {length:0}; //S2 声明将要返回的伪数组对象
for (let i = 0; i < allChildren.length; i++){
if (allChildren[i] !== node){ // S3 去除本身传入的元素节点
array[array.length] = allChildren[i]; // S4 利用 array.length按下标传入数组内容(如果用i,i是有可能跳过的，就不是按序了)
array.length += 1;
}
}
// console.log(array); // {0:li#item1, 1:li#item2......}
return array; // S6 返回这个伪数组
} A.2 논리적 단계
목표: 일괄적으로 요소에 클래스 이름 추가/제거
S1 객체의 키 값 탐색
S2 클래스 이름 값이 true인 경우 클래스 이름을 추가합니다. 그렇지 않으면 제거하세요
A .2 특정 코드
function addClass(node, classes){
// var classes = {'a':true, 'b':false, 'c':true} //S1 构造要传入的类名对象
for (let key in classes){ //S2 遍历对象的key值
value = classes[key];
// if (value){ //S3 当类名的值为ture时，添加类名
// node.classList.add(key);
// }else{
// node.classList.remove(key);
// }
// 以上 if/else可以优化为
var methodName = value ? 'add':'remove';
node.classList[methodName](key);
}
}B는 window.mydom = {};
mydom.getSiblings = function getSiblings(node){
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;
}
mydom.addClass = function addClass(node, classes){
classes.forEach( (value)=> node.classList.add(value) );
}`인 namespace
를 추가합니다. 호출 메서드는 mydom.getSiblings(item3); 'a','b']) mydom.getSiblings(item3); mydom.addClass(item3, ['a','b'])
而希望的调用方法是item3.getSibling() / item3.addClass('['a', 'b'])원하는 호출 방법은 item3.getSibling() / item3.addClass('['a', 'b'])
C입니다. .1 this+프로토타입 체인
Node.prototype.getSiblings = function getSiblings(){
var allChildren = this.parentNode.children;
var array = {length:0};
for (let i = 0; i < allChildren.length; i++){
if (allChildren[i] !== this){ // 去除本身传入的元素节点
array[array.length] = allChildren[i];
array.length += 1;
}
}
return array;
}
Node.prototype.addClass = function addClass(classes){
classes.forEach( (value)=> this.classList.add(value) );
}
// 参考效果
console.log( item3.getSiblings() )
C.2 node2 function_object 모드
window.Node2 = function(node){ //要挂载到全局window上，才能直接访问
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];
arrat.length += 1;
}
}
return array;
},
addClass: function(classes){
classes.forEach( (value) => node.classList.add(value) )
}
}
}
//参考效果
node2 = Node2(item3);
console.log( node2.getSibling() );
node2.addClass( ['a', 'b', 'c'] )
C.3 단순화된 jQuery 시뮬레이션
window.jQuery = function(nodeOrSelector){
let node;
if (typeof nodeOrSelector === 'string'){ //类型检测
node = document.querySelector(nodeOrSelector); //只支持返回一个节点
} else {
node = nodeOrSelector;
}
return{
getSibligs: 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];
arrat.length += 1;
}
}
return array;
},
addClass: function(classes){
classes.forEach( (value) => node.classList.add(value) )
}
}
}
//调用效果
var node2 = jQuery('#item3');
node2.getSibling();
node2.addClass(['red', 'c'])
C.4 하나/여러 노드 전달 지원
window.jQuery = function(nodeOrSelector){
let nodes = {}; //S1 以后要用到的元素节点伪数组，空对象
if (typeof nodeOrSelector === 'string'){
let temp = document.querySelectorAll(nodeOrSelector)//S2元素节点伪数组
for (let i = 0 ; i < temp.length; i++){
nodes[i]= temp[i]; //S3 去除多余原型链部分
}
nodes.length = temp.length;
} else if (nodeOrSelector instanceof Node){
nodes ={ 0: nodeOrSelector , length:1}; //S4 单个元素也要返回伪数组
}
nodes.addClass = function(classes){
// for (let i = 0; i < nodes.length; i++){
// classes.forEach( (value) => nodes[i].classList.add(value) );
// }
// 更好的写法是
classes.forEach( (value) => {
for (let i=0; i<nodes.length; i++){
nodes[i].classList.add(value);
}
})
}
return nodes
}
//调用效果
var node2 = jQuery('ul>li');
node2.addClass( ['blue'] );
D 다른 기능 추가
window.jQuery = function(nodeOrSelector){
let nodes = {}; //S1 以后要用到的元素节点伪数组，空对象
if (typeof nodeOrSelector === 'string'){
let temp = document.querySelectorAll(nodeOrSelector)//S2元素节点伪数组
for (let i = 0 ; i < temp.length; i++){
nodes[i]= temp[i]; //S3 去除多余原型链部分
}
nodes.length = temp.length;
} else if (nodeOrSelector instanceof Node){
nodes ={ 0: nodeOrSelector , length:1}; //S4 单个元素也要返回伪数组
}
nodes.addClass = function(classes){
// 更好的写法是
classes.forEach( (value) => {
for (let i=0; i<nodes.length; i++){
nodes[i].classList.add(value);
}
})
}
// 获取元素节点文本内容
// S1 遍历元素节点的伪数组;
// S2 获取其文本内容，并推送到存储的 数组;
// S3 返回数组
nodes.getText = function(){
var texts = [];
for (i = 0; i < nodes.length; i++){
texts.push(nodes[i].textContent); //获取元素节点内容并推入到数组
}
return texts
}
// 设置元素节点文本内容
// S1 遍历元素节点的伪数组;
// S2 设置其文本内容为传入的参数内容
nodes.setText = function(text){
for (i = 0 ; i < nodes.length; i++){
nodes[i].textContent = text;
}
}
// 合并为一个接口
// S1 判断是否传入了参数, 传入了就是设置，没传入就是读取
nodes.text = function(text){
if (text === undefined){
var texts = [];
for (i = 0; i < nodes.length; i++){
texts.push(nodes[i].textContent);
}
return texts
} else {
for (i = 0 ; i < nodes.length; i++){
nodes[i].textContent = text;
}
}
}
return nodes
}
// 调用结果
var node2 = jQuery('ul>li');
node2.addClass( ['blue'] );
// 获取文本内容
// var text = node2.text();
// console.log(text);
// 设置文本内容
node2.text('hi');
믿어요 당신은 이 기사의 사례를 읽었습니다. 방법을 익힌 후, 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주의 깊게 살펴보시기 바랍니다!
추천 자료:
Pixeler 프로젝트 개발에서 EasyCanvas 드로잉 라이브러리 사용에 대한 실제 요약
위 내용은 요소의 텍스트 콘텐츠를 얻을 수 있는 함수를 캡슐화합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
를 추가합니다. 호출 메서드는
mydom.getSiblings(item3); 'a','b']) mydom.getSiblings(item3); mydom.addClass(item3, ['a','b'])而希望的调用方法是
item3.getSibling() / item3.addClass('['a', 'b'])원하는 호출 방법은 item3.getSibling() / item3.addClass('['a', 'b'])성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.