前端开发经验积累

1、js动态为html页面某个div指定位置添加元素以及自然往后加元素

var mainDiv = document.getElementById('mainDiv');

var div = document.createElement("div");//新建一个div元素

var img = document.createElement("img");//新建一个img元素

img.src = userTemps[i].path;//为img的src赋值

div.appendChild(img);//为新建的div添加子元素——img

mainDiv.insertBefore(div,mainDiv.childNodes[i]);//为从html页面取来的div添加div元素,每一次添加都在它的上一个节点前面,这里有i是因为我的源代码有for遍历

我的代码示例:

  $.ajax({
        type: 'GET',
        url: url + '/api/userTemp/allUserTemp',
        data: {
            "uid": uid
        },
        dataType: "json",
        success: function(data) {
            // console.log(data)
            //渲染模版
            var userTemps = data.data;
            var mainDiv = document.getElementById('mainDiv');
            var addEle = $(".add");
            for(var i = 0;i < userTemps.length;i++){
                var div = document.createElement("div");
                div.className="div"+(i+1);
                div.style.setProperty('float','left');
                div.style.setProperty('margin-top','1%');
                div.style.setProperty('margin-left','8%');
                div.style.setProperty('width','600px');
                div.style.setProperty('height','400px');

                //添加img ,存放模板图片 
                    var img = document.createElement("img");  
                img.src = userTemps[i].path;  
                div.appendChild(img); 
                mainDiv.insertBefore(div,mainDiv.childNodes[i]);
            }

        }
    });

2、js为div动态添加css样式

var div = document.getElementById('mainDiv'); 
div.style.setProperty('float','left');
div.style.setProperty('margin-top','1%');
div.style.setProperty('margin-left','8%');
div.style.setProperty('width','600px');
div.style.setProperty('height','400px');

3、js动态为div添加点击事件,以及获取元素的id值

 img.onclick = function(){      //img为img标签元素
          temIdStr += this.id +",";    //获取img标签的id值
          console.log(temIdStr);
 };

4、js动态为div添加属性值

div.setAttribute("id", "值");//这里的div为获取到的html元素

5、layui刷新父页面

parent.location.reload(); // 父页面刷新

我的示例如下

6、文本框的只读属性  readonly="true"

     下拉框的只读属性   disabled="disabled" 

7、layui前端从数据拿到的数据为null,不显示null,显示空字符串“”,代码实现如下:

<input type="text" name="targetSysInterface" placeholder="" lay-verify= "targetSysInterface" autocomplete="off" class="layui-input" style="width: 200px;background-color:#D3D3D3" readonly value={{ d.targetSysInterface  || ''}}>

8、jquery为html中span和div元素赋值

    $('$span1').html('大大法师法')

    $('#div1').html('DDD');

9、jquery为input的赋值及取值。

   html代码:

  <input id="input1"></input>

   js代码:

   $(‘input1’).val('SSS');

10、jquery动态隐藏div

  $('div1').css('display',none);

11、html中的table里面的单元格内容位置问题,css样式里面添加如下两行代码

	padding-left:20px;
	margin-left:20px;

12、js中的当前时间和java一样

      var date = new Date();

      var year = date.getFullYear();

      var month = date.getMonth()+1;//js中的月份从0开始

      var day = date.getDate();

      var hour = date.getHours();

      var minute = date.getMinutes();

      var second = date.getSeconds();

13、jquery

       $(this).hide()    隐藏当前元素
       $("#test").hide() 隐藏所有class="test"的所有元素 
       $("p").hide()      隐藏所有段落
       $(".test").hide     隐藏所有id="test"的元素

猜你喜欢

转载自blog.csdn.net/Sun_of_Rainy/article/details/85319208
0条评论
添加一条新回复