Web学习笔记day4-JQuery

最新推荐文章于 2022-08-02 16:47:31 发布
最新推荐文章于 2022-08-02 16:47:31 发布
阅读量91 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kb_white/article/details/119414196
版权

前言:学习总结,主要用于自我复习

1. 使用JQ完成首页的定时⼴告弹出

1.1 相关知识点JQuery

1.1 JQuery介绍

JQuery是一个快速、简洁的JavaScript框架.它封装JavaScript的常用功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互.

1.2 JQuery的使用

JQuery它是⼀个库（框架），要想使用它，必须先引入对应JS文件。

1.2.3 JQuery的引入
<script src="jquery.js文件地址" type="text/javascript" charset="utf-8"></script>
1.2.4 JQuery和JavaScript的转换

获取元素

  • JS：document.getElementById();
  • JQ：$("#id");
<script>
 function JSWrite(){
 //document.getElementById("span1").innerHTML="美美哒！";
 var spanEle = document.getElementById("span1");
 $(spanEle).html("Hello！");
 }
 $(function(){
 $("#btn1").click(function(){
 //JQ对象转换成DOM对象的第⼀种⽅式
 //$("#span1")[0].innerHTML="World！";
 //JQ对象转换成DOM对象的第⼆种⽅式
 $("#span1").get(0).innerHTML="World！";
 });
 });
</script> <body>
 <input type="button" value="JS写入" onclick="JSWrite()"/>
 <input type="button" value="JQ写入" id="btn1"/><br /><br />
  <span id="span1">sssss</span>
</body>

1.2.5 选择器

  • id选择器：$(“#id名称”);
  • 元素选择器：$(“元素名称”);
  • 类选择器：$(“.类名”);

1.3 代码实现

slideDown():滑入
fadeOut():淡出

<html>
	<head>
		<meta charset="utf-8">
		<title>div+css完成首页</title>
		<style type="text/css">
		#header {
				height: 51px;
			}
			#header div {
				height: 100%;
				width: 33%;
				float: left;
			}
		·
		·
		·
		</style>
		<script src="../JQuery/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
		<script>
		$(function(){
			setTimeout("showAd()",3000);
		})
		function showAd(){
			$("#ad").slideDown();
			setTimeout("hideAd()",3000);
		}
		function hideAd(){
			$("#ad").fadeOut();
		}
		</script>
	</head>
	<body>
		<img src="./img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" id="ad" style="display: none;" width="100%">
		·
		·
		·
	</body>
</html>

实现效果
首页打开3秒后广告滑出,再经过3秒淡出.

2. 使用JQ完成表格的隔行换色

2.2 相关知识点

  • $(“tbody tr:even”):选中表中的偶数行,0行开始
  • $(“tbody tr:odd”):选中奇数行
  • addClass():添加类

2.3 代码实现

<html>
	<head>
		<meta charset="UTF-8">
		<title>使用jQuery完成表格隔行换色</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<script src="../JQuery/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
		<script>
		$(function (){
			$("tbody tr:even").addClass("even");
			$("tbody tr:odd").addClass("odd");
		})
		</script>
	</head>
	<body>
		<table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr >
					<td>1</td>
					<td>张三</td>
					<td>22</td>
				</tr>
				·
				·
				·
			</tbody>
		</table>
	</body>
</html>

实现效果
在这里插入图片描述

3. 使用JQ实现全选全不选

3.1 相关知识点

属性操作

  • attr()：获取/设置元素的属性
  • removeAttr()：删除属性
  • prop()：获取/设置元素的属性
  • removeProp()：删除属性

attr和prop区别？

  1. 如果操作的是元素的固有属性，则建议使用prop
  2. 如果操作的是元素自定义的属性，则建议使用attr

3.2 代码实现

<html>
	<head>
		<meta charset="UTF-8">
		<title>使用jQuery完成复选框的全选和全不选</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<script src="../JQuery/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
		<script>
		$(function(){
			$("#select").click(function(){
				var checked=$("#select").prop("checked");
				$("input[type='checkbox']").prop("checked",checked);
			})
		})
		</script>
	</head>
	<body>
		<table border="1" width="500" height="50" align="center" id="tbl" >
			<thead>
				<tr>
					<td colspan="4">
						<input type="button" value="添加" />
						<input type="button" value="删除" />
					</td>
				</tr>
				<tr>
					<th><input type="checkbox" id="select"></th>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody>
				<tr >
					<td><input type="checkbox"  class="selectOne"/></td>
					<td>1</td>
					<td>张三</td>
					<td>22</td>
				</tr>
				<tr >
					<td><input type="checkbox" class="selectOne"/></td>
					<td>2</td>
					<td>李四</td>
					<td>25</td>
				</tr>
				·
				·
				·
			</tbody>
		</table>
	</body>
</html>

实现效果
点击标题勾选框,全部勾选或不选
在这里插入图片描述

