开发常用js方法

          当页面上动态数据较多的情况下可采用手动拼接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. 利用回调函数批量更改元素标签内容

    

                                   

         以下是实现在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元素并不是一种很好的方式,这让以后的维护人员会很吃力!能使框架解决的问题还是建议使用框架!

    

评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值