1.什么是 jQuery ?
jQuery是一个轻量级的"写的少,做的多"的JavaScript函数库。[独立的javascript文件]
jQuery 的优点:
1.jQuery 是一个 JavaScript 函数库。[.js]
2.jQuery 极大地简化了 JavaScript 编程。
3.jQuery 很容易学习。
jQuery库包含以下功能:
1.HTML元素选取
2.HTML元素操作
3.CSS 操作
4.HTML 事件函数
5.JavaScript 特效和动画[元素的隐藏和显示]
6.HTML DOM 遍历和修改
7.AJAX请求【获取后台处理程序返回的数据值】高级操作
2.Jquery下载
https://code.jquery.com/jquery-3.6.0.min.js
https://code.jquery.com/jquery-3.6.0.js
Jquery是以“.js”结尾的,说明它是一个javascript文件。可以按照javascript
的用法使用。
jquery-3.6.0.min.js–jquery的发布版,它的特点小,节省内存。因为它里面的内容被压缩了。
jquery-3.6.0.js—jquery的开发版,它的特点有注释可以查看具体的内容。它是没有压缩的。
3.jQuery的使用
1.通过script标记导入本地jquery函数库文件到网页中。它是一个独立的javascript文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jq/jquery-3.6.0.js">
</script>
<script>
$(function() {
alert("通过script标记引入独立的jquery文件");
});
</script>
</head>
<body>
<h1></h1>
</body>
</html>
2.通过script标记利用网络地址导入jquery函数库到网页中
4.jQuery 语法
通过 jQuery,您可以选取HTML 元素【标记】,并对它们执行"操作"(actions)。
基础语法: $(selector).action()
1.选择符(selector)—"查询"和"查找"需要被控制的 HTML 元素。可以将被控制的 HTML 元素转美元符号定义 $ -表示jQuery,jQuery表示 $ 。我们可以使用 $ 代替jQuery。
2.换成jQuery对象。【 $(selector)–jQuery的构造器–创建jQuery对象】
3.action()指对得到的jQuery对象调用的函数/属性
Javascript的页面初始化事件
1.body中提供οnlοad=“函数”
2.window.οnlοad=function(){}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery的初始化函数</title>
<script src="jq/jquery-3.5.1.js"></script>
<script>
/*
$(document).ready(function(){
alert("jQuery的初始化函数")
});
$(function(){
alert("jQuery的初始化函数");
});
*/
//$==jQuery,当我们在程序中需要jQuery,可以使用$代替
jQuery(function(){
alert("jQuery的初始化函数");
});
</script>
</head>
<body>
</body>
</html>
jQuery的初始化函数
5.Jquery对象与javascript对象的转换
1.javascript对象转换成Jquery对象:【$(javascript对象)】
2.Jquery对象转换成javascript对象:【Jquery对象.get()】
jquery的构造有常用的两种
$(selecter)—将被选中的html标记构造成Jquery对象
$(javascript对象)—将javascript对象构造成Jquery对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery对象与javascript对象的转换</title>
<script src="jq/jquery-3.5.1.js"></script>
<script>
$(function(){
var jqobj=$("#h1");
//alert(jqobj);//[object Object]
var docobj=document.getElementById("h1");
//alert(docobj);//[object HTMLHeadingElement]
//1.javascript对象转换成Jquery对象:【$(javascript对象)】
var jq1obj=jqobj.get();
//alert(jq1obj);//[object HTMLHeadingElement]
//1.javascript对象转换成Jquery对象:【$(javascript对象)】
var jqobj1=$(docobj);
alert(jqobj1);//[object Object]
});
</script>
</head>
<body>
<h1 id="h1">Jquery对象与javascript对象的转换</h1>
</body>
</html>
6.jQuery 选择器
jQuery 选择器允许 对 HTML 元素组或单个元素进行操作。
1.元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素选择器</title>
<script src="jq/jquery-3.5.1.js"></script>
<script>
$(function() {
var p1 = $("p");
p1.css("color", "red");
//遍历
var size = 20;
for (var i = 0; i < p1.length; i++) {
size = i * 10 + size;
$(p1[i]).css("font-size", size + "px");
}
});
</script>
</head>
<body>
<p>其他常用选择器</p>
<p>测试jquer选择器</p>
<p>测试jquer选择器</p>
<p>测试jquer选择器</p>
</body>
</html>
2.#id 选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id</title>
<script src="jq/jquery-3.5.1.js"></script>
<script>
$(function() {
$("#p1").css({
"font-size": "20px",
"color": "red"
});
$("#p2").css({
"font-size": "30px",
"color": "yellow"
});
$("#p3").css({
"font-size": "40px",
"color": "pink"
});
});
</script>
</head>
<body>
<p id="p1">其他常用选择器</p>
<p id="p2">测试jquer选择器</p>
<p id="p3">测试jquer选择器</p>
<p id="p3">测试jquer选择器</p>
</body>
</html>
3.class 选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class</title>
<script src="jq/jquery-3.5.1.js"></script>
<script>
$(function() {
$(".p1").css({
"font-size": "20px",
"color": "red"
});
$(".p2").css({
"font-size": "30px",
"color": "yellow"
});
$(".p3").css({
"font-size": "40px",
"color": "pink"
});
});
</script>
</head>
<body>
<p class="p1">其他常用选择器</p>
<p class="p2">测试jquer选择器</p>
<p class="p3">测试jquer选择器</p>
<p class="p3">测试jquer选择器</p>
</body>
</html>
4.其他常用选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>其他常用选择器</title>
<script src="jq/jquery-3.5.1.js"></script>
<script>
$(function(){
//$("p:first").css("color","yellow");
//$("ul li:first").css("font-size","40px");
//$("ul li:first-child").css("font-size","40px");
//$("[href]").css("font-size","30px");
//$(":button").css("width","200px");
//$(":table").css("width","200px");
$("tr:even").css("background-color","red");
$("tr:odd").css("background-color","blue");
});
</script>
</head>
<body>
<p>测试jquery的基础语法1</p>
<p>测试jquery的基础语法2</p>
<p>测试jquery的基础语法3</p>
<p>测试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</li>
<li a href="#">age=23</li>
<li a href="#">address=xian</li>
</ul>
<input type="button" value="测试button1" />
<input type="button" value="测试button1" />
<table border="1px">
<tr>
<td>1001</td>
<td>zhangsan</td>
<td>23</td>
</tr>
<tr>
<td>1002</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>1003</td>
<td>李四</td>
<td>15</td>
</tr>
<tr>
<td>1002</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>1002</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>1001</td>
<td>zhangsan</td>
<td>23</td>
</tr>
</table>
</body>
</html>
7.jQuery控制HTML元素以及文本内容
jQuery获取/设置文本元素的值
text([content])—获取/设置所选元素的文本内容
html([content])–获取/设置所选元素的内容(包括 HTML 标记)
val([content])----获取/设置表单字段的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取/设置文本元素的值</title>
<script src="jq/jquery-3.5.1.js"></script>
<script>
$(function(){
//获取
//var h1value=$("#h1").text();
var h1value=$("#h1").html();
//alert(h1value);
//val()----返回表单字段的值
var but1=$(":button");
//alert(but1.val());
//设置
//$("#h2").text("<font color='red'>设置文本元素的值</font>");
//$("#h2").html("<font color='red'>设置文本元素的值</font>");
var butobj=$(":button");
butobj.val("测试按钮");
});
</script>
</head>
<body>
<!-- <h1 id="h1">获取/设置<a href="#">h1</a>元素的值</h1>
<input type="button" value="测试" /> -->
<h1 id="h2">获取/设置<a href="#">h1</a>元素的值</h1>
<input type="button" value="测试" />
</body>
</html>
8.jQuery添加元素
append() - 在被选中元素中插入内容[最后一个元素在最后]
prepend() - 在被选中元素中插入内容[最后一个元素在最前面]
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加元素</title>
<script src="jq/jquery-3.5.1.js"></script>
<style>
#div {
width: 400px;
height: 300px;
background-color: aqua;
}
</style>
<script>
$(function() {
var divobj = $("#div");
//append() - 在被选中元素中插入内容[最后一个元素在最后]
divobj.append("<h1>append()在被选中元素中插入内容[最后一个元素在最后]</h1>");
//after() - 在被选元素之后插入内容
divobj.after("prepend()在被选中元素中插入内容[最后一个元素在最前面]");
//before() - 在被选元素之前插入内容
divobj.before("before()在被选元素之前插入内容");
})
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
9.jQuery删除元素
remove() - 删除被选元素(及其子元素)【有过滤功能】
empty() - 从被选元素中删除子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery删除元素</title>
<script src="jq/jquery-3.5.1.js"></script>
<style>
#div {
width: 400px;
height: 300px;
background-color: aqua;
}
</style>
<script>
$(function() {
var divobj = $("#div1");
//remove() - 删除被选元素(及其子元素)
//divobj.remove();
//empty() - 从被选元素中删除子元素
divobj.empty();
})
</script>
</head>
<body>
<div id="div1">
<h1>测试删除元素</h1>
<img src="avatar5.png" />
</div>
</body>
</html>
10.jquery的CSS 操作
1.为元素添加不存在的样式
css(样式属性名称,属性值) 设置被选元素的具有这个样式。
css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1.为元素添加不存在的样式</title>
<script src="jq/jquery-3.5.1.js"></script>
<script>
$(function(){
$('#but1').click(function(){
var div1=$("#div1");
//css(样式属性名称,属性值) 设置被选元素的具有这个样式。
//div1.css("width","300px");
div1.css({"width":"300px","height":"300px","background-color":"red"});
});
});
</script>
</head>
<body>
<input id="but1" type="button" value="为没有样式的元素添加样式" />
<div id="div1"></div>
</body>
</html>
2.为元素添加已经存在的样式
addClass() - 向被选元素添加一个或多个样式类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
3.获取元素样式
css(样式属性名称) 返回被选元素的指定样式属性值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2.为元素添加已经存在的样式</title>
<script src="jq/jquery-3.5.1.js"></script>
<style>
.div{
width: 300px;
height: 300px;
background-color: #00FFFF;
}
p{
font-size: 60px;
}
</style>
<script>
//为有样式的元素添加样式
$(function(){
$('#but1').click(function(){
var div1=$("#div1");
//addClass() - 向被选元素添加一个或多个样式类
div1.addClass("div");
});
//删除addClass添加样式
$('#but2').click(function(){
var div1=$("#div1");
//addClass() - 向被选元素添加一个或多个样式类
div1.removeClass("div");
});
//切换样式
$('#but3').click(function(){
var div1=$("#div1");
//addClass() - 向被选元素添加一个或多个样式类
div1.toggleClass("div");
});
//获取元素样式
$('#but4').click(function(){
var div1=$("p");
//css(样式属性名称) 返回被选元素的指定样式属性值。
alert(div1.css("font-size"));
});
});
</script>
</head>
<body>
<input id="but1" type="button" value="为有样式的元素添加样式" />
<input id="but2" type="button" value="删除addClass添加样式" />
<input id="but3" type="button" value="切换样式" />
<input id="but4" type="button" value="获取元素样式" />
<div id="div1"></div>
<p>获取元素样式</p>
</body>
</html>