百木园JavaScript（五）jQuery（获取、选择器）
目录
- JavaScript（五）jQuery（获取、选择器）
- js和jQuery
- 获取jQuery
- 选择器
- 事件
- 鼠标事件
- 鼠标实例
- 操作DOM元素
js和jQuery
- jQuery是一个库，里面存在大量的js函数
获取jQuery
-
下载网址：Download jQuery | 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>
来源：https://www.cnblogs.com/sxw0514/p/15941530.html
本站部分图文来源于网络，如有侵权请联系删除。