JavaScript
jQuery库:里面存在大量的JavaScript函数
获取jQuery
jQuery官方CDN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
</body>
</html>
本地引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
</body>
</html>
初体验
<body>
<!--
公式:$(selector).action()
-->
<a href="" id="test-jquery">点我</a>
<script>
$('#test-jquery').click(function () {
alert('Hello jQuery');
})
</script>
选择器
<script>
//标签
document.getElementsByTagName('p')
//id
document.getElementById('p')
//类
document.getElementsByClassName('p')
//jQuery
$('p').click() //标签选择器
$('#p').click() //id选择器
$('.p').click() //类选择器
</script>
文档工具:https://jquery.cuishifeng.cn/
事件
鼠标事件,键盘事件,其他事件
操作DOM
节点文本操作
$('#test-ul li[name=lol]').text(); // 获得值
$('#test-ul li[name=lol]').text('刺激战场'); // 设置值
$('#test-ul').html(); // 获得值
$('#test-ul').html('<strong>123</strong>');
css的操作
$('#test-ul li[name=lol]').css("color","red");
元素的显示和隐藏: 本质 dispaly:none