day05学习总结

分类：菜鸟笔记作者：qq_53884348

一、jquery 准备函数

概念：是在页面加载完成之后的执行(只是页面的雏形,不包括音视频)

jQuery符号：$

jquery中准备函数 与js中准备函数的比较：

        A.js中的准备函数只执行一次且只加载一个，jquery中的准备函数定义多个的时候 会执行多次

       B. jquery中准备函数是优先与js先执行

        C.jquery中的准备函数有多种写法         

                a.  $(document).read(function(){

                                        执行操作;

                        }); 

                b.$(function(){

                                执行操作;

                        });

二、js与jquery之间相互转换

概念：jquery是对js的一个简单的封装 jquery与js不能相互调用其方法 必须进行转化之后才能使用

js ==>转换为jquery：

        语法: $(js对象) 例如:$(tv_class);

jquery对象转换为js对象：

        a.jquery对象[0]

        b.jquery对象.get(0)

三、jquery三种基本选择器

 测试：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.8.3.js" type="text/javascript" ></script>
	</head>
	<body>
		<input type="text" id="tv_tx"/>
		<input type="checkbox" class="tv_che" value="抽烟"/>抽烟
		<input type="checkbox" class="tv_che" value="喝酒"/>喝酒
		<input type="checkbox" class="tv_che" value="烫头"/>烫头
		<input type="button" onclick="show01()" value="点击1"/>
		<input type="button" onclick="show02()" value="点击2"/>
		<input type="button" onclick="show03()" value="点击3"/>
		<script>
			function show01(){
				//根据id获取
				alert($("#tv_tx").val());
			}
			function show02(){
				//根据类获取
				var arrays = $(".tv_che");
				for(var i=0;i<arrays.length;i++){
					alert(arrays[i].value);
				}
			}
			function show03(){
				//根据标签名获取
				var arrays = $("input");
				for(var i=0;i<arrays.length;i++){
					alert(arrays[i].value);
				}
			}
		</script>
	</body>
</html>

四、jquery中的事件

主要事件：

        A.click 点击事件

        B.dblclick 双击事件

        C.blur 失去焦点

        D.focus 获取焦点

        E.hover() 移入移出 

注意点：

        jquery中事件没有前缀on

五、jquery 动画

显示隐藏 效果：

淡入淡出效果：

滑动效果：

测试：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js" type="text/javascript" ></script>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: rebeccapurple;
			}
		</style>
	</head>
	<body>
		<div id="tv_div"></div>
		<input type="button" value="隐藏" id="tv_btn1"/>
		<input type="button" value="显示" id="tv_btn2"/>
		<input type="button" value="隐藏或显示" id="tv_btn3"/>
		<script>
			$("#tv_btn1").click(function(){
				//普通隐藏
				//$("#tv_div").hide(1000,alert("确定隐藏"));
				//淡入隐藏
				// $("#tv_div").fadeOut(1000,alert("淡入隐藏"));
				//向上隐藏
				$("#tv_div").slideUp(1000,alert("向上隐藏"));
			});
			$("#tv_btn2").click(function(){
				//普通显示
				//$("#tv_div").show(1000,alert("确定显示"));
				//淡出显示
				// $("#tv_div").fadeIn(1000,alert("淡出显示"));
				//向下显示
				$("#tv_div").slideDown(1000,alert("向下显示"));
			});
			$("#tv_btn3").click(function(){
				//普通隐藏或显示
				//$("#tv_div").toggle(1000);
				//淡入隐藏或淡出显示
				// $("#tv_div").fadeToggle(1000);
				//向上隐藏或者向下显示
				$("#tv_div").slideToggle(1000);
			});
		</script>
	</body>
</html>

 

自定义动画：

        语法:

                $("选择器的名称").animate({ 属性:属性值, 属性:属性值 }); 

        注意点：自定义动画必须加上定位

