Jquery 入门

来源：互联网发布：国家电网题库软件免费编辑：程序博客网时间：2024/06/03 05:07
自己做的关于 jquery 的一些测试。
<!doctype html><html><head><!--关于 jQuery 操作的说明--><meta charset="utf-8"><title>ARRAY</title><script src="js/jquery-1.11.3.js"></script><!--导入 JQUERY 库--><style></style></head><body><div id="ff"><h3>hhha</h3><p>hehe</p></div><img id="pic" class="picutre" src="images/2.jpg"></img><span></span><br></br><br></br><br></br><br></br><br></br><br></br><button id="toggle">HIDE</button><button id="fade">FADE</button><button id="slide">SLIDE</button><button id="big">BIG</button></body></html><script>$("img").attr({src:"images/3.jpg",width:"100px"});//$() 选择器  $(element) $("#id") $(".class")  jquery 选择器。  $("span").html("<p>我爱jquery!</p>");//填入内容。var text=$("p").text();console.log(text);$("#toggle").click(pictoggle);//设置 id为 toogle 的元素 的 ONCLICK 事件function pictoggle(){$(".picutre").toggle();$("#toggle").html(" SHOW")if($("#toggle").html()=="SHOW")$("#toggle").html(" HIDE");console.log($("#toggle").html())}$("#fade").click(picfade);var i=0;function picfade(){if(i%2==0)$("#pic").fadeOut("slow");// $().fadeOut() 渐消if(i%2!=0)$("#pic").fadeIn("fast");i++;}$("#slide").attr({onclick:"picslide()"});function picslide(){$("img").slideUp("slow").slideDown("slow");//$().slideDown 移动//$("img").//$("p").slideUp("slow");//$("p").slideDown("slow");}$("img").attr("style","position:absolute;left:0px");// attr 设置 属性。 $("#big").attr({onclick:"big()"});function big(){$("#pic").animate({left:"20%"},500).animate({width:"300px"},500).animate({left:"50%"},500).animate({left:"20%"},500).animate({width:"100px"},500).animate({left:"0%"},5010);}//$().animate({  >> css <<  })  产生动画效果//document.getElementById("pic").setAttribute("src","images/3.jpg");console.log($("#ff"));//console.log($("img").attr("src"));</script>
0 0