在开始学习 jQuery 之前，您应该对以下知识有基本的了解：
HTML
CSS
JavaScript
jQuery 简介
1.什么是 jQuery ？
jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。[独立的javascript文件]
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请求【获取后台处理程序返回的数据值】高级操作
Jquery下载
官网
Download the compressed, production jQuery 3.6.0---jquery-3.6.0.min.js
Download the uncompressed, development jQuery 3.6.0---jquery-3.6.0.js
Jquery是以“.js”结尾的，说明他是一个javascript文件。可以按照javascript的用法使用。
jquery-3.6.0.min.js--jquery的发布版，它的特点小，节省内存。因为它里面的内容被压缩了
jquery-3.6.0.js---jquery的开发版，它的特点有注释可以查看具体的内容。它是没有压缩的
jQuery的使用
1.通过script标记导入本地jquery函数库文件到网页中。它是一个javascript文件
适用于我们将jquery函数库文件下载到本地计算机以后操作
2.通过script标记利用网络地址导入jquery函数库到网页中
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导入本地jquery文件-->
<script src="F:\jQuery\jquery-3.6.0.min.js"></script>
<!-- 导入网络上的jquery文件-->
<!--<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
<!-- 导入jquery函数库【网络地址】 -->
<!--<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
<script>
$(function(){
alert("通过script标记引入独立的jquery文件")
})
</script>
</head>
<body>
</body>
</html>jQuery 语法
通过 jQuery，您可以选取HTML 元素【标记】，并对它们执行"操作"（actions）
基础语法： $(selector).action()
1.美元符号定义 $ -表示jQuery，jQuery表示$。我们可以使用$代替jQuery。
2.选择符（selector）---"查询"和"查找"需要被控制的 HTML 元素。可以将被控制的 HTML 元素转
换成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></title>
<!-- 导入本地jquery文件-->
<script src="F:\jQuery\jquery-3.6.0.min.js"></script>
<!-- 导入网络上的jquery文件-->
<!--<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
<!-- 导入jquery函数库【网络地址】 -->
<!--<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
<script>
window.onload=function(){
alert("JavaScript页面初始化事件")
}
</script>
</head>
<body>
</body>
</html>Jquery的初始化函数
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导入本地jquery文件-->
<script src="F:\jQuery\jquery-3.6.0.min.js"></script>
<!-- 导入网络上的jquery文件-->
<!--<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
<!-- 导入jquery函数库【网络地址】 -->
<!--<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
<script>
/*$(function(){
alert("jQuery页面初始化事件")
})*/
jQuery(function(){
alert("jQuery页面初始化事件")
})
</script>
</head>
<body>
</body>
</html>
实例:测试语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导入本地jquery文件-->
<script src="F:\jQuery\jquery-3.6.0.min.js"></script>
<script>
//页面初始化事件
//Javascript的页面初始化事件
//1.body中提供onload=“函数”
//2.window.onload=function(){}
//特点:1.执行时机，必须等到整个html页面加载完成以后，在执行包裹代码
//2.只能执行一次，如果执行第二次，那么就会覆盖第一次的执行结果
/*window.onload=function(){
alert("JavaScript页面初始化事件第一次")
}
window.onload=function(){
alert("JavaScript页面初始化事件第一次")
}*/
//Jquery的页面初始化事件
//特点:1.执行时机，等到整个html页面dom结构生成以后，在执行包裹代码
//2.可以执行多次，不会覆盖之前的执行
/*$(document).ready(function(){
alert("第一次");
})
$(document).ready(function(){
alert("第一次");
})*/
$(function(){
alert("第一次执行");
})
$(function(){
alert("第二次执行");
})
</script>
</head>
</body>
</html>Jquery对象与javascript对象的转换
1.javascript对象----》Jquery对象-------【$(javascript对象)】
2.Jquery对象------》javascript对象-----【Jquery对象.get()】
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导入本地jquery文件-->
<script src="F:\jQuery\jquery-3.6.0.min.js"></script>
<script>
//jquery对象与javascript对象的转换
//通过$("")得到jquery对象
//jquery对象只能调用jquery函数，不能使用JavaScript对象的方法
//JavaScript对象就是我们通过document.getElemen...()得到dom对象
//dom对象只能调用JavaScript对象的方法，不能使用jquery函数
$(function(){
//var jqust=$("p");
//alert(jqust);
//var objdom=document.getElementsByTagName("p")[0];
//alert(objdom);
/* var objdom=document.getElementsByTagName("p")[0];
//javascript对象---转换---Jquery对象
alert(objdom)
var jquobj=$(objdom);
alert(jquobj);
jquobj.css("color","red");*/
var jqobj=$("p");
//Jquery对象---转换---javascript对象
jqobj.get();
var domobj=jqobj.get();
domobj[0].style.color="red"
}
)
</script>
</head>
<body>
<p>测试Jquery对象与javascript对象的转换</p>
</body>
</html>jquery的构造有常用的两种
$(selecter)---将被选中的html标记构造成Jquery对象
$(javascript对象)---将javascript对象构造成Jquery对象
jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
1.元素选择器
jQuery 元素选择器基于元素名选取元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>#id 选择器</title>
<!--导入jquery函数库 -->
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
//#id 选择器--根据元素id属性值选中html元素
$("#p1").css({"font-size":"30px","color":"red"});
//当id属性值相同时只能得到第一个元素
$("#p2").css({"font-size":"40px","color":"red"});
$("#p3").css({"font-size":"50px","color":"red"});
});
</script>
</head>
<body>
<p id="p1">测试jquery的id选择器1</p>
<p id="p2">测试jquery的id选择器2</p>
<p id="p2">测试jquery的id选择器3</p>
<p id="p3">测试jquery的id选择器4</p>
</body>
</html>
3..class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class选择器</title>
<!--导入jquery函数库 -->
<script src="F:\jQuery\jquery-3.6.0.min.js"></script>
<script>
$(function(){
//class选择器--根据元素class属性值选中html元素
$(".p1").css({"font-size":"30px","color":"red"});
//当class属性值相同时会得到一组
//当需要单独控制每一个元素是需要遍历，遍历的每一个元素都是javasript对象
$(".p2").css({"font-size":"40px","color":"red"});
$(".p3").css({"font-size":"50px","color":"red"});
});
</script>
</head>
<body>
<p class="p1">测试jquery的class选择器1</p>
<p class="p2">测试jquery的class选择器2</p>
<p class="p2">测试jquery的class选择器3</p>
<p class="p3">测试jquery的class选择器4</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="F:\jQuery\jquery-3.6.0.min.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>
2.jQuery HTML
1.jQuery获取/设置文本元素的值
jQuery获取元素的值 text()、html() 以及 val()
text()---返回所选元素的文本内容
html()--返回所选元素的内容（包括 HTML 标记）
val()----返回表单字段的值
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导入本地jquery文件-->
<script src="F:\jQuery\jquery-3.6.0.min.js"></script>
<script>
$(function(){
//2.HTML元素操作
//javascript中HTML元素操作
//innerHTML属性---可以修改html元素以及元素中的内容
//可以解释运行html标记
//innerText属性---可以修改html元素中的内容
//不可以解释运行html标记，可以操作html元素中的内容
//value属性---专门控制表单元素的值
//jquery中HTML元素操作
//html([内容])函数----可以修改html元素以及元素中的内容
//得到html元素中的内容
//var val=$("#p1").html();
//alert(val);
//修改html元素
//$("#p1").html("<h1>测试<a href=\"#\">jquery</a>对HTML元素操作</h1>");
//html([内容])函数-----等价于---innerHTML属性
//document.getElementById("p1").innerHTML="<h1>测试<a href=\"#\">jquery</a>对HTML元素操作</h1>"
//text([内容])函数---可以修改html元素中的内容
//得到html元素中的内容
//var val2=$("#p1").text();
//alert(val2);
//修改html元素
//$("#p1").text("<h1>测试<a href=\"#\">jquery</a>对HTML元素操作</h1>")
//text([内容])函数-----等价于---innerText属性
//document.getElementById("p1").innerText="<h1>测试<a href=\"#\">jquery</a>对HTML元素操作</h1>"
//val([内容])函数---专门控制表单元素的值
//得到表单元素的值
//var stu=$("#p2").val();
//var sta=$("[type]").val();
//alert(stu);
//alert(sta)
//修改表单元素的值
//$("#p2").val("请输入")
$("[type]").val("测试修改val")
//val([内容])函数----value属性
//document.getElementById("p2").value="jquer"
})
</script>
</head>
<body>
<p id="p1">测试<a href="#">jquery</a>对HTML元素操作</p>
<input type="text" id="p2" value="文本框默认值">
</body>
</html>jQuery - 添加元素
append() - 在被选中元素中插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
jQuery - 删除元素
remove() - 删除被选元素（及其子元素）【有过滤功能】
empty() - 从被选元素中删除子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
width: 280px;
height: 200px;
background-color: red;
}
</style>
<!-- 导入本地jquery文件-->
<script src="F:\jQuery\jquery-3.6.0.min.js"></script>
<script>
$(function(){
//创建添加html元素
//javascript中创建添加html元素
//document.createElement("元素名称");
//document.createTextNode("文本内容");
/*document.getElementById("but1").onclick=function(){
var ceratdom=document.createElement("h4")
var tetxdom=document.createTextNode("测试JavaScript创建元素")
var text= ceratdom.appendChild(tetxdom);
var divdom=document.getElementById("div1")
divdom.appendChild(text);
}*/
//父元素的dom对象.appendChild(node);
//jquery中创建添加html元素
document.getElementById("but1").onclick=function(){
var but1=$("<h1>创建元素-h1</h1>");
//append()--指定元素的里面
//before()--指定元素的前面
//after()---指定元素的后面
$("#div1").append(but1);
//$("#div1").after(onc);
//$("#div1").before(onc);
}
//删除元素
//javascript中删除元素
//父元素的dom对象.removeChild(子元素的dom对象);
//jquery中删除元素
document.getElementById("but2").onclick=function(){
//remove() - 删除被选元素（及其子元素）【有过滤功能】
$("#div1").remove();
}
document.getElementById("but3").onclick=function(){
//empty() - 从被选元素中删除子元素
$("#div1").empty();
}
})
</script>
</head>
<body>
<input id="but1" type="button" value="添加元素">
<input id="but2" type="button" value="删除元素">
<input id="but3" type="button" value="删除元素">
<div id="div1">
</div>
</body>
</html>3.jquery的CSS 操作
1.为元素添加不存在的样式
css(样式属性名称，属性值) 设置被选元素的具有这个样式。
css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。
2.为元素添加已经存在的样式
addClass() - 向被选元素添加一个或多个样式类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.pclass{
color:mintcream;
font-size: 30px;
background-color:hotpink;
}
</style>
<!-- 导入本地jquery文件-->
<script src="F:\jQuery\jquery-3.6.0.min.js"></script>
<script>
$(function(){
//jquery中css的控制
//控制已经存在的样式
//元素样式通过class选择器进行设置
//addClass() - 向被选元素添加一个或多个样式类
//removeClass() - 从被选元素删除一个或多个类
//toggleClass() - 对被选元素进行添加/删除类的切换操作
document.getElementById("but1").onclick=function(){
//addClass() - 向被选元素添加一个或多个样式类
$("#p1").addClass("pclass");
}
document.getElementById("but2").onclick=function(){
//removeClass() - 从被选元素删除一个或多个类
$("#p1").removeClass("pclass");
}
document.getElementById("but3").onclick=function(){
$("#p1").toggleClass("pclass");
}
})
</script>
</head>
<input id="but1" type="button" value="添加样式">
<input id="but2" type="button" value="删除样式">
<input id="but3" type="button" value="切换样式">
<p id="p1">测试控制已经存在的样式</p>
</body>
</html>3.获取元素样式
css(样式属性名称) 返回被选元素的指定样式属性值。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导入本地jquery文件-->
<script src="F:\jQuery\jquery-3.6.0.min.js"></script>
<script>
$(function(){
//javascript中css的控制
//为元素添加不存在的样式
//document.getElementById("p1").style.color="red";
//jquery控制css
//为元素添加不存在的样式
//css("css属性名称","属性值")---设置一个属性值
$("#p1").css("color","red");
//css({"css属性名称":"属性值":"css属性名称":"css属性值"})----设置一组属性值
$("#p2").css({"color":"blue","font-size":"30px"});
//得到css样式
//JavaScript中css的控制---得到css样式
//行内样式设置
//document.getElementById("p1").style.color="red"
//jquery得到css样式
//css("css属性名称")
var jquerycss=$("#p2").css("color");
alert(jquerycss);
})
</script>
</head>
<body>
<p id="p1">测试jQuery控制css</p>
<p id="p2">测试jQuery控制css</p>
</body>
</html>
179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
