JQuery 基礎原理 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>
