jQuery：属性样式内容;表单中实现用户密码判断登录新页面

最新推荐文章于 2020-03-04 14:01:34 发布

伊人冰

最新推荐文章于 2020-03-04 14:01:34 发布

阅读量1.1k

点赞数 1

分类专栏： WEB

本文链接：https://blog.csdn.net/sxb956347789/article/details/53326978

版权

WEB 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、概念：

jQuery 是一个 JavaScript 函数库，简化了 JavaScript 编程。

二、功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
Jquery还提供了大量的插件
jQuery 团体知道JS在不同浏览器中存在着大量的兼容性问题，目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6!

三、下载与安装：

下载：www.jquery.com 版本:jquery-3.1.1.min.js 压缩版大小为85kb

安装方式：(注：在使用离线的时候应将jquery-3.1.1.min.js软件与代码放在一个文件夹中,我的两次异常问题就在这里)

1.在线：<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

2.离线：<script src="jquery-3.1.1.min.js"></script>

图片隐藏淡入淡出效果：

<!DCOTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8"/>
		<title>jQuery</title>
		<script src="jquery-3.1.1.min.js"></script>
		
		<script type="text/javascript">
			/*window.onload = function(){
				var p2 = document.getElementById("p2");
				p2.style.color="red";
				p2.innerHTML="更换p2内容";//HTML需大写
				
				var b1 = document.getElementById("btn");
				//alert(b1);
				
				//以数组形式返回具有相同元素名的所有节点元素
				var img = document.getElementsByTagName("img"); 
				b1.onclick = function(){
					//img[0].style.display="none";//隐藏元素 - display:none(不占位)或visibility:hidden
				}
			}*/
			
			//文档元素加载完成执行jquery代码
			$(function(){
				/*
			一、操作样式 css 
			 1>设置单个样式
			   语法 :$(selector).css("样式名","样式值");
			 2>设置多个样式 
			   语法 :$(selector).css({"样式名1":"样式值1","样式名2":"样式值2"});
			*/
				$("#p1").css("color","red");
				$("#p1").css({"color":"blue","font-size":"28px"});
				/*
			二、操作内容
			  语法 :$(selector).html("内容");
			*/
				$("#p1").html("新的jquery程序内容");
				//三、操作属性attr - 获取属性
				var src = $("img").attr("width");
				/*
			操作属性attr -设置属性
			 1>设置单个属性 
			   语法 :$(selector).attr("属性名","属性值");
			 2>设置单个属性 
			   语法 :$(selector).attr({"属性名1":"属性值1","属性名2":"属性值2"});
			*/
				$("img").attr({"width":"300px","height":"400px"});
				//四、事件操作  
			/*
			点击事件 
			  语法 :  $(selector).click(function(){ 
                           //事件处理代码
  			          })
			*/
				$("#btn").click(function(){
				//五、实现元素隐藏/显示
				//可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
					// $("img").fadeToggle(2000);//淡入淡出效果
					// $("img").toggle(2000);//隐藏显示效果
					
					 
					 //等价于
					// $("img").fadeToggle(2000).toggle(2000);
					 
					 //淡入淡出效果结束后执行隐藏显示效果
					 $("img").fadeToggle(2000,function(){
						$("img").toggle(2000);
					 })
				})
			})
		</script>
	</head>
	<body>
		<p id="p2">javascript程序</p>
		<p id="p1">第一个jQuery程序</p>
		<img src="E:/java1606/November/WEB/css/day18/html和css测试/image/4.jpg">
		<button id="btn">隐藏图片</button>
	</body>
</html>

表单学习：用户名和密码的判断：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>表单学习</title>
		<script src="jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			/*window.οnlοad=function(){
				var userName = document.form1.userName.value;
			}
			//文档元素加载完成执行jquery代码
			$(function(){
				$("#user").val("张三");//设置表单元素值
				var user = $("#user").val();//获取表单元素值
				alert(user);
			})*/
			function check(){
			var user = $("#user").val(); //获取表单元素值
			var psw = $("#psw").val(); 
			//$("#msg").show();
			if(user=="admin" && psw == "123"){
				$("#msg").html("登录成功!");
				return true;
			}else{
				$("#msg").text("用户名或密码不正确定！");
				return false;
			}
		}
		</script>
	</head>
	
	<body>
		<div>
			<form name="form1" action="jquery2_属性_内容_样式.html" method="get" οnsubmit="return check()">
			用户名：<input id="user" type="text" name="userName" placeholder="请输入用户名"/><br><br>
			密 码:<input id="psw" type="password" name="passWord" placeholder="请输入用户名密码"/><br><br>
			<input type="submit" value="提交"/>
			<span id="msg"></span>
		</div>
	</body>
</html>

伊人冰

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery：属性样式内容;表单中实现用户密码判断登录新页面

一、概念：jQuery 是一个 JavaScript 函数库，简化了 JavaScript 编程。二、功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilitiesJquery还提供了大量的插件jQuery 团体知道JS
复制链接

扫一扫