jQuery入门

最新推荐文章于 2024-08-25 09:57:22 发布

52Hertzℕℕ

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量81

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_71385552/article/details/130822698

版权

一、正确使用jQuery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery入门</title>
		<style type="text/css">
			#d1{
				width: 200px;
				height: 200px;
				background-color: aqua;
			}
			#d2{
				width: 200px;
				height: 200px;
				background-color: aqua;
			}
			body{
				margin: 0;
				padding: 0;
			}
		</style>
		
		<!-- 1.引入jQuery的类库 -->
		<script src="js/jquery.min.js"></script>
		
		<!-- 2.书写jQuery的代码 -->
		<script type="text/javascript">
			
			//jQuery加载文档
			$(function(){
				//1)如何获取id为d1的元素
				var d1=document.getElementById("d1");		//js的做法
				d1.innerText="<span>abd</span>"	//不能识别html属性<span>直接输出
			//	d1.innerHTML="<span>abd</span>"	//可以识别html属性 <span>
				
				//jQuery的做法
				var d2= $("#d2");
				d2.text("xyz");
				
			});
		</script>
	</head>
	<body>
		<div id="d1">
			
		</div>
		<div id="d2">
			
		</div>
	</body>
</html>

运行效果图如下：

二、对象间的转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery对象和DOM对象转换</title>
		<!-- 1.引入jQuery的类库 -->
		<script src="js/jquery.min.js"></script>
		<!-- 2.书写jQuery的代码 -->
		<script type="text/javascript">
			//jQuery加载文档
			$(function(){
				//1)js 获取的是DOM对象
				var dom=document.getElementById("d1");
				//2)jQuery 获取的是jQuery对象
				var jq=$("#d1");
				
				dom.innerText="abc";
				jq.text("xyz");
				
				//JQ对象转换成DOM对象
				jq[0].innerText="xyz";
				//DOM对象转换成JQ对象
				$(dom).text("111");
				
				
			});
		</script>
	</head>
	<body>
		<div id="d1">
			
		</div>
		<div id="d2">
			
		</div>
	</body>
</html>

运行效果如下：

三、jQuery选择器的使用

选择器分为：ID选择器、class选择器、元素选择器、层级选择器等。

选择器的使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery对象和DOM对象转换</title>
		<!-- 1.引入jQuery的类库 -->
		<script src="js/jquery.min.js"></script>
		<!-- 2.书写jQuery的代码 -->
		<script type="text/javascript">
			//jQuery加载文档
			$(function(){
				//jQuery的ID选择器获取元素
				var a1=$("#d1");
				console.log(a1);
				//JQ的class选择器获取元素
				var a2=$(".c1");
				console.log(a2);
				//JQ的元素选择器获取元素
				var a3=$("p");
				console.log(a3);
				
				
				//JQ的层级选择器获取元素
				var a4=$("ul li");
				console.log(a4);
				for(var i=0;i<a4.length;i++){
					alert(a4[i].innerText);
				}
				
				var a5=$("ul>li");
				console.log(a5);
				for(var i=0;i<a5.length;i++){
					alert(a5[i].innerText);
				}
				
			});
		</script>
	</head>
	<body>
		<h2>jQuery选择器</h2>
		<div id="d1">id选择器</div>
		
		<div class="c1">class选择器</div>
		<div class="c1">class选择器</div>
		
		<p>标签选择器1</p>
		<p>标签选择器2</p>
		
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<ol>
				<li>5.1</li>
				<li>5.2</li>
			</ol>
		</ul>
	</body>
</html>

运行效果如下：