Jquery基础
- jQuery 是一个 JavaScript 库。[.js]
- jQuery 极大地简化了 JavaScript 编程。
- jQuery 很容易学习。
jQuery 简介
开始学习 jQuery 之前，应该对以下知识有基本的了解：
HTML
CSS
JavaScript
jQuery 库可以通过一行简单的标记被添加到网页中。
例如:
<script src=”js/jquery.js”></script>1.什么是 jQuery ？
jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。[独立的javascript文件]
jQuery库包含以下功能：
1.HTML 元素选取
2.HTML 元素操作
3.CSS 操作
4.HTML 事件函数
5.JavaScript 特效和动画
6.HTML DOM 遍历和修改
7.AJAX
jQuery 安装
网页中添加 jQuery
可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：
- 从 jquery.com 下载 jQuery 库
Download the compressed, production jQuery 3.6.0
Download the uncompressed, development jQuery 3.6.0
如果开发测试使用development jQuery 3.6.0---jquery-3.6.0.js,有注释可以查看具体的内容。
如果发布使用production jQuery 3.6.0---jquery-3.6.0.min.js，小，节省内存。
通过script标记导入到网页中
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.5.1.js"></script>
<script>
$(function(){
alert("测试导入jquery");
});
</script>
</head>
<body>
</body>
</html>- 通过网络地址导入jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery</title>
<!-- 导入jquery函数库 -->
<!-- 本地导入 -->
<script src="../js/jquery-3.6.0.js" type="text/javascript">
<!-- 这里写的代码不会执行 -->
</script>
<!--<script type="text/javascript">
$(function(){
alert("测试本地导入jquery")
})
</script> -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
<!-- 这里写的代码不会执行 -->
</script>
<script type="text/javascript">
$(function(){
alert("测试网络导入jquery库");
})
</script>
</head>
<body>
</body>
</html>
jQuery 语法
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。
基础语法： $(selector).action()
1.美元符号定义 jQuery
2.选择符（selector）"查询"和"查找" HTML 元素
3.jQuery 的 action() 执行对元素的操作
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery语法</title>
<!-- 导入jquery函数库 -->
<script src="../js/jquery-3.6.0.js" type="text/javascript"></script>
<script type="text/javascript">
//基础语法： $(selector).action()
//1.美元符号定义jQuery
//2.选择符（selector）"查询"和"查找"HTML元素
//3.jQuery 的action()执行对元素的操作
//初始化函数
$(function(){
//基础语法： $(selector).action()
$("p").css("background-color","yellow");
$("p.test1").css("color","red");
$("p#test2").css("font-size","30px");
});
</script>
</head>
<body>
<p>测试jquery的基础语法1</p>
<p class="test1">测试jquery的基础语法2</p>
<p>测试jquery的基础语法3</p>
<p id="test2">测试jquery的基础语法4</p>
</body>
</html>
文档就绪事件---就是页面初始化事件
Javascript的页面初始化事件
- body中提供οnlοad=“函数”
- window.οnlοad=function(){}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面初始化事件</title>
<!-- 导入jQuery函数库 -->
<script src="../js/jquery-3.6.0.js" type="text/javascript">
</script>
<script type="text/javascript">
//1.原始做法
$(document).ready(function(){
alert("jquery的页面初始化事件--原始做法");
})
//2.简化做法
$(function(){
alert("jquery的页面初始化事件--简化做法");
})
//3简化做法
jQuery(function(){
alert("jquery的页面初始化事件--简化做法");
})
</script>
</head>
<body>
</body>
</html>
1.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>jquery选择器</title>
<script src="../js/jquery-3.6.0.js" type="text/javascript">
</script>
<script type="text/javascript">
//1，页面初始化事件
$(function(){
//元素选择器
$("p").css("background-color","yellow");
//.class选择器
$("p.test1").css("color","red");
//id选择器
$("p#test2").css("font-size","30px");
//选取第一个p元素
$("p:first").css("color","green");
//选取第一个ul列表的第一个li
$("ul li:first").css("font-size","30px");
//选取所有无序列表的第一个li
$("ul li:first-child").css("font-size","30px");
//选取所有无序列表的左后一个li
$("ul li:last-child").css("color","red");
//选取所有含有href属性的元素
$("[href]").css("font-size","30px");
//选取所有type是button的元素
$(":button").css("width","180px");
//选取所有table元素
$("table").css("width","500px");
//选取偶数项的元素
$("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()----返回表单字段的值
2. jQuery设置元素的值 text(value)、html(value) 以及 val(value)
text(value)---设置所选元素的文本内容
html(value)--设置所选元素的内容（包括 HTML 标记）
val(value)----设置表单字段的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery获取/设置文本元素的值</title>
<script src="../js/jquery-3.6.0.js" type="text/javascript">
</script>
<script type="text/javascript">
//页面初始化事件
$(function(){
//获取所有id=but1的元素
$("#but1").click(function(){
// alert($("#div1").text()); //得到文本不包括html标记
// alert($("#div1").html());//得到文本包括html标记
// alert($("#text1").text());//不能得到文本框的内容
// alert($("#text1").html());//不能得到文本框的内容
// alert($("#text1").val());//得到文本框的值
// alert($("#but1").val());//得到按钮的值
});
$("#but2").click(function(){
$("#div2").text("<a href='#'>测试text</a>");
$("#div2").html("<a href=#''>测试html</a>");
$("#but2").val("测试val");
});
});
</script>
</head>
<body>
<h1>jQuery获取元素的值 text()、html() 以及 val()</h1>
<h2>text()---返回所选元素的文本内容</h2>
<h2>html()--返回所选元素的内容（包括 HTML 标记）</h2>
<h2>val()----返回表单字段的值</h2>
<h2>text(value)---设置所选元素的文本内容【不解释HTML 标记】</h2>
<h2>html(value)--设置所选元素的内容（解释 HTML 标记）</h2>
<h2>val(value)----设置表单字段的值</h2>
<hr>
<div id="div1">
<h1>测试jQuery获取元素的值1</h1>
<h1>测试jQuery获取元素的值2</h1>
</div>
<input id="text1" type="text" value="测试text" ></input>
<input id="but1" type="button" value="测试1" />
<hr>
<input id="but2" type="button" value="测试2" />
<div id="div2"></div>
</body>
</html>
jQuery - 添加元素
- append() - 在被选中元素中插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery - 添加元素</title>
<style>
#div1{
background-color: red;
width: 300px;
height: 300px;
}
</style>
<script src="../js/jquery-3.6.0.js" type="text/javascript">
</script>
<script type="text/javascript">
var i = 0;
//页面初始化
$(function() {
$("#but1").click(function() {
var j = i;
//append() - 在被选中的元素中插入内容,在文档末尾追加
$("#div1").append("<h1>append()在被选中元素中插入内容1</h>"+j);
j= i++;
});
$("#but2").click(function(){
var j = i;
//prepend() - 在被选中的元素中插入内容,在文档头追加
$("#div1").prepend("<h1>prepend1</h1>"+j);
j= i++;
});
$("#but3").click(function(){
var j = i;
//after() - 在被选元素之后插入内容，在文档头追加
$("#div1").after("<h1>after</h1>"+j);
j= i++;
});
$("#but4").click(function(){
var j = i;
//before() - 在被选元素之前插入内容，在文档末尾追加
$("#div1").before("<h1>before</h1>"+j);
j= i++;
});
});
</script>
</head>
<body>
<input id="but1" type="button" value="测试append" />
<input id="but2" type="button" value="测试prepend" />
<input id="but3" type="button" value="测试after" />
<input id="but4" type="button" value="测试before" /><br>
<div id="div1"></div>
</body>
</html>
jQuery - 删除元素
remove() - 删除被选元素（及其子元素）【有过滤功能】
empty() - 从被选元素中删除子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery - 删除元素</title>
<style type="text/css">
#div1{
background-color: red;
width: 300px;
height: 300px;
}
</style>
<script src="../js/jquery-3.6.0.js" type="text/javascript">
</script>
<script type="text/javascript">
//页面初始化
$(function(){
$("#but1").click(function(){
$("#div1").empty();//empty--清空 从被选元素中删除子元素
});
$("#but2").click(function(){
$("#div1").remove(); //选中谁删除谁，包括子元素
});
});
</script>
</head>
<body>
<input id="but1" type="button" value="测试empty()" />
<input id="but2" type="button" value="测试remove()" /><br>
<div id="div1">
<img src='imgs/avatar5.png' />
<h1>测试删除元素</h1>
</div>
</body>
</html>
3.jquery的CSS 操作
1.为元素添加已经存在的样式
- addClass() - 向被选元素添加一个或多个样式类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>为元素添加已经存在的样式</title>
<style>
.divclass{
background-color: red;
width: 300px;
height: 300px;
}
</style>
<script src="../js/jquery-3.6.0.js" type="text/javascript">
</script>
<script type="text/javascript">
//页面初始化事件
$(function(){
$("#but1").click(function(){
$("#div1").addClass("divclass");
});
$("#but2").click(function(){
$("#div1").removeClass("divclass");
});
$("#but3").click(function(){
//如果存在样式则删除，如果不存在则添加
$("#div1").toggleClass("divclass");
// $("#div1").toggle("divclass");
});
});
</script>
</head>
<body>
<input id="but1" type="button" value="测试addClass()">
<input id="but2" type="button" value="测试removeClass()">
<input id="but3" type="button" value="测试toggleClass()">
<br>
<div id="div1"></div>
</body>
</html>
2.设置/获取元素样式
- css() - 设置或返回样式属性
css(样式属性名称) 返回被选元素的指定样式属性值。
css(样式属性名称，属性值) 设置被选元素的具有这个样式。
css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置/获取元素样式</title>
<script src="../js/jquery-3.6.0.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$("#but1").click(function(){
//css(样式属性名称,属性值)设置被选元素的具有这个样式
//css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式
$("#div1").css({"background-color":"red","width":"300px","height":"300px"});
});
$("#but2").click(function(){
//css(样式属性名称)返回被选元素的指定样式值
alert($("#div1").css("width"));
});
});
</script>
</head>
<body>
<input id="but1" type="button" value="设置样式">
<input id="but2" type="button" value="获取样式">
<br>
<div id="div1"></div>
</body>
</html>
4.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>5.JavaScript 特效和动画【就是元素的隐藏和显示】
jQuery hide() 隐藏元素
jQuery show() 显示元素
jQuery fadeIn() 用于淡入已隐藏的元素。
jQuery fadeOut() 方法用于淡出可见元素。
jQuery slideDown() 方法用于向下滑动元素。
jQuery slideUp() 方法用于向上滑动元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 特效和动画【就是元素的隐藏和显示】</title>
<script src="../js/jquery-3.6.0.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
//jQuery hide() 隐藏元素淡入缩小
//jQuery show() 显示元素淡出复原
//jQuery fadeIn() 用于淡入已隐藏的元素。显示元素
//jQuery fadeOut() 方法用于淡出可见元素。隐藏元素
//jQuery slideDown() 方法用于向下滑动元素。 显示元素
//jQuery slideUp() 方法用于向上滑动元素。 隐藏元素
$("#but1").click(function(){
var test = $("#but1").val();
var img1 = $("#img1");
if(test == '隐藏'){
//hide() 隐藏元素
// img1.hide();
//hide(毫秒数)隐藏元素;
//img1.hide(5000);
//hide(毫秒数，隐藏成功以后的处理函数) 隐藏元素
img1.hide(5000,function(){alert("隐藏成功")});
//fadeOut() 隐藏元素
//img1.fadeOut();
//fadeOut(毫秒数) 隐藏元素
//img1.fadeOut(5000);
//fadeOut(毫秒数，隐藏成功以后的处理函数) 隐藏元素
// img1.fadeOut(5000,function(){alert("隐藏成功")});
//slideUp() 隐藏元素
//img1.slideUp();
//slideUp(毫秒数) 隐藏元素
// img1.slideUp(5000);
//slideUp(毫秒数，隐藏成功以后的处理函数) 隐藏元素
// img1.slideUp(5000,function(){alert("隐藏成功")});
$("#but1").val("显示");
}else{
//show() 显示元素
//img1.show();
//show(毫秒) 显示元素
//img1.show(5000);
//show(毫秒,显示成功以后的处理函数) 显示元素
img1.show(5000,function(){alert("显示完毕")});
//fadeIn() 显示元素
//img1.fadeIn();
//fadeIn(毫秒) 显示元素
//img1.fadeIn(5000);
//fadeIn(毫秒,显示成功以后的处理函数) 显示元素
// img1.fadeIn(5000,function(){alert("显示完毕")});
//slideDown() 隐藏元素
//img1.slideDown();
//slideDown(毫秒数) 隐藏元素
//img1.slideDown(5000);
//slideDown(毫秒数，隐藏成功以后的处理函数) 隐藏元素
// img1.slideDown(5000,function(){alert("显示完毕");});
$("#but1").val("隐藏");
}
});
});
</script>
</head>
<body>
<input id="but1" type="button" value="隐藏"/><br>
<img id="img1" src="../imgs/avatar5.png"/>
</body>
</html>
jQuery 效果- 动画
jQuery animate() 方法允许您创建自定义的动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性.
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
jQuery 停止动画
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 效果- 动画</title>
<script src="../js/jquery-3.6.0.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
/*
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性.
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
*/
$("#but1").click(function(){
$("#div1").animate({left:"500px"},5000,function(){
alert("动画执行结束");
});
});
$("#but2").click(function(){
$("#div1").stop();
})
})
</script>
</head>
<body>
<input id="but1" type="button" value="开始动画"/>
<input id="but2" type="button" value="停止动画"/>
<div id="div1" style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jQuery - 链(Chaining)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#div1{
background-color: red;
width: 200px;
height: 200px;
border-radius: 100px;
}
#div2{
background-color: yellow;
width: 200px;
height: 200px;
border-radius: 100px;
}
</style>
<script src="js/jquery-3.5.1.js"></script>
</script>
<script>
$(function(){
$("#but1").click(function(){
//延迟执行的函数
setTimeout(function(){
for(var i=1;i<=10;i++){
$("#div1").fadeOut(500).fadeIn(500);
}
},0);
setTimeout(function(){
for(var i=1;i<=10;i++){
$("#div2").fadeOut(500).fadeIn(500);
}
},10000);
});
});
</script>
</head>
<body>
<input id="but1" type="button" value="红灯亮"/>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>6.HTML DOM 遍历和修改
jQuery each() 方法
语法
$(selector).each(function(index,element){ })
必需。为每个匹配元素规定运行的函数。
index - 被遍历出的每一个元素在数组中的位置
element - 当前的元素【javascript的DOM对象】（也可使用 "this" 选择器）
each() 方法为每个匹配元素规定要运行的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML DOM 遍历和修改</title>
<script src="../js/jquery-3.6.0.js" type="text/javascript">
</script>
<!-- <script type="text/javascript">
window.onload = function(){
var domobj = document.getElementById("p4");
//[object HTMLParagraphElement]
alert(domobj);
}
</script> -->
<!-- <script type="text/javascript">
$(function(){
var jqobj = $("#p4");
//[object Object]
alert(jqobj);
var domobj = jqobj.get();
//[object HTMLParagraphElement]
alert(domobj);
})
</script> -->
<script type="text/javascript">
$(function(){
$("p").each(function(index,element){
//index=0 element=[object HTMLParagraphElement]
// alert("index=="+index+"element=="+element);
// alert("index=="+index+"element=="+this);
//javascript的DOM对象转换成Jquery对象
//index==0,element==[object Object]
// alert("index=="+index+",element=="+$(element));
var size = index*10+10;
$(element).css("font-size",size+"px");
});
});
</script>
</head>
<body>
<h1>HTML DOM 遍历和修改</h1>
<h2>jQuery each() 方法</h2>
<h2>语法</h2>
$(selector).each(function(index,element){ })</h2>
<h2>参数。为每个匹配元素规定运行的函数。</h2>
<h2>index - 被遍历出的每一个元素在数组中的位置</h2>
<h2>element - 当前的元素【javascript的DOM对象】（也可使用 "this" 选择器）</h2>
<p>测试用的p元素1</p>
<p>测试用的p元素2</p>
<p>测试用的p元素3</p>
<p id="p4">测试用的p元素4</p>
</body>
</html>
225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
