jQuery
JavaScript
jQuery 库,里面存在大量的 Javascript 函数
获取jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn引入-->
<!-- <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>-->
<script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<!--
公式: $(selector).action()
-->
<a href="" id="test-jquery">点我</a>
<script>
// document.getElementById('id');
//选择器就是css的选择器
$('#test-jquery').click(function (){
alert('hello,jquery');
})
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2QrgxYVO-1643095507783)(C:\Users\22724\AppData\Roaming\Typora\typora-user-images\image-20220110014123065.png)]
$(选择器).一个事件
**文档工具站:**https://jquery.cuishifeng.cn/
事件
鼠标事件:
mousedown() (jQuery) 按下
mouseenter() (jQuery)
mouseleave() (jQuery) 离开
mousemove() (jQuery) 移动
mouseover() (jQuery) 点击结束
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.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('lina'); //设置值
$('#test-ul').html(); //获得值
$('#test-ul').html('<strong>123</strong>'); //设置值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
//document.getElementById('')
$('#test-ul li[name="python"]').text();
$('#test-ul').html();
</script>
</body>
</html>
css操作
$('#test-ul li[name="python"]').css("color","red");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<ul id="test-ul">
<li name="python">Python</li>
</ul>
<script>
//document.getElementById('')
$('#test-ul li[name="python"]').css("color","red");
</script>
</body>
</html>
元素的显示和隐藏:本质display : none ;
$('#test-ul li[name="python"]').show(); //显示
jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
$('#test-ul li[name="python"]').hide(); //隐藏
jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
娱乐测试
$(window).width()
344
$(window).height()
727
$(document).width()
344
$(window).height()
727
未来ajax ( ) ;
$('#from').ajax()
$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done");
}});