来研究研究jQuery入门

最新推荐文章于 2024-05-04 18:53:16 发布

刘大哥就是6

最新推荐文章于 2024-05-04 18:53:16 发布

阅读量106

点赞数 1

分类专栏：笔记文章标签： javascript js jquery

本文链接：https://blog.csdn.net/tony_yang6/article/details/106542213

版权

笔记专栏收录该内容

99 篇文章 0 订阅

订阅专栏

概念

jQuery是一个JavaScript框架，用于简化js开发

document.getElementById("a")等价于$("#a")

document.getElementByClassName("c")等价于$(".c")

它封装了js的常用功能，提供了便捷的js设计模式，优化html，事件处理，动画设计以及ajax交互

jQuery的本质上就是一个js文件，它只是对原生代码进行封装

版本

jQuery-xxx.js:开发版本，有良好的缩进和注释，它是给程序员查阅的。文件更大

jQuery-xxx-min.js：生产版本。开发中要使用的。没有缩进和注释

HTML和jQuery的结合

方式一：

因为jQuery本质上就是一个js文件，所以只需要使用script标签的src属性引入资源即可

方式二：

使用网络上的js在线资源，同样也是放在script里的src属性里

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn").click(function)(){
					alert();
				}
			})
			
		</script>
		
	</head>
	<body>
		<button id="btn">按钮</button>
	</body>
</html>

jQuery对象与js对象的区别与转换

1.jQuery对象在操作时，更加方便

2.jQuery对象与js对象的属性、方法不通用，指不能交叉调用

3.转换方式

jQuery转成js：jQuery对象[下标] 或者jQuery对象.get(下标)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-2.2.4.min.js">
			
		</script>
		
		<script type="text/javascript">
			//jQuery-->js
			
			$(function(){
				//$("#btn")[0].innerHTML("666");
				
				$("#btn").get(0).innerHTML = "8888";
			})
		</script>
	</head>
	<body>
		<button id="btn">按钮</button>
	</body>
</html>

js转成jQuery：$(js对象)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-2.2.4.min.js">
			
		</script>
		
		<script type="text/javascript">
			//jQuery-->js
			
			$(function(){
				//$("#btn")[0].innerHTML("666");
				
				//$("#btn").get(0).innerHTML = "8888";
				
				//js-->jQuery
				var btn = document.getElementById("btn");
				$(btn).html("111");
			})
		</script>
	</head>
	<body>
		<button id="btn">按钮</button>
	</body>
</html>

jQuery的基本操作

1.事件绑定

$(选择器).事件(function(){

功能

});

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
		<script type="text/javascript">
			$(function)(){
				$("#inp").focus(function(){
					alert();
				});
			}
		</script>
	</head>
	<body>
		<input type="text" id="inp"/>
	</body>
</html>

2.页面加载

$(function(){

});

window.onload和$(function(){})的区别

onload如果定义了多次，那么只有最后一次的定义会产生效果

$(function(){})可以定义多次，并且都会产生效果

3.控制样式

使用jQuery对象调用css()方式即可

css(参数1，参数2):

参数1：样式名

参数2：样式值

例如：将文本设置成红色：css("color","red")

将文字加粗：css("font-weight","bold")

刘大哥就是6

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
来研究研究jQuery入门

概念jQuery是一个JavaScript框架，用于简化js开发document.getElementById("a")等价于$("a")document.getElementByClassName("c")等价于$(".c")
复制链接

扫一扫