js基础应用小结

一、改变某对象的样式

$("#d_operate_instruction_get").parent().css("display", 'none');

二、获取某对象的属性

1，input对象

var id =$(obj).attr('id');
var email =$(obj).attr('email');

2，select

<select class="form-control" style="height: 24px;margin-left: -725%;border-radius: 	6px;padding:0;position: absolute;margin-top: -23px;" 
	id="mode" name="mode" onchange="switchingMode(this)">
   <option value='pull' selected>拉伸</option>
   <option value='peel'>剥离</option>
   <option value='tear'>撕裂</option>
   <option value='heat-seal'>热封</option>
   <option value='puncture'>穿刺</option>
</select>

<script>
	function switchingMode(obj) {
		  var mode = $("#mode").val();
		  if (mode == 'pull') {
		      $('#pull').css('display', 'table');
		      $('#peel').css('display', 'none');
		      $('#tear').css('display', 'none');
		      $('#puncture').css('display', 'none');
		      $('#heat-seal').css('display', 'none');
		      $('h3.panel-title').find('span')['0'].innerText = '拉伸'
		  } 
		}
</script>

三、给某对象赋值

1，input对象

$('#get_id').val(id);

$('#get_email').attr('value', email);

1，type="datetime-local"时，时间格式要为 2019-09-28T10:28:

$('#da_occurrence_time').attr('value', da_occurrence_time.replace(' ', 'T'));

2，type="date"时，格式要为 2019-09-28，type="time"时，格式要为10:28:

$('#d_next_measurement_date').attr('value', d_next_measurement_date);

3，type为file时:

img标签：

<input type="file" placeholder="" name="da_instruction_image" accept="image/*">

$('#d_operate_flow_chart').attr('src', '/static/' + d_operate_flow_chart);

a标签：

<input type="file" placeholder="" name="da_instruction_file" accept=".xls,.doc,.txt,.pdf">

$('#da_instruction_file').attr('href', '/download/image//' + da_instruction_file);

$('#da_instruction_file')['0'].innerHTML = da_instruction_file;

2，textarea对象

document.getElementById("da_detail").value = da_detail;

3，select对象

var sel = document.getElementById('get_department_id');

sel.options[0].value = department_id;

sel.options[0].text = department_name;

1，for循环添加select中的option对象

function addOption(e) {
        var materiel_list = {{ materiel_list|safe }};
        var option_sel = $(e)['0'];
        if (option_sel.options.length > 1) {
            return
        } else {
            $(e).empty();
            for (var i = 0; i < materiel_list.length; i++) {
                if (i == 0) {
                    option_sel.options.add(new Option(materiel_list[i][2], materiel_list[i][0], true));
                    $(e).parent().parent().find('td')[3].innerHTML = materiel_list[i][1];
                    $(e).parent().parent().find('td').find('input')[0].setAttribute('m_stock', materiel_list[i][3]);
                    $(e).parent().parent().find('td').find('input')[0].setAttribute('materiel', materiel_list[i][2]);
                } else {
                    option_sel.options.add(new Option(materiel_list[i][2], materiel_list[i][0]))
                }
                option_sel.options[i].setAttribute('m_unit', materiel_list[i][1]);
                option_sel.options[i].setAttribute('m_stock', materiel_list[i][3]);
            }
        }
    }

四、ajax调取接口

options = {
    type: "POST",
    url: '{% url 'device_regular_check_manage:get_device_regular_check_situations' %}',
    data: {'id': id},//请求的参数
    dataType: "json",//以json格式返回的数据，不是json就把此行去掉
    error: function (request) {
        alert('connect error');
    },
    success: function (data) {
        var data = data;
        toastr.options.positionClass = 'toast-top-center';
        if (data.code == 200) {
            {#toastr.success(data.info);#}
            console.log(data);
            var situations = data.situations;
            for (var i = 0, length = situations.length; i < length; i++) {
                var html = "";
                var index = $('#tbody1').length;
                if (situations[i].drcs_method == 1) {
                    html += "<tr class=\"formgroup\"><td>" + index + "</td><td><select style=\"width: 100%;padding-top: 2px;padding-bottom: 2px;\" name=\"drcr_device\"><option value=\"\" selected>" + situations[i].device_name + "</option></select></td><td><select style=\"width: 100%;padding-top: 2px;padding-bottom: 2px;\" name=\"drcs_result\" id=\"\"><option value=1 selected>正常</option></select></td><td><input style=\"width: 100%;\" type=\"text\" name=\"drcs_describe\"></td><td><input style=\"width: 100%;\" type=\"text\" name=\"drcs_method\"></td><td>——</td></tr>";
                } else {
                    html += "<tr class=\"formgroup\"><td>" + index + "</td><td><select style=\"width: 100%;padding-top: 2px;padding-bottom: 2px;\" name=\"drcr_device\"><option value=\"\" selected>" + situations[i].device_name + "</option></select></td><td><select style=\"width: 100%;padding-top: 2px;padding-bottom: 2px;\" name=\"drcs_result\" id=\"\"><option value=1 selected>异常</option></select></td><td><input style=\"width: 100%;\" type=\"text\" name=\"drcs_describe\"></td><td><input style=\"width: 100%;\" type=\"text\" name=\"drcs_method\"></td><td>——</td></tr>";
                }
                $('#tbody1').append(html);
                $('#tbody1').find('input')[String(i * 2)].value = situations[i].drcs_describe;
                $('#tbody1').find('input')[String(i * 2 + 1)].value = situations[i].drcs_method;
            }
        }
    },
};
$.ajaxSetup({data: {csrfmiddlewaretoken: '{{csrf_token}}'}});
$.ajax(options);

五、重新加载页面

function refreshPage() {
	window.location.reload();
}