开发常用js方法

古城微笑少年丶 2022-07-16 03:14 191阅读 0赞

当页面上动态数据较多的情况下可采用手动拼接HTML的方式来实现，本文以下内容是介绍手动拼接页面过程中常用的js方法：

**1.  常用获取父节点与兄弟节点的方式：**

var chils= s.childNodes;  //得到s的全部子节点
    
    var par=s.parentNode;   //得到s的父节点
    
    var ns=s.nextSbiling;   //获得s的下一个兄弟节点
    
    var ps=s.previousSbiling;  //得到s的上一个兄弟节点
    
    var fc=s.firstChild;   //获得s的第一个子节点
    
    var lc=s.lastChile;   //获得s的最后一个子节点

**2. jquery查找方法：**

jQuery.parent(expr)  找父亲节点，可以传入expr进行过滤。

jQuery.children(expr)  //返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点
    
    jQuery.contents()  //返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个
    
    jQuery对象返回，children()则只会返回节点
    
    jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点
    
    jQuery.prevAll()，返回所有之前的兄弟节点
    
    jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点
    
    jQuery.nextAll()，返回所有之后的兄弟节点
    
    jQuery.siblings(),返回兄弟姐妹节点，不分前后

**3. 利用回调函数批量更改元素标签内容**

**    **

![20160930153028306][]

**         **以下是实现在div模块之间插入一个元素，保证div元素的id是按照从小到大顺序排列的方式的实践代码：

function alterId(parentDiv){
    		var divId=parentDiv.attr("id"); //获取传入标签元素ID
    		var divNextId=parentDiv.next().attr("id");  //兄弟节点Id
    		if(typeof(divNextId)!="undefined"){  //判断id是否定义
    			if(divNextId.length>40){   //id长度是否大于40
    				var subStr=divNextId.substr(0,divNextId.length-1);  //截取字符串
    				var subNum=parseInt(divNextId.substring(44,divNextId.length));  //截取Id后面的序号
    				var newId=subStr+(subNum+1);
    				parentDiv.next().attr("id",newId);
    				var nodes=parentDiv.next().children();
    				var htmlVlaue=parentDiv.next().children(）[3].childNodes[0].childNodes[2].innerHTML;
    				var ddd=htmlVlaue.substring(0,htmlVlaue.length-1);
    				parentDiv.next().children()[3].childNodes[0].childNodes[2].innerHTML="("+(parseInt(htmlVlaue.substring(1,htmlVlaue.length-1))+1)+")";
    				alterId(parentDiv.next(),true);
    					
    				}
    		}

总结：

使用js去动态拼接html元素并不是一种很好的方式，这让以后的维护人员会很吃力！能使框架解决的问题还是建议使用框架！

**    **

[20160930153028306]: /images/20220716/4eded09af8ca41f1b1419673bb89a559.png