测试：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <style>
            div {
                width: 200px;
                height: 200px;
                background-color: red;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div></div>
        <input type="button" value="点击" id="tv_btn" />
        <script>
            $("#tv_btn").click(function(){
                $("div").animate({
                // left:"200px",
                // opacity:'0.5',
                // width:"+=150px",
                height:"toggle",
                width:'toggle'
                })
            })
        </script>
    </body>
</html>

六、Jquery 操作DOM

测试：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div></div>
		<input type="button" id="tv_btn1"/ value="点击1">
		<input type="button" id="tv_btn2" value="点击2"/>
		<input type="button" id="tv_btn3" value="点击3"/>
		<input type="button" id="tv_btn4" value="点击4"/>
		<script type="text/javascript">
			//通过html方法设置文本内容 在浏览器中不显示标签
			$("#tv_btn1").click(function(){
				$("div").html("<h3>HTML</h3>");
			});
			//通过Text方法设置文本内容  在浏览器中显示标签
			$("#tv_btn2").click(function(){
				$("div").text("<h4>Text</h4>");
			});
			//获取文本内容
			$("#tv_btn3").click(function(){
				alert($("div").html());
			});
			//获取文本内容
			$("#tv_btn4").click(function(){
				alert($("div").text());
			})
			
		</script>
	</body>
</html>

 

 七、Jquery追加元素

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<p>班长喜欢洗脚</p>
		<input type="button" value="点击01" id="tv_btn1"/>
		<input type="button" value="点击02" id="tv_btn2"/>
		<input type="button" value="点击03" id="tv_btn3"/>
		<input type="button" value="点击04" id="tv_btn4"/>
		<script>
			$("#tv_btn1").click(function(){
				//右添加
				$("p").append("666");
			});
			$("#tv_btn2").click(function(){
				//左添加
				$("p").prepend("777");
			});
			$("#tv_btn3").click(function(){
				//上添加
				$("p").before("888");
			});
			$("#tv_btn4").click(function(){
				//下添加
				$("p").after("999");
			})
		</script>
	</body>
</html>

八、jquery 删除元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
		<style>
			div{
				border: solid 1px red;
			}
		</style>
	</head>
	<body>
		<div>
			<p>777</p>
			<p>888</p>
			<p>999</p>
			<p>666</p>
		</div>
		<input type="button" value="点击1" id="tv_btn1"/>
		<input type="button" value="点击2" id="tv_btn2"/>
		<script>
			$("#tv_btn1").click(function(){
				//全删除
				$("div").remove();
			});
			$("#tv_btn2").click(function(){
				//只删除子标签
				$("div").empty();
			})
		</script>
	</body>
</html>

九、jquery 操作class 样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.cl1{
				width: 200px;
				height: 200px;
				background-color: rebeccapurple;
			}
		</style>
	</head>
	<body>
		<div></div>
		<input type="button" value="点击1" id="tv_btn1"/>
		<input type="button" value="点击2" id="tv_btn2"/>
		<input type="button" value="点击3" id="tv_btn3"/>
		<script>
			$("#tv_btn1").click(function(){
				//添加class样式
				$("div").addClass("cl1");
			});
			$("#tv_btn2").click(function(){
				//删除class样式
				$("div").removeClass("cl1");
			});
			$("#tv_btn3").click(function(){
				//添加class样式或者删除
				$("div").toggleClass("cl1");
			});
		</script>
	</body>
</html>

十、jquery操作css样式 

        语法：$("选择器名称").css({"属性":"属性值","属性":"属性值"})

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<p>班长洗脚</p>
		<input type="button" value="点击1" id="tv_btn1"/>
		<script>
			$("#tv_btn1").click(function(){
				//增加css样式
				$("p").css({"font-size":"100px","color":"red"});
			})
		</script>
	</body>
</html>

十一、jquery 中常见的选择器

过滤选择器：

测试：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div>000</div>
		<div>111</div>
		<div>222</div>
		<div>333</div>
		<div>444</div>
		<div>555</div>
		<div>666</div>
		<div>777</div>
		<div>888</div>
		<div>999</div>
		<script type="text/javascript">
			//获取第一个标签
			//alert($("div:first").html());
			//获取最后一个标签
			// alert($("div:last").html());
			//获取偶数行标签
			// var arrays = $("div:even");
			// $(arrays).each(function(i,t){
			// 	alert(t.innerHTML);
			// })
			//获取奇数行标签
			// var arrays = $("div:odd");
			// $(arrays).each(function(i,t){
			// 	alert(t.innerHTML);
			// })
			//获取特定行标签
			//alert($("div:eq(3)").html());
			//获取特定行后的标签
			// var arrays = $("div:gt(3)");
			// $(arrays).each(function(i,t){
			// 	alert(t.innerHTML);
			// })
			//获取特定行前的标签
			// var arrays = $("div:lt(3)");
			// $(arrays).each(function(i,t){
			// 	alert(t.innerHTML);
			// })
			//获取反添加的标签
			var arrays = $("div:not(div:eq(3))");
			$(arrays).each(function(i,t){
				alert(t.innerHTML);
			})
		</script>
	</body>
</html>

案例：

        需求：实现表格的隔行变色

        代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.cl1{
				background-color: rebeccapurple;
			}
		</style>
	</head>
	<body>
		<table border="1px" align="center" cellspacing="0px" cellpadding="0px" width="80%">
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>爱好</th>
			</tr>
			<tr>
				<td>1001</td>
				<td>班长</td>
				<td>洗脚</td>
			</tr>
			<tr>
				<td>1002</td>
				<td>阿甘</td>
				<td>喷射</td>
			</tr>
			<tr>
				<td>1003</td>
				<td>黑福</td>
				<td>按摩</td>
			</tr>
		</table>
		<script>
			//表格隔行变色
			// $(function(){
			// 	$("tr:odd").css({"background-color":"red"});
			// });
			
			//鼠标移入变色
			$("tr").hover(function(){
				$(this).addClass("cl1");
			},function(){
				$(this).removeClass("cl1");
			});
		</script>
	</body>
</html>

 案例：

        需求 ： 倒计时按钮

        代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<input type="button" />
		<script>
			$(function(){
				$("input").val("请仔细阅读");
				$("input").prop("disabled",true);
			});
			var num=5;
			function show(){
				if(num>0){
					$("input").val("请仔细阅读（"+num+")秒");
					num--;
				}else{
					$("input").val("登录");
					$("input").prop("disabled",false);
				}
			}
			setInterval("show()",1000);
		</script>
	</body>
</html>

层级选择器：

 

测试：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="tv_div">
			<div>000</div>
			<div>111</div>
			<span>222<div>333</div></span>
			<div>444</div>
			<div>555<span>666</span></div>
			<div>777</div>
		</div>
		<!-- 第一个兄弟节点 -->
		<div>888</div>
		<div>999</div>
		<script>
			//获取子节点 包括孙子节点
			// var arrays = $("#tv_div div");
			// $(arrays).each(function(i,t){
			// 	alert(t.innerHTML);
			// })
			//获取子节点 
			// var arrays = $("#tv_div > div");
			// $(arrays).each(function(i,t){
			// 	alert(t.innerHTML);
			// })
			//获取第一个兄弟div节点
			// alert($("#tv_div + div").html());
			//获取所有的兄弟节点
			var arrays = $("#tv_div ~ div");
			$(arrays).each(function(i,t){
				alert(t.innerHTML);
			})
		</script>
	</body>
</html>

属性选择器：

 测试：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<a href="#">点击1</a>
		<a href="abc.html">点击2</a>
		<a href="wcde.html">点击3</a>
		<a href="#">点击4</a>
		<a href="abcc.html">点击5</a>
		<a href="wc.html">点击6</a>
		<script type="text/javascript">
			//获取所有带有href属性的标签
			// var arrays = $("[href]");
			// $(arrays).each(function(i,t){
			// 	alert(t.innerHTML);
			// })
			//获取href为空的标签
			// var arrays = $("[href='#']");
			// $(arrays).each(function(i,t){
			// 	alert(t.innerHTML);
			// })
			//获取href不为空的标签
			// var arrays = $("[href!='#']");
			// $(arrays).each(function(i,t){
			// 	alert(t.innerHTML);
			// })
			//获取href以.html结尾的标签
			// var arrays = $("[href$='.html']");
			// $(arrays).each(function(i,t){
			// 	alert(t.innerHTML);
			// })
			//获取href以abc开头的标签
			var arrays = $("[href^='abc']");
			$(arrays).each(function(i,t){
				alert(t.innerHTML);
			})
		</script>
	</body>
</html>

十二、Validate框架 参考文档

案例：

        需求：表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/messages_zh.js" type="text/javascript" charset="utf-8"></script>
		<style>
			label{
				color: red;
			}
		</style>
	</head>
	<body>
		<form id="ff" action="#" method="GET">
			<table border="1px" align="center" width="80%" cellspacing="0px" cellpadding="0px" >
				<tr>
					<td colspan="2">验证表单</td>
				</tr>
				<tr>
					<td>请输入用户名(必填项，长度为6~10)</td>
					<td><input type="text" name="username"/></td>
				</tr>
				<tr>
					<td>请输入邮箱</td>
					<td><input type="email" name="email"/></td>
				</tr>
				<tr>
					<td>请输入出生日期</td>
					<td><input type="text" name="brithday"/></td>
				</tr>
				<tr>
					<td>薪资</td>
					<td><input type="text" name="sal"/></td>
				</tr>
				<tr>
					<td>工作时长(6~8小时)</td>
					<td><input type="text" name="workTime"/></td>
				</tr>
				<tr>
					<td>密码(必填项)</td>
					<td><input type="password" name="pwd" id="pwd"/></td>
				</tr>
				<tr>
					<td>确认密码</td>
					<td><input type="password" name="repwd"/></td>
				</tr>
				<tr>
					<td colspan="2" style="float: right;"><input type="submit" value="注册"/></td>
				</tr>
			</table>
		</form>
		<script>
			$(function(){
				$("#ff").validate({
					rules:{
						username:{
							required:true,
							range:[6,10]
						},
						email:{
							email:true
						},
						brithday:{
							dateISO:true
						},
						sal:{
							number:true
						},
						workTime:{
							range:[6,10]
						},
						pwd:{
							required:true
						},
						repwd:{
							equalTo:pwd
						}
					},
					messages:{
						username:{
							required:"亲，请输入正确的用户名!!!"
						},
						workTime:{
							range:"注意摸鱼!!！"
						}
					}
				});
			});
		</script>
	</body>
</html>

十三、jquery与js的遍历方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<script type="text/javascript">
			var arrays = ["班长","黑福","阿甘","足浴"];
			//第一种  普通for循环  重点
			for(var i=0;i<arrays.length;i++){
				console.log(arrays[i]);
			}
			//第二种 增强for循环  不推荐
			for(var i in arrays){
				console.log(arrays[i]);
			}
			//第三种 jQuery方式循环  重点
			$(arrays).each(function(i,temp){
				console.log(i+temp);
			})
		</script>
	</body>
</html>

 

 

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

javascript前端前端学习学习学习

相关推荐

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习编程？其实不难，不过在学习编程之前你得先了解你的目的是什么？这个很重要，因为目的决定你的发展方向、决定你的发展速度。
it行业都是什么工作？it行业主要做什么？
IT行业是什么工作做什么？IT行业的工作有：产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等，根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗？女生适合学Java编程吗？
女生学Java好就业吗？女生适合学Java编程吗？目前有不少女生学习Java开发，但要结合自身的情况，先了解自己适不适合去学习Java，不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研，多看、多想、多练
mysql-connect-confused
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
shell判断服务是否启动
一、背景 因为项目中需要通北京网络，所以需要连vpn，但是服务器有时候会断掉，所以写个shell脚本每五分钟去判断是否连接，于是就有下面的shell脚本。
SQL BETWEEN 操作符
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
​​windows上传ipa到开发者中心app store的方法
假如你已经使用过苹果开发者中心上架app，你肯定知道在苹果开发者中心的web界面，无法直接提交ipa文件，而是需要使用第三方工具，将ipa文件上传到构建版本，开...
SQL 入门篇之什么是别名？
下面的 SQL 语句指定了两个别名，一个是 name 列的别名，一个是 country 列的别名。**提示：**如果列名称包含空格，要求使用双引号或方括号：
windows上传ipa文件到app store的方法​
在使用H5混合开发的app打包后，需要将ipa文件上传到appstore进行发布，就需要去苹果开发者中心进行发布。​
SQL AND & OR 运算符
+----+--------------+---------------------------+-------+---------+
C++ 数组
数组的声明并不是声明一个个单独的变量，比如 number0、number1、...、number99，而是声明一个数组变量，比如 numbers，然后使用 nu...
最全iOS 应用上架流程提交到AppStore
第一步：到appuploader官网下载辅助工具和iCloud驱动，使用前面创建的AppID登录。
SQL ALTER TABLE 语句
如需删除表中的列，请使用下面的语法（请注意，某些数据库系统不允许这种在数据库表中删除列的方式）：
dism操作巨慢
前不久在制作win11pe，制作了一版，1.26GB，太大了，不满意，想再裁剪下，发现这次dism mount正常，commit或discard巨慢，以前都很快...
三种方法卸载Symantec Endpoint Protection 赛门铁克
赛门铁克各个版本概览：https://knowledge.broadcom.com/external/article?legacyId=tech163829
python3.6、python3.10用什么版本的pip
实测Python 3.6.6用pip 21.3.1，再高就报错了，Python 3.10.7用pip 22.3.1是可以的
博通和诺顿
Broadcom Corporation （博通公司，股票代号AVGO）是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
高版本c4d在低版本windows系统上打开后不显示窗格
发现个问题，server2016上安装了c4d这些版本，低版本的正常显示窗格，但红色圈出的高版本c4d打开后不显示窗格，
基础网络windows不要使用TAT、如何卸载TAT
TAT：https://cloud.tencent.com/document/product/1340
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot