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>
Never waste time any more, Never old man be a yong man
