前端-排坑

1|0前端排坑

1|11. 标签选择（通过标签属性）

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

1|22. 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();

1|33. 给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%;可以自由调整，保证列与列之间的间隔和每列的上下对齐

1|44. 重新加载JS文件

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

1|55. 遍历多选

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)
                            }
                        }
                    }
                })
            }
        }

1|66. 全选和单选控制

 <!-- 靠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>

1|77. 右上角小提示

<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 属性，可以自由控制小标记的位置，这里暂时不需要

1|88. 超出行范围的隐藏并以...代替

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

1|99. 为标签设置滚动条

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

（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>

1|1010. 滚动条样式

<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;
}

1|1111. 在input框内容的末尾聚焦

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

1|1212. input框的失焦事件

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

1|1313. 前端插件不显示加载好的数据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中的一个标签的类

1|1414. 用JS实现时间格式转换

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

1|1515. 获取当前时间，并格式化

// 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
                    }

1|1616. 触发选择标签的指定事件

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

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

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

1|1717. 判断是否未空对象

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

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

1|1818. 获取某年某月的天数

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

1|1919. 睡眠函数setTimeout(函数, 时长)

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

1|2020. 轮询函数

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

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

1|2121. 一行代码进行逻辑判断

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

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

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

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

1|2222. 隐藏标签

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

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

1|2323. 从上到下找到第n个标签

m_div的tr父标签中，找到第5个tr标签
$('#m_div').parents('tr').find('td').eq(5)

__EOF__

本文作者：BigSun丶
本文链接：https://www.cnblogs.com/Mcoming/p/13609129.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！

posted @ 2020-09-03 18:14 BigSun丶阅读(151) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构

公告

前端-排坑

发表于 2020-09-03 18:14阅读次数：151评论次数：0

总结

关注

跳至底部

昵称： BigSun丶
园龄： 5年6个月
粉丝： 13
关注： 10

+加关注

质疑IT，理解IT，成为IT

前端-排坑

1|0前端排坑

1|11. 标签选择（通过标签属性）

1|22. docment方法和onclick方法

1|33. 给table的tbody的添加滚动条

1|44. 重新加载JS文件

1|55. 遍历多选

1|66. 全选和单选控制

1|77. 右上角小提示

1|88. 超出行范围的隐藏并以...代替

1|99. 为标签设置滚动条

1|1010. 滚动条样式

1|1111. 在input框内容的末尾聚焦

1|1212. input框的失焦事件

1|1313. 前端插件不显示加载好的数据html

1|1414. 用JS实现时间格式转换

1|1515. 获取当前时间，并格式化

1|1616. 触发选择标签的指定事件

1|1717. 判断是否未空对象

1|1818. 获取某年某月的天数

1|1919. 睡眠函数setTimeout(函数, 时长)

1|2020. 轮询函数

1|2121. 一行代码进行逻辑判断

1|2222. 隐藏标签

1|2323. 从上到下找到第n个标签

公告

BigSun丶

前端-排坑

搜索

常用链接

随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论