jquery基础使用

一、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>

猜你喜欢