JavaScript（五）jQuery（获取、选择器）
JavaScript（五）jQuery（获取、选择器）
js和jQuery
- jQuery是一个库，里面存在大量的js函数
获取jQuery
-
有编译好的（上面）和未编译版（下面），下载，用下面的就行
-
点进去如果是一堆符号而不是下载的话没事，直接点击ctrl+s就可以了
-
引入，直接复制粘贴过去
-
使用jQuery
公式：$(selector).action()
-
selector选择器(就是css选择器)，选择标签
选择器就是css选择器（id是#，class是.） -
action():事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--导入jQuery--> <script src="lib/jquery-3.6.0.js"></script> </head> <body> <a href="#" id="a1">点我</a> <script> //document.getElementById("id"); //使用a标签的click事件 //选择器就是css选择器（id是#，class是.） $(a1).click(function () { alert("hello,jQuery"); }); </script> </body> </html> -
选择器
文档工具站：jQuery API 中文文档
<script>
//举例
$("p").click();//标签选择器
$("#a1").click();//id选择器
$(".a2").click();//class类选择器
</script>
事件
- 鼠标事件、键盘事件、其他事件
- 鼠标事件
鼠标事件
<script>
//鼠标事件
$(".a1").mousedown();//鼠标按下
$(".a1").mouseenter();//
$(".a1").mouseleave();//鼠标离开
$(".a1").mousemove();//鼠标移动
$(".a1").mouseout();//
$(".a1").mouseover();//点击结束
$(".a1").mouseup();//
</script>
鼠标实例
- 显示鼠标移动的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.js"></script>
<style>
#divMoves{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
</head>
<body>
mouse:<span id="mouseMove"></span>
<div id="divMoves">
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完毕之后,响应事件
$(document).ready(function () {
$("#divMoves").mousemove(function (e) {
$("#mouseMove").text("x:"+e.pageX+"y:"+e.pageY);//pageX为横坐标，pageY为纵坐标
})
});//$(document).ready(function (){})等同于$(function (){})
</script>
</body>
</html>
操作DOM元素
- 节点文本操作
$("#ul1 li[name=py]").text("123");//重新设置值
$("#ul1 li[name=py]").text();//获得文本值
$("#ul1").html();//获得html值
$("#ul1").html("<strong>123</strong>");//设置值
- css操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.js"></script>
<style>
</style>
</head>
<body>
<ul id="ul1">
<li class="js">JavaScript</li>
<li name="py">Python</li>
</ul>
<script>
$("#ul1 li[name=py]").css("color","red");//方式一
$("#ul1 li[class=js]").css({"color":"blue"})//方式二
</script>
</body>
</html>
- 元素的显示和隐藏
$("#ul1 li[name=py]").show();//显示
$("#ul1 li[class=js]").hide()//隐藏,相当于display=none
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.js"></script>
<style>
</style>
</head>
<body>
<ul id="ul1">
<li class="js">JavaScript</li>
<li name="py">Python</li>
</ul>
<script>
$("#ul1 li[name=py]").show();//显示
$("#ul1 li[class=js]").hide()//隐藏,相当于display=none
</script>
</body>
</html>
