码迷,mamicode.com
首页 > Web开发 > 详细

jQuery基础课程

时间:2016-05-19 23:12:24      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:

环境搭建

搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行。

  1. 下载jQuery文件库

在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库。在网站中找到最新版本文件的下载按钮,将jQuery框架文件下载到本地即可,本教案使用的版本为稳定版:1.9.0版。

  1. 引入jQuery文件库

下载完jQuery框架文件后,并不需要任何的安装,仅需要使 用<script>文件导入标记,将jQuery框架文件导入页面中即可,假设该文件下载后保存在项目文件夹Jscript中,那么,在页面 的<head></head>中加入如下代码:

<script language="javascript" type="text/javascript" src="1.9.0/jquery.js"></script>

在页面的头部分,加入上述代码后,便完成了jQuery框架开发环境的搭建,就可以开始我们的jQuery学习了。

jQuery初体验

如果你了解JavaScript语言,那将对你掌握jQuery如虎添翼,因为jQuery本身就是JavaScript,只不过是把JavaScript代码包装成拿过来就能实现特定功能的代码库!例如,我们想改变页面中所有段落标签中的文本内容:

javaScript代码:

技术分享

jQuery代码:

技术分享

以上两段代码完成的功能是一样的。由此可以看出,jQuery更加的简洁方便,我们在处理DOM时不必关心功能的实现细节。    $()就是jQuery中的函数,它的功能是获得()中指定的标签元素。如示例中$(“p”)会得到一组P标签元素,其中“p”表示CSS中的标签选择器。$()中的()不一定是指定元素,也可能是函数。

在jQuery中 $()方法等价于jQuery()方法,前者比较常用,是后者的简写。一般只有在$()与其它语言冲突时才会使用jQuery()方法。

#id 选择器(使用身份证号来找人)

jquery能使用CSS选择器来操作网页中的标签元素。如果你想要通过一个id号去查找一个元素,就可以使用如下格式的选择器:

$("#my_id")

其中#my_id表示根据id选择器获取页面中指定的标签元素,且返回唯一一个元素。

例如:

技术分享

在浏览器中显示的效果:

技术分享

从图中可以看出,通过#id选择器的方式获取元素,并在元素中调用html()方法为id="divtest"的<div>元素设置了文字显示在页面中。

此外,html()方法的功能是设置或获取元素中显示的内容,针对该方法我们在后面的章节中会有详细介绍。

技术分享

技术分享

element 选择器(寻找铅笔)

在文具盒中,有铅笔、钢笔和水彩笔,类似于页面中的<div>、<span>各个元素,虽然同属于一个容器,但有各自的功能,jQuery中可以根据元素名查找元素,格式如下:

$(“element”)

其中element就是元素的名称,也就是工具盒中的笔的名称,找到水彩笔,我们就可画画了,通过元素名找到元素就可以对它进行操作了。

如下图所示:在页面中,根据元素名找到了一个元素,并将它显示的字体加粗。

技术分享

在浏览器中显示的效果:

技术分享

从上面图中可以看出,根据元素的名称可以查找到该元素,并调用css()方法将设置该元素内容中文字显示的样式。

此外,css()方法的功能是设置或获取元素的某项样式属性,它的更多功能我们将在后续的章节中有详细的介绍。

jQuery基础课程

标签:

原文地址:http://www.cnblogs.com/mowanji/p/5510401.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!