一、jquery下载使用
1、jquery使用先要下载jquery-3.3.1.js包
2、一般情况下要放到head的标签里面,因为head标签比body标签执行快
二、基本选择器使用
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//三种基本初始方法
//第一种:第一种树结构加载完后即可加载
$(function() {
alert("1");
})
//第二种 :第二种树结构加载完后即可加
$(document).ready(function() {
alert("2");
})
//第三种等所有资源加载完后执行
window.onload = function() {
alert("3");
}
//基本常用html标签选择器
$(function() {
//标签选择器
// $('a').click(function(){
// alert("点击了");
// })
// id选择器
// $('#a1').click(function(){
// alert("点击了");
// })
// 样式选择器
// $('.c1').click(function(){
// alert("点击了");
// })
//包含选择器
// $('p a').click(function(){
// alert("点击了");
// })
//组合标签选择器
$('a,span').click(function() {
alert("点击了")
})
//自定义标签选择器
// $('table tr:even')
})
</script>
</head>
<body>
<p>
<a id="a1" class="c1" href="#">点我1</a> <span>好</span>
</p>
<p>
<a id="a2" class="c2" href="#">点我2</a>
</p>
<p>
<a id="a3" class="c3" href="#">点我3</a>
</p>
<div>
<a id="a4" class="c1" href="#">点我4</a>
</div>
<div>
<p>
<a id="a5" class="c1" href="#">点我5</a>
</p>
</div>
</body>
</html>