jquery学习-1

1.jquery类似的框架

MooTools
对比反应时间

2.Jquery Api

jquery api中文文档
jquery注重的是看文档

3.Jquery下载和导入(压缩版)

Jquery
下载

下载后导入项目中进行使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="jquery-3.7.1.min.js"></script>
		<title>jquery学习</title>
	</head>
	<body>
		<script type="text/javascript">
			//验证是否导入
			alert($)
		</script>
	</body>
</html>

如果弹出上述内容，表示导入成功

4.Jquery 插件机制

extend：插件机制，能够自定义方法接口并使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="jquery-3.7.1.min.js"></script>
		<title>jquery学习</title>
	</head>
	<body>
		<script type="text/javascript">
			// 自定义一个接口/添加接口
			$.extend({
				'sunmin':function(){
					alert(1);
				}
			});
			//调用接口
			$.sunmin();
		</script>
	</body>
</html>

里面可以传入json

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="jquery-3.7.1.min.js"></script>
		<title>jquery学习</title>
	</head>
	<body>
		<script type="text/javascript">
			// 自定义一个接口/添加接口
			$.extend({
				'sunmin':function(){
					alert(1);
				},
				'ssss':function(){
					return Math.random();
				},
				'bodyMax':function(){
					return {h:innerHeight,w:innerWidth};
				}
			});
			//调用接口
			alert($.ssss());
			alert($.bodyMax().h);
		</script>
	</body>
</html>

5.Jquery注意事项

jquery不能用原生的接口；
原生不能用jquery的接口；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="jquery-3.7.1.min.js"></script>
		<title>jquery学习</title>
		<style type="text/css">
			.m{width: 100px; height: 100px; background: black;}
		</style>
	</head>
	<div></div>
	<body>
		<script type="text/javascript">
			//jquery用原生接口
			$('div').className='m'
			//原生接口用jquery接口语法
			document.getElementsByClassName('div')[0].addClass('m')
		</script>
	</body>
</html>