开发常用js方法

古城微笑少年丶 2022-07-16 03:14 281阅读 0赞
  1. 当页面上动态数据较多的情况下可采用手动拼接HTML的方式来实现,本文以下内容是介绍手动拼接页面过程中常用的js方法:
  2. **1. 常用获取父节点与兄弟节点的方式:**
  3. var chils= s.childNodes; //得到s的全部子节点
  4. var par=s.parentNode; //得到s的父节点
  5. var ns=s.nextSbiling; //获得s的下一个兄弟节点
  6. var ps=s.previousSbiling; //得到s的上一个兄弟节点
  7. var fc=s.firstChild; //获得s的第一个子节点
  8. var lc=s.lastChile; //获得s的最后一个子节点
  9. **2. jquery查找方法:**
  10. jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤。
  11. jQuery.children(expr) //返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点
  12. jQuery.contents() //返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个
  13. jQuery对象返回,children()则只会返回节点
  14. jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点
  15. jQuery.prevAll(),返回所有之前的兄弟节点
  16. jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点
  17. jQuery.nextAll(),返回所有之后的兄弟节点
  18. jQuery.siblings(),返回兄弟姐妹节点,不分前后
  19. **3. 利用回调函数批量更改元素标签内容**

  1. ![20160930153028306][]

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

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

总结:

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

发表评论

表情:
评论列表 (有 0 条评论,281人围观)

还没有评论,来说两句吧...

相关阅读

    相关 JS方法

    展开操作符 顾名思义,用于对象或数组之前的展开操作符(...),将一个结构展开为列表。 演示一下: let firstHalf = [ 'one', 'two'

    相关 JS方法

     1.数组中插入元素--splice splice方法,数组中删除若干个元素 参数1,删除的开始位置 参数2,删除个数 参数3,添加元素值 app.arr

    相关 js 数组方法

    > 零碎知识点: > ① 当给子元素设置了绝对或者固定定位且父元素设置了`overflow:hidden`,若不给父元素设置高/宽,会出现子元素隐藏的现象 > ② 火狐