Jquery的学习，选择器、事件、Ajax请求

1.Jquery选择器

  1.1 id选择器：

$("#test")

   比如选中id为buildingNum的标签对应的值：

$("#buildingNum").val();

  1.2 class选择器：

$(".test")

  比如选中class为addForm的表单值，并序列化。

 var addData = $(".addForm").serializeArray();
             
                // 将数据转换为对象, 注意发送时将对象转为JSON字符串
                var jsonObj={};
                $(addData).each(function(){
                    jsonObj[this.name]=this.value;
                });

  1.3 标签元素加name的选择器

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

  比如拿到input框中name为buildingNum的值

var buildingNum = $("input[name='buildingNum']").val();

2.Jquery的事件

  2.1 点击事件：click

  比如说给id为addBtn的元素绑定点击事件

$("#addBtn").click(function(){
    // 动作触发后执行的代码!!
});

   2.2  其他事件：

   其他鼠标的事件，还包括：dblclick(）、mouseenter()等。

3.Jquery的Ajax

  3.1 get方法(不重要)，如下：

$.get(URL,callback);
或
$.get( URL [, data ] [, callback ] [, dataType ] )

  实例：点击按钮后发送get请求

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

  3.2 post方法（不重要）,如下:

$.post(URL,callback);
或
$.post( URL [, data ] [, callback ] [, dataType ] )

  实例如下：

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
    function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

  3.3 最常用的方式（重要）

  用$.ajax的方式，指定type：POST/GET,data需要传给接口的数据，success成功的回调，error失败的回调。

   $.ajax({
                    url: url,
                    type: 'POST',
                    async: false,
                    contentType : 'application/json;charset=utf-8', //设置请求头信息
                    data: JSON.stringify(jsonObj),
                    success: function(rollData) {
                        if (rollData.code == 0) {
                            layer.confirm(rollData.msg, {
                                btn: ['确定']  //按钮
                                , icon: 6
                            }, function () {
                                window.parent.location.reload();    //刷新父页面
                            });
                        } else {
                            layer.confirm(rollData.msg, {
                                btn: ['确定']  //按钮
                                , icon: 5
                                , anim: 6
                            }, function (index) {
                                lock = true;
                                layer.close(index);
                            });
                        }
                    },
                    error: function(res) {
                        layer.confirm('啊哦！访问出问题了！', {
                            btn: ['确定']  //按钮
                            , icon: 5
                            , anim: 6
                        }, function (index) {
                            lock = true;
                            layer.close(index);
                        });
                    }
                })