菜单 搜索
首页 前端知识 jQuery框架

jQuery框架

2024-03-13 00:03:29 前端知识 前端哥 970 951 我要收藏

一、jQuery框架

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

二、jQuery可以做什么

HTML 元素选取 

HTML 元素操作 

CSS 操作 

HTML 事件函数 

JavaScript 特效和动画 

HTML DOM 遍历和修改 

AJAX

三、如何在HTML页面中使用jQuery框架

jQuery是一个封装了JS脚本的框架。

也就是说是已经写好的JS代码。

.js就是JavaScript的外部脚本文件。

.min.js 这是压缩的版本。

还需要在HTML页面中导入相应的js文件。

 <script src="js/jquery-3.5.1.min.js" >

这个位置写代码也没用！

</script>

四、jQuery的核心方法 

在jQuery中封装了一系列的方法。

核心方法： jquery();

简化格式： $(); 合作$代替jQuery这个方法名

$(参数)：参数可以是选择器，还可以直接就是一个函数

五、jQuery中事件方法

在jQuery中将HTML中事件都封装成了一系统的事件方法。

表示页面输载入事件：ready(函数)

		<script type="text/javascript">
			$(document).ready(function(){
			  alert("msg");
			});
		</script>


        <script type="text/javascript">
			$(function(){
				alert("msg");
			});
		</script>

六、jQuery的选择器

选择器的作用是用来在HTML页面上查找元素。

jQuery的选择器与CSS内嵌样式选择器是一样的。

七、jQuery的方法

7.1 值的方法

html()====>innerHTML

text()====>innerText

val()====>value

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				font-family: 'Courier New', Courier, monospace;
			}
			#myspan{
				font-size: 36px;
				color: darkorange;
				font-family: "楷体";
			}
		</style>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				console.log($("#myspan").html());
				$("#myspan").text("<i>这是使用jQuery加的HTML</i>");
				
				$("#myText").blur(function(){
					$("#myspan").html("<B>"+$(this).val()+"</B>");
				});
			});
		</script>
	</head>
	<body>
		<span id="myspan"><b>这是SPAN标签</b></span><br>
		<input type="text" name="userName" value="peter" id="myText" />
	</body>
</html>

 7.2 CSS样式的方法

 

 使用一个叫css()的方法可以设置和获取对象的样式。

7.3 属性

 

attr方法，可以获取属性的值，也可以设置属性的值。

更可以获取 一个 我们 自己 新定义的属性的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			$(function(){
				console.log($(".cboxCls"));
				$(".cboxCls").css("width","64px");
				$(".cboxCls").attr("checked","checked");
				console.log($(".cboxCls").attr("checked"));
				
				$.each( $(".cboxCls")  , function(i,n){
					console.log(i);
					console.log(n);
					console.log($(this).attr("goodsId"));
				});
			});
		</script>
	</head>
	<body>
		<input type="checkbox" name="cbox" class="cboxCls" goodsId="1"/>
		<input type="checkbox" name="cbox" class="cboxCls" goodsId="2"/>
		<input type="checkbox" name="cbox" class="cboxCls" goodsId="3"/>
		<input type="checkbox" name="cbox" class="cboxCls" goodsId="4"/>
		<input type="checkbox" name="cbox" class="cboxCls" goodsId="5"/>
		<input type="checkbox" name="cbox" class="cboxCls" goodsId="6"/>
	</body>
</html>

 7.4 类样式的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.c1{
				background-color: #00FFFF;
			}
			.c2{
				background-color: burlywood;
			}
		</style>
		<script src="js/jquery-3.5.1.min.js" ></script>
		<script>
			$(function(){
				$("#tabData tr:even").addClass("c1");
				$("#tabData tr:odd").addClass("c2");
				$("table tr:first").css("backgroundColor","red");
			});
		</script>
	</head>
	<body>
		<table width="60%" border="1px" cellpadding="3px" cellspacing="0px">
			<tr>
				<th>编号</th><th>姓名</th>
				<th>性别</th><th>年龄</th>
			</tr>
			<tbody id="tabData">
			<tr>
				<td>1</td><td>张三</td>
				<td>男</td><td>38</td>
			</tr>
			<tr>
				<td>2</td><td>李四</td>
				<td>男</td><td>48</td>
			</tr>
			<tr>
				<td>3</td><td>王五</td>
				<td>女</td><td>15</td>
			</tr>
			</tbody>
		</table>
	</body>
</html>

八、实现动态表格

