基础
在学习一些新的知识的时候,总会一些新的概念,需要我们去理解,去跟之前的学习的内容去做比较。这样在学习的时候,对之前的也是一个更深的理解,也不会对新的知识产生一些错误的大方向上的认识。计算机一门很重视实践的学科(人们更喜欢是直接看到程序员的结果),但是学习的基础也是必不可少的。
什么是jquery?
在之前接触过javascript的知识,javascript是一门解释性的可以对页面元素进行操作的这样的一门脚本语言。而jquery的本质也就是javascript,其实也就是javascript query的简写。由一些封装好的函数,配有相关的api帮助手册。这样更好的便于查询和使用,有很多像jquery这样相当丰富的javascript库的。jquery是其中的一个。
语法
$(selector).action()
大家在使用可以发现,jquery语法是为选择html页中的元素所指定的。selector就是用来查询html元素的选择符,action就是jquery后续的操作。
使用
对于jquery的了解,掌握了上面的一些概念基础上就可以看看一些小demon了。当然必备的jquery的查询api手册也是必备的,做为初学者了解这个手册在结合一些demon基本上就能够做出一些好看的效果了。这里是
官方的在线api查询网址:http://api.jquery.com/,当然也有离线的chm版的。
官方jquery下载地址:http://jquery.com/download/#Download_jQuery。
1.引入js文件
通常将js代码放在head标签内如
<head> <script type="text/javascript"> $("button").click(function(){ $("p").hide(); }); </script> </head>
当然上述做法不太受欢迎,一般比较好的做法是引入js文件
<scripttype="text/javascript"src="jquery.js"></script>
这里使用的是js已经下载好了的js离线文件,也可以直接使用Google CDN或者Microsoft 的CDN 。这个也就是一个google的服务地址或者CDN的服务器地址
使用Google的CDN
<head> <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> </head>
使用Microsoft 的 CDN
<head> <script type="text/javascript"src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script> </head>
2.常用方法
其实对于jquery的使用,在jquery的api手册里面写的已经很清楚了。为了加深一些常用的方法的使用我们还是做一些实例这样比较好。
选择器
在jquery里面,选择器的种类有很多
1.属性选择
也就是选择在html页面含有这个属性的元素
如:
$("[href]")选取所有带有 href 属性的元素。
$("[href='#']")选取所有带有 href 值等于 "#" 的元素。
2.元素选择
元素选择也就是选择相应的html的元素,如hr元素,div元素等。
$("p")选取 <p> 元素。
3.css选择
其实这谈不上选择,也就是选择完html页面上的元素后再进行css的样式设置
$("p").css("red");
事件处理
其实这里的事件处理类似于css样式的设置,同样是建立在已经对html页面元素选择的情况下。再进行调用这个函数罢了。
实例
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("Linkbutton").click(function(){ $("p").show(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <Linkbutton type="button">Click me</Linkbutton> </body> </html>
总结
总的来说,jquery本质是javascript库,在某种程度简化的javascript的编程。只不过换了一种表达和书写的方式,当然这只是在接触这个javascript库时的一些大局的理解。当涉及到具体的js技巧时,还是细心的去做demon。多多积累,多多查阅手册,多多实践。