jQuery是一个快速、简洁的JavaScript框架。封装JavaScript常用的功能代码,极大地简化了 JavaScript 编程。优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery库包含以下功能:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX异步请求方式
一、Jquery的安装
从 jquery官方网站 中下载 jQuery 库,并把它放到项目当中就可以。jQuery 库是一个JavaScript 文件,使用 HTML 的 <script>
标签引用,就可以在网页中使用 jQuery 了。(需要javascript的基础)
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入jquery,注意jquery所在的目录 -->
<script src="js/jquery-3.2.1.js"></script>
<script>
//在这里我们就可以使用,jquery来编写代码了
//这里实现的是,当整个html页面加载完成的时候,就会调用这个方法
$(function(){
alert("页面加载完成!");
})
</script>
</head>
<body>
</body>
<html>
二、jQuery语言基础—基础选择器
jQuery 选择器允许对 HTML元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”(或选择)HTML 元素。类似于的CSS 选择器,还有一些自定义的选择器。
通过这些选择器,来获取相应元素的对象,从而进行相应的操作(类似dom编程)。jQuery 中所有选择器都以美元符号开头:$()
(一)元素选择器
元素选择器基于元素名选取元素。
语法:$("元素名称")
或者jQuery("元素名称")
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<!-- 引入jquery,注意jquery所在的目录 -->
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
<p>p1</p>
<p>p2</p>
</body>
<script>
//选取所有的<p>标签,调用hide函数来实现,隐藏<p>标签
$("p").hide();
</script>
</html>
(二)id选择器
通过 HTML 元素的 id 属性选取指定的元素,页面中元素的 id 应该是唯一的。
语法:$("#元素的id属性")
或者jQuery("#元素的id属性")
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<!-- 引入jquery,注意jquery所在的目录 -->
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
<p id="1">p1</p>
<p id="2">p2</p>
</body>
<script>
//选取的id属性为"1"的<p>标签,调用hide函数来实现,隐藏<p>标签
$("#1").hide();
</script>
</html>
(三)class 选择器
通过指定的 class 查找元素。
语法:$(".元素的class属性")
或者jQuery(".元素的class属性")
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<!-- 引入jquery,注意jquery所在的目录 -->
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
<p class="p1">p1</p>
<p class="p2">p2</p>
</body>
<script>
//选取所有的class属性为"p1"的<p>标签,调用hide函数来实现隐藏<p>标签
$(".p1").hide();
</script>
</html>
更多的选择器可以查看jQuery 官方API
(四)Dom对象和jQuery对象之间的转换
1、Dom对象转换成jQuery对象
语法:var $obj = $(Dom对象)
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<!-- 引入jquery,注意jquery所在的目录 -->
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
<p id="1">p1</p>
</body>
<script>
//js获取p元素对象
var p = document.getElementById("1");
//转换成jQuery对象
var $obj = $(p);
</script>
</html>
2、jQuery对象转换Dom对象
语法var obj = $jQuery对象.get(0)
或者 var obj = $jQuery对象[0]
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<!-- 引入jquery,注意jquery所在的目录 -->
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
<p id="1">p1</p>
</body>
<script>
//使用选择器获取jquery对象
var $p = $("#1");
//转换成Dom对象
var obj = $p.get(0);//var obj = $p[0];
</script>
</html>
三、jQuery语言基础—事件函数
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
语法:
$("选择器").事件函数(function(){
//这里编写需要实现的业务逻辑
})
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<!-- 引入jquery,注意jquery所在的目录 -->
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
<button id="b1">点击</button>
</body>
<script>
//通过选择器获取button的对象,然后调用它的 点击事件函数
$("#b1").onclick(function(){
alert("你点击了按钮!");
})
</script>
</html>
同样的,各种元素的各种事件函数都是如此调用。一些常用的事件函数:
- 页面载入
- ready(fn)
- 事件处理
- on(eve,[sel],[data],fn)
- off(eve,[sel],[fn])
- bind(type,[data],fn)
- one(type,[data],fn)
- trigger(type,[data])
- triggerHandler(type, [data])
- unbind(t,[d|f])
- 事件委派
- live(type,[data],fn)
- die(type,[fn])
- delegate(s,[t],[d],fn)
- undelegate([s,[t],fn])
- 事件切换
- hover([over,]out)
- toggle([spe],[eas],[fn])
- 事件
- blur([[data],fn])
- change([[data],fn])
- click([[data],fn])
- focus([[data],fn])
- focusin([data],fn)
- focusout([data],fn)
- keydown([[data],fn])
- keypress([[data],fn])
- keyup([[data],fn])
- mousedown([[data],fn])
- mouseenter([[data],fn])
- mouseleave([[data],fn])
- mousemove([[data],fn])
- mouseout([[data],fn])
- mouseover([[data],fn])
- mouseup([[data],fn])
- resize([[data],fn])
- scroll([[data],fn])
- select([[data],fn])
- submit([[data],fn])
- unload([[data],fn])
这里就不一一对所有事件函数进行讲解,有空可以看一下jQuery 官方API。
我们只看看页面载入的事件函数:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<!-- 引入jquery,注意jquery所在的目录 -->
<script src="js/jquery-3.2.1.js"></script>
<script>
//当整个html页面加载完成的时候,就会调用这个方法
//类似于JavaScript的window.onload=function(){} ,但是一个页面中只能使用一次,而jquery有多个页面加载事件函数
$(function(){
alert("页面加载完成啦~~");
});
/*
也可以写成这样,通过选择器来获取document对象,调用其ready事件。
$(document).ready(function(){
})
*/
</script>
</head>
<body>
hellow world!
</body>
</html>
还有更多的jQuery知识是需要去学习的,我们可以通过查阅jQuery 官方API 来学习。