- jQuery 是一个 JavaScript 库。[.js]
- jQuery 极大地简化了 JavaScript 编程。
- jQuery 很容易学习。
jQuery 简介
jQuery库可以通过一行简单的标记被添加到网页中。 例如: <script scr="js/jquery.js"></script> 您需要具备的基础知识 在您开始学习jQuery之前,您应该对一下知识有基本的了解: HTML CSS JavaScript **什么是jQuery?**
jQuery是一个轻量级的“写得少,做的多”的JavaScript函数库。[独立的JavaScript文件] jQuery库包含以下功能: 1.HTML 元素选取
2.HTML 元素操作
3.CSS 操作
4.HTML 事件函数
(1).在开始标记中添加事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function test1(){
/
}
</script>
<input type="button" value="按钮" onclick="test1()" />
</body>
</html>
2.通过匿名函数添加事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
document.getElementById("but1").onclick=function(){
}
</script>
<input type="button" id="but1" value="按钮" />
</body>
</html>
5.JavaScript特效和动画
6.HTML DOM遍历和修改
7.AJAX
https://jquery.com/ 官网
jQuery安装
网页中添加jQuery
可以通过多种方法在网页中添加jQuery。您可以使用以下方法:
1.从jquery.com下载jQuery库
production jQuery 3.5.1— https://code.jquery.com/jquery-3.5.1.min.js
development jQuery 3.5.1—https://code.jquery.com/jquery-3.5.1.js
如果开发测试使用devrlopment jQuery 3.5.1,有注释可以查看具体的内容。
如果发布使用production jQuery 3.5.1,小 ,节省内存。
通过script标记导入到网页中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
alert("测试导入jquery");
});
</script>
<body>
</body>
</html>
2.通过网络地址导入jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
alert("测试导入jQuery");
});
</script>
<body>
</body>
</html>
jQuery 语法
通过jQuery,您可以选取(查询,jquery)HTML元素,并对他们执行“操作”(actions).
基础语法:$(selector).action()
1.美元符号定义:jQuery
2.选择符(selector)"查询"和"查找"HTML元素
3.jQuery的action()执行对元素的操作
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
//基础语法:$(selector).action()
$("p").css("background-color","yellow");
$("p.test1").css("color","red");
$("#test2").css("color","blue");
});
</script>
<body>
<p>测试jQuery的基础语法1</p>
<p class="test1">测试jQuery的基础语法2</p>
<p>测试jQuery的基础语法3</p>
<p id="test2">测试jQuery的基础语法4</p>
</body>
</html>
文档就绪事件—就是页面初始化事件
JavaScript的页面初始化事件
1.body中提供οnlοad=“函数”
2.window.οnlοad=function(){}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
function testJavascriptonload(){
alert("javascript的页面初始化事件11");
}
</script>
<body onload="testJavascriptonload()">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
window.onload=function(){
alert("javascript的页面初始化事件22");
}
</script>
<body>
</body>
</html>
jquery的页面初始化事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="jquery-3.5.1.js"></script>
<script type="text/javascript">
/*
//原始做法
$(document).ready(function(){
alert("jquery的页面初始化事件--原始做法");
});
*/
//简化版本
$(function(){
alert("jquery的页面初始化事件--简化版本11");
});
$(function(){
alert("jquery的页面初始化事件--简化版本22");
});
$(function(){
alert("jquery的页面初始化事件--简化版本33") ;
});
</script>
<body>
</body>
</html>
jQuery选择器
jQuery选择器允许您对HTML元素组或单个元素进行操作。
1.元素选择器
jQuery元素选择器基于元素名选取元素。
2.#id 选择器
jQuery#id选择器通过HTML元素 id 属性选取指定的元素。
页面中元素的id应该是唯一的,所以您要在页面中选取唯一的元素需要通过#id选择器。
3.class选择器
jQuery类选择器可以通过指定的class查找元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<script>
$(function(){
//元素选择器
$("p").css("background-color","black");
//.class选择器
$("p.test1").css("color","red");
//id选择器
$("#test2").css("color","blue");
$("p:first").css("color","green");
$("ul li:first").css("font-size","30px");
$("ul li:last-child").css("font-size","40px");
$("[href]").css("font-size","20px");
$(":button").css("width","180px");
$("table").css("width","480px");
$("tr:even").css("background-color","red");
$("tr:odd").css("background-color","blue");
});
</script>
</head>
<body>
<p>测试jquery的基础语法1</p>
<p class="test1">测试jquery的基础语法2</p>
<p>测试jquery的基础语法3</p>
<p id="test2">测试jquery的基础语法4</p>
<ul>
<li>name=zhangsan</li>
<li>age=23</li>
<li>address=xian</li>
</ul>
<ul>
<li>name=lisi</li>
<li>age=23</li>
<li>address=xian</li>
</ul>
<ul>
<li><a href="#">name=wangwu</a></li>
<li><a href="#">age=23</a></li>
<li><a href="#">address=xian</a></li>
</ul>
<input type="button" value="测试button1"/>
<input type="button" value="测试button2"/>
<table border="1px">
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1003</td><td>王五</td><td>24</td><td>西安</td></tr>
<tr><td>1002</td><td>lisi</td><td>25</td><td>西安</td></tr>
<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
<tr><td>1003</td><td>王五</td><td>24</td><td>西安</td></tr>
<tr><td>1002</td><td>lisi</td><td>25</td><td>西安</td></tr>
</table>
</body>
</html>
jQuery 事件
jQuery 事件方法语法
在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件:
$(“p”).click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现:
$(“p”).click(function(){ // 动作触发后执行的代码!! });
常用的 jQuery 事件方法
- $(document).ready(function) 文档完全加载完后执行函数
- click(function) 方法是当按钮点击事件被触发时会调用一个函数
- dblclick(function)双击元素时,会发生 dblclick 事件。
- mouseenter(function)当鼠标指针穿过元素时,会发生 mouseenter 事件。
- mouseleave(function)当鼠标指针离开元素时,会发生 mouseleave 事件。
- hover(function)方法用于模拟光标悬停事件。
- focus(function)当元素获得焦点时,发生 focus 事件。
- blur(function)当元素失去焦点时,发生 blur 事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<script>
$(document).ready(function(){
alert("$(document).ready(function) 文档完全加载完后执行函数");
});
$(document).ready(function(){
$("#but1").click(function(){
alert("click(function) 方法是当按钮点击事件被触发时会调用一个函数");
});
$("#but2").dblclick(function(){
alert("dblclick(function)双击元素时,会发生 dblclick 事件。");
});
$("#h2").mouseenter(function(){
alert("4.mouseenter(function)当鼠标指针穿过元素时,会发生 mouseenter 事件。");
});
$("#h2").mouseleave(function(){
alert("5.mouseleave(function)当鼠标指针离开元素时,会发生 mouseleave 事件。");
});
$("#a1").hover(function(){
alert("6.hover(function)用于模拟光标悬停事件。");
});
$("#text1").focus(function(){
$(this).val("background-color");
});
$("#text1").blur(function(){
alert($(this).val());
});
});
</script>
</head>
<body>
<input id="but1" type="button" value="测试单击事件"><br>
<input id="but2" type="button" value="测试双击事件"><br>
<h2 id="h2">测试鼠标进入和移出事件</h2>
<a id="a1" href="#">测试光标悬停事件</a><br><br><br>
<input id="text1" type="text" value="测试获得焦点和失去焦点事件"><br>
</body>
</html>