前端-排坑
目录
- 前端排坑
- 1. 标签选择（通过标签属性）
- 2. docment方法和onclick方法
- 3. 给table的tbody的添加滚动条
- 4. 重新加载JS文件
- 5. 遍历多选
- 6. 全选和单选控制
- 7. 右上角小提示
- 8. 超出行范围的隐藏并以...代替
- 9. 为标签设置滚动条
- 10. 滚动条样式
- 11. 在input框内容的末尾聚焦
- 12. input框的失焦事件
- 13. 前端插件不显示加载好的数据html
- 14. 用JS实现时间格式转换
- 15. 获取当前时间，并格式化
- 16. 触发选择标签的指定事件
- 17. 判断是否未空对象
- 18. 获取某年某月的天数
- 19. 睡眠函数setTimeout(函数, 时长)
- 20. 轮询函数
- 21. 一行代码进行逻辑判断
- 22. 隐藏标签
- 23. 从上到下找到第n个标签
前端排坑
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> <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)
浙公网安备 33010602011771号