Web--jQuery

最新推荐文章于 2019-08-27 21:00:42 发布
最新推荐文章于 2019-08-27 21:00:42 发布
阅读量143 收藏
点赞数
分类专栏： MySQL
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44863429/article/details/99875653
版权

jQuery

一、jQuery简介，版本选择

jQuery是原生js的封装库，将原生js方法进行封装简化了原生js的操作

版本类型：x、2.x、3.x      2.x和3.x不兼容低版本浏览器

 

jQuery的使用：

        导入库文件：在header标签内导入库文件。在代码中打印$，如果没有报错代表导入成功

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 导入库文件 -->
	<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
</head>
<body>
	<script type="text/javascript">
		//检测是否导入成功
		console.log($);
	</script>
	
</body>
</html>

二、选择器

基本选择器：

过滤选择器：

body代码部分：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>第一个完整的静态页面</title>
	<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
	<style type="text/css">
		*{margin:0;padding:0;list-style: none}
		.header{
			min-width:960px;
			overflow: hidden;
			border:1px solid #c4c4c4;
		}
		.center{
			
			width:960px;
			height:90px;
			margin:0 auto;
		}
		.header .logo{
			margin-top:10px;
			float:left;
		}
		.nav_top{
			width:685px;
			float:right;
			/*background:red;*/
			margin-top:10px;
			margin-left:10px;
		}
		.nav_top li{
			float:left;
			width:90px;
			border:1px solid green;
			line-height:65px;
			margin-left:-1px;
			text-align: center;

		}
		.content{
			width:960px;
			min-height:500px;
			margin:10px auto;
			overflow: hidden;
			border:#c4c4c4 solid 1px;
		}
		.content ul{
			margin-top:10px;
			margin-bottom:10px;
		}
		.content li{
			width:225px;
			height:300px;
			border:1px solid #c4c4c4;
			float:left;
			margin-left:10px;
			margin-top:10px;
			margin-bottom:10px;
		}
		.footer{
			width:960px;
			min-height:50px;
			margin:0 auto;

			border:#c4c3c4 solid 1px;
			text-align: center;
			line-height: 50px;
		}
	</style>
</head>
<body>
<div class="header">
		<div class="center">
			<div class="logo">
				<img src="./image/logo.png">
			</div>
			<ul class="nav_top">
				<li id="item1">IT</li>
				<li>在线</li>
				<li id="item3">服务</li>
				<li>就业</li>
				<li>信息</li>
				<li>资队</li>
				<li>关于</li>
			</ul>
		</div>	
	</div>
	<div class="content">
		<ul>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li class="item5">
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
		</ul>
	</div>
	<div class="footer">
		 COPYRIGHT©U
	</div>
</body>
</html>

        获取第一个元素    :first

        获取最后一个元素    :last

        获取指定索引的元素    eq

关系选择器：

        获取所有的子元素    children()

        获取上一个同级元素    prev()

        获取下一个同级元素    next()

 

        获取所有除自己以外的同级元素    silbings()

        获取父元素    parent()

        获取先辈元素    parents()

        在父元素中查找指定的子元素    find() 

三、元素操作

css设置

        使用css()方法来操作样式

        一次设置一个样式：$(el).css('样式的key','设置的值')

        一次设置多个样式：$(el).css({})

文本操作

        innerHTML---->html()

        innerText---->text()

表单值的操作

        value属性---->val()

属性的操作

        attr()

        删除：removeAttr()

类class属性的操作：

        addClass()

        removeClass()

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./jquery-1.8.3.min.js"></script>
	<style>
		.item1{
			border: 3px solid red;
		}
		.item2{
			font-size: 30px;
		}
	</style>
