第十三章初识jQuery

最新推荐文章于 2024-11-16 14:11:26 发布

斑马有点困

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量118

点赞数

分类专栏： # web前端笔记文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_36827283/article/details/125604577

版权

笔记同时被 2 个专栏收录

56 篇文章 1 订阅

订阅专栏

web前端

14 篇文章 0 订阅

订阅专栏

初识jQuery

jQuery简介

jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more

在这里插入图片描述

jQuery能做什么

访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

优势

体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持

获取jQuery

进入jQuery官网：http://jquery.com

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RsSv1ocu-1656926153089)(D:\课件\笔记\初识jQuery.assets\image-20220621081549789.png)]$

在页面中引入jQuery

<script src="js/jquery.js"></script>

jQuery基本语法

在这里插入图片描述

$(document).ready()与window.onload类似，但也有区别

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行	网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
编写个数	同一页面不能同时编写多个	同一页面能同时编写多个
简化写法	无	$(function(){ //执行代码 }) ;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.js"></script>
		<script type="text/javascript">
			//文档加载完毕后执行
			function a(){
				alert("文档加载完毕");
			}
			//文档加载之后执行
			$(document).ready(function(){
				alert("文档加载完毕");
			});
			//简写
			$(function(){
				alert("文档加载完毕");
			});
		</script>
	</head>
	<body onload="a()">
		
	</body>
</html>

jQuery语法结构

$(selector).action() ; 
工厂函数$()：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

使用addClass( )方法为元素添加样式
使用css( )方法设置元素样式
使用show( )、hide( ) 方法设置元素的显示和隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>追加样式</title>
		<script src="js/jquery.js"></script>
		<style>
			.a{
				background-color: red;
			}
			p{
				display: none;
			}
		</style>
		<script>
			$(function(){
				//li标签.单击事件(执行内容)
				$("li").click(function(){
					//$(this)  指的是触发事件的元素
					$(this).addClass("a");//addClass  相当于给元素添加一个class="a"
				});
				//鼠标移入,字体变大
				$("li").mouseover(function(){
					//$(this).css("font-size","50px");
					$(this).css({"font-size":"50px","background-color":"yellowgreen"});
				});
				$("a").hide();
				$("p").show();
			});
		</script>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		<a href="#">隐藏</a>
		<p>显示</p>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>当当网我的订单页</title>
    <link type="text/css" rel="stylesheet" href="css/dangdang.css">
	<script src="js/jquery.js"></script>
	<script>
		$(function(){
			$("a").mouseover(function(){
				$("#menu-ul").show();
			});
			$("a").mouseout(function(){
				$("#menu-ul").hide();
			});
		});
	</script>
</head>
<body>
<div id="menu" class="pos">
    <a href="#">我的当当</a>
    <ul id="menu-ul">
        <li><a href="#">我的订单</a></li>
        <li><a href="#">我的收藏</a></li>
        <li><a href="#">我的礼品卡</a></li>
        <li><a href="#">我的积分</a></li>
        <li><a href="#">我的余额</a></li>
    </ul>
</div>
</body>
</html>

jQuery代码风格

“$”等同于“ jQuery ”
链式操作
隐式迭代

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js"></script>
		<script type="text/javascript">
			function a(){//使用js设置所有的li标签样式,需要遍历数组,单独设置每一个的样式
				var liss=document.getElementsByTagName("li");
				for(i=0;i<liss.length;i++){
					liss[i].style.backgroundColor="#666";
				}
			}
			$(function(){
				//链式操作
				$("h2").css("background-color","yellowgreen").next().css("background-color","coral")
				//隐式迭代,不需要遍历元素
				$("li").css("background-color","blueviolet");
			});
			
		</script>
	</head>
	<body>
		<h2>链式操作</h2>
		<h3>hello</h3>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</body>
</html>

DOM模型

浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构

DOM对象和jQuery对象

DOM对象：直接使用JavaScript获取的节点对象

jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

DOM对象转jQuery对象

使用 $() 函数进行转化：$ (DOM对象)

在这里插入图片描述

jQuery对象转DOM对象

jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fATXZhB0-1656926153092)(D:\课件\笔记\初识jQuery.assets\image-20220621141741059.png)]$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dom对象</title>
		<script src="js/jquery.js"></script>
		<script type="text/javascript">
			
			function a(){
				//js获取dom
				var doms=document.getElementById("h1");
				//jq对象
				var $doms=$("#h1");
				//dom对象没有办法直接使用jq的方法
				//dom.css("background-color","red");
				//jq对象也没有办法直接使用js的方法
				//$doms.innerHTML="asdasdas";
				//js通过$()转换jq对象
				var $dom1=$(doms);
				$dom1.css("background-color","red");
				//Jq转js 
				var dom2=$dom1[0];
				dom2.innerHTML="asdasdas";
				var dom3=$dom1.get(0);
				dom3.innerHTML="阿萨德";
			}
		</script>
	</head>
	<body onload="a()">
		<h1 id="h1">啊飒飒</h1>
	</body>
