Jquery学习

demo-1

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

Js代码

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

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

 

上述方法可以简写为;

Js代码

1. $(function() {    
2. // code to execute when the DOM is ready    
3. alert("");    
4. });   

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

 demo2

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

 

Js代码

1. $(document).ready(function() {    
2. $("#asd").click(function() {    
3.   alert("Hello world!");    
4. });    
5. });   

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

 demo3

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

Js代码

1. $(document).ready(function() {    
2. $("a").click(function() {    
3.   alert("Hello world!");    
4. });    
5. });   

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

 

demo4 ： ajax 

Js代码

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

$.ajax(
{

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

Js代码

1.   

 

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

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

Js代码

1. $(document).ready(function() {    
2. $("#button_1").click(function() {    
3. $("#myFormId").submit();      
4. });    
5. });   

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

 

Html代码

1. <form id="myFormId">    
2. <input type="button" value="submit" id="button_1" />    
3. </form>   

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

 demo6:ajax异步提交表单

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

Js代码

1. $(document).ready(function() {    
2. $("#button_1").click(function() {    
3. $("#myFormId").ajaxSubmit();      
4. });    
5. });     

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

 

Html代码

1. <form id="myFormId">    
2. <input type="button" value="submit" id="button_1" />    
3. </form>