HTML---JQurey的基本使用

文章目录

目录

文章目录

本章目标

一.JQuery下载安装

二.JQuery概述

JQuery的作用

JQuery的优势

JQUery示例

三.JQuery基础

语法结构

JQuery常用内置函数

总结

本章目标

（1）能够搭建jQuery开发环境

（2）使用ready( )方法加载页面、掌握jQuery语法

使用addClass( )方法和css( )方法为元素添加CSS样式
使用next( )方法获取元素
会使用show( )和hide( )显示和隐藏元素

一.JQuery下载安装

选择如下版本

将点击后生成的网页内容保存使用ctrl+s保存到电脑文件夹即可。

使用方法：

将保存的JQuery文件添加到需要使用的项目文件中

使用JQuery时，需使用如下代码部署JQuery环境：

javascript 复制代码

<script src="jquery-3.7.1.js" type="text/javascript" charset="utf-8"></script>

二.JQuery概述

jQuery是一个JavaScript库，并提供了一个简洁而强大的API，使开发人员能够更容易地操作HTML元素、处理事件和执行动画。它使用CSS选择器来选择HTML元素，并提供了大量的方法来修改和操作这些元素。

jQuery还提供了大量的插件，使开发人员能够轻松地扩展其功能。这些插件包括图表、表单验证、日期选择器等等。

JQuery的作用

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

JQuery的优势

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

JQUery示例

css 复制代码

$("tr:even").css("background-color","#e8f0f2");
分析：
$() ==> 代表工厂函数 ==>作用：将选中的选择器转化为JQuery对象
$("tr:even") ==> 代表JQuery对象 ==> tr:代表标签选择器用于选中表格 even:代表取复数

css("background-color","#e8f0f2"); ==》代表CSS样式

JQuery函数作用总结为一句话为：使用JQuery找一个对象用来干什么事。

演示案例

html 复制代码

<body>
		<script src="jquery-3.7.1.js" type="text/javascript"></script>
		<!--自定义的JS代码-->
		<script type="text/javascript">
			$(document).ready(function(){window.alert("这是我的第一个JQuery代码");});
		</script>
</body>

上述案例中，使用$(document)利用选择器document将浏览器页面创建为JQ对象，并使用一个JQ内置函数ready()在页面加载后执行一个函数function()。

三.JQuery基础

语法结构

JQuery常用内置函数

|----------------------|----------------------|
| ready() | 网页加载后执行相应动作 |
| click | 鼠标点击JQ对象后执行相应动作 |
| mouseover | 鼠标进入JQ对象后执行相应动作 |
| mouseout | 鼠标离开后JQ对象后执行相应动作 |
| show() / hide() | 显示选中的元素 // 隐藏选中的元素 |
| JQ对象.children(index) | 选中JQ对象所有子元素中的index元素 |
| addClass(css类名) | 给JQ对象添加指定CSS类名的样式 |
| css() | 给JQ对象添加CSS样式 |

addclass() 方法

演示案例

