<script src="lib/jquery.js" type="text/javascript"></script> <script type="text/javascript"> </script> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Untitled Document</title> <mce:script src="lib/jquery.js" mce_src="lib/jquery.js" type="text/javascript"></mce:script> <mce:style type="text/css"><!-- .block{width:100px;height:100px;} .small{width:100px;height:100px;background:pink;float:left;margin-top:5px;margin-left:2px;} --></mce:style><style type="text/css" mce_bogus="1">.block{width:100px;height:100px;} .small{width:100px;height:100px;background:pink;float:left;margin-top:5px;margin-left:2px;}</style> </head> <body> <mce:script type="text/javascript"><!-- var $z = jQuery.noConflict(); // jquery 防止框架间冲突的方法 $z.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {tags:'soccer',tagmode:'any',format:'json'}, function(data){ $z.each(data.items, function(i,item){ $z("<img/>").attr("src", item.media.m).attr('title',item.title).appendTo("#images"); if ( i == 4 ) return false; }); }); //调用 flick api 中的json数据($.getJSON可以跨域) $z(document).ready(function(){ $z('#go').click(function(){ // 远程调用脚本 $z.getScript('http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js', function(){ $z('.block').animate({backgroundColor:'pink'},1000) .animate({backgroundColor:'green'},2000) }) }) $z('#get').click(function(){ $z.getScript('http://6.cn/csjs/20081211a/mt.js', // 远程调用脚本 function(){ $$('.small').each(function(item,index){ //mt框架的使用 item.style.backgroundColor = 'red'; }) }) }) }) // --></mce:script> </body> <div id="images"> <img src="" /><img src="" /><img src="" /><img src="" /> </div> <button id="go" style="margin-right:20px" mce_style="margin-right:20px">跨域调用api</button> <button id="get">get remote script</button> <div class="block"></div> <div class="small"></div> <div class="small"></div> <div class="small"></div> <div class="small"></div> <div class="small"></div> </html>