jQuery
-
获取jQuery
公式：$(selector).action() jQuery（选择器）.事件（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入在线cdn
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
-->
<script src="lib/jquery-3.6.0.js">
$('#text_jquery').click(function(){
alert('试试就试试');
});
</script>
</head>
<body>
<div>
<a href="#" id="text_jquery">点我一下试试</a>
</div>
</body>
</html>
-
选择器
（选择器），这里的选择就是css中的选择器
<script>
//原生js选择器，种类少
//标签
doucument.getElementsByTagName();
//id
doucument.getElementById();
//类
doucument.getElementsByClassName();
//jQuery中的选择器 （css）
$('a').click();
$('#id').click();
$('.class').click();
</script>
文档工具站：https://jquery.cuishifeng.cn/,s 使用很频繁
-
事件
目前电脑上的事件主要分为鼠标事件、键盘事件、其他事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入在线cdn
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
-->
<!--要求：获取鼠标当前的位置坐标-->
<style>
#move{
width:1000px;
height:1000px;
border:1px solid pink;
}
</style>
<script src="lib/jquery-3.6.0.js">
//当网页加载完之后，再相应事件
$(function(){
$('#move').mousemove(function (e){
$('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY);
})
});
</script>
</head>
<body>
mouse:<span id="mouseMove"></span>
<div id="move">
<span>
捕捉范围
</span>
</div>
</body>
</html>
$(function(){};
//上面是缩写完整版如下
$(document).ready(function(){
});
//因为document和ready都是默认的 所以可以缩写
-
操作DOM
<div>
<ul id="test_ul"></ul>
<li class="js">JavaScript</li>
<li name="python">Python</li>
</div>
节点文本操作
//括号内不写任何东西就是获取值，写引号加数值就是设置修改值
$('#test_ul li[name=python]').text();
$('#test_ul li[name=python]').text('***');
$('#test_ul ').html();
$('#test_ul ').html('<strong>***</strong>');
css操作
$('#test_ul li[name=python]').css("color","red");
元素的显示和隐藏:本质是display:none;
$('#test_ul li[name=python]').show()''
$('#test_ul li[name=python]').hide;
以后的重点是Ajax