一、jQuery的概述

最新推荐文章于 2024-06-24 22:10:15 发布

岩流

最新推荐文章于 2024-06-24 22:10:15 发布

阅读量178

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43470419/article/details/89295180

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1 jQuery是啥

javaScript框架，封装了常用的功能代码，优化HTML文档操作、事件处理、动画设计、Ajax交互。
在框架中将结点封装成一个JQ对象，通过调用JQ对象的事件，事件触发函数，函数操作元素的方式来进行开发操作。

2 jQuery

简化代码。将页面的JS代码和HTML页面代码进行分离。

3 jQ开发步骤

导入JQ相关文件
文档加载完成事件：$(function) ：页面初始化的操作：绑定事件，启动页面定时器等
确定相关操作的事件
事件触发函数
函数里操作相关元素

4 实现：文档加载完成事件

<head>
	<script src="../../js/jquery-1.11.0.js"></script>
	<script>
		//常规方法
		jQuery(document).ready(function(){
			alert("shenme");
		});
		//简写
		$(document).ready(function(){
			alert("nihao");
		});
		//最简写
		$(function(){
				alert("zhutou");
			});
			
		window.onload=function(){
			alert("ahaha");
		};
	</script>
</head>

5 实现：修改div文本

在这里插入图片描述

<script>
		function click1(){
			var div1 = document.getElementById("div1");
			div1.innerHTML="JS修改成功";
		}
		$(function(){
			//获取btn2点击事件
			$("#btn2").click(function(){
				//获取div1
				$("#div1").html("JQ修改成功");
			});
			
		});
</script>
</head>
<body>
	<input type="button" value="JS点击修改" onclick="click1()"/>
	<input type="button" id="btn2" value="JQ点击修改" />
	<div id="div1">
		这里的内容即将被修改
	</div>
</body>

6 实现：JQ和JS对象的转换

JS转JQ

	var div2 = document.getElementById("div2");
	$(div2).html("shabi");

JQ转JS

	var div2 = $("#div2").get(0);
	div2.innerHTML="nihao";

7 实现：JQ中的动画效果

在这里插入图片描述

<html>
	<head>
		<script src="../../js/jquery-1.11.0.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					// $("#img1").show();		//出现
					// $("#img1").fadeIn();		//淡入
					$("#img1").slideDown();		//滑入
					
				});
				$("#btn2").click(function(){
					// $("#img1").hide();		//消失
					// $("#img1").fadeOut();	//淡出
					$("#img1").slideUp();		//滑出
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="显示" id="btn1"/>
		<input type="button" value="隐藏" id="btn2"/>
		<br />
		<img src="../../img/111.png" width="200px" id="img1">
	</body>
</html>

8 实现：JQ的基本选择器

ID选择器：#ID
类选择器：.类
元素选择器：标签的名字开头
通配符选择器：*
选择器，选择器：选择器1,选择器2

<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
		<script src="../../js/jquery-1.11.0.js"></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("#two").css("background-color","pink");
				});
				$("#btn2").click(function(){
					$(".mini").css("background-color","palegreen");
				});
				$("#btn3").click(function(){
					$("div").css("background-color","red");
				});
				$("#btn4").click(function(){
					$("*").css("background-color","green");
				});
				$("#btn5").click(function(){
					$(".mini,span").css("background-color","black");
				});
			
			});
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="找出ID为two的元素" />
		<input type="button" id="btn2" value="找出class为mini的元素" />
		<input type="button" id="btn3" value="找出所有div元素" />
		<input type="button" id="btn4" value="通配符选择器" />
		<input type="button" id="btn5" value="找出mini类和span元素" />
		<br />
		<div id="one">
			<div class="mini">1-1</div>
		</div>
		<div id="two">
			<div class="mini">2-1</div>
			<div class="mini">2-2</div>
		</div>
		<div id="three">
			<div class="mini">3-1</div>
			<div class="mini">3-2</div>
			<div class="mini">3-3</div>
		</div>
		<span>span</span>
	</body>
</html>

9 实现：JQ的层级选择器

子元素选择器：选择器1>选择器2
后代选择器：选择器1 儿孙
相邻兄弟选择器：选择器1+选择器2：找出紧挨着的一个弟弟
找出所有弟弟：选择器1~选择器2：找出所有弟弟

10 实现：JQ的基本过滤器

选择器:first——过滤出第一个元素
选择器:even——过滤出偶数
选择器:odd——过滤出奇数
选择器:gt(index)——过滤索引大于index的元素

	$("#btn1").click(function(){
		$("div:first").css("background-color","pink");
		});
		$("#btn2").click(function(){
			$("div:even").css("background-color","pink");
		});
		$("#btn3").click(function(){
			$("div:odd").css("background-color","pink");
		});
		$("#btn4").click(function(){
			$("div:gt(2)").css("background-color","pink");
		});
	});