jQuery 入门笔记1
jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。
1：jQuery使用
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello, jQuery!"); } ); }); </script>
src中的路径可以是自己下载的，也可以用Google或者ie的CDN分发的版本
使用谷歌或微软的 jQuery，有一个很大的优势：
许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
2：使用范例及注意事项：
<html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript"> function del(){ $("#bd").remove(); } function appendText() { var txt1="<p id='bd'>Textbd.</p>"; // 以 HTML 创建新元素 var txt2=$("<p id='del' onclick='del()'></p>").text("Textdel."); // 以 jQuery 创建新元素//""之间用' var txt3=document.createElement("p"); // 以 DOM 创建新元素 txt3.innerHTML="Text."; $(".pp").before(txt1,txt2,txt3); // 追加新元素 } $(document).ready(function(){ $("#app").click(function(){ $("h1,h2").addClass("blue"); $("#i").addClass("important blue");//多个类之间用空格 }); $("#i").click(function(){ $("h1").toggleClass("blue"); }); $("#f").click(function(){ $("#f").css({"color":"purple","fontSize":"35px"});//一个属性用逗号.css("background-color","yellow"); alert($("#f").css("color")); }); $("#emp").click(function(){ $("#emp").empty(); }); $("#btn1").click(function(){ $(".p").prepend("<b>Hello boy </b>."); }); $("#btn2").click(function(){ $("ol").append("<li>append</li>"); }); $("#x").click(function(){ alert($("#test").val()); $("#w3s").attr({ "href" : "http://www.jb51.net/jquery",//查看网页代码没有变，但实际上已经改变，很神奇的一个地方，应该是卸载浏览器内存里面，没有刷新页面 "title" : "W3School jQuery Tutorial" }); }); $("#d").click(function(){ var div=$("#t"); div.animate({height:'300px',opacity:'0.4'},"slow") .animate({width:'300px',opacity:'0.8'},"slow") .animate({height:'100px',opacity:'0.4'},"slow") .animate({width:'100px',opacity:'0.8'},"slow") .animate({left:'+=100px'},"slow") .animate({fontSize:'3em'},"slow"); alert($("#t").html("<b>Hello world!</b>")); // $("#t").animate({ // left:'250', // opacity:'0.5', // height:'150px', // width:'toggle', // }); }); // $("button").click(function(){ // $("p").fadeTo(2000,0.8); // $("#div1").fadeTo(); // $("#div2").fadeTo("slow",0.5); // $("#div3").fadeTo(3000,0.1); // }); $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); $("#stop").click(function(){ $("#t").stop(); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; } .important { font-weight:bold; font-size:xx-large; } .blue { color:blue; } </style> </head> <body> <h1>标题 1</h1> <h2>标题 2</h2> <h2 id="f">返回颜色的css</h2> <div id="i">这是非常重要的文本！</div> <br> <button id="app">向元素添加类</button> <div id="emp" style="height:100px;width:300px;border:1px solid black;background-color:yellow;"> This is some text in the div. <p>This is a paragraph in the div.</p> <p>This is another paragraph in the div.</p> </div> <p class="pp" onclick="appendText()">This is a paragraph.</p> <p class="p">This is another paragraph.</p> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> <button id="btn1">追加文本</button> <button id="btn2">追加列表项</button> <p><a href="file:///C:/Users/Administrator/Desktop/%E6%96%B0%E5%BB%BA%E6%96%87%E6%9C%AC%E6%96%87%E6%A1%A3.HTML" id="w3s">jb51.net</a></p> <p>姓名：<input type="text" id="test" value="米老鼠"></p> <button id="x">显示值</button> <button id="stop">停止滑动</button> <button id="d">开始动画</button> <p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p> <div style="background:#98bf21;height:100px;width:100px;position:relative;" id="t">python </div> <div id="div1" style="width:80px;height:80px;background-color:red;"></div> <br> <div id="div2" style="width:80px;height:80px;background-color:green;"></div> <br> <div id="div3" style="width:80px;height:80px;background-color:blue;"></div> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> <div class="panel"> <p>W3School - 领先的 Web 技术教程站点</p> <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p> </div> <div class="panel"> <p>W3School - 领先的 Web 技术教程站点</p> <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p> </div> <p class="flip">请点击这里</p> </body> </html>