四葉c
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
黑马12期 day73-EasyUI笔记
07-11
jQuery EasyUI是一个基于jQuery的前端UI框架，用于创建现代化、交互式的web界面。它提供了各种组件和插件，使得开发者可以以一种简单的方式快速构建出美观的界面效果。文件中提及了如何使用EasyUI框架中的两个基础...
Vue入门day01笔记
10-27
### Vue入门day01笔记详解 #### 库与框架的区别 在软件开发中，库（library）和框架（framework）都是提高开发效率、简化开发流程的重要工具，但它们有着本质的区别。 - **库（Library）**： - 库通常为开发者...
css奇数偶数选择器
热门推荐
web前端开发
11-30 3万+
前端项目开发中，需要根据行数的奇数和偶数的不同，设置不同的颜色显示，以在视觉上给用户以良好的浏览体验，这里就需要使用css奇数偶数选择器。主要用的：:nth-of-type或者:nth-c...
CSS3:nth-child()伪类选择器，Table表格奇偶数行定义样式
t1753867136的博客
05-17 5107
原文地址：http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.htmlCSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，CSSe...
tornado学习笔记day05-访问数据库
秋叶夏风的博客
01-15 295
模板## 配置模板路径 这个在之前我们已经配置好了,可以参考前面的文章 settings = { # 就像upfile就没有,你写了也白扯 'template_path': os.path.join(BASE_DIR, "templates"), } 渲染并返回给客户端 使用render()方法 class HomeIndexHandler(RequestHandler): ...
tornado学习笔记day06-应用安全
秋叶夏风的博客
01-15 539
应用安全 cookie 普通cookie 一般我们的用户表中都有啥呢 你在购物的时候,加入购物车,让你登录,那你登录之后,他怎么知道你登录了呢 token 这个值是随机的,存在cookie里面 设置 原型: 设置cookie 的方法 def set_cookie( self, name: str, value: Union[str, bytes], domain...
狂神SpringBoot学习笔记12天-Day 05 SpringBoot Web开发基础
weixin_52613545的博客
08-02 324
SpringBoot Web开发基础！
python高级学习笔记Day05--web框架，web框架搭建动态网站案例
qq_53157982的博客
02-11 1188
web框架 是一个为web服务器提供服务的应用程序，负责处理用户的动态资源请求。 静态资源：不需要经常变换的资源，png/jpg/css/js等。 动态资源：根据不同的条件进行筛选，获取的数据也不同。 WSGI协议 web服务器和web框架之间进行协同工作的一个规则。 ...
03 day3--javascript笔记pink老师-- 进阶之DOM技术
小女不才
08-31 1263
1. Web API 1.1 Web APIs与JS基础关联性 1.1.1 js的组成 1.1.2JS基础阶段与Web APls阶段 JS基础阶段： 我们学习的是ECMAscript标准规定的基本语法 要求同学们掌握Js基础语法 只学习基本语法,做不了常用的网页交互效果 目的是为了Js后面的课程打基础、做铺垫 Web APls阶段： web APIs是w3c组织的标准 web APIs 我们主要学习DoM和BOM web APIs 是我们Js 所独有的部分 我们主要学习页面交互功能 需要使用Js 基
web前端学习笔记——Day9(jQuery)
qq_43338468的博客
05-30 175
一、jQuery是什么？ <1>jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。 <2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! <3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼...
web阶段概念语法----学习笔记
zxwwantlearnjava的博客
07-25 740
web学习笔记大纲一、Oracle数据库1.概念2. 一、Oracle数据库 1.概念 概念:数据库是一种存储管理数据的软件,全称RDBMS(关系数据库管理系统),简称数据库(db) 数据库里常见的基本概念 (1)表(table): 二维表,实际负责数据的存储 (2)行(row): 存放一组具体的业务数据,也称为"记录" (3)列(column): 描述了业务数据里的一个具体的属性,也称为"字段" -主键(primary key): 唯一表示表里的一条记录,非空唯一 -外键(foreign key):
ajax-day01.rar_达内开发学习笔记
09-20
在“ajax-day01.rar_达内开发学习笔记”这个压缩包中，包含了第一天学习Ajax的基础内容，旨在帮助初学者理解并掌握Ajax的核心概念和使用方法。** **一、Ajax简介** Ajax并不是一种单一的技术，而是一组技术的组合，...
day03_JavaScript预习笔记1
08-04
总的来说，这个学习笔记涵盖了JavaScript的基础知识、Ajax编程、jQuery框架以及相关插件的使用，为深入理解和实践JavaScript提供了坚实的基础。无论是前端开发还是全栈开发，掌握这些技能都是非常重要的。
Week09-Day02
04-01
在"Week09-Day02-main"这个文件中，很可能是包含本次学习的主要代码示例、笔记或者练习。对于JavaScript学习者来说，实际编码是巩固理论知识的最佳方式。这个文件可能包含了如何创建和运行JavaScript脚本，如何与...
RK3576-Hardware-Design-Guide
08-21
包含datasheet
273教学质量评价系统.zip
08-21
摘 要 随着科学技术的飞速发展，社会的方方面面、各行各业都在努力与现代的先进技术接轨，通过科技手段来提高自身的优势，教学质量评价系统当然也不能排除在外。教学质量评价系统是以实际运用为开发背景，运用软件工程开发方法，采用jsp技术构建的一个管理系统。整个开发过程首先对软件系统进行需求分析，得出系统的主要功能。接着对系统进行总体设计和详细设计。总体设计主要包括系统总体结构设计、系统数据结构设计、系统功能设计和系统安全设计等；详细设计主要包括模块实现的关键代码，系统数据库访问和主要功能模块的具体实现等。最后对系统进行功能测试，并对测试结果进行分析总结，及时改进系统中存在的不足，为以后的系统维护提供了方便，也为今后开发类似系统提供了借鉴和帮助。 本教学质量评价系统采用的数据库是Mysql，使用JSP技术开发。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。
基于Android手机点餐系统APP设计与实现.docx
08-21
基于Android手机点餐系统APP设计与实现
全国自学考试计算机网络管理试题.pdf
最新发布
08-21
浙江省的全国自学考试计算机网络管理试题，总共38道题，包含单选，填空，多选等等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值