jquery复习DEMO

$(function(){
        var url="http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?"
        $.getJSON( //使用getJSON方法取得JSON数据
        url,
        function(data){ //处理数据 data指向的是返回来的JSON数据
                var tit="<a href='"+ data.link +"'>"+data.title +"<\/a>"; //生成标题和标题连接
                $("h1").html(tit); //出现在指定位置H1 内
                $("#ginfo").find("p").eq(0).html(data.modified); 
                $("#ginfo").find("p").eq(1).html(data.generator);
                var lis=""; //li 列表项目
                $(data.items).each(function(i,ite){ //遍历JSON数据得到所需形式
                    lis+="<li>";
                    lis+="<a href='"+ ite.link +"'><img src='"+ite.media.m +"' title='"+ ite.title +"'><\/><\/a>";
                    lis+="<div>";
                    lis+=ite.description;                
                    lis+="<\/div><\/li>";                
                    })
                $("ul").html(lis);    //将翻译出来的数据呈现在所需位置
                $("li").hover(function(){$(this).addClass("hov")}, function(){$(this).removeClass("hov")});    
        }
        )
        
    }) <script language="javascript" src="scripts/jquery.js"></script>
     <script type="text/javascript">     
      $.ajax({
                    type: "GET",
                    url: "xxx.jsp",
                    dataType: "xml",
                    data: "fid=${param.fid}",                
                    success: function(data) {                   
                    var name ="";
                    var content = "";
                    var date = "";                
                       $(data).find('item').each(function(){                       
          name = $(this).find('name').text();
          content = $(this).find('content').text();
          date = $(this).find('date').text();
这下面都是把解析后的xml赋值给界面
          $('<li style="padding-bottom: 2px;padding-top: 2px;"></li>').html("<span class=spa>" +name + "&nbsp;&nbsp;&nbsp;&nbsp;</span>(" + date + ")<br/>" + content).appendTo('#content ol');            
          })
          $(".stripe li").mouseover(function(){
                     $(this).addClass("over");}).mouseout(function(){
                    $(this).removeClass("over");})
                    $(".stripe li .spa").addClass("alt");
       //   $(".stripe li:even .spa").removeClass("alt1").addClass("alt");
       }
       });
     </script>
$('').attr('') 这个方法可以获得获得属性

xxx.jsp 的代码
response.setContentType("text/XML");
out.print(xml);

我xml的格式:

<?xml version="1.0" encoding="utf-8"?>
<root>
<item>
   <name>nick</name>
   <date>2008-06-12 02:57:42</date>
   <content>fsdfasdf</content>
</item>
</root> var lastPdSelect=$("select[name='pdLine']:last");
    //复制一个select新对象
    var newPdSelect=lastPdSelect.clone();
    var index=lastPdSelect[0].selectedIndex;
    //删除新对象里已经被选走的值
    if(index>0){
       newPdSelect[0].options.remove(index);
    }
    //添加新对象
    newPdSelect.insertAfter(lastPdSelect);   
