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:last"); //复制一个select新对象 var newPdSelect=lastPdSelect.clone(); var index=lastPdSelect.selectedIndex; //删除新对象里已经被选走的值 if(index>0){ newPdSelect.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").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:even").attr("checked",false);//alert($("#form1>input:even").length);//alert($("#form1>input").length);//alert($("#form1>input").length);//checked.attr(checked,"");//unchecked.attr(checked,"checked");//alert($("input").length);//alert($("#form1>input:checked").length );//alert($("#form1>input").length);//$("#form1>input").attr("checked",true);//var checked = $("#form1>input");//var unchecked = $("#form1>input");//checked.attr("checked",false);//unchecked.attr("checked",true);//alert($("#form1>input:checked").length);//$("").attr("disabled",true);//alert($("#form1>").text());//$("p").wrapAll($("<div></div>"));//$("p").wrapAll(document.createElement("div"));//$("p").replaceWith("<b>Paragraph. </b>");//$("p").html("<b>Paragraph. </b>")//alert($("p").not( $("#selected") ));//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+">"+initcontent+"</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){sel2content.push(initcontent);}}//alert(sel2content.length);for(var i=0;i<sel2content.length;++i){sel2select.append("<option value="+sel2content+">"+sel2content+"</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!=sel1value && initcontent!=sel2value){alert(initcontent);sel3content.push(initcontent);}}//alert(sel2content.length);for(var i=0;i<sel3content.length;++i){sel3select.append("<option value="+sel3content+">"+sel3content+"</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>
页:
[1]