jquery学习笔记(好)(4)_H5之家 - 中国HTML5教程资源分享第一站

jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求
参数：
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。示例代码：
Ajax.aspx：
Response.ContentType = "application/json";Response.Write("{result: '" + Request["Name"] + ",你好！(这消息来自服务器)'}");jQuery 代码：
$.post("Ajax.aspx", { Action: "post", Name: "lulu" }, function (data, textStatus){ // data 可以是 xmlDoc, jsonObj, html, text, 等等. //this; // 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this alert(data.result); }, "json");点击提交：
这里设置了请求的格式为"json"：
$.ajax()这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
这里有几个Ajax事件参数：beforeSend ，success ，complete ，error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。
$.ajax({url: 'stat.php',
type: 'POST',
data:{Name:"keyun"},
dataType: 'html',
timeout: 1000,
error: function(){alert('Error loading PHP document');},
success: function(result){alert(result);}
});

jQuery基础教程笔记适合js新手第1/2页

看完jquery基础教程做的笔记，笔记并不适合所有人，觉得好，可以看，觉得不好，可以不看。

1, ：eq()和nth-child()
看下面代码：
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$("#selected-plays > li:eq(1)").addClass("a");
//等价于 $("#selected-plays > li:nth-child(2)").addClass("a");
//注意：js数组是从 0 开始的，所以eq（1）是取第二个元素。
//而css选择器:nth-child（）是从 1 开始的，所以要选择第二个元素，得使用 :nth-child(2) ，而不是:nth-child(1)。
})
</SCRIPT>
2，:odd 和 :even
:odd : 奇数行
:even : 偶数行
新手经常会说，好像跟我们做的相反？
其实与 :eq() 选择器一样，下标都是从 0开始的，
也就是表格的第一行编号是 0 （偶数）；
第二行编号是 1 （奇数）；以此类推。。。
3, $("tr:odd").addClass()
可以写成 $("tr").filter(":odd").addClass()
4，$('td:contains("cssrain")') //取得包含字符串 cssrain 的所有td
5，jquery 转 dom ：
$("td").get(0).tagName 或 $("td")[0].tagName
6，load():
jquery中的load（）有2层意思，
第一层意思可以等价于 dom中 window.onload
第二层意思可以load（url ）。
7：ready简写：
1;
$(document).ready(function(){
//do something
})
2;
$().ready(function(){
//do something
})
3;
$(function(){
//do something
})
8，事件冒泡：
正常的来说：点击B 会触发a的click。
如果我们不想触发A，可以用stopPropagation() 阻止冒泡.
具体例子：
<div>aaaaaaa
<div>bbbbbbbb</div>
aaaaaa</div>
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#a').click(function(){
alert("A")
})
$('#b').click(function(e){
alert("B")
e.stopPropagation();//阻止冒泡，从来不输出 “A" 。可以去掉，试试对比效果。
})
})
</SCRIPT>
9, hide()show()会记住上一次的dipslay状态
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').toggle(function(){
$('#a').hide();//display : none ，记住display 为 inline
$('#b').hide();//display : none ，记住display 为 block
},function(){
$('#a').show(); //display : inline
$('#b').show(); //display : block
})
})
</SCRIPT>
<DIV>a</div>
<DIV>b</div>
<input type="button" value="test" />
10, hide() show()加时间参数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').toggle(function(){
$('#a').hide(500);//display : none
$('#b').hide(500);//display : none
},function(){
$('#a').show(500); //display : inline
$('#b').show(500); //display : block
})
})
</SCRIPT>
<DIV>a</div>
<DIV>b</div>
<input type="button" value="test" />
11，效果：
show(), hide()会同时修改多个样式属性 : 高度，宽度和不透明度。
fadeIn() fadeOut() : 不透明度
fadeTo() : 不透明度
slideDown() , slideUp() :高度
如果都不能满意，只能用animate（）了
animate()提供了更为强大的，复杂的效果。
12，animate() :
之前 .show('slow'); // slow代表的是0.6秒内同时改变高度，宽度和透明度。如果用时间表示是 600 ；=== .show(600);
那么我们再来看看 animate()
animate({heigth : 'slow' ,width : 'slow' } , 'slow' )
这里之所以可以 height : 'slow' 其实就跟 .show('slow') 类似，当然他前面规定了height 。。
13,做动画之前先确定位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#a').css("position","absolute");//如果把这句去掉，动画就没了。
/*
在使用.animate之前，请先把位置确定，不管你是用的 absolute 还是relative
总之要设置其中的一种，因为所有的块级元素默认是static。
其实是跟css有关。
*/
$('#test').click(function(){
$('#a').animate({ left : '300' } , 'slow' )
})
})
</SCRIPT>
<DIV >a</div>
<input type="button" value="test" />
14，width()和css('width')
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
var t1 = $('#a').width();
var t2 = $('#a').css('width');
alert( t1 ); //200 ，不带单位
alert( t2 ); //200px ，带单位
alert( parseInt(t2) ) //200 ，不带单位
})
})
</SCRIPT>
<DIV>a</div>
<input type="button" value="test" />
15：animate()做动画效果时，动画执行的顺序。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="jquery.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
$('#a').animate({left : "300px" } , "slow" )
.animate({ top : "300px" } , "slow" );
})
})
</SCRIPT>
<DIV>a</div>
<input type="button" value="test" />
//发生上面是按照顺序来执行的。先改变left，然后再改变top
对比:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
$('#test').click(function(){
$('#a').animate({left : "300px" , top : "300px"} , "slow" )
})
})
</SCRIPT>
<DIV>a</div>
<input type="button" value="test" />
//发生上面是一起执行的，也就是 left和top 一起改变。
区别知道了吧。