JavaScript
jQuery库,里面存在大量的JavaScript函数
公式:$(selector).action()
获取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>
选择器
//原生js,选择器少,麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css中的选择器它都能用
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click();//class选择器
文档工具站:http://jquery.cuishifeng.cn/
事件
鼠标事件,键盘事件,…
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn引用-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.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>
操作DOM
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="python">Python</li>
</ul>
<script>
//节点文本操作
$('#test-ul li[name=python']).text();//获得值
$('#test-ul li[name=python']).text('设置值');//设置值
$('#test-ul'),html();//获得值
$('#test-ul'),html('<strong>123</strong>');//设置值
//css的操作
$('#test-url li[name=python]').css("color","red");
//元素的显示和隐藏 本质 display:none
$('#test-url li[name=python]').show();
$('#test-url li[name=python]').hide();
//娱乐测试
$(window).width();
$(window).height();
$('#test-url li[name=python]').toggle();
</script>
ajax是jQuery的一个方法
小技巧
1、如何巩固JS(看jQuery源码,看游戏源码)
2、巩固HTML和CSS (扒网站,全部down下来,然后对应修改看效果)