前端-排坑

前端排坑

1. 标签选择(通过标签属性)

$('input[name="company_type"]') 

2. docment方法和onclick方法

$(document).on('change', 'input[name="company_type"].mg-checkbox', function () {})

# 一般新生成(页面加载完后,通过点击或其他操作新生成)的标签,这样的标签需要用document方法来绑定事件,或者在标签内部直接绑定。以点击事件为例:
(1) $(document).on('click', 'input[name="company_type"].mg-checkbox', function () {})
(2) <div onclick="remove_archives_data(this, ' + result.user_id + ', \'' + val + '\' ,0 )"></div>

其中:' +参数+ '  为前端语法,参数为前端的变量

在标签中绑定onclick事件时,无论这个标签什么时候生成,都没有关系。但 内部所传的参数,为字符串时,需要以转义符 \'参数\' 将参数引住,否则会报undefined错误

onclick事件的阻止事件冒泡的方法为:在函数中添加下面三行代码,只要在函数内,什么位置都行
var e = window.event || arguments.callee.caller.arguments[0];
e.stopPropagation();
e.preventDefault();

3. 给table的tbody的添加滚动条

#diamond_list_table  为table的id
#diamond_list 为tbody的id

#diamond_list {
            display: block;
            height: 500px;
            overflow-y: scroll;
			overflow-x: hidden;
			
        }
        
#diamond_list_table thead {
	display: table;
	width: 100%;
	table-layout: fixed;
}     
#diamond_list tr {
	display: table;
	width: 100%;
	table-layout: fixed;
}     
# width: 100%;可以自由调整,保证列与列之间的间隔和每列的上下对齐

4. 重新加载JS文件

$.getScript("/manage/js/permission_manage.js")  # 引号内是JS文件的路径

5. 遍历多选

1. 普通遍历
(1)$("input:checked").each(function(){
 //由于复选框一般选中的是多个,所以可以循环输出 
 alert($(this).val()); 
});
(2)m_choose_word为input标签的类
$(".m_choose_word:checked").each(function(){
 //由于复选框一般选中的是多个,所以可以循环输出 
 alert($(this).val()); 
});

2. 取得选中标签的属性值
function batch_translate() {
            var $chooseWord = $('.m_choose_word');  // m_choose_word为每个选择框标签的类
            $chooseWord.each(function () {
                if ($(this).prop('checked')) {
                    var this_input = $(this);
                    var m_word = this_input.attr('m_word');
                    if (m_word === '' || m_word === undefined) {
                        return false
                    }
                    share_translate({words: m_word, baidu_to: 'zh', google_to: 'zh'}, function (result) {
                        if (result.state === 1) {
                            this_input.parent().parent().next().find("a").text(result.words)
                        }
                    });
                }
            });
        }

3. 将遍历的选中标签的值存储在列表中
        function delete_emp_many() {
            if (confirm(msg)) {
                var id_list = [];
                var $chooseEmp = $('.m_choose_emp');
                $chooseEmp.each(function () {
                    if ($(this).prop('checked')) {
                        var empId = $(this).attr('emp_id');
                        id_list.push(empId);
                    }
                });
                if (id_list.length === 0) {
                    mg_error('请先选择要删除的数据');
                    return false
                }
                $.ajax({
                    url: '/del/emps',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        'id_list': JSON.stringify(id_list),
                    },
                    success: function (data) {
                        if (data.state === 0) {
                            search()
                        } else if (data.state === 1) {
                            if (data.redirect) {
                                window.location.href = data.redirect
                            } else if (data.message) {
                                alert(data.message)
                            }
                        }
                    }
                })
            }
        }

