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.0.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==16||val.length==18){
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>05-可见性过滤选择器.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>05-可见性过滤选择器.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(4);
arr[0] = new Array("石家庄", "邯郸", "保定", "秦皇岛");
arr[1] = new Array("郑州市", "洛阳市", "安阳市", "南阳市");
arr[2] = new Array("沈阳市", "锦州市", "大连市", "铁岭市");
arr[3] = 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="007" /> 姓名:
<input name="username" value="xuduoduo" /><br> 密码:
<input type="password" name="password" value="123" disabled="disabled"><br> 性别:
<input type="radio" name="sex" value="1" checked="checked">男
<input type="radio" name="sex" value="0">女
<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="0">河北</option>
<option value="1">河南</option>
<option value="2">辽宁</option>
<option value="3">吉林</option>
</select>省
<select id="city">
<option>-请选择-</option>
</select>市
<br> 自我介绍:
<textarea name="intr" cols="40" rows="4">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="10">
<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="10">
</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="3">会员注册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="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019年08月17日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读