</head>
<body>
	<div class="box">哈哈啊哈</div>
	<input type="text" value="来呀">
	<br>
	<img src="./image/1.jpg" alt="">
	<script type="text/javascript">
		//设置css样式
			//一次设置一个样式
			// $('.box').css('width','200px');
			// $('.box').css('height','200px');
			// $('.box').css('background-color','red');
			//一次设置多个样式
			// $('.box').css({width:'200px',height:'200px',backgroundColor:'green'});
		//文本内容的操作，结果和原生的innerHTML，innerText一样
			//html()
			// $('.box').html('<em>i love you</em>');
			//text()
			//$('box').text('<b>听说</b>');
		// 表单值的操作
			//获取
			// console.log($('input').val());
			//设置
			// $('input').val('嘿嘿嘿');
		//属性的操作
			//获取属性的值，传一个参数
			console.log($('img').attr('src'));
			//设置属性的值，一次设置一个
			$('img').attr({alt:'呀呀呀呀',title:'emmmmmm'});
			//删除属性
			$('img').removeAttr('str');

		//class属性的操作
			//给.box追加类名，在原来的基础是追加，不会删除原来的类名
			$('.box').addClass('item1 item2');
			//删除类名，如果不传参数会将所有的类名都删掉
			$('box').removeClass('item2');
	</script>
</body>
</html>

案例：使用jQuery实现选项卡

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;padding: 0;list-style: none;
		}
		.wrap{
			width: 300px;
			height:300px;
			border: 1px solid #c4c4c4;
		}
		.title{
			overflow: hidden;
		}
		.title .active1{
			background: pink;
		}
		.title li{
			float: left;
			width: 100px;
			height: 50px;
			background:#c4c4c4;

			text-align: center;
			line-height: 50px;
		}
		.content li{
			height: 250px;
			border: 1px solid red;

			/*默认给所有的内容隐藏*/
			display: none;
		}
		.content .active2{
			display:block;
		}
	</style>
	<script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
	<div class="wrap">
		<ul class="title">
			<li class="active1">话费</li>
			<li>机票</li>
			<li>酒店</li>
		</ul>
		<ul class="content">
			<li class="active2">话费的内容</li>
			<li>机票的内容</li>
			<li>酒店的内容</li>
		</ul>
	</div>
	<script type="text/javascript">
		//给每个标题添加移入事件
		$('.title li').mouseover(function(){
			//移入谁给谁添加类名
			//给当前移入li添加类名，获取所有同级的li  移除类名
			$(this).addClass('active1').siblings().removeClass('active1');
			//$(this).index()  获取当前元素的索引值
			// console.log($(this).index());
			$('.content li').eq($(this).index()).addClass('active2').siblings().removeClass('active2');
		})
	</script>
</body>
</html>

四、相关尺寸

获取元素相对文档的偏移位置：offset()

获取文档的滚动距离：scrollTop()、scrollLeft()