6. 全选和单选控制

 <!-- 靠js控制全选和取消全选 -->
    
    <!-- 单独的父复选框(最上面的全选控制标签)-->
    <th id="checkallTh"><input type="checkbox" id="checkAll" name="checkAll"/>
    <!-- 所有子复选框 -->
    <input type="checkbox" emp_id="' + emp.ID + '" class="m_choose_emp" name="checkItem"/>
    
    
    <script>
        $(function () {
            function initTableCheckbox() {
                /*“全选/反选”复选框*/
                var $thr = $('table thead tr');
                var $tbr = $('table tbody tr');
                var $checkAll = $thr.find('input');
                $checkAll.click(function (event) {
                    /*将所有行的选中状态设成全选框的选中状态*/
                    $tbr.find('input').prop('checked', $(this).prop('checked'));
                    /*并调整所有选中行的CSS样式*/
                    if ($(this).prop('checked')) {
                        $tbr.find('input').parent().parent().addClass('warning');
                    } else {
                        $tbr.find('input').parent().parent().removeClass('warning');
                    }
                    /*阻止向上冒泡,以防再次触发点击操作*/
                    event.stopPropagation();
                });
                /*点击全选框所在单元格时也触发全选框的点击操作*/
                var $checkAllTh = $('#checkallTh');
                $checkAllTh.click(function () {
                    $('tbody').find('input').click();
                });

                /*点击每一行的选中复选框时*/
                $tbr.find('input').click(function (event) {
                    /*调整选中行的CSS样式*/
                    $(this).parent().parent().toggleClass('warning');
                    /*如果已经被选中行的行数等于表格的数据行数,将全选框设为选中状态,否则设为未选中状态*/
                    $checkAll.prop('checked', $tbr.find('input:checked').length == $tbr.length ? true : false);
                    /*阻止向上冒泡,以防再次触发点击操作*/
                    event.stopPropagation();
                });
                /*点击每一行时也触发该行的选中操作*/
                $tbr.click(function () {
                    $(this).find('input').click();
                });
            }

            initTableCheckbox();
        });
    </script>

7. 右上角小提示

<li role="presentation" class="text-center" id="follow_now_table"
                        style="width: 16%;font-weight: bold;font-size: 15px"><a
                            href="javascript:void(0)" id="follow_now_a"
                            onclick="table_select(this,'6')">跟进中 <span id="count_follow_now"></span>&nbsp;<span
                            id="follow_now_seven_before" class="special_sign"></span> </a></li>
  • 对应的css样式
.special_sign {
    color: red;
    position: absolute;
    top: 9px;
    text-align: center;
    font-size: 9px;
    padding: 2px 3px;
    line-height: .9;
}

# 还有个 right 属性,可以自由控制小标记的位置,这里暂时不需要

8. 超出行范围的隐藏并以...代替

.my_wrap {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 85%;
}

9. 为标签设置滚动条

// 先设置最大高度,再设置滚动条的样式

(1)只显示x轴的滚动条,设定宽度,再设置 overflow-y:hidden 样式属性
(2)只显示y轴的滚动条,设定高度,再设置 overflow-x:hidden 样式属性
(3)显示x轴和y轴的双滚动条,设定宽度,再设置 overflow-y:auto 或 overflow-x:auto样式属性

// 例如:
<ul class="dropdown-menu" role="menu"
	style="max-height: 80px;overflow-x: hidden">
	<li><a href="javascript:void(0)"
		   onclick="choose_data_type(this, '1')">访客转化率</a>
	</li>
	<li><a href="javascript:void(0)"
		   onclick="choose_data_type(this, '2')">VIP续费率</a>
	</li>
	<li><a href="javascript:void(0)"
		   onclick="choose_data_type(this, '3')">钻石续费率</a>
	</li>
</ul>

10. 滚动条样式

<div class="chat_customer"></div>

# 对应css样式

.chat_customer {
    height: 540px;
    overflow-y: auto;
    overflow-x: hidden;
}

.chat_customer::-webkit-scrollbar {
    width: 5px;
}

.chat_customer::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #8c85e6;
}

11. 在input框内容的末尾聚焦

//obj为input元素, 原理是先将input框的value清空再聚焦,最后再给input框value赋值
var val=obj.val();
obj.val('').focus().val(val)

