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);
});
}
})