<html>
  	<title>jquery</title>
  	<head>
  		<script type="text/javascript"  src="jquery-1.4.2.js"></script>
		</head>
	  	<script type="text/javascript">
  		
  				
  			$(function(){
  					//alert($("#name").val());
  				//alert($("#user>.name").val());
  				//$("<div><p>Hello</p></div>").appendTo("body");
  			//	$("<input type='checkbox'>").appendTo($("#fff"));
  		//	$(document.body).css( "background", "black" );
				//$("#fff").attr("action","test.do");fff
				//$("<img></img>").attr("src","img/cd.gif").appendTo($("#"));
			//	$("img").each(function(i){this.src =  "img/"+i + ".gif"; this.id="img"+i});
				//	alert($("img").attr("src"));
				//alert($("img")[]);
			//	alert($(".name")[0].value);
			//$("button").click(function () { 
					//$("div").each(function (index, domEle) { 
  // domEle == this 
  						//		$(domEle).css("backgroundColor", "yellow");  
  						//		if ($(this).is("#stop")) { 
  						//			$("span").text("Stopped at div index #" + index); 
  						//			return false; 
 		 					//		} 
						//});
					//});
					//alert($(document.body).height());
				//	var p = $("p:first");
//$("p:last").text( "innerWidth:" + p.innerWidth() );
//var p = $("p:first");
//$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
//var p = $("p:first");
//$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
//$("p").css({ color: "#ff0011", background: "blue" });
//$("p").css({ "margin-left": "10px", "background-color": "blue" });
//$("p").css("color","red");
			//	alert($("div").length);$("div").each(function(i){this.html('hhhhe'+i);return true;});
			//alert($("#form1 input#name").val());
			//alert( $("#radio1").attr("checked",""));
		//	$("#run").click(function(){
 // $("#animate").animate({ right: "+=20" }, 1000);
//});
//$("#form1>input[name='check']:even").attr("checked",false);
				//	alert(	$("#form1>input[name='check']:even").length);
					//alert($("#form1>input[checked='checked']").length);
					
					//alert($("#form1>input[checked!='checked']").length);
					
				//	checked.attr(checked,"");
				//	unchecked.attr(checked,"checked");
				//	alert($("input[checked='checked']").length);
		//	alert(	$("#form1>input:checked").length );
		//alert($("#form1>input[checked='true']").length);
	//	$("#form1>input[checked!=true]").attr("checked",true);
		//var checked = $("#form1>input[checked=true]");
		//var unchecked = $("#form1>input[checked!=true]");
		//checked.attr("checked",false);
		//unchecked.attr("checked",true);
		
		//alert($("#form1>input:checked").length);
				//	$("[name='remark']").attr("disabled",true);
				//	alert($("#form1>[name='remark']").text());
			//	$("p").wrapAll($("<div></div>"));
			//	$("p").wrapAll(document.createElement("div"));
		//	$("p").replaceWith("<b>Paragraph. </b>");
	//	$("p").html("<b>Paragraph. </b>")
//alert($("p").not( $("#selected")[0] )[0]);
//alert($("p:first"));
//alert($("p:first").attr("class"));
//$("p:first").removeClass("first");
//alert($("p:first").attr("class"));
//alert($("#multiple option:selected").attr("index"));
//$("#filesubmit").click( 
	//	function () {
		//	alert("in submit");
			//alert( $("#file").text());
		//	alert( $("#file").val());
		//alert(document.getElementById("file").value);
	//	var file = document.getElementById("file")
		//$("#file").val("");
		//file.value = "" firefox;
		//file.setAttribute("value","");
		//file.outerHTML=file.outerHTML;
	//alert(file.outerHTML);
	//file.outerHTML="<input type='file' id='file' />";
	//	alert(file.outerText);
			//  }
			//  );
			
			var initcontent = new Array('a','b','c','d','e');
			var sel2content ;
			var sel3content ;
			var initselect = $("<select></select>");
			initselect.attr("id","sel1");
			var sel1value;
			var sel2value;
			var sel2select =$("<select></select>");;
			sel2select.attr("id","sel2");
			var sel3select =$("<select></select>");;
			sel3select.attr("id","sel3");	
			for(var i=0;i<initcontent.length;++i){
					initselect.append("<option value="+initcontent[i]+">"+initcontent[i]+"</option>");
				}
			$(document.body).append(initselect);
			$(document.body).append(sel2select);
			$(document.body).append(sel3select);
			
			$("#sel1").change( function(){
					//	alert(sel2select.attr("length"));
						//sel2select.removeAttr("option");//clear last time content
					//	sel2select= $("<select></select>");
					//	sel2select.attr("id","sel2");
				//	alert($("#sel2 option").length);
				//$("#sel2 option").each(function(){$(this).remove();});
			//alert($("#sel2 option").length);
			//alert($("#sel2").html());
			$("#sel2").empty();
			$("#sel3").empty();
			//	alert($("#sel2").html());
			//$("#sel2").html("");
			//$("#sel2 option").html("");
						sel1value=$("#sel1").val();
					//	alert(sel1value);
						sel2content	= new Array();
						for(var i=0;i<initcontent.length;++i){
								if(sel1value!=initcontent[i]){
									
										sel2content.push(initcontent[i]);
									}
							}
							//alert(sel2content.length);
							for(var i=0;i<sel2content.length;++i){
									sel2select.append("<option value="+sel2content[i]+">"+sel2content[i]+"</option>");
							}
							
					}
				);
				
  			$("#sel2").change( function(){
					//	alert(sel2select.attr("length"));
						//sel2select.removeAttr("option");//clear last time content
						//sel3select= $("<select></select>");
					//	sel3select.attr("id","sel3");
				//	sel3select.html("");
						sel1value=$("#sel1").val();
					//	alert(sel1value);
						sel2value=$("#sel2").val();
					//		alert(sel2value);
						$("#sel3").empty();
				//		alert(sel1value);
						sel3content	= new Array();
					//	alert(initcontent.length);
						for(var i=0;i<initcontent.length;++i){
						//		alert(i);
								
								if(initcontent[i]!=sel1value && initcontent[i]!=sel2value){
										alert(initcontent[i]);
										sel3content.push(initcontent[i]);
									}
							}
							//alert(sel2content.length);
							for(var i=0;i<sel3content.length;++i){
									sel3select.append("<option value="+sel3content[i]+">"+sel3content[i]+"</option>");
							}
							
					}
				);
  	//	alert($("p").html());
  	//		$("p").empty();
  		//	alert($("p").html());
  		//	alert($("#multiple").html());
  		//	$("#multiple").empty();
  		//	alert($("#multiple").html());
				});
			
 
 	 </script>
  	<body>
  <!--		<p>Hello, <span>Person</span> <a href="#">and person</a></p>
  		<p class="selected first">Hello</p>
  		<p>Hello</p><p id="selected">Hello Again</p>
  		<div class="protected">hheehhhehhe</div><div></div>
  		<p>Hello</p><p>cruel</p><p>World</p>
  		<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
  		<button id="run">Run</button><div id="animate">heheh</div>
  		<p>Hello</p><p>2nd Paragraph</p>
  		<form id="form1">
  <input type="text" vale="heheheheheh"/>
  <input type="checkbox" name="check" value="1"  />
   <input type="checkbox" name="check" value="2" checked="checked" />
    <input type="checkbox" name="check" value="3" />
     <input type="checkbox" name="check" value="4" />
      <input type="checkbox" name="check" value="5"/>
     <textarea rows="3" cols ="50" name="remark" > teststestet</textarea>
 <input type="file" id="file" />
 <input type="button" value="提交" id="filesubmit"/>
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>
  
	<button>Change colors</button>
   <span></span> 
  <div></div> 
  <div></div>

  <div></div> 
  <div></div>
   <div id="stop">Stop here</div> 
  <div></div>
	<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>
<select id="multiple" >
  <option >Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select>
<!--
  <div></div>
  <div></div>
  	<form action= "" method="post" id="fff">
			<div id = "user">
			<img><img>
		  	<input type = "text" class = "name" id = "name" value = "heeh"/>
		  	<input type = "text" class = "name" id = "name1" value = "heeh2122"/>
	  	</div>
		</form>
-->
  	</body>
  	
  </html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值