1、Form表单只提交数据而不进行页面跳转的方法
<script type="text/javascript" src="js/jquery/jquery-1.8.0.min.js"></script> //必须
<script type="text/javascript" src="js/jquery/jquery.form.js"></script> //必须
<script type="text/javascript" src="/js/jquery/jquery.easyui.min.js"></script> //非必须
<form id="form1" method="post" onsubmit="return saveReport();">
function saveReport() {
$("#form1").ajaxSubmit(function(message) {
// 对于表单提交成功后处理,message为提交页面saveReport.htm的返回内容
alert('成功');
});
return false; // 必须返回false,否则表单会自己再做一次提交操作,并且页面跳转
}
2、ajax获取基本数据类型
Login: function() {
$.ajax({
type: "get",
url: "http://localhost:8081/user/Login",
dataType: "text",//这是获取String类型的,不写也可以获取基本数据类型
success: function(data) {
alert(data);
}
}).done(function(data){
alert(data);
});
},
//注:后台返回R(json类型),dataType就必须写json
//注:后台的传送的数据类型是int(基本数据类型),如果跨域,前台加上dataType:"json",否则返回的是object XMLDocument
3、如果要用jq来实现DOM对象的话,需要加个下标
1、//("#files")是jquary对象,他实际是一个数组对象;document.getElementById("files"),它是一个DOM对象 ,可进行DOM操作。如果要用jq来实现DOM对象的话,需要加个下标
//var docObj = document.getElementById("files"),和$("#files")[0]效果一样
var docObj = ("#files")[0];//实现dom对象
2、var dd = $("#preview")[0];//jq来实现DOM对象
dd.innerHTML = "";//jq来操作
4、jQuery对 动态添加 的元素 绑定事件on()的用法
-
-
$(document).on('click','要选择的元素',function(){})
on方法包含很多事件,点击,双击等等事件。和$().click()的用法一样,最大的区别是动态创建的元素在该选择器选中范围内是能触发回调函数。 也就是说 页面上元素有添加或变化后仍可绑定
5、阻止冒泡事件
//点击子元素不会触发父元素
$(".nav-content-right").click(function () {
//阻止冒泡事件
event.stopPropagation();
$(".nav-search-center-input").animate({"width":"416px"},600);
$(".nav-content-center").css("display","none");
$(".mselect").css("display","block");
$(".mselect").animate({"right":"446px"},600);
})
//相对于父元素
//点击除nav-content-right元素以外隐藏下拉
$(document).bind("click",function(){
$(".nav-content-center").css("display","block");
$(".nav-search-center-input").animate({"width":"216px"},300);
$(".mselect").css("display","none");
$(".mselect").css({"right":"246px"});
});
6、
//不闭包
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++) {
divs[i].onclick=function(){
alert(i);
}
}
//因为点击事件的函数内部使用外部的变量i一直在变化,当我们指定click事件时并没有保存i的副本,div都是弹出10
//闭包
var divs=document.getElementsByTagName("div");
for (var i=0;i<divs.length;i++) {
divs[i].onclick=(function(n){
return function(){
alert(n);
}
})(i);
}
//第二种方法(推荐)
for(var i=0; i<$("div").length; i++){
$("div")[i].onclick=(function(n){
return function(){
alert(n);
}
})(i)
}
7、
1.在img元素上添加 οnclick="return false"
<img src="a.png" onclick="return false" />
2.图片用背景图的方式插入
background:url(a.png) norepeat center;
3.使用js事件阻止默认行为的方法,这里需要注意哦!
var img = document.getElementById('banner');
img.addEventListener('click',function(e){
e.preventDefault();
});
8、
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
//修改
$("#table").on("click",".update" ,function () {
var obj=$(this).data("obj");//在查询里获取obj的集合
var sno=$(this).attr("cid")//获取是sno的值
$("form").find("input").eq(0).val(obj.cname);
$("form").find("input").eq(1).val(obj.ccolor);
$("form").find("input").eq(2).val(obj.cspeed);
$("form").find("input").eq(3).val(sno);
$("form").find("input").eq(4).val(obj.cdescribe);
//不能放在这里,否则buttom有叠加效果,因为有两个click
// $("#sbu").click(function () {
// alert($("form").serialize())
// $.ajax({
// type: "post",
// url: "ServletSelect?action=up",
// data: $("form").serialize(),
// dataType:"json",
// success: function (dataSelect) { //dataSelect是参数,自定义的
// select();
// }
// })
// })
})
$("#sbu").click(function () {
alert($("form").serialize())
$.ajax({
type: "post",
url: "ServletSelect?action=up",
data: $("form").serialize(),
dataType:"json",
success: function (dataSelect) { //dataSelect是参数,自定义的
select();
}
})
})
11、
$.ajax({
url:"/Hello/zuoYe02",
type:"POST",
//发送到服务器的数据
data:JSON.stringify(emp),
//发送信息至服务器时内容编码类型。
contentType : "application/json;charset=UTF-8",
//预期服务器返回的数据类型;返回的数据类型可以不写,默认接收所有,ajax会自动识别
dataType:"json",
success:function (data) {
}
})