注意:不同文件的引入顺序
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hallo world</title>
<script src="resource/jquery-3.3.1.js"></script>
<script src="resource/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="resource/jquery-ui.min.css">
<script src="jQueryHallo.js"></script>
<!--jQuery的使用,要先引入jQuery库,再引入jQuery-ui最后再引入自己的文件,他们是下面一级基于上面一级执行的
如果自己写css文件和js文件,也要判断是否自己的js操作了css样式,如果js文件就要后引入-->
</head>
<body>
<p>
<button>B站</button>
</p>
<a href="http://www.bilibili.com" id="aName">B站</a>
</body>
</html>
JS代码:
$(document).ready(function () {
$("#aName").button();
});
//将a标签调用jQuery-ui中的button样式,方便很多可以免去自己的设计
效果: