一.jQuery介绍
简介:
- jQuery 是一个 JavaScript 库
- jQuery 极大简化了 JavaScript 编程
- jQuery 凭借着简洁的语法和跨平台的兼容性,极大的简化了 js 开发人员查 找元素、操作 DOM、处理事件、执行动画和开发 Ajax 的操作。
功能:
1. HTML 元素选取
2. HTML 元素操作
3. CSS 操作
4. HTML 事件函数
5. JavaScript 特效和动画
6. HTML DOM 遍历和修改
7. AJAX
8. Utilities
引入方式:
<script type="text/javascript" src="../js/jquery.js" ></script>
二.语法
//语法一:最完整的
$(document).ready(
//我们的操作
)
//语法二:在语法一的基础上省略了document对象
$().ready(
//我们的操作
)
//语法三:最简洁的写法
$(
//我们的操作
)
快速入门:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--使用jQuery之前,一定不要忘记导入js库-->
<script type="text/javascript"src="../js/jquery3.4.1.js"></script>
<script type="text/javascript">
$(function () {
alert("hello jQuery");
});
</script>
</head>
<body>
</body>
</html>
事件:
点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript"src="../js/jquery3.4.1.js"></script>
<script type="text/javascript">
//jQuery的方式
$(function () {
$("#btn").click(function () {
alert("wtc");
});
})
/*js的方式
/*window.οnlοad=function(){
document.getElementById("btn").οnclick=function () {
alert("yyy");
}
}*/
</script>
</head>
<body>
<button id="btn">jq点我</button>
</body>
</html>
jq的获取:
三个简单实用的用于 DOM 操作的 jQuery 方法
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
1.获取页面元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript"src="../js/jquery3.4.1.js"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
alert("JQ的方式获取文本:"+$("#test").text());
});
$("#btn2").click(function () {
alert("JQ的方式获取HTML:"+$("#test").html());
})
})
</script>
</head>
<body>
<p id="test">这是段落中的<b>粗体</b>文字</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示HTML</button>
</body>
</html>
2.获取表单的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript"src="../js/jquery3.4.1.js"></script>
<script type="text/javascript">
$(function () {
$("button").click(function () {
alert($("#test").val());
})
});
</script>
</head>
<body>
<p>姓名:<input type="text"id="test"value="米老鼠"></p>
<button>显示值</button>
</body>
</html>
3.获取属性的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript"src="../js/jquery3.4.1.js"></script>
<script type="text/javascript">
//使用attr()获取指定属性的值
$(function () {
$("button").click(function () {
alert($("#baidu").attr("href"));
})
})
</script>
</head>
<body>
<p>
<a href="https://www.bidu,com"id="baidu">百度一下</a>
</p>
<button>显示href值</button>
</body>
</html>
jq选择器:
1.基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01.基本选择器</title>
<link rel="stylesheet" href="../css/style.css" />
<script type="text/javascript"src="../js/jquery3.4.1.js"></script>
<script type="text/javascript">
$(function() {
// 选择 id 为 one 的元素
$("#btn1").click(function() {
$("#one").css("background-color","pink");
});
// 选择 class 为 mini 的所有元素
$("#btn2").click(function() {
$(".mini").css("background-color","black");
});
// 选择所有的div元素
$("#btn3").click(function() {
$("div").css("background-color","red");
});
// 选择所有元素
$("#btn4").click(function() {
$("*").css("background-color","green");
});
// 选择所有的span元素和id为two的元素
$("#btn5").click(function() {
$("span,#two").css("background-color","yellow");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择 id 为 one 的元素" />
<input type="button" id="btn2" value="选择 class 为 mini 的所有元素" />
<input type="button" id="btn3" value="选择所有的div元素" />
<input type="button" id="btn4" value="选择所有元素" />
<input type="button" id="btn5" value="选择所有的span元素和id为two的元素" />
<hr/>
<div id="one" class="one">
【id】为[one],【class】为[one]的div
<div class="mini">
【class】为[mini]
</div>
</div>
<div id="two">
【id】为[two]
<div class="mini">
【class】为[mini]
</div>
<div class="mini">
【class】为[mini]
</div>
</div>
<div id="three">
【id】为[three]
<div class="mini">
【class】为[mini]
</div>
<div class="mini">
【class】为[mini]
</div>
<div class="mini">
【class】为[mini]
</div>
</div>
<span id="four">
</span>
</body>
</html>
2.层级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02.层级选择器</title>
<link rel="stylesheet" href="../css/style.css" />
<script type="text/javascript"src="../js/jquery3.4.1.js"></script>
<script type="text/javascript">
//选择body中的所有的div元素
$(function () {
$("#btn1").dblclick(function () {
$("body div").css("background-color","red");
});
//选择body中子元素为div的元素
$("#btn2").dblclick(function () {
$("body>div").css("background-color","blue");
});
//选择id为two的元素的下一个div元素
$("#btn3").dblclick(function () {
$("#two+div").css("background","pink");
});
//选择id为one的所有div兄弟元素(同级元素)
$("#btn4").dblclick(function () {
$("#one").siblings("div").css("background-color","yellow");
})
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择body中的所有的div元素" />
<input type="button" id="btn2" value="选择body中子元素为div的元素" />
<input type="button" id="btn3" value="选择id为two的元素的下一个div元素" />
<input type="button" id="btn4" value="选择id为one的所有div兄弟元素" />
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
</html>
3.过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03.基本过滤选择器</title>
<link rel="stylesheet" href="../css/style.css" />
<script type="text/javascript"src="../js/jquery3.4.1.js"></script>
<script type="text/javascript">
$(function(){
// body中的第一个div元素
$("#btn1").click(function () {
$("div:first").css("background-color","pink");
});
// body中的最后一个div元素
$("#btn2").click(function () {
$("div:last").css("background-color","yellow");
});
// 选择body中索引为奇数的div
$("#btn3").click(function () {
$("div:odd").css("background-color","red");
});
// 选择body中索引为偶数的div
$("#btn4").click(function () {
$("div:even").css("background-color","blue");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="body中的第一个div元素" />
<input type="button" id="btn2" value="body中的最后一个div元素" />
<input type="button" id="btn3" value="选择body中索引为奇数的div" />
<input type="button" id="btn4" value="选择body中索引为偶数的div" />
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
</html>
4.属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04.属性选择器</title>
<link rel="stylesheet" href="../css/style.css" />
<script type="text/javascript"src="../js/jquery3.4.1.js"></script>
<script type="text/javascript">
$(function() {
// 选择有id属性的div中最后一个
$("#btn1").click(function() {
$("div[id]:last").css("background-color","pink");
});
// 选择有id属性的值为two的div
$("#btn2").click(function() {
$("div[id=two]").css("background-color","blue");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择有id属性的div" />
<input type="button" id="btn2" value="选择有id属性的值为two的div" />
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
</html>
5.表单选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05.表单选择器</title>
<script type="text/javascript"src="../js/jquery3.4.1.js"></script>
<script type="text/javascript">
$(function(){
// 选择所有input元素
$("#btn1").click(function() {
/* $("input").css("background-color","#ccff00"); */
// 选择所有form表单下的input元素
$("form :input").css("background-color","pink");
});
// 选择文本框
$("#btn2").click(function() {
$(":password").css("background-color","blue");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="选择所有input元素" />
<input type="button" id="btn2" value="选择文本框" />
<br/>
<form>
<input type="text" /><br />
<input type="checkbox" /><br />
<input type="radio" /><br />
<input type="image" src="../imgs/4.jpeg" width="260px" height="300px" /><br />
<input type="file" /><br />
<input type="submit" value="提交" />
<input type="reset" /><br />
<input type="password" /><br />
<input type="button" value="注册" /><br />
选项框:
<select>
<option/>
</select><br />
<textarea></textarea><br />
<button>按钮</button>
</form>
</body>
</html>