前端开发经验积累

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代码：

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"的元素

前端开发经验积累

猜你喜欢