`
雨中伞
  • 浏览: 43953 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery复习DEMO

jQueryjsonCSSJavaScriptHTML 
阅读更多 
$(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>
分享到：
| ajax
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Whir.JqueryDemoTools-用于整理jQueryDemo

    《jQuery Demo工具集——Whir.JqueryDemoTools详解》 jQuery作为一款强大的JavaScript库，极大地简化了网页的交互和动态效果实现。为了更好地理解和运用jQuery，开发者经常需要查阅和实践各种示例。"Whir....

    [其他类别]JQuery功能测试源码_jquerydemo（ASP.NET源码）.rar

    【jQuery功能测试源码_jquerydemo（ASP.NET源码）】是一个针对JavaScript库jQuery的实践项目，主要用于展示和测试jQuery的各种功能。这个压缩包包含了在ASP.NET环境下使用jQuery的实例代码，可以帮助开发者深入理解...

    jQuery+Animate+Demo+By_褪色

    这个"jQuery+Animate+Demo+By_褪色"的项目可能是由一个名为“褪色”的开发者创建的，旨在展示如何利用jQuery的Animate方法来制作动画效果。 在jQuery中，Animate方法允许开发者自定义动画，包括改变宽度、高度、...

    jquery.simple.tree 动态加载，支持无限级分类(工程+数据库脚本)

    好久没用S2SH做东西了，闲来没事做了一个jQuery Tree 的Demo 支持无限级分类，异步加载数据，通过这个小程序可以了解一下jQuery动态加载数据的技巧，顺便复习了一下S2SH(struts2+spring+hiber)。

    javascript的案例demo小练习

    在"javascript的案例demo小练习"中，我们可以预期包含一系列的实例代码，旨在帮助初学者或复习者巩固JavaScript基础知识，理解如何使用JavaScript进行前端开发。这些练习可能涵盖了以下几个方面： 1. **变量与数据...

    小型商城后台管理系统，jquery+jsp+servlet+mysql,前后端一体，用于javaweb的学习.zip

    project_demo可能是整个项目或者部分项目文件的打包名。 2. **请求处理**：用户通过浏览器发送请求到服务器，Servlet捕获这些请求，根据请求类型调用相应的业务逻辑，可能涉及到数据库查询或更新操作。 3. **视图...

    ASP.NET AJAX深入浅出系列课程(3)：UpdatePanel的使用(下)_Demo.zip

    此外，对于大型或复杂的异步操作，可能需要使用更底层的AJAX技术，如ScriptManager和PageMethods，或者采用jQuery和其他客户端脚本库。 通过这个课程和提供的示例，开发者将学习如何在ASP.NET环境中有效地利用...

    ATA考试-web真题

    通过这份"全部)web真题.doc"文档，考生可以全面复习并实践上述知识点，以提高通过ATA考试的成功率。务必对每个部分进行深入学习，理解其工作原理，并通过编写实际代码来巩固知识。同时，模拟练习和解答历年真题将有...

    self-manager-demo

    创建待办事项： 创建一个待办事项列出他们所有的待办事项更改待办事项的状态创建事件： 建立活动列出... 使用Bower下载所有库对于您的考试复习者来说会更容易必须使用以下库jQuery和车把您可以使用： Underscore.js S

    html5前端应用

    HTML5前端应用是现代网页开发的核心技术之一，它极大地扩展了HTML4的功能，为开发者...《HTML前端应用》理论复习指导.xls可能是针对这些知识点的一个复习资料，帮助学习者巩固和深化对HTML5的理解，提高实际开发技能。

    HTML5和CSS3实例教程总结(推荐)

    教程推荐使用jQuery来简化DOM操作和事件处理，但同时也强调了在实际开发中，直接使用原生JavaScript是一种更为灵活的解决方案，因为它不需要依赖外部库。 总而言之，HTML5和CSS3的实例教程不仅使我们了解了如何使用...

Magicbox
Global site tag (gtag.js) - Google Analytics