首页 > 代码库 > jQuery 入门笔记1
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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。