js总结篇

最新推荐文章于 2023-05-26 00:39:55 发布

sf131097

最新推荐文章于 2023-05-26 00:39:55 发布

阅读量256

点赞数

分类专栏：面试

本文链接：https://blog.csdn.net/sf131097/article/details/88554990

版权

面试专栏收录该内容

5 篇文章 0 订阅

订阅专栏

js总结

ES6特性：

1、for of 成员，for in 索引；
2、箭头函数

（arg， arg1， ...)=>{ return ... } 因为箭头函数中没有this，因此我们也就无从谈起用call/apply/bind来改变this指向

3、解析结构
var loading = props.loading;
var clicked = props.clicked;
const { loading, clicked } = props;
数组解析结构
const arr = [1, 2, 3];
const [a, b, c] = arr;
4、函数默认值

5、展开运算符 ...扩展参数，数组和对象（字典）
6、字面量当属性与值的变量同名时省略属性名

7、class-constructor，super，extends

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

react：

render（class props state ，node）
constructor---getDerivedStateFromProps(componentWillMount 不安全避免）---render---componentDidMount 一次
更新组件触发
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
卸载组件触发
componentWillUnmount

当调用setState的时候，会重新渲染组件

合成事件，组件的装载和卸载自动处理绑定的事件；addEventListener，removeEventListener

为了协调多个子组件或者父子组件通信，通常声明到父组件上，通过props来向下传递；重构时候也常常提升state到父组件。

无自己状态组件通常使用参数是props的函数。

-------------------------------------------------

1、

相对父位置，有单位	jq	css('left')
相对父位置，有单位	js	style.left
doc左边缘，无单位	jq	offset().left
doc左边缘，无单位	js	offsetLeft

2、#datatype:"json"替代eval'('+arg+')',
3、for (var x in arg.parts){
arg.parts[x].part //json数组用[]访问,key用.号访问
}

//第一个字节点
4、node.find("li").first().addClass("active");
node.find("li :first-child")

5、查找是否存在字符串，x.indexOf("")>=0
.replace(/[^0-9]/ig, "")去掉非数字部分

6、嵌套ajax，由于异步特性，第二次的ajax数据会读取不出来，解决办法
#两次请求放在服务器端一起出来发送回来方便
#而把第一次请求的结果存放在html里面，再次请求时候读取出来，逻辑复杂点
#同步ajax，网页容易卡住

7、#获取input $(" input[ name='test' ] ").val()
#focus样式在已经被设置样式了就无效了
#灵活运用删除属性 dialog.find("input[type='text']").css("border", "");

8、也可以用标签ul li换行，实质是display: list-item
setTimeout(function(){cleardialog(div);}, 1000);//带参数的延时函数， setInterva

9、#mouseenter和mouseout配合使用的bug：
mouseenter到子元素的时候，触发了mouseout，清除了还未加载进来的异步操作的子元素，导致移入到子元素看不到
mouseover：当鼠标指针位于元素上方时，会发生 mouseover 事件。
mouseenter:当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseout：不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
mouseleave：只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

10、#jquery中获取元素的大小和位置信息
$(this).width()/height()
$(this).position().left()/top() //相对位置
$(this).innerWidth()/outerWidth()
$(this).offset().top/left //绝对位置
$(this).scrollLeft()/scrollTop //滚动位置

11、#cokie的存取
$.cookie("server_list", server_list);
$.cookie("server_list"）

localStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据。sessionStorage 一样只是在同源的当前窗口关闭前有效。
//设置：
localStorage.setItem("dat", "456");
//获取：
localStorage.getItem("dat");
//删除
localStorage.removeItem("dat");

12、#contentchanged文本内容变化
$(".container h3").bind("contentchanged", function () {
aleart('chagned')
})
$(".container h3").trigger('contentchanged');

13、/*因为浮动使得li脱离正常的文档流，li的父元素ul的高度变为0，这时，与ul相邻的p元素的位置就上去了。当你设置ul的高度后，ul的一些性质不再受其内li浮动的影响， p因此就下去了。*/设置高度
/*因为在一个区块内的元素被应用了float之后，那么整个box的高度对就不以被浮动对象的高度为标准了。 */overflow: auto;解决

14、读取上次数据，并找到上次数据在ul中的位置设置active

for (var i=0; i<arg.length;i++){
x = arg[i];
node.append('<li class="server">'+x.serverip+'<i class="iconfont icon-youjiantou"></i></li>');
if(current_server == x.serverip){
node.find("li:first-child").addClass("active");
}
}

15、#弹框根据偏移得到实际居中效果

div.css("left", window.scrollX+(window.innerWidth - div.width()) / 2).css("top", window.scrollY+(window.innerHeight - div.height()) / 2);

16、jQuery 的 index() 方法返回指定元素相对于其他指定元素的 index 位置，因此可用于获取当前li元素顺序。

17、通用的高亮

function set_active(nodes, label, node) {

$.each(nodes, function () { $(this).find(label).removeClass("active"); });//移除父控件下的active

node.addClass("active"); //高亮

}

18、

19、活动元素的子元素的样式和监听
.volume_group li.active .icon-xiala:hover{color: blue;}
$(".volume_group").on("mouseenter", ".active .icon-xiala", function () {}
20、鼠标是否在元素内的判断
$(".volume_group").on("mouseleave", ".active .icon-xiala", function (event) {
var div = $(".group_menu");
var x=event.clientX;
var y=event.clientY;
var divx1 = div.offset().left;
var divy1 = div.offset().top;
var divx2 = div.offset().left + div.width();
var divy2 = div.offset().top+ div.height();
if( x < divx1 || x > divx2 || y < divy1 || y > divy2){
$(".group_menu").css("display","none");
}
});

21、记录一次跨页面定时器停止不下来的问题：
第一认为js文件跨文件的全局变量不能共享，实际上是可以的；
第二，onload函数$()在html内嵌js之后执行，所以停止定时器之后，总是重新启动定时器了。

所以跨页面的时候，可以调用原来页面的函数来停止原来的定时器。

22、字典的遍历

for (var x in arg.parts) { console.log(x+":"+arg.parts[x])}

23、select操作

$("select ").val();可以设置或者获取选中option的值，而"select option:selected"用来获取option，来操作其他属性

复选框的勾选设置和获取，$().prop("checked", true);

单选框的设置和获取$("input:radio:checked").val()

24、删除ul的除第一的所有li

$().find("li").not(":first").remove();

25、对jquery的find（）结果判断

.length>0则查找到，否则查找不到

26、eval本身有问题以{}方式包裹，被当作语句块，所以有问题，而[]的方式的没有问题，所以最好都加上'(+arg'+')'

27、//通用弹出提示框
function promption(text) {
   $('.mask').show();//在全局放置一个div，显示时候遮罩整个页面
   $(".body_dev").find(".tip_dialog").remove();//在整个页面的div里面放置body_dev的class，追加一个相对为值的div，div的z-index和‘mask’的一样
   $(".body_dev").append(' <div class="tip_dialog"> <div class="title"">提示</div> <div class="content">'+text+'</div> </div>');
var div = $(".body_dev").find(".tip_dialog");
div.css("left", window.scrollX+(window.innerWidth - div.width()) / 2).css("top", window.scrollY+(window.innerHeight - div.height()) / 2);
};
$(".body_dev").on("click",'.tip_dialog',function () {
   $(this).remove();
   $('.mask').hide();
});

28、ajax的html返回成功200，没有进入success：
后台返回的json数据是一个纯String类型的对象时，前端dataType属性设置为json后，会认为这个不是标准的json格式，所以就去执行error对应的方法了；2也需要检查后端传过来的数据是xml，json，html格式。

29、国际化

jQuery.i18n.properties({
    name : sourceName, //资源文件名称
    path : '../static/i18n/' + i18nLanguage +'/', //资源文件路径
    mode : 'map', //用Map的方式使用资源文件中的值
    language : i18nLanguage,
    callback : function() {//加载成功后设置显示内容
        var insertEle = $(".i18n");
        insertEle.each(function() {
            // 根据i18n元素的 name 获取内容写入
            $(this).html($.i18n.prop($(this).attr('i18nname')));
        });
        var insertInputEle = $(".i18n-input");
        insertInputEle.each(function() {
            var selectAttr = $(this).attr('selectattr');
            if (!selectAttr) {
                selectAttr = "value";
            };
            $(this).attr(selectAttr, $.i18n.prop($(this).attr('selectname')));
        });

        var insertPlaceholderEle = $(".i18n-placeholder");
        insertPlaceholderEle.each(function() {
            $(this).attr("placeholder", $.i18n.prop($(this).attr('placeholdername')));
        });
    }
});

30、有时序要求的js全局变量，比如国际化才直到的一个字典

需要在js里面声明，等js加载完成---$(function(){ Network_Type = $.i18n.prop("mng_network") });时候---初始化，再在js里使用

31、js正则

new RegExp('^\d{2}:\d{2}$','igm'); //i忽略大小写，g全局多次匹配，m多行匹配一个/str/igm
str.func(reg) //search, split,replace,match

32、localStorage 布尔类型设置和使用用Number转换

33、textarea光标始终在文本末尾
$(".progress textarea")[0].scrollTop=$(".progress textarea")[0].scrollHeight;

34、延迟触发解决window.resize()结束后才开始触发的事件,而不会窗口变化时多次触发

clearTimeout(re_t);

re_t=setTimeout(function(){}, 100);

35、移动弹框窗口

//移动窗口
$(".pop_ups, .pretreatment").on("mousedown", MouseMove);
$(".body_dev").on("mousedown",'.tip_dialog',MouseMove);

function MouseMove(evt) {
    var $trgt = $(event.target);
    if ($trgt.hasClass("fixed")) return;

    var $this = $(this);
    var el = $this[0];
    var oevent = evt || event;
    var distanceX = oevent.clientX - el.offsetLeft;//鼠标按下时候，获取鼠标位置和边框的左上角的相对位置
    var distanceY = oevent.clientY - el.offsetTop;

    $(document).bind("mousemove", function (evt) {
        var oevent = evt || event;
        $this.css('margin','unset');
        el.style.left = oevent.clientX - distanceX + 'px';//鼠标移动时候，对话框根据鼠标的当前位置，并加上偏移成为新的位置
        el.style.top = oevent.clientY - distanceY + 'px';
    });
    $(document).bind("mouseup", function () {
        $(document).unbind("mousemove");
        $(document).unbind("mouseup");
    });
}
$('.pop_ups').on("mousedown", 'select', function () {
   $(this).stopPropagation();
})

sf131097

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js总结篇

js总结 ES6特性：1、for of 成员，for in 索引；2、箭头函数（arg， arg1， ...)=>{ return ... } 因为箭头函数中没有this，因此我们也就无从谈起用call/apply/bind来改变this指向3、解析结构var loading = props.loading;var clicked = props.clicked;...
复制链接

扫一扫

专栏目录