前端基础知识工作归结

[toc]

前言

由于工作需要，所以巩固一下前端的基础知识，因为不是专职前端coder，所以补的都是基础的基础，勿喷…😭

1. jquery给动态生成的元素添加绑定事件

$(parentSelector).on('event', childSelector, function(){
 ...
})

说明：选择动态元素的某个父级静态元素来绑定，父级元素必须为静态的，否则不效果

2. append,prepend,after,before区分

Ex:

<script type="text/javascript" src="http://common.jb51.net/jslib/jquery/jquery.min.js"></script>
<div class="testdiv">
    <ul>
    <li>第一个li标签</li>
    </ul>
</div>
<script>
    //append
    $('.testdiv ul').append('<li>append 插入的li</li>');
    //prepend
    $('.testdiv ul').prepend('<li>prepend 插入的li</li>');
    //after
    $('.testdiv ul').after('<li>after 插入的li</li>');
    //before
    $('.testdiv ul').before('<li>before 插入的li</li>');
</script>

运行结果：

<div class="testdiv">
    <li>before 插入的li</li>
    <ul>
        <li>prepend 插入的li</li>
        <li>第一个li标签</li>
        <li>append 插入的li</li>
    </ul>
    <li>after 插入的li</li>
</div>

3. js中的 || 与 && 运算符

这个都不会，是不是该打脸…

公式
表达式a && 表达式b :
计算表达式a（也可以是函数）的运算结果，
如果为 True, 执行表达式b（或函数），并返回b的结果；
如果为 False，返回a的结果；

表达式a || 表达式b :
计算表达式a（也可以是函数）的运算结果，
如果为 Fasle, 执行表达式b（或函数），并返回b的结果；
如果为 True，返回a的结果；

转换规则
对象为true；
非零数字为true；
零为false;
非空字符串为true；
空字符串为法false;
undefined为false
其他为false；

Ex:

var  a =  obj || " "  ;     //如果 obj 为空，a就赋值为 “ ” ；
var  a = check() &&  do();    //如果check()返回为真，就执行do()，并将结果赋值给 a;

||和&& 运算符的优先级参考文章

4. js匿名函数的使用

实际上这两种写法都是匿名函数的写法。
第一种写法 var x = ( function( ){ … })( … ); 比较常见，它是先声明匿名函数，再执行。
第二种写法 var x = ( function( ){ … }( … ) ); 它是先强制执行表达式。（在js中，圆括号运算符与[]、.运算符具有最高的优先级）
其实你调试一下就知道了

var x = (function(){
    alert("你看不见我执行");
    return 1;
})
console.log(x);

var x = (function(){
    alert("竟然被你看见了");
    return 1;
})();
console.log(x);

var x = (function(){
    alert("竟然又被你看见了");
    return 1;
}())
console.log(x);

5. onlick onsubmit submit 的执行顺序

<form action="#" method="POST" name="A" onsubmit="return X();">
    <input type="text" value="" />
    <input onclick="Y()" type="submit" value="提交" />
</form>

自己写X()、Y()函数，我们会发现，这几个函数的执行顺序

1) onclick: Y()
2) onsubmit: X()
3) submit()

只要 onclick 未 return false 那么就继续执行 onsubmit
只要 onsubmit 未return false 那么表单就被提交出去了
另外一点写法上注意一定要 “return X();” 才能取得函数的返回值，否则只是调用函数，返回值未被传递

正确写法：

<!-- X() 返回false后，form的submit会被终止 -->
<input type=submit onclick=”return X();”>

6. JavaScript 之 回调函数的返回值给全局变量赋值问题

jQuery 中，会遇到$.get(url,data,callback,type) 或 $.post(url,data,callback,type) 返回值给全局变量赋值的问题：

例如:

<script language="JavaScript">
    var count= 1;
    $.post(
        "<%=path%>/AdminCenter/SysFunction/GetOrderNo",
        　　　　{ parentCode: pc },
        function (data) {
            count = data.result;
        },
        "json");
    alert(count);
</script>

问题：想用JavaScript 取testController中GetIsExist的值，赋给test.aspx中的全局变量 count，可是返回的值只在$.getJSON中起作用count为8,在全局中显示时仍为1,请问该问题如何解决？

问题原因：Ajax是默认都是异步JavaScript&XML，浏览器解析页面时，JS只管执行当前代码，顺序执行。发送请求了，那是请求响应的事，它不管这些，只管继续执行在它面前的代码，所以不等Ajax响应返回，
便会继续向下执行，这时你的全局 count 仍然是初始值（在这里为1），如果你在回调函数function(data){}内部alert的话，就会是8了。

方法一：直接在回调函数中实现操作

<script language="JavaScript">
    var count= 1;
    $.post(
        "<%=path%>/AdminCenter/SysFunction/GetOrderNo",
        { parentCode: pc },
        function (data) {
            count = data.result;
            alert(count);
        },
        "json");
</script>

方法二：在回调函数外实现,把异步改为同步 async: false

<script language="JavaScript">
    var count= 1;
　　 $.ajax({
        url: "<%=path%>/AdminCenter/SysFunction/GetOrderNo",
        async: false, //改为同步方式
        type: "POST",
        data: { parentCode: pc },
        success: function (data) {
            count = data.result;
        },
        dataType:"json"
    });
    alert(count);
</script>

7. jQuery中$.fn的用法示例介绍

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效，
如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了.
那么你可以这样子：$(“#div”).abc();

jQuery为开发插件提拱了两个方法，分别是：

jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。

fn是什么东西呢。查看jQuery代码，就不难发现。
复制代码 代码如下:

jQuery.fn = jQuery.prototype ={
　　　init: function( selector, context ){//....　 
　　　//......
};

原来 jQuery.fn =jQuery.prototype.对prototype肯定不会陌生啦。
jQuery便是一个封装得非常好的类，比如我们用语句　$(“#btn1”) 会生成一个 jQuery类的实例。

jQuery.extend(object);　为jQuery类添加添加类方法，可以理解为添加静态方法。如：
复制代码 代码如下:

$.extend({
　　add:function(a,b){return a+b;}
});

便为　jQuery　添加一个为add　的“静态方法”，之后便可以在引入 jQuery　的地方，使用这个方法了，

$.add(3,4); //return 7

jQuery.fn.extend(object);对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。
jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert当前编辑框里的内容。可以这么做：

jQuery代码
复制代码 代码如下:

$.fn.extend({
    alertWhileClick: function(){
        $(this).click(function(){
            alert($(this).val());
        });
    }
});

参考：

jQuery.fn和jQuery.prototype区别
jQuery.prototype的含义
.extend()方法和(function(){})(jQuery)详解
$(function(){})和(function(jq){})(jQuery)区别

8. JavaScript unshift() 方法

9. form表单提交,ajaxForm()提交,ajaxSubmit()提交区别

参考另一篇文章

10. avalon.mix(),$.extend(),Ojbect.assign(),js合并两个对象的不同点

参考:

关于$.extend()深拷贝和浅拷贝
Ojbect.assign()