HTML JQuery
简介
jQuery 是一个JavaScript 库，极大地简化了JavaScript 编程。
例如：通过 id 来查找 HTML 元素
- JavaScript
var myElement = document.getElementById("id01");
- jQuery
var myElement = $("#id01");
准备
- js文件夹下新建JavaScript文件，选择jquery-1.11.0
- 添加语句
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
练习
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="DOM测试" onclick="domTest()"/>
<input type="button" value="CSS测试" onclick="cssTest()"/>
<div id="myTime">
原来的div
</div>
<div id="myDom">
用户名：<input type="text" id="username"/>
<font id="myFont"color="red">你好呀</font>
</div>
</body>
<!--引入jQuery-->
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script>
function domTest(){
var text=$("#myTime").text();
alert(text);
$("#myTime").text("jquery改变了文本");
var html=$("#myTime").html();
$("#myTime").html("<h1>jquery可以改变html的代码</h1>");
var str=$("#username").val();
$("#username").val("jQuery可以改变html的代码")
}
function cssTest(){
$("#myDom").css("color","red");
$("#myDom").css("font-size","24px");
}
function removeTr(index){ //删除行
var flag=confirm("请问确认要删除吗");
if(flag){
$("#tr"+index).remove();
}
}
</script>
</html>
结果
两次点击 DOM测试
注册页面
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册网易免费邮箱 - 中国第一大电子邮件服务商</title>
</head>
<body>
<form action="index.html" onsubmit="return chekForm()"> <!--form表单 向服务器传输数据-->
用户名：<input type="text" id="username" name="username" placeholder="请输入用户名" onblur="checkName()" /> <!--只有设置了 name 属性的表单元素才能在提交表单时传递它们的值-->
<span id="nameMsg"></span>
<br />
密码:<input type="password" id="pass" name="pass" onblur="checkPass()" /> <!--用户离开输入框时引发的事件-->
<span id="passMsg"></span>
<br />
确认密码：<input type="password" id="repass" name="repass" onblur="checkRePass()" />
<span id="repassMsg"></span>
<br />
手机号<input type="number" id="phone" name="phone" onblur="checkPhone()"/>
<span id="phoneMsg"></span>
<br />
邮箱<input type="text" id="email" name="email" onblur="checkEmail()"/>
<span id="emailMsg"></span>
<br />
性别:<input type="radio" name="sex" checked="checked"/>男 <!--ridio单选按钮-->
<input type="radio" name="sex"/>女
<br />
爱好:<input type="checkbox" name="like" value="学习" />学习 <!--checkbox复选框-->
<input type="checkbox" name="like" value="看书" />看书
<input type="checkbox" name="like" value="游泳" />游泳
<br />
所在城市：
<select> <!--选择列表-->
<option value="010">北京</option>
<option value="022">上海</option>
<option value="023">天津</option>
<option value="024">深圳</option>
</select>
<br />
网易邮箱帐号服务条款
<br />
<textarea cols="120" rows="6"> <!--定义一个多行的文本输入控件-->
欢迎申请使用网易公司及其他合作运营主体（下列简称为“网易公司”或“网易”）提供的服务。请您（下列简称为“用户”）仔细阅读以下全部内容（特别是粗体下划线标注的内容）。如用户不同意本服务条款任意内容，请勿注册或使用网易服务。如用户通过进入注册程序并勾选“我同意网易邮箱帐号服务条款”，即表示用户与网易公司已达成协议，自愿接受本服务条款的所有内容。此后，用户不得以未阅读本服务条款内容作任何形式的抗辩。
1.服务条款的确认和接纳
网易服务涉及到的网易产品的所有权以及相关软件的知识产权归网易公司所有。网易公司所提供的服务必须按照其发布的公司章程，服务条款和操作规则严格执行。本服务条款的效力范围及于网易公司的一切产品和服务，用户在享受网易公司任何单项服务时，应当受本服务条款的约束。
当用户使用网易各单项服务时，用户同意以单项服务要求的方式同意该单项服务的服务条款以及网易公司在该单项服务中发出的各类公告（下列简称为“单项条款”），在此情况下单项条款与本服务条款同时对用户产生效力。若单项条款与本服务条款存在同类条款的冲突，则在单项条款约束范围内应以单项条款为准。
2.网易邮箱帐号服务简介
本服务条款所称的“网易邮箱帐号”是指用户注册的合法、有效的帐号，包括
（1）以“网易邮箱”注册的帐号（含以@163.com，@126.com， @yeah.net等为后缀的“网易免费邮箱”和以@vip.163.com，@vip.126.com，@188.com，@vip.188.com等为后缀的“网易收费邮箱”）；
（2）以网易popo帐号（@popo.163.com等）注册的帐号；
（3）以网易公司认可的其他“非网易邮箱”注册的帐号。
网易公司运用自己的操作系统通过国际互联网络为用户提供各项服务。用户必须：
（1）提供设备，如个人电脑、手机或其他上网设备。
（2）个人上网和支付与此服务有关的费用。
</textarea>
<br />
<input type="checkbox" checked="checked" disabled="disabled" name="like" value="同意" />同意
<br />
<input type="button" value="点我一下" />
<input type="submit" value="注册" />
</from>
</body>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script>
function chekForm(){
if(checkName()&&checkPass()&&checkRePass()&&checkPhone()&&checkEmail()){
return true;
}else{
return false;
}
}
function checkName(){
var username=$("#username").val();
if(username.length>=6){
$("#nameMsg").html("<font color='green' size=2> 输入正确</font>");
return true;
}else{
$("#nameMsg").html("<font color='red' size=2> 用户名应为6位及以上!</font>");
return false;
}
}
function checkPass(){
var pass=$("#pass").val();
if(pass.length>=6){
$("#passMsg").html("<font color='green' size=2> 输入正确</font>");
return true;
}else{
$("#passMsg").html("<font color='red' size=2> 密码应为6位及以上!</font>");
return false;
}
}
function checkRePass(){
var pass=$("#repass").val();
var repass=$("#repass").val();
if(repass.length>=6 && repass==pass){
$("#passMsg").html("<font color='green' size=2> 输入正确</font>");
return true;
}else if(repass.length<6){
$("#repassMsg").html("<font color='red' size=2> 密码应为6位及以上!</font>");
return true;
}else{
$("#repassMsg").html("<font color='red' size=2> 两次输入的密码不一致!</font>");
return false;
}
}
function checkPhone(){
var phone=$("#phone").val();
//定义手机正则
var reg=/^1\d{10}$/;
if(reg.test(phone)){
$("#phoneMsg").html("");
return true;
}else{
$("#phoneMsg").html("<font color='red' size=2> 请输入正确手机号!</font>");
//alert("请输入正确手机号");
return false;
}
}
function checkEmail(){
var email=$("#email").val();
//定义邮箱正则
var reg=/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if(reg.test(email)){
$("#emailMsg").html("");
return true;
}else{
$("#emailMsg").html("<font color='red' size=2> 请输入正确邮箱!</font>");
//alert("请输入正确邮箱");
return false;
}
}
</script>
</html>
结果
3446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
