java第二十三天（JQ筆記）
jQuery 庫 - 特性
jQuery 是一個 JavaScript 函數庫。javascript
jQuery 庫包含如下特性：css
- HTML 元素選取
- HTML 元素操做
- CSS 操做
- HTML 事件函數
- JavaScript 特效和動畫
- HTML DOM 遍歷和修改
- AJAX
- Utilities
定時彈出廣告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--定時彈出廣告
1.導入JQ相關的文件
2.文檔加載完成事件：$(function):頁面初始化操做：綁定事件，啓動頁面定時器
3.肯定相關操做的事件
4.事件觸發函數
5.函數裏面再去操做相關的元素
-->
<script type="text/javascript" src="../../jquery-1.11.0.js"></script>
<script>
$(function(){
//顯示頁面圖片
$("#bt1").click(function(){
//得到img
//$("#img1").show()
//$("#img1").slideDown()//向下滑動
//$("#img1").fadeIn(1000)//淡入
//animate自定義動畫第一個參數必須的，是一個樣式以花括號表示，第二個參數是動畫執行的時間，毫秒
$("#img1").animate({width:"500px",opacity:"1"},5000)
})
//隱藏頁面圖片
$("#bt2").click(function(){
//得到img slow\normal\fast或者數值表示是毫秒錶示隱藏速度
//$("#img1").hide()
//$("#img1").slideUp(1000)//向上滑動
//$("#img1").fadeOut(1000)//淡出
$("#img1").animate({width:"1000px",opacity:"0.2"},5000)
})
})
</script>
</head>
<body>
<input type="button" value="顯示" id="bt1" />
<input type="button" value="隱藏" id="bt2" /><br />
<img src="img/P90112-130750.jpg" width="500px" id="img1"/>
</body>
</html>html
---------------------------------------------------------------------------------------------------------------------------------------------------java
基本選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../css/style.css" />
-->
<!--引入JQ的文件
-->
<script type="text/javascript" src="../../jquery-1.11.0.js"></script>
<!--基本選擇器
選擇器是讓咱們可以更加精準的找到要操做的元素
ID選擇器： 以#開頭 #ID名稱
類選擇器：以.開頭 .類名
元素選擇器： 標籤的名稱
通配選擇器：*
選擇器，選擇器：選擇器1，選擇器2
-->
<script>
//文檔加載事件，頁面初始化操做
$(function(){
//初始化操做給按鈕綁定事件
$("#bt3").click(function(){
$("#two").css("background-color","aquamarine");
})
$("#bt4").click(function(){
$(".mini").css("background-color","#FFF38F");
})
$("#bt5").click(function(){
$("div").css("background-color","#FFE0E9");
})
$("#bt6").click(function(){
$("*").css("background-color","#AAAAAA");
})
$("#bt7").click(function(){
$(".mini,span").css("background-color","#FF6500");
})
})
</script>
<body>
<input type="button" value="找出ID爲two的元素" id="bt3"/>
<input type="button" value="找出mini類的元素" id="bt4"/>
<input type="button" value="找出全部div的元素" id="bt5"/>
<input type="button" value="找出通配符選擇器" id="bt6"/>
<input type="button" value="找出mini類和span元素" id="bt7"/>
<br />
<div id="one">
<div class="mini">
選擇器
</div>
</div>
<div id="two">
<div class="mini">選擇器1</div>
<div class="mini">選擇器2</div>
</div>
<div id="three">
<div class="mini">選擇器3</div>
<div class="mini">選擇器4</div>
<div class="mini">選擇器5</div>
</div>
<span id="four">span</span>
</body>
</html>jquery
---------------------------------------------------------------------------------------------------------------------------------------------------ajax
定時彈出廣告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../jquery-1.11.0.js"></script>
<!--
1.導入JQ文件
2.編寫JQ的文檔加載事件
3.啓動定時器SetTimeOut("",3000)
4.編寫顯示廣告裏面再啓動一個定時器
6.編寫隱藏廣告的函數
-->
<script>
//顯示廣告
function showAd(){
$("#img2").show();
//在顯示廣告內部再調用一個隱藏廣告的定時器
setTimeout("hideAd()",3000);
}
//隱藏廣告
function hideAd(){
$("#img2").hide();
}
$(function(){
setTimeout("showAd()",3000)
})
</script>
</head>
<body>
<img src="../../img/P80603-094022.jpg" id="img2" width="100px" style="display: none;"/>
</body>
</html>json
----------------------------------------------------------------------------------------------------------------------------------------------------數組
JQ遍歷
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../jquery-1.11.0.js"></script>
<script>
var cities=["深圳","東莞","惠州","廣州"];
/*//如何去遍歷 each 第一個參數是索引，第二個參數是值
$(cities).each(function(i,n){
console.log(i+"==="+n);
})
//JQ函數的調用
$.each(cities, function(i,n) {
console.log(i+">>>"+n);
});*/
function callback1(i,n){
console.log("123"+i+" "+n)
}
//遍歷數據
function bianli(arr,callback1){
for(var i=0;i<arr.length;i++){
var item=arr[i];
callback1(i,item)
}
}
//調用
bianli(cities,callback1);
</script>
</head>
<body>
</body>
</html>瀏覽器
--------------------------------------------------------------------------------------------------------------------app
JQ的DOM操做
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--JQ的DOM操做
-->
<script type="text/javascript" src="../../jquery-1.11.0.js"></script>
<script>
//文檔加載完成事件
$(function(){
//綁定點擊事件
$("#bt1").click(function(){
//append向元素中添加子元素
//$("#div1").append("<font color='red' size='4'>點你妹！</font>");
//appendTo將本身添加到父元素中
//$("<font color='red' size='4'>點你妹！</font>").appendTo("#div1")
//prepend在父元素前面添加子元素
//$("#div1").prepend("<font color='red' size='4'>點你妹！</font>");
//after 在元素後面添加同級元素
$("#div1").after("<font color='red' size='4'>點你妹！</font>");
});
});
</script>
</head>
<body>
<input type="button" id="bt1" value="點我" />
<div id="div1">
哈哈哈哈哈哈哈哈哈
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------------------
使用JQ完成省市聯動
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script></script>
<script type="text/javascript" src="../../jquery-1.11.0.js"></script>
<!--
使用JQ完成省市聯動
1.準備工做：城市信息數據
2.添加節點：append向元素中添加子元素、appendTo將本身添加到父元素中
prepend在父元素前面添加子元素、prependTo將本身添加到父元素前面
after 在元素後面添加兄弟元素、afterTo將本身添加到元素前面
3.遍歷的操做
兩種方式
步驟分析：
1.導包
2.文檔加載事件：頁面初始化
3.進一步肯定事件change事件
4.函數：獲得當前選中的省份
5.獲得城市，遍歷城市數據
6.將遍歷出來的城市添加到城市的select中
-->
<script>
$(function() {
//建立二維數組存儲城市
var provinces = [
["武漢", "黃岡", "襄陽", "荊州"],
["長沙", "郴州", "株洲", "岳陽"],
["石家莊", "邯鄲", "廊坊", "保定"],
["鄭州", "洛陽", "開封", "安陽"]
];
$("#province").change(function() {
//獲得城市信息
var cities = provinces[this.value];
//alert(val);
//清空第二個下拉列表
$("#city").empty();
//遍歷城市數組
$.each(cities, function(i, n) {
//將遍歷出來的城市添加到城市的select中
$("#city").append("<option>" + n + "</option>");
})
})
})
</script>
</head>
<body>
<select id="province">
<option>--請選擇--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
表單選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../jquery-1.11.0.js"></script>
<!--
表單選擇器
$(":input")
-->
<script>
$(function(){
$(":input").css("background-color","#FFE0E9");
$(":text").css("background-color","greenyellow");
$(":password").css("background-color","lightyellow");
$("#bt1").click(function(){
$("option:selected").css("background-color","red");
alert($("option:selected").size());
})
})
</script>
</head>
<body>
<form>
<input type="button" value="Input Button" />
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select multiple="multiple">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
<input type="button" value="點我" id="bt1" />
<textarea></textarea>
<button>Button</button>
</form>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------------------
層級選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../css/style.css" />
-->
<!--引入JQ的文件
-->
<script type="text/javascript" src="../../jquery-1.11.0.js"></script>
<!--
層級選擇器
子元素選擇器：parent>child
後代選擇器：ancestor descendant
相鄰兄弟選擇器：prev+next 找出緊挨着的一個弟弟選擇器
找出全部的弟弟選擇器：prev~siblings
-->
<script>
//文檔加載事件，頁面初始化操做
$(function(){
//初始化操做給按鈕綁定事件
$("#bt1").click(function(){
//找出body下面的子div
$("body>div").css("background-color","aquamarine");
})
$("#bt2").click(function(){
//找出body下面的全部div
$("body div").css("background-color","azure");
})
$("#bt3").click(function(){
//找出id爲one的相鄰兄弟div
$("#one+div").css("background-color","#FFE0E9");
})
$("#bt4").click(function(){
//找出id爲two的全部弟弟div
$("#two~div").css("background-color","#FFF38F");
})
$("#bt5").click(function(){
//找出id爲one的全部弟弟div
$("#one~div").css("background-color","bisque");
})
})
</script>
</head>
<body>
<input type="button" value="找出body下面的子div" id="bt1"/>
<input type="button" value="找出body下面全部div" id="bt2"/>
<input type="button" value="找出id爲one的相鄰兄弟div" id="bt3"/>
<input type="button" value="找出id爲two的全部弟弟div" id="bt4"/>
<input type="button" value="找出id爲one的全部弟弟div" id="bt5"/>
<br />
<div id="one">
<div class="mini">
選擇器pou
</div>
</div>
<div id="two">
<div class="mini">選擇器1</div>
<div class="mini">選擇器2</div>
</div>
<div id="three">
<div class="mini">選擇器3</div>
<div class="mini">選擇器4</div>
<div class="mini">選擇器5</div>
</div>
<span id="four">span</span>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------------------------
屬性選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../jquery-1.11.0.js"></script>
<!--
屬性選擇器：
[屬性]
[屬性=value]
[屬性！=value]
[屬性1][屬性2][...]
[attribute^=value] 屬性值以value開頭
[attribute$=value] 屬性值以value結尾
[attribute*=value] 屬性值包含value
-->
<script>
$(function(){
//經過屬性選擇器找到a href
$("a[href]").css("color","#FF6500")
//找出包含href和title元素的元素
$("a[href][title]").css("color","black")
//找出href、title而且title='testtitle'的元素
$("a[href][title='testtitle22222']").css("color","lightpink")
})
</script>
</head>
<body>
<a href="#">href1</a>
<br />
<a href="#" title="testtitle">href2</a>
<br />
<a href="#" title="testtitle22222">href2</a>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------
過濾選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../css/style.css" />
-->
<!--引入JQ的文件
-->
<script type="text/javascript" src="../../jquery-1.11.0.js"></script>
<!--
過濾選擇器：
找出第一個元素：選擇器：first
匹配索引爲偶數的元素：選擇器:even
匹配索引爲奇數的元素：選擇器:odd
匹配索引大於n的元素：選擇器：div:gt(n)
-->
<script>
//文檔加載事件，頁面初始化操做
$(function(){
//過濾找出第一個div選擇器
$("#bt1").click(function(){
//過濾找全部div中第一個元素
$("div:first").css("background-color","aquamarine");
})
$("#bt2").click(function(){
//過濾找全部div中偶數位的div
$("div:even").css("background-color","#FFE0E9");
})
$("#bt3").click(function(){
//過濾找全部div中奇數位的div
$("div:odd").css("background-color","#FFF38F");
})
$("#bt4").click(function(){
//過濾找全部div中索引大於2的div
$("div:gt(2)").css("background-color","aliceblue");
})
})
</script>
</head>
<body>
<input type="button" value="過濾找全部div中第一個元素" id="bt1"/>
<input type="button" value="過濾找全部div中偶數位的div" id="bt2"/>
<input type="button" value="過濾找全部div中奇數位的div" id="bt3"/>
<input type="button" value="過濾找全部div中索引大於2的div" id="bt4"/>
<br />
<div id="one"> <!--0-->
<div class="mini"><!--1-->
選擇器
</div>
</div>
<div id="two"><!--2-->
<div class="mini">選擇器1</div><!--3-->
<div class="mini">選擇器2</div><!--4-->
</div>
<div id="three"><!--5-->
<div class="mini">選擇器3</div><!--6-->
<div class="mini">選擇器4</div><!--7-->
<div class="mini">選擇器5</div><!--8-->
</div>
<span id="four">span</span><!--9-->
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------------------
表格的隔行換色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../jquery-1.11.0.js"></script>
<!--表格的隔行換色
1.帶入JQ包
2.文檔加載完成函數：頁面處初始化，綁定函數
3.得到全部的行：元素選擇器
4.根據行號去改顏色
-->
<script>
$(function(){
//得到全部偶數行去掉第一行
$("tr:even:gt(0)").css("background-color","lightgoldenrodyellow");
//得到全部奇數行
$("tr:odd").css("background-color","darkgrey");
})
</script>
</head>
<body>
<table border="1px" width="800px">
<tr>
<td>項目</td>
<td>分類名稱</td>
<td>分類項目</td>
<td>分類描述</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------------------
表格全選全不選
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../jquery-1.11.0.js"></script>
<script>
$(function(){
//表格隔行換色
$("tr:even:gt(0)").css("background-color","lightgoldenrodyellow");
$("tr:odd").css("background-color","darkgrey");
})
/*表格全選全不選*/
$(function(){
//綁定點擊事件
$("#checkAll").click(function(){
//alert(this.checked)
//得到全部分類項的checkbox
//使用屬性選擇器,屬性方法prop()
//$("input[type='checkbox']").prop("checked",this.checked);
//使用層級選擇器,屬性方法prop()
//$("tbody>tr>td>input").prop("checked",this.checked);
$("input").prop("checked",this.checked);
})
})
</script>
</head>
<body>
<table border="1px" width="800px">
<thead>
<tr>
<td>
<input type="checkbox" id="checkAll" />
</td>
<td>項目</td>
<td>分類名稱</td>
<td>分類項目</td>
<td>分類描述</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" />
</td>
<td>1</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>2</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>3</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>4</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>5</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------------------------
商品的左右選擇
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../jquery-1.11.0.js"></script>
<!--
步驟:商品的左右選擇
1. 導入JQ的文件
2. 文檔加載函數 :頁面初始化
3.肯定事件 : 點擊事件 onclick
4. 事件觸發函數
移動被選中的那一項到右邊
移動左邊的所有到右邊
移動右邊被選中的那一項到左邊
移動右邊的所有到左邊
-->
<script>
$(function(){
//事件觸發函數
$("#lefta1").click(function(){
/*移動左邊被選中的那一項到右邊*/
$("#leftSelect option:selected").appendTo("#rightSelect");
})
/*移動左邊的所有到右邊*/
$("#lefta2").click(function(){
$("#leftSelect option").appendTo("#rightSelect");
})
$("#righta1").click(function(){
//移動右邊被選中的那一項到左邊
$("#rightSelect option:selected").appendTo("#leftSelect");
})
//移動右邊的所有到左邊
$("#righta2").click(function(){
$("#rightSelect option").appendTo("#leftSelect");
})
})
</script>
</head>
<body>
<table width="400px" height="200px" border="1px">
<tbody>
<tr height="10px">
<td>分類名稱</td>
<td>
<input type="text" value="手機數碼" />
</td>
</tr>
<tr height="10px">
<td>分類描述</td>
<td>
<input type="text" value="這裏都是手機數碼產品" />
</td>
</tr>
<tr>
<td>分類商品</td>
<td>
<div style="float: left;">
<input type="text" value="已有商品" size="4"/><br />
<select id="leftSelect" multiple="multiple">
<option>小米</option>
<option>華爲</option>
<option>oppo</option>
<option>vivo</option>
</select><br />
<a href="#" id="lefta1"> >> </a><br />
<a href="#" id="lefta2"> >>> </a>
</div>
<div style="float: right;">
<input type="text" value="下架商品" size="4"/><br />
<select id="rightSelect" multiple="multiple">
<option>蘋果</option>
<option>諾基亞</option>
<option>三星</option>
<option>魅族</option>
</select><br />
<a href="#" id="righta1"> << </a><br />
<a href="#" id="righta2"> <<< </a>
</div>
</td>
</tr>
<tr height="10px">
<td colspan="2">
<input type="button" value="提交"/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------
jq總結
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
什麼是JQ：write less,do more
1.11版本
核心是javascript函數庫
定時器
動畫效果：show顯示
hide隱藏
slideDown
slideUp
fadeIn
fadeOut
基本選擇器：
ID選擇器：#ID名稱
類選擇器：.類名
元素選擇器：元素的名稱
通配符選擇器：*找出頁面上全部元素
選擇器分組：選擇器1，選擇器2 並集選擇器 [選擇器1，選擇器2]
層級選擇器：
後代選擇器「選擇器1 選擇器2 找出來選擇器1下面全部選擇器2
子元素選擇器：選擇器1>選擇器2 找出來是全部的子節點
相鄰兄弟選擇器：選擇器1+選擇器2 找出來緊挨着的兄弟選擇器
兄弟選擇器：選擇器1~選擇器2 找出全部的弟弟選擇器
（找出全部的兄弟包括同級元素 ：$("div").sibling()）
屬性選擇器：
選擇器
選擇器[title]
選擇器[title='test']
選擇器[title='test'][style]
基本的過濾器： 選擇器 $("div:first")
:firt 找出第一個元素
:last 找出最後一個元素
:even 找出偶數索引
:odd 找出奇數索引
:gt(index) greater than
:lt(index) 小於
:eq(index) 等於
表單選擇器：
:input 找出全部輸入項， textarea select button
:password
:text
:radio
表單對象屬性的過濾器
:selected
:checked
經常使用函數：
屬性prop() 修改屬性 properties
若是傳入一個參數就是獲取
prop("src","../img/1.jpg");
設置圖片路徑
attr：操做一些自定義的屬性<img abc='123'/>
prop:一般是用來操做元素固有屬性的，建議用prop操做屬性
css();修改css樣式
addClass() 添加一個class樣式
removeClass() 移除
toggleClass() 至關於開關，如標籤上有某個元素就不添加沒有就添加
事件 區別於JS不須要on打頭
blur 綁定失去焦點
focus 綁定得到焦點
click
change
經常使用文本操做
append 給本身添加兒子
appendTo 把本身添加到別人家
prepend 在本身節點最前面添加子節點
after 在本身後面添加一個兄弟
before 在本身前面添加一個兄弟
數組遍歷
$("數組對象").each(function(index,data))
$.each(arr,function(index,data))
JQ開發步驟：
1.導入JQ相關的包
2.文檔加載完成事件：頁面初始化：綁定事件，啓動定時器
3.肯定事件
4.實現事件要觸發的函數
5.函數裏面再去操做要操做的元素
-->
</head>p
<body>
</body>
</html>
詳細需參考JQuery API
-----------------------------------------------------------------------------------------------------------------------------------------------
trigger和 triggerHandler
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
trigger 觸發事件可是會執行相似瀏覽器將光標移到輸入框這種瀏覽器默認行爲
triggerHandler 僅僅只是觸發事件對應的函數 ，不會觸發瀏覽器默認事件，只會觸發JQ對象集合中的第一個元素
-->
<script type="text/javascript" src="../../../jquery-1.11.0.js"></script>
<script>
$(function(){
$("#usernamme").focus(function(){
console.log("text focus被觸發了")
});
$("#btn1").click(function(){
//觸發一下text的focus
$("#usernamme").trigger("focus");
});
$("#btn2").click(function(){
//觸發一下text的focus
$("#usernamme").triggerHandler("focus");
});
});
</script>
</head>
<body>
<input type="text" id="usernamme"/>
<input type="button" value="trigger觸發一下text的focus " id="btn1"/>
<input type="button" value="triggerHandler觸發一下text的focus " id="btn2"/>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
JQ表單校驗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css" />
<title></title>
<!--表單校驗
1.必填項末尾添加小紅點
2.獲取用戶輸入的信息作相應的校驗
3.時間：得到焦點，是u去焦點，按鍵擡起
4.表單提交事件
用JQ的方式來是實現
1.導入JQ文件
2.文檔加載事件：在必填項後面加一個小紅點
3.表單校驗肯定事件：blur focus keyup
4.提交表單 submit
-->
<script type="text/javascript" src="../../../jquery-1.11.0.js"></script>
<script>
$(function(){
//在全部必填項後面加上一個紅色的*
$(".bitian").after("<font class='high'>*</font>");
//綁定事件
$(".bitian").blur(function(){
//得到當前事件是誰的
//var value=this.value;
var value=$(this).val();
//清空當前必填項的額父元素div後面的span
// $(".formtips").remote();//會移除全部的span 不推薦
$(this).parent().find(".formtips").remove();
//校驗用戶名
if($(this).is("#username")){
if (value.length<6) {
//找到這個調用的元素的父節點即div元素添加提示
$(this).parent().append("<span class='formtips onError'>用戶名過短了<span/>");
} else{
$(this).parent().append("<span class='formtips onSuccess'>用戶名正確<span/>");
}
}
//校驗密碼
if($(this).is("#password")){
if (value.length<3) {
//找到這個調用的元素的父節點即div元素添加提示
$(this).parent().append("<span class='formtips onError'>密碼過短了<span/>");
} else{
$(this).parent().append("<span class='formtips onSuccess'>密碼正確<span/>");
}
}
//校驗手機號
if($(this).is("#telephone")){
if (value.length<11) {
//找到這個調用的元素的父節點即div元素添加提示
$(this).parent().append("<span class='formtips onError'>手機號格式不對<span/>");
} else{
$(this).parent().append("<span class='formtips onSuccess'>手機號正確<span/>");
}
}
}).focus(function(){
$(this).triggerHandler("blur");
}).keyup(function(){
$(this).triggerHandler("blur");
});
/*$(".bitian").blur(function(){}).focus(function(){}).keyup(function(){})
鏈式調用 事件blur返回的是一個JQ對象的時候用鏈式調用*/
//給表單綁定提交事件
$("form").submit(function(){
//觸發必填項的校驗邏輯,此處觸發只能選trigger，觸發的事件blur、focus或者keyup
$(".bitian").trigger("blur");
//校驗不對的時候阻止提交
/* //方法一直接判斷span是否是onError
if ($("span").is(".onError")) {
return false;
} else{
return true;
}*/
//方法二 判斷onError的長度是否大於零
var length=$(".onError").length;
if (length>0) {
return false;
} else{
return true;
}
});
});
</script>
</head>
<body>
<form action="../../../index.html" >
<div>
用戶名：<input type="text" class="bitian" id="username"/>
</div>
<div>
密碼：<input type="password" class="bitian" id="password"/>
</div>
<div>
手機號：<input type="tel" class="bitian" id="telephone"/>
</div>
<div>
<input type="submit" value="提交"/>
</div>
</form>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------
程序猿老黃曆$.get(url,functin(data{}))
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
程序猿老黃曆
使用JQ發送同步刷新頁面
數據交換格式:
JSON是一種輕量級的數據交換格式
xml
JSON格式：
JSON對象 {key1:value} {key1:value,key1:value,key1:value}
JSON數組 數組裏面放JSON對象 { {key1:value}, {key1:value}, {key1:value}}
JSON在線校驗工具
-->
<link rel="stylesheet" href="../css/laohuangli.css" />
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//涉及到請求連接，動態顯示數據 url地址必須對應正確不然找不到地址ajax方法沒法調用
var url="http://127.0.0.1:8020/Javaee/Bootstrap/s20190626/%E7%A8%8B%E5%BA%8F%E5%AA%9B%E8%80%81%E9%BB%84%E5%8E%86/data.json";
//ajax 載入頁面的URL地址 待發送的key/value參數 載入成功的回調函數 返回內容格式：xml,html,script,text,_defalt
$.get(url,function(jsonArr){ //jsArry是一個返回的參數
//console.log(jsonArr);
/* //向適合幹啥添加數據
$(".good ul").append("<li><div class='name'>唱歌</div><div class='description'>自嗨有利於身心健康</div></li>");
//向不適合幹啥添加數據
$(".bad ul").append("<li><div class='name'>洗頭</div><div class='description'>別想了，白天不會有偶遇</div></li>");*/
/*var obj=jsonArr[4]; //取出第四個數據是JSONObject
//將這個數據添加進去
$(".good ul").append("<li><div class='name'>"+obj.name+"</div><div class='description'>"+obj.good+"</div></li>");
$(".bad ul").append("<li><div class='name'>"+obj.name+"</div><div class='description'>"+obj.bad+"</div></li>");*/
var goodcount=Math.floor(Math.random()*3+2)//取值範圍1~4 向下取整
while(goodcount>0){ //取幾條數據
//隨機取一條數據
var index=Math.floor(Math.random()*jsonArr.length);
var obj=jsonArr[index];
$(".good ul").append("<li><div class='name'>"+obj.name+"</div><div class='description'>"+obj.good+"</div></li>");
goodcount--
}
var badcount=Math.floor(Math.random()*3+1)//取值範圍1~4 向下取整
while(badcount>0){ //取幾條數據
//隨機取一條數據
var index=Math.floor(Math.random()*jsonArr.length);
var obj=jsonArr[index];
$(".bad ul").append("<li><div class='name'>"+obj.name+"</div><div class='description'>"+obj.bad+"</div></li>");
badcount--
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="title">
程序媛老黃曆
</div>
<div class="good">
<div class="title">
<table>
<tbody><tr><td>宜</td></tr>
</tbody></table>
</div>
<div class="content">
<ul>
<!-- <li>
<div class="name">學習java</div><div class="description">你是一個集美貌與才華一身的女子</div>
</li>-->
</ul>
</div>
<div class="clear"></div>
</div>
<div class="split"></div>
<div class="bad">
<div class="title">
<table>
<tbody><tr><td>不宜</td></tr>
</tbody></table>
</div>
<div class="content">
<ul>
<!-- <li>
<div class="name">減肥</div><div class="description">不能辜負慕斯蛋糕炸雞烤串臭豆腐的厚愛</div>
</li>-->
</ul> </div> <div class="clear"></div> </div> </div> </body> </html>
- 1. java第二十三天（JS筆記）
- 2. JAVA第二十四天（bootstrap筆記）
- 3. 第二十三天
- 4. Java 第三天 筆記
- 5. Java第十三天
- 6. Java第十二天
- 7. Java第二十天
- 8. Java第十二天~第十三天/11.04~11.05
- 9. Java第三十二天（JSP & EL & JSTL）
- 10. HCIE筆記-第十三天（2）
- 更多相關文章...
- • SQLite - Java - SQLite教程
- • ASP.NET Razor - 標記 - ASP.NET 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • Java Agent入門實戰（二）-Instrumentation源碼概述
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Appium入門
- 2. Spring WebFlux 源碼分析(2)-Netty 服務器啓動服務流程 --TBD
- 3. wxpython入門第六步（高級組件）
- 4. CentOS7.5安裝SVN和可視化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig對象缺少setMaxIdle、setMaxWaitMillis等方法，問題記錄
- 6. 一步一圖一代碼，一定要讓你真正徹底明白紅黑樹
- 7. 2018-04-12—（重點）源碼角度分析Handler運行原理
- 8. Spring AOP源碼詳細解析
- 9. Spring Cloud（1）
- 10. python簡單爬去油價信息發送到公衆號
- 1. java第二十三天（JS筆記）
- 2. JAVA第二十四天（bootstrap筆記）
- 3. 第二十三天
- 4. Java 第三天 筆記
- 5. Java第十三天
- 6. Java第十二天
- 7. Java第二十天
- 8. Java第十二天~第十三天/11.04~11.05
- 9. Java第三十二天（JSP & EL & JSTL）
- 10. HCIE筆記-第十三天（2）