事件
鼠标事件 键盘事件,其他事件
公式:$(选择器).事件(事件函数)
事件代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.5.1.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");
元素的显示和隐藏:本质display :none;
$('#test-ul li[name=python]').hide();//隐藏
$('#test-ul li[name=python]').show();//显示
娱乐测试:
$('#test-ul li[name=python]').hide();
jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
$('#test-ul li[name=python]').show();
jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
$(window).width()
226
$(window).height()
1058
$(document).width()
226
$(document).height()
1058
$('#test-ul li[name=python]').toggle();//如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
未来ajax();
$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done");
}});
快捷键ctrl+alt +L自动对齐
小技巧
网站推荐:Ant Design Vue.js docsify Layer弹窗组件 Element-ui
1如何巩固JS(看jQuery, 看游戏源码!)
2.巩固HTML CSS(扒网站,全部down下来,然后对应修改看效果)