jQuery learning

1.ajax多种用法

$.ajax({type,url,data,dataType,success})请求后返回的数据类型应与dataType一致。

$.ajax({
type: 'POST',
url: url,
data: data,
success: success
dataType: dataType
});

$.post(url,data,callback,type)请求后返回的数据类型应与type一致。

$.post("test.php", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
},'json');

$.post("test.php", { name: "John", time: "2pm" },
function(data){
process(data);
}, "xml");

2.$('form1').serialize();
3.异步请求返回Json格式数据（PHP json_encode（array））
4.iconv（），PHP改变字符编码函数
5.json支持跨域调用，由于安全性问题，AJAX不支持跨域调用，这样要调用不同域名下的数据，很麻烦。

例：

主调文件index.html

<script type="text/javascript">
function getProfile(str) {
var arr = str;
document.getElementById('nick').innerHTML = arr.nick;
}
</script>
<body><div id="nick"></div></body>
<script type="text/javascript" src="http://www.openphp.cn/demo/profile.php"></script>

被调文件profile.php

<?php
$arr = array(
'name' => '刘洋',
'nick' => '李宁',
'contact' => array(
'email' => 'shenkong at qq dot com',
'website' => 'http://www.okajax.com',
)
);
$json_string = json_encode($arr);
echo "getProfile($json_string)";
?>
6.<a href="#this"onclick="goToIndex();return false;">Click</a>推荐用这种方式来触发javascript事件而不改变当前链接；
7.jquery取得选中复选框的个数

两种方法

<html>
<head>
<title>test</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">

//方法一
$(function(){
$("#GetButton_1").click(
function(){
var CheckCount=0;
$("[name='ChooseOne']").each(function(){
if($(this).attr("checked")){
CheckCount++;
}
});
alert(CheckCount);
});
});

//方法二
$(function(){
$("#GetButton_2").click(
function(){
alert($("input[name='ChooseOne']:checked").length);
});
});
</script>
</head>
<body>
<input type="checkbox" name="ChooseOne" >
<input type="checkbox" name="ChooseOne" >
<input type="checkbox" name="ChooseOne" >
<input type="checkbox" name="ChooseOne" >
<input type="checkbox" name="ChooseOne" >
<br>
<input name="GetButton_1" id="GetButton_1" type="button" value="方法一">
<input name="GetButton_2" id="GetButton_2" type="button" value="方法二">
</body>
</html>

8.全选/取消全选

方法1

<script type="text/javascript">
function getRS()
{
//var ched=$("input[name='items[]']:checked").length;
//$("input[name='items[]']").attr("checked","checked");
$("input[name='items[]']").removeAttr("checked");
}
$(function(){
$("#test").toggle(function(){$("input[name='items[]']").attr("checked","checked");},function(){$("input[name='items[]']").removeAttr("checked");});
})
</script>
<?php echo time();?>
<form action=""name="searchform" method="get">
<input type="checkbox" name="items[]" value="1"/>
<input type="checkbox" name="items[]" value="14"/>
<input type="checkbox" name="items[]" value="2"/>
<input type="checkbox" name="items[]" value="3"/>
<input type="button" value="click" id="test"/>
</form>

方法2经典
<html>
<head>
<title>JQuery实现全选</title>
<script src="http://192.168.99.21/map/style/js/jquery-1.4.2.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
$('#selectall').click(function() {
$(':checkbox[id!=selectall]').attr('checked',$(this).attr('checked'));
}
);
});
</script>
</head>
<body>
<input type='checkbox' />UserA
<input type='checkbox' />UserB
<input type='checkbox' />UserC
<input type="checkbox" id="selectall" />全选
</body>
</html>

9.javascript 定义数组

var arr1=new Array()
arr1[0]='red';
arr1['g']='green';
var arr2=['red','green'];
var arr3={0:'red','bb':'green'};

10.this为DOM对象/元素，$(this),将DOM对象转为jquery对象，各自有各自的方法、属性

$('p').each(function(i){
//alert($('p').eq(i).html());
//this.style.color=arrColor2[i%2];
//alert(this.innerHTML);
//alert($(this).html());
});
11.选择器selector
function test()
{
/** selector **/
//$('#tttt').val('');
//$("input:checkbox").each(function(i){alert($(this).val());});
//$(":checkbox").each(function(i){alert($(this).val());});
//$("input:radio:checked").each(function(i){alert($(this).val());});
//$("[name='items[]']:checked").each(function(i){alert($(this).val());});
}
12.层级关系的选择器 ">"，查找含有ID 的 $('div[id]'),

13.text(),html(),val()----text()取得标签下文本内容，如果内容中包含<>,则过滤掉，html()   取得标签下所有内容，包括标签，val()取得标签的值，<input valu

14. jquer简单应用
$(function(){
$('.tabbox li').hover(function(){
$('.tabbox li').removeClass('changecolor');
$(this).addClass('changecolor');
var i=$(this).parent('ul').children('li').index(this);
$(this).parent('ul').siblings('div').hide();
$(this).parent('ul').siblings('div').eq(i).show();
});

})

15.jquery选择器

<body>
<div id="divID">ID</div>
<div title="A">Title A</div>
<div id="divAB" title="AB">ID <br />
Title AB</div>
<div title="ABC">Title ABC</div>
</body>