JQuery入门-CSDN博客

本文链接：https://blog.csdn.net/m0_67427343/article/details/127380612

什么是jQuery

jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。

jQuery特性

     HTML元素选取
     HTML元素操作
     CSS操作
     HTML事件函数
     JavaScript特效和动画
     HTML DOM遍历和修改
     AJAX
     Utilities

jQuery的使用

使用jQuery要在网上下载一个包，然后将其复制到js文件里面

格式：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var a1=$("#d1") //获取id元素
				console.log(a1)
				console.log(a1.text())//使用JQ对象的方法获取元素的文本内容
				console.log(a1[0].innerText)//JQ对象转换为DOM对象，获取文本内容
				
				console.log("-------------------------")
				
				var d1=document.getElementById("d1")//通过id获取元素
				console.log(d1.innerText)//使用DOM对象的方法获取元素的文本内容
				console.log($(d1).text())//DOM对象转换为JQ对象，获取文本内容
				
				$(".c1")//获取class元素
				$("p")//获取标签元素
			})
		</script>
	</head>
	<body>
		<div id="d1">
			id为d1的div1
		</div>
	</body>
</html>

jQuery的一些用法

		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//点击哪一项，让当前项变红，其他项变蓝
				$("ul>li").click(function(){
					$(this).css("color","red")
					$(this).siblings().css("color","blue")
				})
				
				//变宽
				$("#toWidth").click(function(){
					$("#context").css("width","200px")
				})
				//变高
				$("#toHeight").click(function(){
					$("#context").css("height","200px")
				})
				//隐藏
				$("#toHide").click(function(){
					$("#context").fadeOut(2000)
				})
				//显示
				$("#toShow").click(function(){
					$("#context").fadeIn(2000)
				})
				//显示
				$("#toTiggle").click(function(){
					$("#context").toggle();
				})
				
			})
			
			
		</script>