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>

$(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>

</ul>

</body>

</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>

$(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>

<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>

</html>

- 删除:

- empty():清空元素 (清空所有的子标签)

- remove():移除 (自杀)

删除案例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

$(document).ready(function() {

//0.获取要操作的对象

var $ul = $("#city");

//1.清空ul

// $ul.empty();

//2.移除ul

$ul.remove();

});

</script>

</head>

<body>

<li id="bj" name="beijing">北京

</li>

<li id="tj" name="tianjin">天津

</li>

</ul>

<p class="hello">Hello</p> how are

</body>

</script>

</html>

- jQuery的事件总结

- 事件切换(知道)

- hover:相当于给一个元素添加了mouseover和mouseout两个事件

"jq元素对象.hover(function(){

//第一个函数相当于mouseover

},function(){

//第二个函数相当于mouseout

});"

- toggle:相当于给一个元素添加了单击事件,轮流执行多个函数(兼容性有问题jquery1.8版本之前支持)

"jq元素.toggle(function(){},function(){}...);"

案例:

<!DOCTYPE html>

<html>

<head>

$(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>

</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>

/*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>

必填：<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="card" /> <br />

</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">

<head>

<title>05-可见性过滤选择器.html</title>

$(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>

id为one,class为one的div

<div class="mini">class为mini</div>

</div>

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="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">

<head>

<title>05-可见性过滤选择器.html</title>

$(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>

id为one,class为one的div

<div class="mini">class为mini</div>

</div>

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="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>

<title>Insert title here</title>

</script>

div * {

display: block;

width: 200px;

}

div span {

background-color: #0f0;

}

</style>

$(function(){

//给span派发单击事件

$("span").click(function(){

//将span后面的a标签显示或隐藏

$(this).nextAll().toggle();

$(this).parent().siblings().find("a").hide();

});

</script>

</head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

</html>

省市联动案例:

<!DOCTYPE html>

<html>

<head>

// 定义二维数组:

var arr = new Array(4);

arr[0] = new Array("石家庄", "邯郸", "保定", "秦皇岛");

arr[1] = new Array("郑州市", "洛阳市", "安阳市", "南阳市");

arr[2] = new Array("沈阳市", "锦州市", "大连市", "铁岭市");

arr[3] = new Array("长春市", "吉林市", "四平市", "通化市");

</script>

$(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>

<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>省

</select>市

<br> 自我介绍:

<br>

</form>

</body>

</html>

<!--

-->

左右选中案例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<style>

input[type='button'] {

width: 50px;

}

</style>

$(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>

</td>

<td>

<input type="button" value=">" id="toRight1"><br>

<input type="button" value=">>" id="toRight2"><br>

<input type="button" value=">>>" id="toRight3"><br><br>

</td>

<td>

</select>

</td>

</tr>

</table>

</body>

</html>

表单效验案例:

<!DOCTYPE html>

<html>

<head>

$(function(){

$("#formid").validate({

rules:{

username:{

required:true

email:{

required:true,

email:"email"

sex:{

required:true

}

messages:{

username:{

required:"用户名不可为空"

}

});

</script>

</head>

<body>

<tr>

<td colspan="3">会员注册USER REGISTER</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>Email:</td>

</tr>

<tr>

</tr>

<tr>

<td>

<input type="radio" name="sex" value="男"> 男

<input type="radio" name="sex" value="女" />女

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,921评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,635评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,393评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,836评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,833评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,685评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,043评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,694评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,671评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,670评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,779评论 1赞 332
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,424评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,027评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,984评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,214评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,108评论 2赞 351
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,517评论 2赞 343

javaWeb核心技术第五篇之jQuery

推荐阅读更多精彩内容