一:简介
1.jQuery是一个开源的JavaScript的(JS)框架,也是的JavaScript函数库。
jQuery的是一个轻量级的 “写的少,做的多” 的的JavaScript库。
我们知道html使用标记语言书写的,而jQuery库可以通过一行简单的标记被添加到网页中。
2.可以先了解下
- HTML
- CSS
- JavaScript的
这些语言,但我们先来学习jQuery的。
3.推荐图书
“锋利的jQuery”
4.jQuery库包含以下功能:
- HTML元素选取
- HTML元素操作
- CSS操作
- HTML事件函数
- JavaScript特效和动画
- HTML DOM遍历和修改
- AJAX异步请求方式
- 公用事业
5.Jquery特点
Jquery是目前最流行的JS框架,提供了大量的插件与大量的扩展,而且目前jQuery兼容于很多浏览器,
但jQuery版本2以上不支持IE6,7,8浏览器。如果需要支持IE6 / 7/8,需要选择1.9版本。
<!--[if lt IE 9]>
<script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-2.0.0.js"></script>
<!--<![endif]-->
二:安装
网页中添加的jQuery
可以通过多种方法在网页中添加jQuery。这里介绍两种方法:
1.从 jquery.com 下载jQuery库
有两个版本的jQuery可供下载:
- 生产版 - 用于实际的网站中,已被精简和压缩。
- 开发版 - 用于测试和开发(未压缩,是可读的代码)。
将下载的文件放在网页的同一目录下,就可以使用jQuery的。
jQuery库是一个JavaScript文件,可以使用HTML的<script>标签引用它,相当于声明:
<head>
<script src="jquery-3.3.1.min.js"></script>
</head>
2.从CDN中载入jQuery
另一种方法是可以通过CDN(内容分发网络)引用jquery,不大推荐使用Google CDN来获取版本,因为Google产品在中国很不稳定。
可以在网上搜索到不同网站的CDN。
优势在于:
在访问其他站点时,已经从这些网站中加载过jQuery的了,这样可以减少加载时间,而且当用户向其请求时,会从离用户最近的服务器上返回用户所需的东西。
三:语法
1.jQuery的是JS的框架,可以选取HTML元素,并对其执行某些“操作”。
它的基础语法是:$(selector).action()
下面介绍它们的含义:
$ 美元符号定义,相当于声明jquery
(selector) 选择符,"查询"和"查找"HTML元素
action() 响应事件,响应执行对HTML元素的操作事件
下面是一些实例:
-
$(this).hide() - 隐藏当前元素
-
$("p").hide() - 隐藏所有 <p> 元素
-
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
-
$("#test").hide() - 隐藏所有 id="test" 的元素
大家可以发现,其实如果想要对某个标签的元素进行操作,需要对这个标签加上双引号(""),而且,要详细查找元素时,对不同的HTML标签属性,有不同的符号,比如上面的三和四,找到class属性的元素用到了".",找到id的元素用到了"#"。
2.jquery使用的语法是 XPath 与 CSS 选择器语法的组合。
3.document ready 函数
我们要防止文档在完全加载完之前就运行jQuery代码,即在DOM(文档对象模型(Document Object Model))加载完成后才对DOM进行操作。如果在文档没有完全加载之前就运行函数,操作可能失败。
关于DOM可以参看下面:
https://baike.baidu.com/item/DOM/50288?fr=aladdin
下面有两种写法:
$(document).ready(function(){
//代码
});
或者
$(function(){
//代码
});
其实按照字面意思就可以理解,就是对文件先进行读取事件,然后进行操作。
4.javaScript入口函数
window.onload = function(){
//代码
}
区别:
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,再去执行。
因此JavaScript需要加载的东西多。
我们先来测试一下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是我的第一个jquery网页</title>
<script src = "https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
$("button").click(function(){
$("h1").hide();
});
});
</script>
</head>
<body>
<p>点我我就会消失</p>
<h1>这是一个段落</h1>
<button>点这个按钮,段落就会消失</button>
</body>
</html>
我们看一下效果:
我们看到已经完成了。