获取元素的宽度和高度

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="./jquery-1.8.3.min.js"></script>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		body{
			height: 2000px;
			width: 2500px;
		}
		.box1{
			width: 200px;
			height: 200px;
			background: #0f0;

			padding: 20px;
			border: 3px solid red;
		}
		.box2{
			width: 300px;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="bos1 box2"></div>
	<script type="text/javascript">
		//获取元素相对文档的偏移位置
		//offset()返回的是一个包含top和left属性的对象
			//获取box1相对于文档的位置
			console.log($('.box1').offset());
			console.log($('.box2').offset());
		//获取文档的滚动距离
		//scrollTop()获取文档的垂直方向的滚动距离，返回的是一个数字
			console.log($(document).scrollTop());
		//scrollLeft()文档的水平方向的滚动距离
			console.log($(document).scrollLeft());
		//获取元素的宽度和高度
			//width() height()如果是多个元素对象获取的是第一个元素的宽高
			//
			//只获取元素的内容大小
			// innerWidth()  innerHeight()获取包含内间距，不包含边框
			// outerWidth()  outerHeight() 包含内间距包含边框
			console.log($('.box1').width());
			console.log($('.box1').height());
			console.log($('.box1').innerHeight(),'innerheight');
			console.log($('.box1').outerHeight(),'outerheight');

			//获取浏览器窗口的大小
			console.log($(window).width());
			//获取文档的宽高
			console.log($(document).width());
			console.log($(document).height());
	</script>
</body>
</html>

 

拯救发际线的张哈哈
关注
专栏目录
jquery-getUrlParam.js
07-23
jquery-getUrlParam .
jquery-manifest.js
12-24
这就是jQuery Manifest插件（jquery-manifest.js）发挥作用的地方。本文将深入探讨这个插件的核心概念、工作原理以及实际应用场景，帮助开发者更好地理解和运用它。 **jQuery Manifest插件的核心概念** jQuery ...
jquery-qrcode-master
11-06
本文将深入探讨jQuery QRCode（在本文中称为“jquery-qrcode-master”）的原理、使用方法以及实际应用场景。 1. **项目简介** - **项目名称**：“jquery-qrcode-master” - **主要功能**：为网页提供生成二维码的...
jquery-ui-1.10.4.custom
03-07
这个名为 "jquery-ui-1.10.4.custom" 的压缩包文件，很显然是一个自定义版本的 jQuery UI，版本号为 1.10.4。在本文中，我们将深入探讨 jQuery UI 的核心功能、使用场景以及其自定义版本的特性。 ### jQuery UI 的...
jquery-validation-1.19.1.zip
04-06
jQuery-validation是Web开发中常用的客户端表单验证插件，其1.19.1版本的发布为开发者提供了更稳定和高效的服务。该压缩包“jquery-validation-1.19.1.zip”包含了完整的源码、库文件、示例、测试用例以及相关文档，...
MySQL--启动服务、连接数据库、命令、操作、查询语句
想拯救发际线的博客
08-22 1727
启动服务 在开始菜单中搜索cmd，双击打开 快捷键win+R，输入cmd，回车。 在命令行，输入net start mysql 若要停止服务，输入net stop mysql 连接数据库 mysql -u root -p -h -P -u 你的mysql的用户名 -p 你的mysql密码 -h 你的mysql服务的地址ip -P mysql数据库的端口号，默认3306 完整写法：mysq...
MySQL--排序order by、分页获取limit、嵌套子查询、数据库关系搭建、外键、多表查询、连接查询
想拯救发际线的博客
08-23 1190
排序 order by desc降序排序 asc 升序排序 默认不写就是升序排序 1.查询所有学员信息 并按照年龄进行降序排序 select * from students order by age desc; 2.查询班级为python的男生信息 并按照年龄进行降序排序 select * from students where class='python' and gender='1' o...
Web--html认识、标签、基本结构
想拯救发际线的博客
08-12 500
HTML 认识 一、什么是HTML HTML指的是超文本标记语言（Hyper Text Markup Language） 超文本：超：超链接 包含超链接的文本 标记语言： 标记：标签 语言：制作网页的语言 一个网页是有多个标签组成的 HTML是用来描述网页的一种语言 1、标签、元素 HTML标签是由尖括号包围的关键词，比如 <html> HTML标签通常是成对出现的，比如<b&g...
Web--CSS基本样式
想拯救发际线的博客
08-13 465
CSS（Cascading Style Sheets）基本样式 一、CSS简介 1.什么是css 重叠样式表：主要是负责标签的样式 美化页面 一个网页分三大部分： 结构层： 主要由html负责 负责页面的结构 表现层： 主要由css负责 页面的展示样式 美化页面 行为层： 主要由js负责 负责页面和用户的交互效果 css是单独的一种文件类型 后缀为.css的文件 2.Css的三种引入方式 ...
MySQL--数据备份（导入导出）、权限管理、索引
想拯救发际线的博客
08-26 359
数据备份 1.先退出mysql环境 2.数据的导出 备份表： 格式：mysqldump -uroot -p 库名 表名>表名.sql 备份库： 格式：mysqldump -uroot -p 库名>备份文件名.sql 3.数据的导入 数据的导入 mysql -uroot -p 库名<备份文件地址.sql 将导出的存入新的数据库的表中 导出库+导入库 （各位未备份就删了库，跑...
MySQL--视图、触发器、事务的基本操作、ORM、数据库分类
想拯救发际线的博客
08-27 274
视图： 定义：当查询的复杂度很高时，之多字段，多关系查询，会导致sql语句混乱，是一张虚拟的表，有字段和数据，只存放查询语句 视图有字段有行，但是视图基于源表 特点： 简单：视图构建了一个虚拟的表，表里的数据是来源于复杂的查询语句，我们将复杂的查询语句存入视图，使用时直接调用视图 安全：数据具有对库和表的权限管理，但是没有对字段权限，可以通过视图来实现权限的功能 数据的独立性： 视图基于源表，当源...
Web--网页布局、JavaScript
想拯救发际线的博客
08-15 270
一、网页布局 网页布局一般分为：网页头部、网页内容部分、网页尾部 html5新增的语义化标签：语义化标签可以让页面的结构更清晰，主要是给搜索引擎去使用。一般低版本浏览器不支持，目前应用最多的是在移动端。 header、nav、articel、section、sidebar、footer，这些都可以当做div来使用。 （以下代码是一个简单布局，就是配色有点丑） <!DOCTYPE html&g...
Web--CSS
想拯救发际线的博客
08-14 136
1. 选择器优先级进阶 <div id=”item” class=”box”> <p></p> </div> #item p{} .box p{} id 100 class 10 标签选择器 1 行间优先级是 1000 计算方式 ： 让每一个选择器对应的值相加 谁的值大谁的优先级高 <...
Web--JavaScript（三）
想拯救发际线的博客
08-19 111
js内置对象 一、数组的操作 1、创建数组 2、索引操作 3、push() 4、pop() 5、unshift() 6、shift() 7、splice() 二、数学对象 1、Math.abs() 绝对值 2、Math.floor() 向下取整 3、Math.ceil() 向上取整 4、Math.round() 四舍五入 5、Math.ran...
Web--JavaScript（二）
想拯救发际线的博客
08-17 104
一、函数 （一）函数的定义方式 使用function关键词定义 函数的调用（也可以把调用函数放在函数前面，正常执行） （二）函数的返回值 在函数的内部使用return关键字来返回指定内容（如果想要返回多个值，将多个值存入数组中再返回） 注意：如果函数没有设置返回值，默认返回undefined （三）函数的三种形式 命名函数：function 函数名(){} 这种定义函数的方式，任...
基于大模型技术的算力产业监测服务平台设计
09-17
内容概要：本文提出了一种新型算力产业监测服务平台的设计理念，运用国内自主研发的大模型技术支持，通过对传统技术的改进和完善，提出了三层架构的设计方法，即基础设施层（含向量数据库和模型训练）、大模型应用框架层（强化数据处理与多维关系挖掘）及业务层（如智能分析助手）。这种设计方案旨在提高算力产业发展监测与决策制定的质量。 适合人群：电信行业的从业人员及研究人员；算力产业链各环节管理者；政府相关机构和政策决策者。 使用场景及目标：在多种算力相关的应用场景（如云计算中心管理，数据中心监测，政策分析）中辅助决策者进行快速有效的信息获取和技术选择；助力算力产业发展方向的精确把控和战略调整。 其他说明：随着大模型技术的日臻成熟，该算力产业监测服务平台预计将进一步丰富自身的应用领域和服务深度，以促进算力行业更智慧化发展。
This_honeypot_supports_Telnet_and_SSH_two_protocol_FF-Pot.zip
最新发布
09-17
This_honeypot_supports_Telnet_and_SSH_two_protocol_FF-Pot
吉他谱_What I've Done - Linkin Park.pdf
09-17
初级入门吉他谱 guitar tab
jQuery-Mobile基础教程：属性与用法解析
在移动Web开发中，jQuery-mobile是一个非常流行的框架，它简化了创建触摸友好的交互式界面的过程。以下是对jQuery-mobile基础属性和用法的深入讲解： 首先，为了使用jQuery-mobile，你需要引入必要的库文件。这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值