最近用到了jquery 就自己学习了一下,这里是入门的时候自己做的一些笔记(参考3wschool)。还有一些自己写的简单的练习代码
一、三种不同的加载jquery文件的方法
1.本地文件(要提前将js文件下载下来)加载<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
? 一般有两份 jQuery 拷贝可供下载,一是缩小版(由 Google Closure Compiler),另一个是未压缩版(供 debugging 或 reading)
可以到http://download.csdn.net/source/3561704下载
2.加载Google 的 CDN<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
3.加载Microsoft 的 CDN<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
二、jquery的使用(推荐格式)
1.把所有 jQuery 代码置于事件处理函数中
2.把所有事件处理函数置于文档就绪事件处理器中
3.若文件很大把 jQuery 代码置于单独的 .js 文件中
如下一段代码(将这段代码保存一个html后缀名的文件就可以看到他的效果了):
<html>
?? <head>
????? <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
????? <script type="text/javascript">
????????? $(document).ready(function(){? --文档就绪事件处理器,防止文档在完全加载(就绪)之前运行 jQuery 代码。这个是以后都要用到的
????????????? $("p").click(function(){? --事件处理函数,根据自己的需要去调用相应的函数
????????????????? $(this).hide();? --具体要执行的动作
?????? });
????????? });
????? </script>
?? </head>
?? <body>
????? <p>If you click on me, I will disappear.</p>
?? </body>
</html>
三、jquery使用的语法
基础语法是:$(selector).action()
??? 1.美元符号定义 jQuery
??? 2.选择符(selector)“查询”和“查找” HTML 元素
??? 3.jQuery action() 执行对元素的操作
例如:$(this).hide() - 隐藏当前元素
四、jquery的选择器:$()
? 1.元素选择器
? 2.属性选择器
? 3.css选择器
五、jquery的事件
? 1.jQuery 事件处理函数是 jQuery 中的核心函数。事件处理函数是当 HTML中发生事件时自动被调用的函数
? 2.事件添加的不同,如上面的例子对<p>元素的单击事件的调用
? 3.记着要特别注意将事件处理放在文档就绪事件处理器中
然后自己写了一些练习的代码,都是最基础的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>Selector</title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <link href="select.css" rel="stylesheet" type="text/css"> <script type="text/javascript"> $(document).ready(function(){ <!--选择属性class为one的所有的p元素--> $("p.one").click(function(){ <!--选择当前元素--> $(this).hide(3000); }); <!-- 选择所有的p元素,也包括class=one的只是按顺序先执行了上面那个方法,若将这个方法放到上面那个方法前则会先执行这个方法--> $("p").click(function(){ $(this).hide("slow"); }); <!--选择id=two的第一个元素(注意下面有两个id=two的元素)--> $("p#two").click(function(){ $(this).slideToggle("slow"); }); <!--选择input类型为button的元素,后面的:first指的是第一个button按钮--> <!--first(第一个) last(最后一个) even(所有偶数) odd(所有奇数)--> $(":button:first").click(function() { <!--选择全部的元素--> $("*").hide(); }); }); </script> </head> <body> <p> 第一个p。点击我,我就消失了</p> <p class="one">第二个p。 点击我,我也消失</p> <p id="two"> 第三个p。点击我,我会消失然后再重现</p> <span id="two">点击我,看看我会不会消失然后重现---不会</span> <br> <input type=button value="点击我,全部的都会消失"></input> </body> </html>
用到的css文件
body { background-color:#778866; width:1000px; height:800px; } p { font-family:"Arial Black"; font-size:12px; } p.one { font-family:"Book Antiqua"; font-size:20px; } #two { font-family:"Arial Rounded MT Bold"; font-size:30px; }?
?
?