jquery入门啦^^
<html>
??<head>
????<script?type="text/javascript"?src="jquery.js"></script>
????<script?type="text/javascript">
????</script>
??</head>
??<body>
????<a?href="http://jquery.com/">jQuery</a>
??</body>
</html>
?
编辑<script> 的 src 属性值 , 使其指向 jquery.js 文件 . 例如 , 如果 jquery.js 文件与 HTML 文件所有目录相同 , 则可写成 :
?<script?type="text/javascript"?src="jquery.js"></script>
?
可以从 ? Downloading?jQuery ? 下载jquery.js .
在document 准备加载时运行指定代码
许多javscript 程序员都采取出下的方式 :
?window.onload?=?function(){?alert("welcome");?}
?
然而, 使用这种方式 , 要想运行代码首先必须等待 document 加载完毕 . 如果页面中包含了许多图片 , 且页面没有加载完毕 , 则要想立即运行的代码将无法运行
为了避免以上问题,jQuery 采用了一种语句 , 检测 document 并等待其为操作做好准备 . 这就是所谓的 ready?event
?$(document).ready(function(){
???//?Your?code?here
?});
?
在ready?event 中 , 添加了一个点击链接的处理函数 :
?$(document).ready(function(){
??? $("a").click(function(event){
?????alert("Thanks?for?visiting!");
???});
?});
保存你的HTML 文件 , 重新加载页面 , 点击页面上的链接 , 你将会在页面跳转之前得到一个弹出信息提示框
如果想阻止点击事件所触发的默认行为-- 跳转到其他页面 , 可以调动 event.preventDefault()?:
?$(document).ready(function(){
???$("a").click(function( event ){
?????alert("As?you?can?see,?the?link?no?longer?took?you?to?jquery.com");
????? event.preventDefault();
???});
?});
完整的实例
以下是完整一个HTML 文件 . 注意 jquery.js 文件引用于 Google 网络链接
?<!DOCTYPE?html>
?<html?lang="en">
?<head>
???<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
???<script?src=" http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js "?type="text/javascript"></script>
???<script?type="text/javascript">
?????$(document).ready(function(){
???????$("a").click(function(event){
?????????alert("As?you?can?see,?the?link?no?longer?took?you?to?jquery.com");
?????????event.preventDefault();
???????});
?????});
?????
???</script>
?</head>
?<body>
???<a?href=" http://jquery.com/ ">jQuery</a>
?</body>
?</html>
?
添加和移除CSS?class
在head 标签中添加一些 CSS 样式
?<style?type="text/css">
?? ??a.test?{?font-weight:?bold;?}
?</style>
?
通过jquery 的 addClass 函数来添加 CSS?class
??$("a").addClass("test");
?
现在你所有的a 元素都将会加粗 .
通过jquery 的 removeClass 函数来移除 CSS?class
?$("a").removeClass("test");
?
CSS允许为一个元素添加多个 class
?
特效
在jQuery 中 , 有几个生成特效的函数被提供用于使网页变的更具吸引 :
?$("a").click(function(event){
???event.preventDefault();
???$(this).hide("slow");
?});
?
现在, 你点击任何一个链接 , 该链接会慢慢地消失 ( 隐藏 ) ?
回调与函数
回调是一种作为其它函数的参数. 当主函数执行完成后 , 回调函数开始执行 .
还有一种重要的事情就是回调函数作为参数时是如何正确传递的.
不带参数的回调函数
如下:
?$.get('myhtmlpage.html',?myCallBack);
?
注意? 第二个参数是回调函数名( 不是字符串 , 也没有括号 ). ?
带参数的回调函数
错误
这是一种错误的方式
?$.get('myhtmlpage.html',?myCallBack(param1,?param2));
?
这将无法工作,
因为它调用了
myCallBack(param1,?param2)
?
并且它将返回值作为 $.get() 第二个参数. ?
正确
创建匿名函数作为回调函数, 并调用带参的 myCallBack
$.get('myhtmlpage.html',?function(){
??myCallBack(param1,?param2);
});
?
当$.get 执行完后 , 两个参数将会被赋值
?
?
另外，
jQuery的攻略，快分享吧，很good！
http://www.ibole.cn/Static/Html/jQuery/index.html
?
http://www.ibole.cn/tags/jQuery