8.1 创建一个表格

	<body>
		<table width="60%" border="1px" cellpadding="3px" cellspacing="0px">
			<tr>
				<th>编号</th><th>姓名</th>
				<th>性别</th><th>积分</th>
			</tr>
			<tbody id="tabData">
				
			</tbody>
		</table>
	</body>

8.2 编写数据

let stuArr = [{'sid':1,'sname':'闫凯','ssex':'1','score':0},{},{}];

		<script>
			let stuArr = [
				{'sid':1,'sname':'闫凯','ssex':1,'score':0},
				{'sid':2,'sname':'徐萌','ssex':1,'score':50},
				{'sid':3,'sname':'霍明月','ssex':0,'score':10}];
			$(function(){
				
				$.each(stuArr,function(i,n){
					console.log(i);
					console.log(n);
					console.log(n.sname);
				});
				
				$("#tabData tr:even").addClass("c1");
				$("#tabData tr:odd").addClass("c2");
				$("table tr:first").css("backgroundColor","red");
			});
		</script>

8.3 在页面加载完成之后初始化表格

<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			let stuArr = [
				{'sid':1,'sname':'闫凯','ssex':1,'sscore':0},
				{'sid':2,'sname':'徐萌','ssex':1,'sscore':50},
				{'sid':3,'sname':'霍明月','ssex':0,'sscore':10}];
				
			$(function(){
				
				$.each(stuArr,function(i,jsonObj){
					//在jQuery中如何创建一个tr标签对象
					let trObj = $("<tr></tr>");
					let sidTd = $("<td></td>").html(jsonObj.sid);
					let snameTd = $("<td></td>").html(jsonObj.sname);
					let ssexTd = $("<td></td>").html(jsonObj.ssex);
					let sscoreTd = $("<td></td>").html(jsonObj.sscore);
					trObj.append(sidTd).append(snameTd).append(ssexTd).append(sscoreTd);
					$("#tabData").append(trObj)
				});
				
				$("#tabData tr:even").addClass("c1");
				$("#tabData tr:odd").addClass("c2");
				$("table tr:first").css("backgroundColor","red");
			});
		</script>

8.4 将表单中的数据加到表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.c1{
				background-color: #00FFFF;
			}
			.c2{
				background-color: burlywood;
			}
			table tr:first{
				background-color: fuchsia;
			}
		</style>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			let stuArr = [
				{'sid':1,'sname':'闫凯','ssex':1,'sscore':0},
				{'sid':2,'sname':'徐萌','ssex':1,'sscore':50},
				{'sid':3,'sname':'霍明月','ssex':0,'sscore':10}];
				
			$(function(){
				$("#btnAdd").click(function(){
					let trObj = $("<tr>");
					let sidTd = $("<td>").html($("#sid").val());
					let snameTd = $("<td>").html($("#sname").val());
					let ssexTd = $("<td>").html($(".radioCls:checked").val());
					let sscoreTd = $("<td>").html($("#sscore").val());
					trObj.append(sidTd).append(snameTd).append(ssexTd).append(sscoreTd);
					$("#tabData").append(trObj);
					
					$("#tabData tr:even").addClass("c1");
					$("#tabData tr:odd").addClass("c2");
					
				});
				
				$.each(stuArr,function(i,jsonObj){
					//在jQuery中如何创建一个tr标签对象
					let trObj = $("<tr>");
					let sidTd = $("<td>").html(jsonObj.sid);
					let snameTd = $("<td>").html(jsonObj.sname);
					let ssexTd = $("<td>").html(jsonObj.ssex);
					let sscoreTd = $("<td>").html(jsonObj.sscore);
					trObj.append(sidTd).append(snameTd).append(ssexTd).append(sscoreTd);
					$("#tabData").append(trObj);
				});
				
				$("#tabData tr:even").addClass("c1");
				$("#tabData tr:odd").addClass("c2");
				
			});
		</script>
	</head>
	<body>
		
		<table width="60%" border="1px" cellpadding="3px" cellspacing="0px">
			<tr>
				<th>编号</th><th>姓名</th>
				<th>性别</th><th>积分</th>
			</tr>
			<tbody id="tabData">
				
			</tbody>
		</table>
		<hr />
		<form>
			编号：<input type="text" name="sid" id="sid" value="" /><br>
			姓名：<input type="text" name="sname" id="sname"  value="" /><br>
			性别：<input type="radio" name="ssex" value="1" class="radioCls" checked="checked" />男  &nbsp;&nbsp; 
				  <input type="radio" name="ssex" value="0" class="radioCls"/>女<br>
			积分：<input type="text" name="sscore" id="sscore" value="" /><br>
			<input type="button" id="btnAdd" name="btnAdd" value="保存" />
		</form>
	</body>
