jQuery：属性 样式 内容;表单中实现用户密码判断登录新页面
2016-11-24 22:37
736 查看
一、概念：
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.onload=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" onsubmit="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>
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.onload=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" onsubmit="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery.cookie.js实现用户登录保存密码功能的方法
- 使用Jquery搭建最佳用户体验的登录页面 之 记住密码自动登录功能
- 使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能（含后台代码）
- 使用Jquery打造最佳用户体验的登录页面的实现代码
- 编写一个jsp程序，实现用户登录，当用户输入的用户或密码错误时，将页面重定向到错误提示页，并在该页面显示30秒后 自动回到用户登录界面
- 使用Jquery搭建最佳用户体验的登录页面 之 记住密码自动登录功能，（含后台代码）
- 使用Jquery打造最佳用户体验的登录页面的实现代码
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- jquery.cookie.js实现用户登录保存密码功能的方法
- jsp页面中用户登录的实现（利用javascript实现非空判断等……）
- axure8实现登录界面包含加载登录动画，用户密码输入值的判断
- jQuery基于ajax实现页面加载后检查用户登录状态的方法
- 使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能（含后台代码）
- jQuery ---页面内容，样式，控制属性
- 使用jquery.cookie.js实现记住用户信息（下面以web的记住登录名和密码为例进行说明）
- 制作login.jsp页面，要求实现提供用户登陆的界面， 用户通过该界面输入用户名（控件名userName）和密码（控件名password）， 然后点击“登录”按钮实现登陆操作.
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- html angular+jquery:判断密码并改变标签样式+新增提示内容
- 创建并部署一个Servlet，要求在实现用户登录功能，当用户名和密码正确时跳转到欢迎页面，否则提示出错信息
- ASP.NET jQuery 食谱11 (通过使用jQuery validation插件简单实现用户登录页面验证功能)