jQuery
JavaScript
jQuery库,里面存在大量的JavaScript函数
获取jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn引入-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
</head>
<body>
</body>
</html>
选择器
<!--
公式:$(selector).action()
-->
<script>
// 原生js,选择器少,麻烦不好记
// 标签
document.getElementsByTagName();
// id
document.getElementById();
// 类
document.getElementsByClassName();
// jQuery
$('p').click(); // 标签选择器
$('#id1').click(); // id选择器
$('.class1').click(); // 类选择器
</script>
事件
鼠标事件,键盘事件,其他事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.3.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--要求:获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
// 当网页元素加载完毕之后,相应事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:' + e.pageX + ',y:' + e.pageY);
})
})
</script>
</body>
</html>
操作DOM
节点文本操作
$('#test-ul li[name=python]').text(); // 获取值
$('#test-ul li[name=python]').text('设置值'); // 设置值
$('#test-ul').html(); // 获取值
$('#test-ul').html('<strong>123</strong>'); // 设置值
css的操作
$('#test-ul li[name=python]').css("color","red");
$('#test-ul li[name=python]').css({"color":"red"}); // 键值对设置属性
元素的显示和隐藏:本质: display : none
$('#test-ul li[name=python]').show(); // 显示
$('#test-ul li[name=python]').hide(); // 隐藏
可根据相应功能查询相关文档
标签:jQuery,name,python,li,ul,简单,test,用法 From: https://www.cnblogs.com/jiaxing-java/p/17065756.html