文章目录
一、当页面加载就调用方法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())
})