Jquery学习

demo-1

======页面加载完成后。执行alert('');========

$(document).ready(function() {
// do stuff when DOM is ready
alert(' ');
});

$(document).ready(function() { 
// do stuff when DOM is ready 
alert(' '); 
}); 

 

上述方法可以简写为;

$(function() {
// code to execute when the DOM is ready
alert("");
});

$(function() { 
// code to execute when the DOM is ready 
alert(""); 
}); 

 demo2

======页面加载完成后。点击id为asd的元素时，执行alert('');========

 

$(document).ready(function() {
$("#asd").click(function() {
  alert("Hello world!");
});
});

$(document).ready(function() { 
$("#asd").click(function() { 
  alert("Hello world!"); 
}); 
}); 

 demo3

页面加载完成后。点击所有a元素（超链接）时，执行alert('');========

$(document).ready(function() {
$("a").click(function() {
  alert("Hello world!");
});
});

$(document).ready(function() { 
$("a").click(function() { 
  alert("Hello world!"); 
}); 
}); 

 

demo4 ： ajax 

$.ajax(
{

type:"POST",
url:"showIter.do?method=successIter",
data:"",//$("#formId").serialize()接受form中的所有数据
dataType:"text/html",
async:false,
success:      function (msg) {
//msg = eval('(' + msg + ')');//解析后台的json数据 }
});

$.ajax(
{

type:"POST", 
url:"showIter.do?method=successIter", 
data:"",//$("#formId").serialize()接受form中的所有数据 
dataType:"text/html", 
async:false, 
success:      function (msg) {
//msg = eval('(' + msg + ')');//解析后台的json数据 } 
});                             

 

demo5:ajax提交表单（同步提交）

这里在引用jquery-core以后，还要引用jquery-form插件

$(document).ready(function() {
$("#button_1").click(function() {
$("#myFormId").submit();
});
});

$(document).ready(function() { 
$("#button_1").click(function() { 
$("#myFormId").submit();   
}); 
}); 

 

<form id="myFormId">
<input type="button" value="submit" id="button_1" />
</form>

<form id="myFormId"> 
<input type="button" value="submit" id="button_1" /> 
</form> 

 demo6:ajax异步提交表单

这里在引用jquery-core以后，还要引用jquery-form插件

$(document).ready(function() {
$("#button_1").click(function() {
$("#myFormId").ajaxSubmit();
});
});

$(document).ready(function() { 
$("#button_1").click(function() { 
$("#myFormId").ajaxSubmit();   
}); 
});   

 

<form id="myFormId">
<input type="button" value="submit" id="button_1" />
</form>