12. input框的失焦事件

input 框的失焦事件是鼠标在点击弹起之后才触发的,所以当需要点击input框之外的地方,而不想input失焦时,给点击的标签添加 onmousedown="函数名(this)" 鼠标按下事件即可

13. 前端插件不显示加载好的数据html

  • 例如:模态框在弹出时,要动态加载数据生成html,展示在模态框中,但可能会只弹出弹出框,而包含数据的html没有加载进去。
  • 解决方法:一般在往弹出框中新加入html前,先将模态框的属性变为块级标签

$('#modal_pop_line_chart').css('display', 'block')  // modal_pop_line_chart为模态框id
$(".click_line_chart").html('<div>测试</div>')  // click_line_chart为模态框body中的一个标签的类

14. 用JS实现时间格式转换

var new_time =  new Date(Date.parse(变量)).Format("yyyy-MM-dd hh:mm:ss");

15. 获取当前时间,并格式化

// add_day 为当前时间加上多少天
function get_curr_date(add_day) {
                        
	var timestamp = Date.parse(new Date())
	if (add_day ===0){
		date2 = timestamp;
	}else{
		date2 = timestamp;
		date2 = date2 + add_day * 24 * 60 * 60 * 1000;
	}

	date2 = new Date(date2);
	var y = date2.getFullYear();
	var m = date2.getMonth() + 1;
	m = m < 10 ? ('0' + m) : m;
	var d = date2.getDate();
	d = d < 10 ? ('0' + d) : d;
	var h = date2.getHours();
	h = h < 10 ? ('0' + h) : h;
	var minute = date2.getMinutes();
	var second = date2.getSeconds();
	minute = minute < 10 ? ('0' + minute) : minute;
	second = second < 10 ? ('0' + second) : second;
	return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
                    }

16. 触发选择标签的指定事件

// jQuery 的 trigger 触发器方法可以传递两个参数,事件名称和数组形式的参数
trigger('事件',[参数]) 方法

// 不传参
$('#data_batch').val('2').trigger('change');  // id为data_batch	的标签值设为2,并触发change事件

// 传参
$('#text_user').val('2').trigger('change',['操作成功']);

17. 判断是否未空对象

方法一:$.isEmptyObject(data)	// 返回true或者false		

方法二:if(JSON.stringify(data) === "{}"){} 

18. 获取某年某月的天数

function getMonthDay(year, month) {
	  let days = new Date(year, month, 0).getDate()
	  return days
	}

19. 睡眠函数setTimeout(函数, 时长)

function search() {
        代码块。。。
        }
setTimeout("search()", 1200)  # 1.2秒后执行search函数,时间单位为毫秒

20. 轮询函数

window.setInterval(函数名, 毫秒);  // 每多少毫秒执行一次某函数

// 例如
window.setInterval(base_count_not_read, 1000 * 15);  // 每15秒统计未读数据,更新聊天室未读消息提醒

21. 一行代码进行逻辑判断

'+ 变量 +'  // 为js的格式化输出方法

`${变量}`  // 为js的格式化输出方法

逻辑语法: ? 结果1 : 结果2 

// 例如
'+ (row.wake_install_app === 'F' ? '' : 'disabled') +'  // 变量的值是否等于F,等于则结果为空,否则为disabled

22. 隐藏标签

方法一:style="visibility:hidden"
方法二:style="display:none"

/* 标签的visibility样式为 ""(空) 或 visible 时是显示状态,为"hidden"时是隐藏状态;
"hidden"时,标签占据位置;
标签的display样式为""(空)时是显示状态,为"none"时是隐藏状态;
"none"时,标签不占位置 */

23. 从上到下找到第n个标签

m_div的tr父标签中,找到第5个tr标签
$('#m_div').parents('tr').find('td').eq(5)
posted @ 2020-09-03 18:14  BigSun丶  阅读(156)  评论(0)    收藏  举报