</html>

制作广告图片轮播切换效果

ul,
li {
	padding: 0;
	margin: 0;
	list-style: none;
}

.adver {
	margin: 0 auto;
	width: 700px;
	overflow: hidden;
	height: 454px;
	position: relative;
	
}

ul {
	position: absolute;
	bottom: 10px;
	z-index: 100;
	width: 100%;
	text-align: center;
}

ul li {
	display: inline-block;
	font-size: 10px;
	line-height: 20px;
	font-family: "΢���ź�";
	margin: 0 1px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #333333;
	text-align: center;
	color: #ffffff;
}

.arrowLeft,
.arrowRight {
	position: absolute;
	width: 30px;
	background: rgba(0, 0, 0, 0.2);
	height: 50px;
	line-height: 50px;
	text-align: center;
	top: 200px;
	z-index: 150;
	
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
	display: none;
}

.arrowLeft {
	left: 10px;
}

.arrowRight {
	right: 10px;
}

li:nth-of-type(1) {
	background: orange;
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
	<script src="js/jquery.js"></script>
	<script src="js/adver.js"></script>
</head>
<body>
<div class="adver">
	<img src="img/adver01.jpg" alt="">
	<img src="img/adver02.jpg" alt="">
	<img src="img/adver03.jpg" alt="">
	<img src="img/adver04.jpg" alt="">
	<img src="img/adver05.jpg" alt="">
	<img src="img/adver06.jpg" alt="">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
</body>
</html>

var ii=1;//默认第几张图片
$(function(){
	//开始轮播
	var setInt=setInterval("lb()",1000);
	//鼠标移入div显示 左右按钮
	$(".adver").mouseover(function(){
		$(".arrowLeft").show();
		$(".arrowRight").show();
		clearInterval(setInt);
	});
	//鼠标移出 隐藏左右按钮
	$(".adver").mouseout(function(){
		$(".arrowLeft").hide();
		$(".arrowRight").hide();
		setInt=setInterval("lb()",1000);
	});
	/**数字按钮*/
	$("li").click(function(){
		//把所有的都改为同一个颜色
		$("li").css("background-color","#333333");
		$(this).css("background-color","orange");
		//隐藏所有图片
		$("img").hide();
		//显示当前对应的图片
		ii=$(this).index()+1;
		$("img:nth-of-type("+ii+")").show();
	});
	/**右*/
	$(".arrowRight").click(function(){
		lb();
	});
	/**左*/
	$(".arrowLeft").click(function(){
		//隐藏所有图片
		$("img").hide();
		//显示当前对应的图片
		if(ii==1){
			ii=$("img").length;
		}else{
			ii--;
		}
		//显示当前图片
		$("img:nth-of-type("+ii+")").show();
		$("li").css("background-color","#333333");
		$("li:nth-of-type("+ii+")").css("background-color","orange");
	});
	
});
function lb(){
		//隐藏所有图片
		$("img").hide();
		//显示当前对应的图片
		if(ii<$("img").length){
			ii++;
		}else{
			ii=1;
		}
		//显示当前图片
		$("img:nth-of-type("+ii+")").show();
		$("li").css("background-color","#333333");
		$("li:nth-of-type("+ii+")").css("background-color","orange");
	}