jquery小知识点

一、当页面加载就调用方法fun1

$(function(){     
      fun1();
    });

二、Ajax

1、Ajax可以写在方法体中

2、一般来说，除了url，其他的参数都是根据情况选择写于不写。

3、success:function(result){}方法是接收后端传过来的数据的。result就是后端传过来的参数。可以在外部定义方法，然后在sucess方法中调用

  $.ajax({
          type: "post",
          url: "emps",
          // dataType: 'JSON',//服务器返回的数据
          // contentType : "application/json",
          success: function (data) {
              //显示表格内容:只显示部分
              fun2(data);
              //显示分页信息
              fun3(data);
              //显示分页条内容
              fun4(data);
          }
      })

4、Ajax数据处理

一般来说，后端传过来的都是json格式的参数。我们要做的就是获取json中的数据。

json都是key-value的形式。我们可以直接通过result.属性名的方法获取属性值。

5、ajax发送数组问题

• 必须添加traditional:true否则发送的参数中会携带[]

• $.ajax({
          type: "post",
          url: "emps",
          // dataType: 'JSON',//服务器返回的数据
          // contentType : "application/json",
          success: function (data) {
              //显示表格内容:只显示部分
              fun2(data);
              //显示分页信息
              fun3(data);
              //显示分页条内容
              fun4(data);
          }
      })
  

6、Ajax的异步性

如果元素是在Ajax中动态生成的，不可以直接通过li.click(function(){添加点击事件})添加点击事件，因为还没有创建好元素，点击事件就绑定了

需要通过$(document).on("事件名","选择器",function(){})

根据ajax情况给函数返回值，不可以在ajax外定义一个变量，将此变量返回，因为ajax是异步的

//点击.update_btn_edit，会在控制台打印1
 $(document).on("click", ".update_btn_edit", function () {
		console.log(1)
    })

三、ajax中数据的共享，通常是使用方法参数实现。

比如说，我通过Ajax获取到了后端传过来的数据。此数据，只能在响应函数里使用(因为异步性)，所以需要把使用此数据的地方封装成一个方法，再响应函数中调用。

四、jquery的常用方法

$.each(obj,function(){})

• obj一般是一个数组(只要是需要被遍历的内容即可)

• 含义：对obj进行遍历，遍历的时候，执行function中的操作

• function:参数可以是function(index,item)：item表示当前被遍历的元素，index是当前被遍历到第几个

    var a=["msn","mzq"]
      $.each(a,function (index,item) {
          console.log("index="+index);
          console.log("item="+item)
      })
  

  效果：

动态生成标签

• $("<span></span>")生成了一对span标签，这相当于是一个Dom
  

• 动态生成标签，需要把它通过appendTo方法，添加到一个已存在的标签中才能在页面显示

• 动态生成的标签，可以通过append(内容)的方法向标签内添加内容

• append(内容)：返回值是调用者Dom

• appendTo()：返回值是调用者Dom

清空内容

​ empty()

点击事件

$(".btn").click(function(){})

如果function的返回值为false,那么后面的动作便不再执行

注意：

超链接的链接地址如果是动态获得的，则需要通过点击事件设置

   a2.click(function(){
                fun1(data.pageNum-1);
                //不行：因为数据不会被解析
                //  n=data.pageNum-1;
               //   a2.attr("href","/emps?pn="+n);

            });

• bootstrap校验状态使用方法

• 给input后添加span空标签
• 使用jquery,对于不同的状态，将.has-warning、.has-error 或 .has-success 类添加给需要校验的内容的父元素

if (status == "error") {
            $(ele).parent().addClass("has-error");
            $(ele).next("span").text(msg)
        }

五、jquery正则

/正则表达式/匹配模式

正则表达式：

a|b a或者b

[ab] a或者b

[a-z]任意小写字母

a[ebc]d:以a开头，以d结尾，中间是e/b/c

[^ab] 除了ab以外，是否包含其他的，包含为true,只有a,或者b则为false。即：字符串为a,b,ab都不行，abc,ac,bc都剋以

[^[a-9]]:只要字符串不全是数字就行

i:忽略大小写

六、jquery重置form

$(form)[0].reset()

七、获取属性值

自定义属性：attr(name) attr(name,value)

原生属性：prop(name) prop(name,value)

八、jQuery :checked 选择器

:checked选择器:选取所有选中的复选框或单选按钮。

 $.each($(".checkedItem:checked"), function () {
            array.push($(this).parents("tr").find("td:eq(1)").text())
        })

jQuery选择器