jQuery核心方法详解-优快云博客

<html>
<title>A开头的对象与方法</title>
<style>
	.selected {
	FONT-SIZE: 14px; MARGIN: 0px; COLOR: #333; LINE-HEIGHT: 30px; PADDING-TOP: 15px; TEXT-ALIGN: left
}
</style>
<script type="text/javascript" src="jquery1.2.3.js"></script>


<script language="javascript">
$(function(){


//把与表达式匹配的元素添加到jQuery对象中
var o=$("p").add("span")
;

//window.alert(o.text());


//把一个或多个元素添加到匹配的元素集合中。
var o1=$("p").add([document.getElementById("a"),document.getElementById("b")]);
//window.alert(o1.text());


//为每个匹配的元素添加指定的类名
$("p").addClass("selected");

//在每个匹配的元素之后插入内容
$("p").after("<h3>Are you ok?</h3>");


//使用HTTP请求（XMLHttpRequest）载入一个远程页面,即发送请求
//这是jQuery的低级AJAX实现。要查看高级抽象
//载入并执行一个JavaScript文件
$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});


//当AJAX语法完成的时候所做的操作
//$("#d").ajaxComplete(function(request, settings){
//  $(this).append("<ul><li>Request Complete.</li></ul>");
//});


//当AJAX完成失败的时候所做的操作
$("#d").ajaxError(function(request, settings){
  $(this).append("<ul><li>Error requesting page " + settings.url + "</li><ul>");
});

//在发送请求之前所做的操作
$("#d").ajaxSend(function(request, settings){
  $(this).append("<ul><li>Starting request at " + settings.url + "</li></ul>");
});


//当AJAX请求开始的时候所做的操作
$("#dd").ajaxStart(function(){
  $(this).show();
});

//当请求结束的时候所做的操作
$("#dd").ajaxStop(function(){
  $(this).hide();
});

//当语法成功的时候所做的操作
$("#d").ajaxSuccess(function(request, settings){
  $(this).append("<ul><li>Successful Request!</li></ul>");
});

//用于创建自定义动画的函数1
//$("p").animate({
// height: 'toggle', opacity: 'toggle'
//}, "slow");

//用于创建自定义动画的函数2
$("p").animate({
  left: 50, opacity: 'show'
}, 500);


//向每个匹配的元素内部追加内容
$("#append").append("<h4>I would like to say!</h4>");

//把所有匹配的元素追加到另一个、指定的元素元素集合中,将PP追加到append
$("#pp").appendTo("#append");

//取得第一个匹配元素的属性值
var src=$("img").attr("src");
//window.alert(src);


//将一个“名/值”形式的对象设置为所有匹配元素的属性
//$("img").attr({src:"self.jpg",alt:"chenwei"});


//为所有匹配的元素设置一个属性值
//$("img").attr("src","huahua.jpg");


//为所有匹配的元素设置一个计算的属性值
//$("img").attr("title", function() { return this.src });

}
);


function changephoto(){
		var src1=$("#img1").attr("src");
		var src2=$("#img3").attr("src");
		$("#img1").attr("src",src2);
		$("#img2").attr("src",src2);
		$("#img3").attr("src",src1);
		$("#img4").attr("src",src1);
}


</script>
<body>
<p>Hello</p><span id="a">WORLD!</span><span id="b">world!</span>
<div id="d"></div>
<div id="dd" style="display:none">
	<ul>
		<li>one</li>
		<li>two</li>
	</ul>
</div>
<span id="pp">appendTo------------------</span>[[[[[[[[
<div id="append">]]]]]]]]]]]]]]]]]]]]]]]]]]]]</div>

<table border="1" cellspacing="6" cellpadding="0">
<tr>
<td>
<img src="huahua.jpg" id="img1"/>
</td>
<td>
<img src="huahua.jpg" id="img2">
</td>
</tr>
<tr>
<td>
<img src="self.jpg" id="img3"/>
</td>
<td>
<img src="self.jpg" id="img4"/>
</td>
</tr>
<tr><td colspan="2">
	<input type="button" value="将两行照片交换" onclick="changephoto();"/>
</td></tr>
</table>
</body>
</html>