点击第一个元素后，背景颜色改变

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{list-style: none; line-height: 22px; cursor: pointer;}
			.current{background-color: #6cf;font-weight: bold;color: #fff;}
		</style>
	</head>
	<body>
		<ul>
			<li id="current">jQuery简介</li>
			<li>jQuery语法</li>
			<li>jQuery选择器</li>
			<li>jQuery事件与动画</li>
			<li>jQuery方法</li>
		</ul>
		<script src="jquery-3.7.1.js" type="text/javascript"></script>	
		<script type="text/javascript">
			//使用$(document)选中浏览器页面作为JQ对象并执行页面加载后调用函数function
			$(document).ready(function(){  
				//使用$("li")选中所有的li元素作为JQ对象并执行点击li后调用function函数
				$("li").click(function(){ 
					//使用$("#current")选中id=current的元素作为JQ对象并使用addClass给该元素添加样式
					$("#current").addClass("current");   
				});
			});
		</script>
	</body>
</html>

CSS()方法设置元素样式

综合演示案例

鼠标移入菜单某一栏后显示对应图片

html 复制代码

<!doctype html>
<html>
 <head lang="en">
  <meta charset="UTF-8">
  <title>仿京东左侧菜单</title>
	<style>
		*{padding:0;margin:0;}
		a{text-decoration:none;}
		.nav-box{width:210px;margin:5px 0 0 5px;}
		.nav-top a{
			display:block;height:45px;font-size:16px;line-height:45px;
			padding:0 10px;background:#B1191A;color:#fff;
		}
		ul{background:#c81623;list-style:none;padding-bottom:1px;}
		ul li{height:30px;line-height:30px;font-size:14px;
			color:#fff;position:relative;padding-left: 5px;
			}
		ul li a{color:#fff;}
		ul li div{display:none; position: absolute; left: 211px; top:0px;}
	</style>
 </head>
 <body>
	<div class="nav-box">
		<div class="nav-top"><a href="">全部商品分类</a></div>
		<ul>
			<li>
				<a href="">家用电器</a>
				<div><img src="images/erji.jpg"/></div>
			</li>
			<li>
				<a href="">手机</a>、<a href="">数码</a>、<a href="">京东通信</a>
				<div><img src="images/erji1.jpg"/></div>
			</li>
			<li>
				<a href="">电脑</a>、<a href="">办公</a>
				<div><img src="images/erji2.jpg"/></div>
			</li>
			<li>
				<a href="">家居</a>、<a href="">家具</a>、<a href="">家装</a>、<a href="">厨具</a>
				<div><img src="images/erji3.jpg"/></div>
			</li>
			<li>
				<a href="">男装</a>、<a href="">女装</a>、<a href="">珠宝</a>
				<div><img src="images/erji4.jpg"/></div>
			</li>
		</ul>
	</div>
    <script src="jquery-3.7.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function(){     
			//使用$("li")选中所有的li元素作为JQ对象并执行鼠标移入li后调用function函数
			$("li").mouseover(function(){
				//$(this)代表将鼠标当前所在位置的元素作为JQ对象
				$(this).css("background-color","orange");
				//使用children("div")选中JQ对象子元素中的div元素并使用show()元素显示
				$(this).children("div").show();
			});
			//使用$("li")选中所有的li元素作为JQ对象并执行鼠标移除li后调用function函数
			$("li").mouseout(function(){
				$(this).css({"background-color":"#c81623"});
				$(this).children("div").hide();
			});
		});
	</script>
 </body>
</html>

四.JQuery代码风格

链式操作

通过链式操作，可以将多个操作连在一起，形成一个更具有逻辑性和连贯性的代码流程。这样可以使代码更易于理解和维护。

演示案例

鼠标点击受益人后，显示出答案。

html 复制代码

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h2{padding: 5px;  cursor: pointer;}
			p{display: none;}
		</style>
	</head>
	<body>
		<h2>什么是收益人</h2>
		<p>
			<strong>解答：</strong>
			受益人是指人身保险中由被保险人或者投保人指定的享有
			保险金请求权的人，投保人，被保险人可以成为受益人。
		</p>
		<script src="../js/jquery-3.7.1.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("h2").click(function(){
					$(this).css("background-color","aqua").next().css("display","block");
				});
			});
		</script>
	</body>
</html>

隐式迭代

隐式迭代是指通过选择器选择的多个元素可以一次性进行操作，而不需要显式地使用循环迭代每个元素。

演示案例

点击按钮后，使元素发生变化。

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>
			<input type="button" value="点我查看隐式迭代的效果" id="but1"/>
		</p>
		<ul>
			<li><div>李一桐</div></li>
			<li><div>赵露思</div></li>
			<li><div>虞书欣</div></li>
			<li><div><a href="#">LiSa</a></div></li>
		</ul>
		<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#but1").click(function(){
					$("li").css({"font-weight":"bold","color":"red"});
				});
			});
		</script>
	</body>
</html>

五.DOM对象和JQ对象

练习

html 复制代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <style type="text/css">
	ul,li{padding: 0;margin: 0; list-style: none;}
	.adver{margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; background: url("../images/adver01.jpg");}
	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-family: "微软雅黑";
	    font-size: 28px;font-weight: bold; cursor: pointer;display: none;
	}
	.arrowLeft{left: 10px;}
	.arrowRight{right: 10px;}
	li:nth-of-type(1){
	    background: orange;
	}
	</style>
</head>
<body>
<div class="adver">
    <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>
<script src="../js/jquery-3.7.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//将图片存储在数组中
		var img=Array("adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg");
		var flag = 0;   //控制图片的下标
		//点击左箭头触发的方法
		$(".arrowLeft").click(function(){
			if(flag == 0){
				window.alert("这已经是第一张图片了!")
			}else{//由于点击左箭头触发该函数，因此当flag不等于0时，点击左箭头图片向左移动，下表应减1
				flag--;
				var i = flag+1; //i 控制图片下方序号，即当显示图片为数组0号位置图片时，下标显示为1、
				//下方"url(images/"+img[flag]+")"：代表在背景中插入图片，图片地址为images/adver01--inages/adver06
				//下方以代码的形式表现图片路径。
				$(".adver").css("background","url(images/"+img[flag]+")");
				$("li:nth-of-type("+i+")").css("background","orange");
				//siblings()用于选中指定元素的同级元素。
				$("li:nth-of-type("+i+")").siblings().css("background","#333333");
			}
		});
		//点击右箭头触发的方法
		$(".arrowRight").click(function(){
			if(flag == img.length-1){
				window.alert("这已经是最后一张图片了!");				
			}else{
				flag++;
				var i = flag+1;
				$(".adver").css("background","url(images/"+img[flag]+")");				
				$("li:nth-of-type("+i+")").css("background","orange");
			    $("li:nth-of-type("+i+")").siblings().css("background","#333333");
			}
		});
        //设置鼠标移入/移除元素后的样式
		$(".adver").mouseover(function(){
			$(".arrowRight").show();
			$(".arrowLeft").show();
		}).mouseout(function(){
			$(".arrowRight").hide();
			$(".arrowLeft").hide();
		})
	});
</script>
</body>
</html>