JQuery基础原理 与实例 验证表单 省市联动 文本框判空 单选 复选 判空 下拉判空 确认密码判等
JQuery 基础原理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="js/jquery-1.11.0.min.js" type="text/javascript" ></script>
<!--
原来使用jquery(function(){})来表示window.onload(function(){})
现在用$代替jquery(),节省代码$(function(){})
1.DOM对象和JQuery对象互相不通用
DOM
window.onload=function(){var input=document.getElementById("in");alert(input.value);}
JQuery
var $in=$("#in");
alert($in.val()); JQuery中函数val()获得值,不能调用.value拿值
2.把input变成JQuery对象
var $in2=$("input");穿上马甲
alert($in2.val());
3.把Jquery对象变成Dom对象
俗称脱马甲
JQuery对象本质是存储多个DOM对象的数组
$(JQuery对象)[0]=DOM对象
例子
var in2= $in2[0];
alert(in2.value);
4.JQuery最厉害的是 选择器 ,提供了N多种方式,与样式表css是一样的
../表示上一层文件夹
id选择器
$("#b1").click(function(){
使用css函数修改
$("#one").css("background","red");
且支持方法调用链
$("#one").css("background","red").css("color","green");
});
标签选择器
$("#b2").click(function(){
$("div").css("background","red");
})
类选择器
$("#b3").click(function(){
$(".mini").css("background","red");
})
多个选择的选择器,可以写两个,也可以用,分开
$("#b4").click(function(){
$("span").css("background","red");
$("#two").css("background","red");
$("span,#two").css("background","red");
}) 二.层次选择器
1.所有后代div
$("#b1").click(function(){
$("body div").css("background","red");
})
2.只找子div
$("#b2").click(function(){
$("body>div").css("background","red");
})
3.下一个弟弟是红色的,但是他儿子不是红的
$("#b3").click(function(){
$("#one+div").css("background","red");
})
4.同辈分的弟弟是红色的,但是他们儿子不是红的
$("#b4").click(function(){
$("#two~div").css("background","red");
})
5.同辈分的所有兄弟是红色的,不包括自己,但是他们儿子不是红的
$("#b5").click(function(){
$("#two").sibling("div").css("background","red");
}) 三.属性选择器
1.div中含有属性title
$("#b1").click(function(){
$("div[title]").css("background","red");
})
2.div所有title属性是test
$("#b2").click(function(){
$("div[title=test]").css("background","red");
})
3.div所有title属性不是test 其他都变
$("#b3").click(function(){
$("div[title!=test]").css("background","red");
})
4.div所有title属性是te开头
$("#b4").click(function(){
$("div[title^=te]").css("background","red");
})
5.div所有title属性是xt结尾
$("#b5").click(function(){
$("div[title$=est]").css("background","red");
})
6.div所有title属性含有es
$("#b6").click(function(){
$("div[title*=es]").css("background","red");
})
7.有id属性且有含有es
$("#b7").click(function(){
$("div[id][title*=es]").sibling("div").css("background","red");
}) 三.基本过滤选择器
1.div中的第一个
$("#b1").click(function(){
$("div:first").css("background","red");
})
2.div中的最后一个
$("#b2").click(function(){
$("div:last").css("background","red");
})
3.div class不为one
$("#b3").click(function(){
$("div:not(.one)").css("background","red");
})
4.div索引值为偶数 索引算子索引
$("#b4").click(function(){
$("div:even").css("background","red");
})
5.div索引值为奇数 索引算子索引
$("#b5").click(function(){
$("div:odd").css("background","red");
})
6.div索引值大于3的
$("#b6").click(function(){
$("div:gt(3)").css("background","red");
})
7.div索引值等于3的
$("#b7").click(function(){
$("div:eq(3)").css("background","red");
})
8.div索引值小于3的
$("#b8").click(function(){
$("div:lt(3)").css("background","red");
})
9.h1-h6
$("#b9").click(function(){
$(":header").css("background","red");
})
10.h1-h6
$("#b10").click(function(){
$(":animated").css("background","red");
}) 四.基本过滤选择器
1.可用 属性
$("#b1").click(function(){
var $input=("input[type=text]:enabled");
alert($input.val());是拿值
$input.val(1);传值就是赋值$input.val("随便"); })
2.不可用
$("#b2").click(function(){
var $input=("input[type=text]:disabled");
alert($input.val());是拿值
$input.val(1);传值就是赋值$input.val("随便"); })
3.复选框被选中
$("#b3").click(function(){
$("input[type=checkbox]:checked").css("background","red");
})
4.下拉菜单中被选中的选项
$("#b4").click(function(){
$("#job>option:selected").css("background","red");
for(var i=0;i<$select.length;i++){
遍历变成DOM对象
var $text=$($select[i]).text();
alert($text);
}
html();也行,不传参获取,传参设置 })
5.div索引值为奇数 索引算子索引
$("#b5").click(function(){
$("div:odd").css("background","red");
}) --> <script type="text/javascript">
$(function(){
// var $in=$("#in");
// alert($in.val()); var $in2=$("input");
// alert($in2.val()); var in2= $in2[0];
alert(in2.value); /*增加动画效果*/
$("#mover").slideUp(6000,function(){}); }) </script>
<input type="text" value="swift" id="in"/>
<div id="mover" width="100px" style="background-color: blue;"> </div>
</body>
</html>
JQuery 验证表单
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title></title>
<head> <style type="text/css">
.errorspan {
color: red;
font-size: 12px;
}
</style>
<!--<script type="text/javascript">
//定义一个正则 非空
var reg = /^\s*$/; //校验表单主方法
function run(){
clearSpan();//清空span校验信息
var flag1=checkNotNull("username");//用户名校验
var flag2=checkNotNull("pwd");//密码校验
var flag3=checkNotNull("pwd2");//确认密码校验
var flag4=checkIschoice("utype");//用户类型校验
var flag5=checkIsSelected("city");//所在城市校验
var flag6=checkpwd(flag2,flag3);//验证密码和确认密码是否一致
return flag1&&flag2&&flag3&&flag4&&flag5&&flag6;
}
//清空span校验信息
function clearSpan(){
document.getElementById("usernamespan").innerHTML="";
document.getElementById("pwdspan").innerHTML="";
document.getElementById("pwd2span").innerHTML="";
document.getElementById("utypespan").innerHTML="";
document.getElementById("cityspan").innerHTML="";
}
//通过元素ID进行元素非空判断
function checkNotNull(nodeid){
//获取表单元素
var nodex = document.getElementById(nodeid);
//获取span元素
var spann = document.getElementById(nodeid+"span");
if(reg.test(nodex.value)){
spann.innerHTML="不能为空";
return false;
}else{
return true;
}
} //用户类型 radio checked=true
function checkIschoice(nodename){
//获取表单元素
var nodex = document.getElementsByName(nodename);
//获取span元素（显示校验信息）
var spann = document.getElementById(nodename+"span"); //遍历数组
for(var i=0;i<nodex.length;i++){
if(nodex[i].checked){
return true;
}
}
spann.innerHTML="不能为空";
return false;
} //所在城市校验 option value
function checkIsSelected(nodeid){
//获取select表单元素
var nodex = document.getElementById(nodeid);
//获取span元素
var spann = document.getElementById(nodeid+"span"); //获取select option子元素
var options=nodex.options;
//获取value
var val=options[nodex.selectedIndex].value; //判断
if(reg.test(val)){
spann.innerHTML="不能为空";
return false;
}else{
return true;
}
}
var cities = new Array(4);
cities[0] = new Array("昌平","丰台","大兴","海淀","顺义","延庆");
cities[1] = new Array("长春市","吉林市","松原市","延边市");
cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
cities[4] = new Array("南京市","苏州市","扬州市","无锡市"); //通过选择的省，显示对应的所有的市
function selectCity(index){
//通过索引获得对应的所有的市
var allCity = cities[index];
// 获得city select 对象
var cityObj = document.getElementById("city");
cityObj.innerHTML = "<option value=''>----请-选-择-市----</option>";
//遍历所有的市
for(var i = 0 ; i < allCity.length ; i ++){
// 获得具体的市
var cityName = allCity[i];
// 创建option
var option = document.createElement("option");
// 创建文本节点
var textNode = document.createTextNode(cityName);
//将文本添加到option中
option.appendChild(textNode);
// 将option追加到select中
cityObj.appendChild(option);
}
} //校验密码和确认密码是否一致
function checkpwd(a,b){
var pwd = document.getElementById("pwd");
var pwd2 = document.getElementById("pwd2");
//获取span（显示校验信息）
var pwd2span = document.getElementById("pwd2span");
if(a&&b&&pwd.value!=pwd2.value){
//不一致
pwd2span.innerHTML="密码和确认密码不一致";
return false;
}else{
return true;
}
}
</script>--> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
</head> <body>
<form action="#" method="get" id="f1" onsubmit="return run()">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username" />
<span id="usernamespan" class="errorspan"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="pwd" id="pwd" />
<span id="pwdspan" class="errorspan"></span></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="pwd2" id="pwd2" />
<span id="pwd2span" class="errorspan"></span></td>
</tr>
<tr>
<td>用户类型</td>
<td><input type="radio" name="utype" value="vip" />vip<br/>
<input type="radio" name="utype" value="normal" />一般用户<br/>
<span id="utypespan" class="errorspan"></span>
</td>
</tr>
<tr>
<td>所在地区</td>
<td>
<select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
<option value="">----请-选-择-省----</option>
<option value="0">北京</option>
<option value="1">吉林省</option>
<option value="2">山东省</option>
<option value="3">河北省</option>
<option value="4">江苏省</option>
</select>
<select id="city" style="width:150px">
<option value="">----请-选-择-市----</option>
</select>
<span id="cityspan" class="errorspan"></span>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="注册提交" />
<input type="reset" value="重置" /></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
function run() {
var flag1 = isnull("username");
var flag2 = isnull("pwd");
var flag3 = isnull("pwd2");
var flag4 = ischoice("utype");
var flag5 = isselect("city");
var flag6= pwdconfirm(flag2,flag3) return flag1 && flag2 && flag3&& flag4 && flag5&& flag6;
} function isnull(id) {
if(!$("#" + id).val()) {
$("#" + id + "span").html("<b>不能为空</b>");
return false;
} else {
return true;
}
} function ischoice(id) {
var choice = $("input[name=" + id + "]");
for(var x = 0; x < choice.length; x++) {
if(choice[x].checked) {
return true;
}
}
$("#" + id + "span").html("<b>用户类型没有选择</b>");
return false;
} // var regex=/^\s*$/;
function isselect(id) {
var select = $("#" + id);
// alert(regex.test(select.val()));
if(select.val()=="") {
$("#" + id + "span").html("<b>所在城市没有选择</b>");
return false;
}
return true;
} var cities = [
["昌平", "丰台", "大兴", "海淀", "顺义", "延庆"],
["长春市", "吉林市", "松原市", "延边市"],
["济南市", "青岛市", "烟台市", "潍坊市", "淄博市"],
["石家庄市", "唐山市", "邯郸市", "廊坊市"],
["南京市", "苏州市", "扬州市", "无锡市"]
]; function selectCity(index) {
$("#city").html("<option>----请-选-择-省----</option>");
for(var x = 0; x < cities[index].length; x++) {
$("#city").html($("#city").html() + "<option value='"+x+"'>----" + cities[index][x] + "----</option>");
}
} function pwdconfirm(a,b){
if(a&&b&&$("#pwd").val()==$("#pwd2").val()){
return true;
}else{
$("#pwd2span").html("<b>两次密码不一致</b>");
return false;
}
} </script> </html>
JQuery基础原理 与实例 验证表单 省市联动 文本框判空 单选 复选 判空 下拉判空 确认密码判等的更多相关文章
- Jquery学习笔记：操作form表单元素之一（文本框和下拉框）
一.概述 在web页面开发中,经常需要获取和设置表单元素的值(如文本框中的内容),特别是在ajax应用中,更是常态.本文系统的介绍下如何操作. 同操作其它html元素一样,操作的过程差不多. 第一步, ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- HTML中让表单input等文本框为只读不可编辑但可以获取value值的方法；让文本域前面的内容显示在左上角，居中
HTML中让表单input等文本框为只读不可编辑的方法 有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使input text的内容,中国两个字不可以修改 有时候,我们希望 ...
- MVC4中 jquery validate 不用submit方式验证表单或单个元素
正确引入MVC4 jquery验证的相关文件 <script src="/Scripts/jquery-1.4.4.js"></script> <sc ...
- MVC中 jquery validate 不用submit方式验证表单或单个元素
<script src="/Scripts/jquery-1.4.4.js"></script> <script src="/Scripts ...
- jQuery基础（鼠标事件，表单事件，键盘事件，自定义事件 篇）
1.jQuery鼠标事件之click与dbclick事件 方法一:$ele.click()(不带参数) <div id="test">点击触发<div&g ...
- 对pdf 表单域 或文本框的操作---动态填充PDF 文件内容
前提:需要pdf模板:并且模板内容以pdf 文本框的形式填写 package com.test;import java.io.File;import java.io.FileOutputStream; ...
- HTML中让表单input等文本框为只读不可编辑的方法
有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使<input type="text" name="input1" value=&qu ...
- 让表单input等文本框为只读不可编辑的方法-转
有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使<input type="text" name="input1" value=&qu ...
随机推荐
- 网络编程api总结
1.socket函数创建一个socket连接,此时该socket连接为主动式. fd(int)->fd(struct fd)->file->sock:sock->file 2. ...
- Host 'XXX' is not allowed to connect to this MySQL server解决方案
如何允许远程连接mysql数据库呢,操作如下: 首先登录账号 mysql -uroot -p 使用mysql用户 use mysql 如果报此类错:ERROR 1820 (HY000): You mu ...
- 【转】java序列化技术
转自:http://blog.csdn.net/yakihappy/article/details/3979373 Java 串行化技术可以使你将一个对象的状态写入一个Byte 流里,并且可以从其它地 ...
- MyEclipse 比较常用的快捷键
Ctrl+D: 删除当前行 Alt+↓ 当前行和下面一行交互位置(特别实用,可以省去先剪切,再粘贴了) Alt+↑ 当前行和上面一行交互位置(同上) Alt+← 前一个编辑的页面 Alt+→ 下一个编 ...
- .NET Core 部署到CentOS–2.创建守护进程, 通过Nginx公网访问
继上一篇, 我们确定在内网可以通过 "http://localhost:5000",可以访问到站点后,接下来我们要配置"守护进程","Nginx公网8 ...
- Wpf鼠标点击坐标转为屏幕坐标/后台重新设置在Canvas和Grid上的位置
Point getP = PointToScreen(Mouse.GetPosition(this)); DockPanel.SetValue(Canvas.LeftProperty, 1.0); D ...
- iOS 时间戳和时间互换,计算两日期相隔天数
/* *获取当前系统时间的时间戳 */ +(NSInteger)getNowTimestamp; /** * 获取当前时间 */ + (NSString *)getNowTimeTampF ...
- maven课程 项目管理利器-maven 5-1 课程总结 1星（2018-11-08 07:19）
1 maven windows环境搭建和配置环境变量 2 maven骨架和pom.xml 解析 3 命令行窗口常用的maven命令 4 仓库和坐标 5 maven Java项目 6 生命周期,依赖聚合 ...
- laravel下的ORM数据映射之自由畅想
此处以Model::get()方法和Model::first()方法为例 public static function get($data=[]){//默认是空数组 if(count($data)== ...
- 诸葛io | 精细化运营分析解决方案
类型: 定制服务 软件包: business intelligence internet media solution collateral 联系服务商 产品详情 解决方案 概要 数据监测 ? 异常发 ...