</html>

8.5 为每一行增加一个删除按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.c1{
				background-color: #00FFFF;
			}
			.c2{
				background-color: burlywood;
			}
			table thead tr:first-child{
				background-color: yellow;
			}
		</style>
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			let stuArr = [
				{'sid':1,'sname':'闫凯','ssex':1,'sscore':0},
				{'sid':2,'sname':'徐萌','ssex':1,'sscore':50},
				{'sid':3,'sname':'霍明月','ssex':0,'sscore':10}];
				
			$(function(){
				$("#btnAdd").click(function(){
					let trObj = $("<tr></tr>");
					let sidTd = $("<td></td>").html($("#sid").val());
					let snameTd = $("<td>").html($("#sname").val());
					let ssexTd = $("<td>").html($(".radioCls:checked").val());
					let sscoreTd = $("<td>").html($("#sscore").val());
					let delTd = $("<td>");
					let delBtn = $("<input>").attr("type","button").val("删除");
					delTd.append(delBtn);
					trObj.append(sidTd).append(snameTd).append(ssexTd).append(sscoreTd).append(delTd);
					$("#tabData").append(trObj);
					
					delBtn.click(function(){
						$(this).parent().parent().remove();
						
						$("#tabData tr:even").addClass("c1");
						$("#tabData tr:odd").addClass("c2");
					});
					
					$("#tabData tr:even").addClass("c1");
					$("#tabData tr:odd").addClass("c2");
					
				});
				
				$.each(stuArr,function(i,jsonObj){
					//在jQuery中如何创建一个tr标签对象
					let trObj = $("<tr>");
					let sidTd = $("<td>").html(jsonObj.sid);
					let snameTd = $("<td>").html(jsonObj.sname);
					let ssexTd = $("<td>").html(jsonObj.ssex);
					let sscoreTd = $("<td>").html(jsonObj.sscore);
					trObj.append(sidTd).append(snameTd).append(ssexTd).append(sscoreTd);
					$("#tabData").append(trObj);
				});
				
				$("#tabData tr:even").addClass("c1");
				$("#tabData tr:odd").addClass("c2");
				
			});
		</script>
	</head>
	<body>
		
		<table width="60%" border="1px" cellpadding="3px" cellspacing="0px">
			<thead>
			<tr>
				<th>编号</th><th>姓名</th>
				<th>性别</th><th>积分</th>
				<th>删除</th>
			</tr>
			</thead>
			<tbody id="tabData">
				
			</tbody>
		</table>
		<hr />
		<form>
			编号：<input type="text" name="sid" id="sid" value="" /><br>
			姓名：<input type="text" name="sname" id="sname"  value="" /><br>
			性别：<input type="radio" name="ssex" value="1" class="radioCls" checked="checked" />男 
			&nbsp;&nbsp;<input type="radio" name="ssex" value="0" class="radioCls"/>女<br>
			积分：<input type="text" name="sscore" id="sscore" value="" /><br>
			<input type="button" id="btnAdd" name="btnAdd" value="保存" />
		</form>
		
		

	</body>
</html>

转载请注明出处或者链接地址：https://www.qianduange.cn//article/3753.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

【Flask、nginx、JQuery】超时问题502

2024-04-09 00:04:21

web前端期末大作业基于html css javascript jquery制作家乡主题风景网页设计与实现——张家口

2024-04-09 00:04:13

JavaScript基础库

2024-04-09 00:04:11

javascript动态修改placeholder的css颜色。

2024-04-09 00:04:10

推荐一个优雅的jQuery Toast消息插件 - akquinet/jquery-toastmessage-plugin

2024-04-09 00:04:09

echarts的多个y轴tooltip的单位不同解决

2024-04-09 00:04:07

解决vue npm 下载echart出错

2024-04-09 00:04:05

＜安利＞ ECharts 在线构建工具（真心推荐特别好用！！！）

2024-04-09 00:04:01

echarts实现山东地图可放大缩小可下钻

2024-04-08 23:04:58

Echarts中option属性设置

2024-04-08 23:04:58

大家推荐的文章
1

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
2

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
3

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
4

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
5

移动端css布局大全

2024-02-06 15:02:421000
6

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
7

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
8

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
9

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
10

jQuery事件处理

2024-03-12 01:03:32999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！