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. js中 charCodeAt
- 2. Android中通过ViewHelper.setTranslationY实现View移动控制（NineOldAndroids开源项目）
- 3. 【Android】日常记录：BottomNavigationView自定义样式，修改点击后图片
- 4. maya 文件检查 ui和数据分离 （一）
- 5. eclipse 修改项目的jdk版本
- 6. Android InputMethod设置
- 7. Simulink中Bus Selector出现很多? ? ?
- 8. 【Openfire笔记】启动Mac版Openfire时提示“系统偏好设置错误”
- 9. AutoPLP在偏好标签中的生产与应用
- 10. 数据库关闭的四种方式
- 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）