随笔记录(jQuery)

1.jQuery 中的append(); 与after(); before(); 有什么区别;

2.jQuery所有的遍历都是一样的,如果需要详细的话,还需要添加过滤的条件;

$.each(); 用法;

有限状态机

有限状态机（Finite-state machine）是一个非常有用的模型，可以模拟世界上大部分事物。

简单说，它有三个特征：

>     * 状态总数（state）是有限的。
>     　　* 任一时刻，只处在一种状态之中。
>     　　* 某种条件下，会从一种状态转变（transition）到另一种状态。

它对JavaScript的意义在于，很多对象可以写成有限状态机。
举例来说，网页上有一个菜单元素。鼠标悬停的时候，菜单显示；鼠标移开的时候，菜单隐藏。如果使用有限状态机描述，就是这个菜单只有两种状态（显示和隐藏），鼠标会引发状态转变。

 var menu = {
    　　    
    　　　　// 当前状态
    　　　　currentState: 'hide',
    　　
    　　　　// 绑定事件
    　　　　initialize: function() {
    　　　　　　var self = this;
    　　　　　　self.on("hover", self.transition);
    　　　　},
    　　
    　　　　// 状态转换
    　　　　transition: function(event){
    　　　　　　switch(this.currentState) {
    　　　　　　　　case "hide":
    　　　　　　　　　　this.currentState = 'show';
    　　　　　　　　　　doSomething();
    　　　　　　　　　　break;
    　　　　　　　　case "show":
    　　　　　　　　　　this.currentState = 'hide';
    　　　　　　　　　　doSomething();
    　　　　　　　　　　break;
    　　　　　　　　default:
    　　　　　　　　　　console.log('Invalid State!');
    　　　　　　　　　　break;
    　　　　　　}
    　　　　}
    　　
    　　};
    　　

JavaScript语言是一种异步操作特别多的语言，常用的解决方法是指定回调函数，但这样会造成代码结构混乱、难以测试和除错等问题。有限状态机提供了更好的办法：把异步操作与对象的状态改变挂钩，当异步操作结束的时候，发生相应的状态改变，由此再触发其他操作。这要比回调函数、事件监听、发布/订阅等解决方案，在逻辑上更合理，更易于降低代码的复杂度。

jquery中的bind(),live(),delegate(),on()有什么区别
bind()直接绑定在已经存在的元素上，但是对在它执行完后动态添加的那些元素上不起作用。因为直接绑定在具体的元素上，响应事件及时，它是出现最早的一种绑定事件的方法。这种方法很浪费资源，引起性能问题，因为它要匹配选择器中的每一项并且挨个设置相同的事件处理程序。如果在页面加载前要处理添加事件的话，会影响加载效率的。在jquery1.7版本以前比较受推崇。在jquery1.7版本之后，官方推荐使用on()方法代替。在jquery3.0版本之后，已经删除该方法。
live()与bind()的实现原理却不同。live()方法附加事件处理程序在document上通过冒泡来关联匹配到相应的元素和事件信息。对新添加的元素依然有效。不需要在每个元素上去绑定事件，而只在document上绑定一次就可以了。可以在document ready之前就可以绑定那些需要的事件。但是jquery1.9版本之后，已经被弃用了。

delegate()更精确的小范围使用事件代理，性能优于live()。它可以自由选择附加的选择器和事件信息的位置，把事件绑定到具体元素的上一级较稳定（不会动态地添加或者删除、变化）的元素上，缩短了事件冒泡的路径。同样对新添加的元素依然有效。在jquery3.0版本之后，已经删除该方法。
on()是以上三种方法的统一。可以使用一个方法，设置不同参数值来实现上述三种方法的功能。简化了jQuery代码库，并删除一个界别的重定向。

.bind()是直接绑定在元素上
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。
.delegate()则是更精确的小范围使用事件代理，性能优于.live()

.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制，今后只要使用这一方法就可以了。.on()方法可以实现.bind()
.live() 甚至 .delegate()的功能

ajax的用法

document.querySelector('#loading').onclick = function () {
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
// 发送ajax 请求 需要 五步
// （1）创建异步对象
var ajax = new XMLHttpRequest();

// （2）设置请求的参数。包括：请求的方法、请求的url。
ajax.open('post', '/carrots-admin-ajax/a/login');
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// （3）发送请求
ajax.send("name="+name+"pwd"+pass);

//（4）注册事件。 onreadystatechange事件，状态改变时就会调用。
//如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。
ajax.onreadystatechange = function () {
// 为了保证 数据 完整返回，我们一般会判断 两个值
if (ajax.readyState == 4 && ajax.status == 200) {
// 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
// 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
console.log('数据返回成功');

// 数据是保存在 异步对象的 属性中
console.log(ajax.responseText);

// 修改页面的显示
document.querySelector('p').innerHTML = ajax.responseText;
}
}
}

两则对比; 使用jQuery 的方法;

  $.ajax({
        url:"http://www.baidu.com",    //请求的url地址
        dataType:"json",   //返回格式为json
        async:true,//请求是否异步，默认为异步，这也是ajax重要特性
        data:{"id":"value"},    //参数值
        type:"POST",   //请求方式
        beforeSend:function(){
            //请求前的处理
        },
        success:function(req){
            //请求成功时处理
        },
        complete:function(){
            //请求完成的处理
        },
        error:function(){
            //请求出错处理
        }
    });

 $("#username").on("blur",function(){
        var username=$("#username").val();
        if(username!=undefined&&username.length>0){
            $.ajax({
                type:"post",//type可以为post也可以为get
                url:"demo2",
                data:{"username":username},//这行不能省略，如果没有数据向后台提交也要写成data:{}的形式
                dataType:"json",//这里要注意如果后台返回的数据不是json格式，那么就会进入到error:function(data){}中
                success:function(data){
                    $("#username-info").css("display","block");
                    if(data.availiable==="0"){
                        $("#username-info").css("color","green");
                    }else{
                        $("#username-info").css("color","red");
                    }
                    $("#username-info").val(data.info);
                },
                error:function(data){
                    alert("用户名提交出现了错误！");
                }
            });
        }else{
            alert("用户名不能为空！")
            return false;
        }
    })