您的位置：首页 > Web前端 > JQuery

JQuery学习总结

2013-11-06 17:25 267 查看

基础

在学习一些新的知识的时候，总会一些新的概念，需要我们去理解，去跟之前的学习的内容去做比较。这样在学习的时候，对之前的也是一个更深的理解，也不会对新的知识产生一些错误的大方向上的认识。计算机一门很重视实践的学科（人们更喜欢是直接看到程序员的结果），但是学习的基础也是必不可少的。

什么是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。多多积累，多多查阅手册，多多实践。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航