javaWeb核心技术第五篇之jQuery
- 概述
- jQuery是一个优秀的javascript框架(js类库)，兼容css3和各大浏览器，提供dom，events，animate，ajax等简易的操作。并且jQuery有非常丰富的插件，大多数功能都有相应的插件解决方案。jQuery的宗旨是write less, do more. (写的更少,做的更多)
- jQuery入门
- jQuery和html整合
- 下载
- 下载地址:www.jquery.com
- 使用script的src属性即可
"eg:<script src="../js/jquery-1.11..min.js"></script>"
- 语法
- $("选择器") 或 jQuery("选择器")
"var 元素对象 = $("选择器");
$("#id值"); val();"
- javaScript和jquery区别
- 注意事项:
"使用jquery的方式获取的对象称为jquery对象,
使用js的方式获取的对象称为dom(js)对象,
两者的方法和属性不能混用,
使用jquery的方法和属性时,必须保证对象是jquery对象."
- js对象和jquery对象之间的转换
- js对象 → jquery对象
- $(js对象);
- jquery对象 → js对象
- 方式1:jQuery对象[index]
- 方式2:jQuery对象.get(index)
- 事件(event)
"在js的事件中,事件前加on,在jq的事件中通常没有on,直接写名称即可"
- 页面加载成功事件
- 格式1:$(document).ready(function(){});
- 格式2:$(function(){});
- 注意:在同一个页面内,jquery的页面加载成功事件可以出现多次,从上到下依次执行,js的页面加载成功事件只能出现一次,即使出现多次,也只有最后一个生效
- 重点事件
- click
- change
- submit
- focus
- blur
- jquery事件和事件源的绑定
"要保证页面加载成功后,才能使用jq的事件"
- jquery对象.事件名称(function(){});
- jQuery的选择器
- 基本选择器:★
- * 所有
- # id
- .class
- 标签选择器(标签名)
- 多个选择器用","号隔开 a,b
- 层次选择器:★
- a b:选择a的b的后代
- a>b:选择a的b孩子
- a+b:选择a的b大弟弟
- a~b:选择a的所有的b弟弟
- 基本过滤:
- :first 第一个
- :last 最后一个
- :even 偶数
- :odd 奇数
- :eq(index) 索引=
- :gt(index) 索引>
- :lt(index) 索引<
- :not(选择器)
- 内容过滤:
- :has(选择器):包含
- 可见性过滤:
- :hidden:不可见 主要针对的是 文本隐藏域和指定display=none
- :visible:可见
- 属性选择器★
- [属性名]:有指定属性的元素
- [属性名='值']:有指定属性和值的元素
- 表单对象属性★
- :enabled 可用的
- :disabled 不可用的
- :checked 选中的(针对的是单选框和复选框)
- :selected 选中的(下拉选)
- 表单:
- :input:选择所有的表单子标签
"input:选中所有input标签
select textarea button"
- input select textarea button
- jQuery的DOM操作
- jQuery效果:
- 基本:★ 高和宽都变化
- hide([毫秒值]):隐藏
- show([毫秒值]):显示
- toggle([毫秒值]):切换
- 滑入滑出:高变化
- slideUp([毫秒值]):滑出
- slideDown([毫秒值]):滑入
- slideToggle([毫秒值]);切换
- 淡入淡出:
- fadeIn([毫秒值]);
- fadeOut([毫秒值]);
- fadeToggle();切换
- 了解:
- fadeToggle(毫秒值,function(){});
- 以上效果都可以添加一个回调函数
- css样式
- css
- 设置css样式
- 格式1:设置单个属性
"jq对象.css("属性","值");"
- 格式2:设置多个属性
"jq对象.css({
"属性":"值",
"属性1":"值1"
});"
- 获取css样式的值
" jq对象.css("属性名称");"
- 获取元素的宽和高
- jq对象.width()
- jq对象.height()
- 扩展:offset()
"获取元素在当前页面的位置"
- top
"元素距离顶部的距离"
- left
"元素距离左边的距离"
- 属性
- attr():设置或者获取元素的属性
- 设置属性(给标签添加属性)
- 格式1:设置单个属性
"jq对象.attr("属性名","值");"
- 格式2:设置多个属性
"jq对象.attr({
"属性":"值",
"属性1":"值1"
});"
- 获取属性的值
" jq对象.attr("属性名");"
- 移出属性(删除属性)
" jq对象.removeAttr("属性名");"
- prop():使用方式和attr一样,优先使用attr方法,若attr方法不能用,换prop方法(版本升级后的产物)
- class操作 了解
- 元素.addClass("属性值");添加
- 元素.removeClass():移除指定的样式
- 元素.toggleClass("属性值"):切换 */ /* 回顾:
jQuery:js类库(js框架)对js进行封装,本质上就是外部的js文件.
jQuery和html整合:
1.下载
2.通过script标签的src属性引入即可(1.11)
jQuery语法:
$("选择器"); 或 jQuery("选择器");
jq对象和js对象转换
jq ===> js(dom)
jq对象[index]
jq对象.get(index);
js ===> jq对象
$(js对象);
事件:
click:
submit:
change:
focus:
blur:
页面加载成功:
$(function(){});
$(document).ready(function(){});
选择器:
基本选择器:
*
#id
.class
标签名称
多个选择器之间使用逗号
层次选择器:
a b
a>b
a+b
a~b
基本过滤选择器:
:first
:last
:even
:odd
:eq(index)
:gt(index)
:lt(index);
:not(选择器)
内容过滤选择器:
has(选择器);
可见性过滤选择器:
:hidden type="hidden" display = "none"
:visible
属性选择器:
[属性]
[属性='值']
表单对象选择器:
:enabled
:disabled
:selected 下拉选
:checked 单选框个复选框
表单选择器:
:input
input select textarea button
DOM:
效果:
基本效果:
hide()
show()
toggle()
滑入滑出:
slideUp();
slideDown();
slideToggle();
淡入淡出:
fadeIn();
fadeOut();
fadeToggle([毫秒值],回调函数);
操作css样式:
设置:
设置单个:
jq对象.css("属性名称","值");
设置多个:
jq对象.css({
"属性名称":"值",
"属性名称":"值"
});
获取:
jq对象.css("属性名称");
获取宽和高:
width();
height();
获取位置:
offset();
top:
left:
操作属性:
attr:
设置属性:
设置单个:
jq对象.attr("属性名称","值");
设置多个:
jq对象.attr({
"属性名称":"值",
"属性名称":"值"
});
删除:
removeAttr("属性名称");
prop:如果attr不好使使用prop代替
操作class:
addClass("class属性的值");
removeClass();
classToggle("class属性的值");
/////////////////////////////////////////////
案例1-省市联动
需求分析:
当省份改变的时候,根据选中的省份查询其所对应的市数组,遍历市数组,将每一个市拼成option插入到市的下拉选中.
技术分析:
事件
jq遍历
jq对DOM操作
/////////////////////////
步骤分析:
1.确定事件(改变事件)
给省份的下拉选添加改变事件
2.编写改变事件函数
//a.获取省份的value的值
//b.获取所对应的市数组
//c.获取市的下拉选对象
//d.遍历市数组,将每一个市拼成option插入到市的下拉选中 案例2-左右选择
需求分析:
当点击不同的按钮时,根据按钮的需求将左边或右边的option插入到对面的下拉选中.
技术分析:
事件
文档处理
////////////////////
步骤分析:
1.确定事件(单击事件)
给按钮派发单击事件
2.编写函数
//a.将左边选中的第一个插入到右边 案例3-表单校验
需求分析:
通过使用validate插件来完成表单校验.
技术分析:
validate插件
////////////////// 扩展案例-模拟分组 //////////////////
day31jQuery - jQuery遍历
- 方式1:jQuery的对象方法
- 格式:
" jq对象.each(function([index],[dom对象]){
对遍历到每个元素的操作
});"
- 方式2:全局函数
- 格式:
"$.each(要遍历的jquery对象,function([index],[dom对象]){
});
$.each(数组,function(){
});" 案例:
//方式1:jq对象的方法
$("#b1").click(function(){
//获取当前页面的文本隐藏域,并打印他们的value值
//[e1,e2,e3,e4] 存放的是dom(js)对象
$("input:hidden").each(function(index,ele){
// alert(index+" "+ele.value+" "+$(ele).val());
alert(this.value);
});
});
//方式2:全局遍历
$("#b2").click(function(){
//获取要遍历的对象
var $hideObj = $("input:hidden");
$.each($hideObj, function(index,ele) {
alert(index+" "+ele.value+" "+$(ele).val()+" "+this.value);
});
});
//js对象
var arr = new Array(1,2,3,"tom");
$("#b3").click(function(){
// $.each(arr, function(index,ele) {
// alert(index+" "+ele+" "+this);
// });
$(arr).each(function(index,ele){
alert(index+" "+ele+" "+this);
});
});
}); - jQueryDOM操作
- HTML代码/文本/值 ★
- val() : 对value属性的操作
- jq对象.val(); 获取value属性的值
- jq对象.val("值"); 设置value属性的值
- html() : 对标签体的操作
- jq对象.html(); 获取标签体的内容
- jq对象.html("值"); 设置标签体的内容
- text() : 对标签体的操作
- jq对象.text(); 获取标签体的内容
- jq对象.text("值"); 设置标签体的内容
- html和text区别
"设置内容: html可以将内容解析,text只是作为普通文本
获取内容:html获取所有源码内容,text只是获取文本内容"
- 文档处理
- 内部插入:
- append a.append(c) 将c插入到a的内部的后面
- prepend a.prepend(c) 将c插入到a的内部的前面
- appendTo a.appendTo(c) 将a插入到c的内部的后面
- prependTo a.prependTo(c)将a插入到c的内部的前面 内插入案例: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head>
<title>01_内部插入节点.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//0.获取要操作的对象
var $city = $("#city");
var $fk = $("#fk");
//1.在city内部的后面追加 反恐
//向指定标签内部的前面进行插入
// $city.append($fk);
// $fk.appendTo($city);
//2.在city内部的前面插入 反恐
//向指定标签内部的后面进行插入
// $city.prepend($fk);
$fk.prependTo($city);
});
</script>
</head> <body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li> </ul> <ul id="love">
<li id="fk" name="fankong">反恐</li>
<li id="xj" name="xingji">星际</li>
</ul> </body>
<script type="text/javascript">
</script> </html> $(document).ready(function() { //1 获取 username的value属性的值
// alert($("[name='username']").val());
//2 设置 username的默认值为"许多多"
$("[name='username']").val("许多多");
//3通过html获取div标签体的内容
// alert($("div").html());
//4通过html设置div标签体的内容
// $("div").html("已满18,请戴眼镜...");
//5通过text获取div标签体的内容
// alert($("div").text());
//6通过text设置div标签体的内容
// $("div").text("已满18,请戴眼镜!!!!");
//7 两者设置值的区别
//html在设置内容时,可以解析html标签
$("div").html("<font color='red'>已满18,请戴眼镜...</font>");
//text在设置内容时,原样设置
// $("div").text("<font color='red'>已满18,请戴眼镜...</font>");
//8 两者获取值的区别
//html在获取时,原样获取(不会解析任何标签)
// alert($("div").html());
//text在获取时,会解析标签,仅仅获取文本内容
// alert($("div").text()); }); $(document).ready(function() { //1 获取 username的value属性的值
// alert($("[name='username']").val());
//2 设置 username的默认值为"许多多"
$("[name='username']").val("许多多");
//3通过html获取div标签体的内容
// alert($("div").html());
//4通过html设置div标签体的内容
// $("div").html("已满18,请戴眼镜...");
//5通过text获取div标签体的内容
// alert($("div").text());
//6通过text设置div标签体的内容
// $("div").text("已满18,请戴眼镜!!!!");
//7 两者设置值的区别
//html在设置内容时,可以解析html标签
$("div").html("<font color='red'>已满18,请戴眼镜...</font>");
//text在设置内容时,原样设置
// $("div").text("<font color='red'>已满18,请戴眼镜...</font>");
//8 两者获取值的区别
//html在获取时,原样获取(不会解析任何标签)
// alert($("div").html());
//text在获取时,会解析标签,仅仅获取文本内容
// alert($("div").text()); }); - 外部插入:
- after a.after(c) 在a的后面插入c
- before a.before(c) 在a的前面插入c
- insertAfter a.insertAfter(c) 将a插入到c的后面
- insertBefore a.insertBefore(c) 将a插入到c的前面 案例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head>
<title>02_外部插入节点.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//0.获取要操作的对象
var $city = $("#city");
var $p2 = $("#p2");
//1.在 p2 的后面插入 city
//在指定的标签的后面进行插入
// $p2.after($city);
// $city.insertAfter($p2);
//2.在 p2 的前面插入 city
//在指定的标签的前面进行插入
// $p2.before($city);
$city.insertBefore($p2);
});
</script>
</head> <body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul> <p id="p3">I would like to say: p3</p> <p id="p2">I would like to say: p2</p> <p id="p1">I would like to say: p1</p> </body>
<script type="text/javascript">
</script> </html> - 删除:
- empty():清空元素 (清空所有的子标签)
- remove():移除 (自杀) 删除案例: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head>
<title>03_删除节点.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//0.获取要 操作的对象
var $ul = $("#city");
//1.清空ul
// $ul.empty();
//2.移除ul
$ul.remove();
});
</script>
</head> <body>
<ul id="city">
<li id="bj" name="beijing">北京
<p>海淀区</p>
</li>
<li id="tj" name="tianjin">天津
<p>河西区</p>
</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<p class="hello">Hello</p> how are
<p>you?</p>
</body>
<script type="text/javascript">
</script> </html> - jQuery的事件总结
- 事件切换(知道)
- hover:相当于给一个元素添加了mouseover和mouseout两个事件
"jq元素对象.hover(function(){
//第一个函数相当于mouseover
},function(){
//第二个函数相当于mouseout
});"
- toggle:相当于给一个元素添加了单击事件,轮流执行多个函数(兼容性有问题jquery1.8版本之前支持)
"jq元素.toggle(function(){},function(){}...);" 案例: <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<!--<script type="text/javascript" src="../js/jquery-1.8.3.min.js" ></script>-->
<script type="text/javascript">
$(function(){
$("#divId").hover(function(){
//相当于mouseover
$(this).html("mouseover事件被触发了");
},function(){
//相当于mouseout
$(this).html("mouseout事件被触发了....");
}); $("#bId").toggle(function(){
alert(1);
},function(){
alert(2);
},function(){
alert(3);
}); });
</script>
</head> <body>
<input type="button" id="bId" value="点击查看" /><br>
<div id="divId" style="border:1px solid red;height:100px;width:100px">事件切换</div>
</body> </html> - 常见事件
- submit 表单提交事件★
- focus 获得焦点事件 ★
- blur 失去焦点 ★
- change 改变 ★
- click 单击 ★
- dblclick 双击
- keydown 键盘按下
- keyup 键盘弹起
- keypress 键盘按下并弹起
- mousedown 鼠标按下
- mouseup 鼠标弹起
- mousemove 鼠标移入
- mouseout 鼠标移出
- mouseover 鼠标悬停
- 事件和事件源的绑定 ★
- jq对象.事件名称(function(){});
- validate插件
"插件:指的就是别人已经写好的功能代码,直接引入使用即可.
"
- 作用:对表单进行校验
- 下载:
"下载路径:http://jqueryvalidation.org/files/jquery-validation-1.15.0.zip"
- 使用方式:
- 1.导入jquery.js
"validate是基于jquery写的,所以要先导入jquery的js文件"
- 2.再导入validate.js
"想要使用别人的插件就必须的导入人家已经写好的js文件(插件)"
- 3.在页面加载成功后,要确定对页面上的哪个表单进行校验
" $(function(){
表单对象.validate();
});"
- 4.validate使用格式:
" 表单对象.validate({
rules:{}, //校验规则
messages:{} //提示信息
});"
- 5.常见的校验规则
- 校验器名称 描述 值
- required: 必须填写 true|false
- number: 只能输入数字 true|false
- min: 最小值 数字
- max: 最大值 数字
- range: 取值范围 [min,max]
- minlength: 最小长度 数字
- maxlength: 最大长度 数字
- rangelength: 长度范围 [minlength,maxlength]
- equalTo: 和谁相等 通过jQuery选择器选中指定元素对象
- email: 校验邮箱 "email"
- 6.rules校验器语法:
- 方式1:单一校验
"name属性的值:"校验器""
- 方式2:多个校验
" name属性的值:{
校验器1:值1,
校验器2:值2
}"
- 7.messages自定义提示信息语法:
- 方式1:
"name属性的值:"提示信息""
- 方式2:
" name属性的值:{
校验器1:"提示信息1",
校验器2:"提示信息2"
}" <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<!--1.导入jq的js文件-->
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<!--2.导入validate的js文件-->
<script type="text/javascript" src="../js/jquery.validate.js" ></script>
<script type="text/javascript" src="../js/messages_zh.js" ></script>
<script>
/*3.在页面加载成功之后,锁定要校验的表单对象*/
$(function(){
//锁定要校验的表单对象,调用validate方法
$("#formId").validate({
rules:{
//单一校验规则
// username:"required",
// //多个校验规则
// password:{
// required:true,
// number:true
// },
// repassword:{
// required:true,
// number:true,
// equalTo:"[name='password']"
// },
// zuixiaozhi:{
// required:true,
// min:180
// },
// shuzhiqujian:{
// required:true,
// range:[18,26]
// }
card:{
required:true,
cardLength:true
}
}, //校验规则
messages:{
// username:"<font color='red'>用户名不可为空</font>",
// password:{
// required:"密码不可为空",
// number:"密码只能为数字"
// },
// zuixiaozhi:{
// min:"请输入不小于{0}的值啊...."
// },
// shuzhiqujian:{
// range:"请输入年龄在{0}到{1}之间的年龄"
// }
card:{
cardLength:"请输入16或18位的数字"
}
} //提示信息
});
}); //编写自定义校验器
$.validator.addMethod("cardLength",function(val,ele,par){
if(par){
if(val.length==||val.length==){
return true;
}
return false;
}else{
return true;
} },"输入的不合法"); </script>
</head> <body>
<form id="formId" action="">
必填：<input type="text" name="username" /> <br/> 必填数字：
<input type="text" name="password" /> <br /> 必填重复：
<input type="text" name="repassword" /> <br /> 最小值：
<input type="text" name="zuixiaozhi" /> <br /> 区间：
<input type="text" name="shuzhiqujian" /> <br />
身份证长度:<input type="text" name="card" /> <br />
<input type="submit" value="提交" />
</form>
</body>
</html> - 自定义校验器
- 格式:
- $.validator.addMethod(name,function(value,element,params){},"message");
- 参数说明:
- name:校验器的名称,唯一
- function:校验规则
- value:用户输入的值
- element:要校验的dom对象
- params:校验器的值
- message:当不满足校验规则时的提示信息
- 扩展:
- 筛选-查找;
- children(["选择器"]): 所有孩子
- parent(): 父母
- find("选择器"): 查找后代
- next(): 下个兄弟 +
- nextAll(): 所有的弟弟 ~
- prev(): 小哥哥
- prevAll(): 哥哥们
- siblings(): 兄弟们 - 筛选-过滤
- is("选择器"):判断是否满足 返回Boolean 查找案例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>-可见性过滤选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../js/assist.js" ></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(document).ready(function() {
//<input type="button" value=" 选择 id=two 所有子元素" id="b1" />
$("#b1").click(function(){
$("#two").children().css("background-color","#ff0");
});
//<input type="button" value=" 选择 id=two 子元素title=other 元素 " id="b2" />
$("#b2").click(function(){
// $("#two").children("[title=other]").css("background-color","#ff0");
$("#two").find("[title=other]").css("background-color","#ff0");
});
//<input type="button" value=" 选择 id=two 下一个兄弟" id="b3" />
$("#b3").click(function(){
$("#two").next().css("background-color","#ff0");
});
//<input type="button" value=" 选择 id=two 后面的所有兄弟" id="b4" />
$("#b4").click(function(){
$("#two").nextAll().css("background-color","#ff0");
});
//<input type="button" value=" 选择 id=two 上一个兄弟" id="b5" />
$("#b5").click(function(){
$("#two").prev().css("background-color","#ff0");
});
//<input type="button" value=" 选择 id=two 前面的所有兄弟" id="b6" />
$("#b6").click(function(){
$("#two").prevAll().css("background-color","#ff0");
});
//<input type="button" value=" 选择 id=two 所有兄弟" id="b7" />
$("#b7").click(function(){
$("#two").siblings().css("background-color","#ff0");
});
//<input type="button" value=" 选择 id=two 父元素" id="b8" />
$("#b8").click(function(){
$("#two").parent().css("background-color","#ff0");
});
});
</script>
</head> <body>
<h3>可见性过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label>
<br/><br/>
<input type="button" value=" 选择 id=two 所有子元素" id="b1" />
<input type="button" value=" 选择 id=two 子元素title=other 元素 " id="b2" />
<input type="button" value=" 选择 id=two 下一个兄弟" id="b3" />
<input type="button" value=" 选择 id=two 后面的所有兄弟" id="b4" />
<input type="button" value=" 选择 id=two 上一个兄弟" id="b5" />
<input type="button" value=" 选择 id=two 前面的所有兄弟" id="b6" />
<input type="button" value=" 选择 id=two 所有兄弟" id="b7" />
<input type="button" value=" 选择 id=two 父元素" id="b8" />
<br /><br /> <!--文本隐藏域-->
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4"> <div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div> <div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div> <div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <span id="mover">正在执行动画的span元素.</span>
</body> </html> 过滤案例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>-可见性过滤选择器.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#b6").click(function(){
//判断样式为hide的div 下一个兄弟是否是span
var flag = $("div:hidden").next().is("span");
alert(flag);
});
});
</script>
</head> <body>
<h3>可见性过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label>
<br/><br/>
<input type="button" value=" 判断样式为hide的div 下一个兄弟是否是span" id="b6" />
<br /><br />
<!--文本隐藏域-->
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4"> <div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div> <div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div> <div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div> <div style="display:none;" class="none">style的display为"none"的div</div> <div class="hide">class为"hide"的div</div> <span id="mover">正在执行动画的span元素.</span>
</body> </html> 用户分组案例: <!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
</script> <style type="text/css">
div * {
display: block;
width: 200px;
}
div span {
background-color: #0f0;
}
</style>
<script>
$(function(){
//给span派发单击事件
$("span").click(function(){
//将span后面的a标签显示或隐藏
$(this).nextAll().toggle();
$(this).parent().siblings().find("a").hide();
});
});
</script>
</head> <body> <div>
<span>三国好友</span>
<a>曹操</a>
<a>刘备</a>
<a>周瑜</a>
</div>
<div>
<span>笑傲好友</span>
<a>东方不败</a>
<a>向问天</a>
<a>任我行</a>
</div>
<div>
<span>水浒好友</span>
<a>行者武松</a>
<a>豹子头</a>
<a>急先锋</a>
</div> </body> </html> 省市联动案例: <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script>
// 定义二维数组:
var arr = new Array();
arr[] = new Array("石家庄", "邯郸", "保定", "秦皇岛");
arr[] = new Array("郑州市", "洛阳市", "安阳市", "南阳市");
arr[] = new Array("沈阳市", "锦州市", "大连市", "铁岭市");
arr[] = new Array("长春市", "吉林市", "四平市", "通化市");
</script>
<script src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function() {
/* 步骤分析:
1.确定事件(改变事件)
给省份的下拉选添加改变事件
2.编写改变事件函数
//a.获取省份的value的值
//b.获取所对应的市数组
//c.获取市的下拉选对象
//d.遍历市数组,将每一个市拼成option插入到市的下拉选中*/
$("[name=pro]").change(function(){
//a.获取省份的value的值
// alert(this.value);
//b.获取所对应的市数组
var cityArr = arr[this.value];
// alert(cityArr);
//c.获取市的下拉选对象
var $cityObj = $("#city");
//初始化
$cityObj.html("<option>=请选择=</option>");
//d.遍历市数组,将每一个市拼成option插入到市的下拉选中
$.each(cityArr, function() {
// $cityObj.append("<option>"+this+"</option>");
$("<option>"+this+"</option>").appendTo($cityObj);
});
});
});
</script>
</head> <body>
<form action="#" method="get">
<input type="hidden" name="id" value="" /> 姓名:
<input name="username" value="xuduoduo" /><br> 密码:
<input type="password" name="password" value="" disabled="disabled"><br> 性别:
<input type="radio" name="sex" value="" checked="checked">男
<input type="radio" name="sex" value="">女
<br> 爱好:
<input type="checkbox" name="hobby" value="eat">吃
<input type="checkbox" name="hobby" value="drink" checked="checked">喝
<input type="checkbox" name="hobby" value="sleep" checked="checked">睡
<br> 头像:
<input type="file" name="photo"><br> 籍贯:
<select name="pro">
<option>--请选择--</option>
<option value="">河北</option>
<option value="">河南</option>
<option value="">辽宁</option>
<option value="">吉林</option>
</select>省
<select id="city">
<option>-请选择-</option>
</select>市
<br> 自我介绍:
<textarea name="intr" cols="" rows="">good!</textarea>
<br>
<input type="submit" value="保存" />
<input type="reset" />
<input type="button" value="普通按钮" />
</form>
</body> </html>
<!-- --> 左右选中案例: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head>
<title>左右选中.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
input[type='button'] {
width: 50px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
/* 步骤分析:
1.确定事件(单击事件)
给按钮派发单击事件
2.编写函数
//a.将左边选中的第一个插入到右边*/
$("#toRight1").click(function(){
//a.将左边选中的第一个插入到右边
$("#left option:selected:first").appendTo($("#right"));
}); $("#toRight2").click(function(){
//a.将左边选中的插入到右边
$("#left option:selected").appendTo($("#right"));
}); $("#toRight3").click(function(){
//a.将左边选中的插入到右边
$("#left option").appendTo($("#right"));
});
});
</script>
</head> <body>
<table>
<tr>
<td>
<select id="left" multiple="true" style="width:100px" size="">
<option>環</option>
<option>芈</option>
<option>琅</option>
<option>琊</option>
<option>爨</option>
<option>甄</option>
<option>槑</option>
<option>夔</option>
</select>
</td>
<td>
<input type="button" value=">" id="toRight1"><br>
<input type="button" value=">>" id="toRight2"><br>
<input type="button" value=">>>" id="toRight3"><br><br>
<input type="button" value="<" id="toLeft1"><br>
<input type="button" value="<<" id="toLeft2"><br>
<input type="button" value="<<<" id="toLeft3">
</td>
<td>
<select id="right" multiple="multiple" style="width:100px" size=""> </select>
</td>
</tr>
</table>
</body> </html> 表单效验案例: <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="../js/jquery.validate.js" ></script>
<script type="text/javascript" src="../js/messages_zh.js" ></script>
<script>
$(function(){
$("#formid").validate({
rules:{
username:{
required:true
},
email:{
required:true,
email:"email"
},
sex:{
required:true
}
},
messages:{
username:{
required:"用户名不可为空"
}
}
});
});
</script>
</head> <body>
<form action="#" method="get" id="formid">
<table width="60%" height="60%" align="center" bgcolor="#ffffff">
<tr>
<td colspan="">会员注册USER REGISTER</td>
</tr>
<tr>
<td width="20%">用户名:</td>
<td width="80%"><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="repassword" id="repassword"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="男"> 男
<input type="radio" name="sex" value="女" />女
<label for="sex" class="error"></label>
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="date" name="birthday">
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="checkcode">
</td>
</tr>
<tr>
<td colspan="">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</body>
</html>
javaWeb核心技术第五篇之jQuery的更多相关文章
- 第十五篇：jQuery
本篇内容 简介 使用 一. 简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 很容易学习. jQuery 库可以通过一行简 ...
- javaWeb核心技术第四篇之Javascript第二篇事件和正则表达式
- 事件 - 表单提交(掌握) "onsubmit" - 单击事件(掌握) "onclick" - 页面加载成功事件(掌握) "onload" ...
- javaWeb核心技术第十三篇之Ajax
Js--ajax--原理解释 概述:异步刷新网页,不会刷新整个页面. Get原理: <%@ page language="java" contentType="te ...
- javaWeb核心技术第十一篇之Listener
监听器:所谓的监听器是指对整个WEB环境的监听,当被监视的对象发生改变时,立即调用相应的方法进行处理. 监听术语: 事件源:被监听的对象. 监听器对象:监听事件源的对象 注册或绑定:1和2结合的过程 ...
- javaWeb核心技术第六篇之BootStrap
概述: Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目. 作用: 开发响应式的页面 响应式:就是一个网站能够兼容多个终端 节约开发 ...
- java核心技术第五篇之事务和MVC模式
第一部分:事务1.事务的简介: 1.1 在一组操作中(比如增加操作,修改操作),只有增加和修改操作都成功之后,这两个操作才能真正的成功. ,如果这两个操作中,有一个失败了,这两个操作都失败了. 1.2 ...
- javaweb回顾第五篇浅谈会话
1:什么是会话 通俗来说就是客户和服务器的一次私密谈话,客户发送请求以后服务器能够识别请求是来自同一个客户,他们是1对1的关系. 了解会话以后我们就要去考虑如何去实现这些问题下面一一进行解析 2:会话 ...
- javaWeb核心技术第十篇之Filter
Web中有三大组件(需要配置web.xml) servlet:服务器端的小程序. Filter(过滤器):运行在服务器,对请求的资源进行过滤,对响应进行包装. 经典案例: 自动登录,网站全局编码,非法 ...
- javaWeb核心技术第八篇之Cookie和Session
会话技术: 会话是什么? 浏览器和服务器交互,浏览器打开网页访问服务器,会话开始,正常交互. 浏览器关闭,会话结束. 会话能干什么? 会话可以共享数据. Cookie和session将数据保存在不同的 ...
随机推荐
- CURL命令学习三
-I 只获取请求头 -k --insecure 每次SSL连接curl都需要验证是否安全.-k参数表示如果不安全也可以继续操作. -4 --ipv4 告诉curl只使用ipv4地址 -6 --ipv6 ...
- JS---封装缓动（变速）动画函数---增加任意多个属性&增加回调函数
封装缓动(变速)动画函数---增加任意多个属性&增加回调函数 回掉函数fn,在所有元素到达目的位置后,判断是否传入一个函数,有就调用 if(fn){fn()}; 这样一次点击,产生多个动画 & ...
- QT--TCP网络编程(客户端/服务器)
QT -----TCP网络编程 1.主要流程 1.客户端 创建QTcpSocket对象 连接到服务器 --connectToHost() 发送数据 ---write() 读取数据 ---readA ...
- mysql多字段内容并到单字段中的操作
; SELECT 序号, ryxm `人员姓名`, cylb `成员类别`, gzdw `工作单位`, zc `职称`, GROUP_CONCAT(zzqmc) AS `著作权名称`--多字段合并到一 ...
- python数据挖掘第三篇-垃圾短信文本分类
数据挖掘第三篇-文本分类 文本分类总体上包括8个步骤.数据探索分析->数据抽取->文本预处理->分词->去除停用词->文本向量化表示->分类器->模型评估.重 ...
- Leetcode327: Count of Range Sum 范围和个数问题
###问题描述 给定一个整数数组,返回range sum 落在给定区间[lower, upper] (包含lower和upper)的个数.range sum S(i, j) 表示数组中第i 个元素到j ...
- Using the Security System 使用安全系统
In this lesson, you will learn how to use a Security System in the application. When you use this sy ...
- 【Beta阶段】第十一周Scrum会议
[Beta阶段]第十一周Scrum会议 本次会议为第十一周第一次Scrum Meeting,会议对上周工作进行了总结,并对工作成果予以了肯定. 会议时间为2019.11.28.会议地点为中国海洋大学北 ...
- Web项目配置https
在java安装目录下bin目录下keytool工具 keytool -genkey -storetype PKCS12 -keysize 2048 -alias tomcat -keyalg RSA ...
- [读论文]Shading-aware multi view stereo
如何实现refine的? 几何误差和阴影误差如何加到一起? 为了解决什么问题? 弱纹理或无纹理:单纯的多视图立体算法在物体表面弱纹理或者无纹理区域重建完整度不够高,精度也不够高,因此结合阴影恢复形状来 ...