jQuery的学习笔记【一】【使用jQuery 基本语法】

jQuery在刚学习的时候,以为是一门全新的语言,其实并不是的,它是一个JavaScript的函数库,它的许多方法非常的实用,减少了JavaScript的编写行数。在学习jQuery之前呢,最好先学习下:HTML,CSS,JS。

jQuery可以对html的各类元素标签进行操作(包括获取当前元素的value值,更改value值,对元素的css操作,点击事件,双击事件,鼠标的进入,鼠标的移出,添加元素,删除元素等等),还有一些对元素进行的一些动画特效,比如隐藏/显示,淡入/淡出,还有动画进场,退场等,可以遍历各种元素标签,某个元素的祖先元素,后代元素,或者同胞元素都是可以进行访问,筛选。

如果单单只是这些,还不能成为这么流行使用的一个函数库了,因为上述的功能,大部分使用DOM(Document Object Model 文档对象模型)都可以实现。

jQuery还提供了非常方便的AJAX的方法,只用简短的代码就能获取服务器里的数据,实现前端与后端的交互,像$.get(URL,callback);就是通过HTTP GET请求从服务器上请求数据,$.post(URL,data,callback);通过HTTP POST请求向服务器提交数据,它的强大以后慢慢诉说,我们先着眼于当下,一步步来。

首先要怎么使用jQuery呢,有两种方法:

一、下载jQuery

在官网https://jquery.com/download/进行下载

然后在HTML中使用<script>标签把下载 的js文件导入:

<script src="jquery-x.xx.x.min.js"></script>

要注意的是,jquery有两种形式的文件,一种后缀是.min.js,一种后缀是.js,那么这两种有什么不一样呢,.min.js是经过压缩的文件,相对于js文件体积更小,但是传输效率快,我们一般都使用的是.min.js的文件,因为它们的内容是完全一样的

二、通过CDN使用jQuery

这种方法最不需要下载jQuery了,是通过CDN(Content Delivery Network ,内容分发网络)来引用它。CDN在国内有很多,我们一般使用的是国内的CDN,因为国外的CDN服务器不在国内,访问速度会很慢。国内的例如有百度的,新浪,又拍云等等。

在这里我们例举一个百度的存放有jQuery的CDN:

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

只需要这句代码就可以去使用jQuery了。

我们一般把jQuery的代码写在js文件里,但是如果你的html页面代码行数不多,也是可以把jQuery写在html文件里,不过要用<script type="text/javascript"></script>标签来说明这一段是js的代码。至于type="text/javascript",可写可不写,因为现在javascript已经是HTML5的默认脚本语言了。

那么第一步要怎么去编写代码呢?jQuery为了防止页面在未完全加载前,就运行了所编写的jQuery代码,导致一些报错或者操作失败,就创建了”就绪事件“,让页面加载完后才去加载jQuery的代码:

$(document).ready(function(){
    //jQuery代码...
});

还有一种简写的方式,效果是相同的:

$(function(){
    //jQuery代码...
});

我们现在来讲一下jQuery的基础语法,

$(selector).action()

$()其实就是jQuery(),只是为了简化书写,我们直接使用$来标示jQuery,然后selector是选择符,是用来对元素进行定位,可以填写标签例如div,p,span等,也可以填写class,或者id,这样子能找到使用了该class或者id的元素,可以对它们进行操作,action(),泛指所有的事件,例如hide()就是让选择符中的元素隐藏起来,就像是设置它的css(display:none;)一样的效果。

例如我现在有一个页面,里面有一个p标签:

<!-- html页面 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>隐藏p元素</title> 
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script src="test.js"></script>
</head>

<body>
    <p>这是p标签</p>
    <button>点我隐藏p标签</button>
</body>
</html>

注意test.js是我编写的jQuery代码,并且这两个文件是放在了同一个目录下。

//test.js
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

/*
简写:
$(function(){
  $("button").click(function(){
    $("p").hide();
  });
});


*/

当点击button的时候,p标签就会在页面上消失,大家可以尝试下,源码上面都有。好了,安装jQuery和基本语法就讲到这里啦。

上一章:暂无                        下一章:jQuery的学习笔记【二】

发布了22 篇原创文章 · 获赞 19 · 访问量 3538

猜你喜欢

转载自blog.csdn.net/KnightHONG/article/details/102654024
今日推荐