<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>