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选择器
<script type="text/javascript">
$(function() { //显示所有含有id属性的元素
$("div[id]").show(800);
})
$(function() { //显示所有属性title的值是"A"的元素
$("div[title='A']").show(3000);
})
$(function() { //显示所有属性title的值不是"A"的元素
$("div[title!='A']").show(3000);
})
$(function() { //显示所有属性title的值以"A"开始的元素
$("div[title^='A']").show(3000);
})
$(function() { //显示所有属性title的值以"C"结束的元素
$("div[title$='C']").show(3000);
})
$(function() { //显示所有属性title的值中含有"B"的元素
$("div[title*='B']").show(3000);
})
$(function() { //显示所有属性title的值中含有"B"且属性id的值是"divAB"的元素
$("div[id='divAB'][title*='B']").show(3000);
})
</script>
<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>