前端常见的不常见问题

最新推荐文章于 2022-09-19 10:46:36 发布

ccc_____1023

最新推荐文章于 2022-09-19 10:46:36 发布

阅读量411

点赞数

文章标签：前端 angular.js javascript

本文链接：https://blog.csdn.net/caoRN_1206/article/details/126748760

版权

这篇博客总结了前端开发中的一些不常见问题及其解决办法，包括select2在模态层内的失效、IE8下placeholder的支持、jQuery与AngularJS事件冲突、IE8纯CSS实现圆角、AngularJS的watch使用、JSON与String转换、编码转换问题、Chrome的window.close()失效、AngularJS动态执行HTML代码、表格单元格长度平均分布、jQuery UI sortable拖动错位、IE浏览器DOM元素白线、Vue的:class与jQuery的addClass冲突、Echarts2.0以上版本的markLine tooltip问题和Echarts定时动画dispatchAction失效等。

摘要由CSDN通过智能技术生成

前端的随意笔记

标签（空格分隔）：前端不常见的问题 angularjs jquery

一、select2模态层内失效问题

$.fn.modal.Constructor.prototype.enforceFocus = function () { };

modal显示的时候必须让modal的enforceFocus方法制空（所谓的no-op否则的话会有个异常。）。然后隐藏的时候再还原。

二、IE8下placeholder失效

最简单粗暴的解决方式引用jquery-placeholder 或者 angular-placeholder.
主要是看当前框架使用的是什么了，基于angularjs最好是用angular-placeholder,可以直接将插件封装到自己的项目中作为指令使用，目前IE8对textarea支持不好。

三、jquery事件和angularjs结合使用莫名其妙报错

这种问题比较常见了，如果二者结合使用会莫名其妙报错纯属正常，不要慌。因为angular的事件机制和jquery的事件机制完全不同，会发生冲突，但是在angularjs里解决这个问题又很困难，往往jquery的一个模拟用户事件就能简单解决。这时候，你只要写一个简单的定时器就可以解决这个问题：

 $timeout(function () {
     angular.element('table thead tr th input[type="checkbox"]').click();
            }, 0, false);

四、IE8纯css实现圆角圆形

代码如下：

CSS代码：
.box {
    width: 150px; height: 150px;
    line-height: 150px;
    position: relative;
    overflow: hidden;
}
.radius {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 149px dotted;
    /* IE7,IE8圆尺寸要小1像素同时有1像素偏移 */
    margin: 0 0 1px 1px;
    border-width: 0vw;
    margin: 0vw;
    color: #cd0000;
    background-color: currentColor;
}
.text {
    position: relative;
    color: #fff;
    text-align: center;
    font-size: 24px;
}
HTML代码：
<div class="box">
    <i class="radius"></i>
    <p class="text">圆形</p>
</div>

当然，最简单粗暴的方式就是直接background-image，可参考