jQuery
jQuery是一个库，里面有大量的JavaScript代码
引入
-
下载jQuery包
-
使用在线链接，参考https://www.jq22.com/cdn/,里面有很多的在线链接，可以选择引入
<body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> //导入在线文档
<script src="resourse/jquery-3.6.0.min.js"></script> //导入本地文档
</body>
使用
公式：$(选择器).action()
选择的方式和css的选择器相同
<script src="resourse/jquery-3.6.0.min.js"></script> <!--//导入本地文档-->
<a href="#" id="text_id">点击</a>
<p class='p'>这是一个p元素</p>
<script>
$('#text_id').click(function(){
alert('点击成功');
})
</script>
选择器参考：jQuery中文文档工具站：https://jquery.cuishifeng.cn/
事件
鼠标事件,键盘事件，其他事件
$(function(){}) //当网页元素加载完毕，响应事件
//获得鼠标指针在页面中的位置：
$(function(){
$('#divmove').mousemove(function(e){
$('#move').text('x:'+e.pageX+'y:'+e.pageY);
})
})
操作DOM
文本操作：
//获取DOM结点的值
$('#list li[id=c]').text();
//修改结点的值
$('#list li[id=c]').text('c++');
//获取结点的结构
$('#list li[id=c]').html();
//修改结点的结构
$('#list li[id=c]').html("<a href='#'>点击</a>");
css操作：
$('ol').css({'color':'blue','background':'lightpink'}); //使用键值对形式设置css样式
$('ol li[id=python]').hide(); //隐藏
$('ol li[id=python]').show(); //显示
版权声明：本文为lerrysee原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。