JQuery（下）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

26、jQuery 中的 DOM 操作

）DOM(Document Object Model—文档对象模型)：一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组件

）DOM 操作的分类:

DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML

HTML DOM: 使用 JavaScript 和 DOM 为 HTML 文件编写脚本时, 有许多专属于 HTML-DOM 的属性

CSS-DOM:针对于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于获取和设置 style 对象的各种属性

26、内部插入节点

（1）append(content) :向每个匹配的元素的内部的结尾处追加内容

（2） appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处

（3） prepend(content):向每个匹配的元素的内部的开始处插入内容

（4） prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处

下拉框应用

<html>

<head>

<title>无标题文档</title>

<!--

BODY

{

font-family:Courier;;

font-size: 12px;

margin:0px 0px 0px 0px;

overflow-x:no;

overflow-y:no;

background-color: #B8D3F4;

}

{

font-size:12px;

}

.default_input

{

border:1px solid #666666;

height:18px;

font-size:12px;

}

.default_input2

{

border:1px solid #666666;

height:18px;

font-size:12px;

}

.nowrite_input

{

border:1px solid #849EB5;

height:18px;

font-size:12px;

background-color:#EBEAE7;

color: #9E9A9E;

}

.default_list

{

font-size:12px;

border:1px solid #849EB5;

}

.default_textarea

{

font-size:12px;

border:1px solid #849EB5;

}

.nowrite_textarea

{

border:1px solid #849EB5;

font-size:12px;

background-color:#EBEAE7;

color: #9E9A9E;

}

.wordtd5 {

font-size: 12px;

text-align: center;

vertical-align:top;

padding-top: 6px;

padding-right: 5px;

padding-bottom: 3px;

padding-left: 5px;

background-color: #b8c4f4;

}

.wordtd {

font-size: 12px;

text-align: left;

vertical-align:top;

padding-top: 6px;

padding-right: 5px;

padding-bottom: 3px;

padding-left: 5px;

background-color: #b8c4f4;

}

.wordtd_1 {

font-size: 12px;

vertical-align:top;

padding-top: 6px;

padding-right: 5px;

padding-bottom: 3px;

padding-left: 5px;

background-color: #516CD6;

color:#fff;

}

.wordtd_2{

font-size: 12px;

text-align: right;

vertical-align:top;

padding-top: 6px;

padding-right: 5px;

padding-bottom: 3px;

padding-left: 5px;

background-color: #64BDF9;

}

.wordtd_3{

font-size: 12px;

text-align: right;

vertical-align:top;

padding-top: 6px;

padding-right: 5px;

padding-bottom: 3px;

padding-left: 5px;

background-color: #F1DD34;

}

.inputtd

{

font-size:12px;

vertical-align:top;

padding-top: 3px;

padding-right: 3px;

padding-bottom: 3px;

padding-left: 3px;

}

.inputtd2

{

text-align: center;

font-size:12px;

vertical-align:top;

padding-top: 3px;

padding-right: 3px;

padding-bottom: 3px;

padding-left: 3px;

}

.tablebg

{

font-size:12px;

}

.tb{

border-collapse: collapse;

border: 1px outset #999999;

background-color: #FFFFFF;

}

.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}

.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}

.td4{background-color:#F6F6F6;line-height:20px;}

.td5{border:#000000 solid;

border-right-width:0px;

border-left-width:0px;

border-top-width:0px;

border-bottom-width:1px;}

.tb td{

font-size: 12px;

border: 2px groove #ffffff;

}

.noborder {

border: none;

}

.button {

border: 1px ridge #ffffff;

line-height:18px;

height: 20px;

width: 45px;

padding-top: 0px;

background:#CBDAF7;

color:#000000;

font-size: 9pt;

font-family:Courier;;

}

.textarea {

font-family: Arial, Helvetica, sans-serif, "??";

font-size: 9pt;

color: #000000;

border-bottom-width: 1px;

border-top-style: none;

border-right-style: none;

border-bottom-style: solid;

border-left-style: none;

border-bottom-color: #000000;

background-color:transparent;

text-align: left

}

-->

</style></head>

<body>

<tr>

</select>

</td>

</td>

</select>

</td>

</tr>

</table>

</div>

</body>

//<input name="add" id="add" type="button" class="button" value="-->" />

$("#add").click(function(){

$("#first>option:selected").appendTo( $("#second") );

});

//<input name="add_all" id="add_all" type="button" class="button" value="==>" />

$("#add_all").click(function(){

$("#first>option").appendTo( $("#second") );

});

//<input name="remove" id="remove" type="button" class="button" value="<--" />

$("#remove").click(function(){

$("#second>option:selected").appendTo( $("#first") );

});

//<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />

$("#remove_all").click(function(){

$("#second>option").appendTo( $("#first") );

});

//双击

//左边双击

$("#first").dblclick(function(){

$("#first>option:selected").appendTo( $("#second") );

});

//右边双击

$("#second").dblclick(function(){

$("#second>option:selected").appendTo( $("#first") );

});

</script>

</html>

28、外部插入节点

）after(content) :在每个匹配的元素之后插入内容

）before(content):在每个匹配的元素之前插入内容

）insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面

）insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面

）以上方法不但能将新创建的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动.

29、查找节点

查找节点:

查找属性节点: 通过 jQuery 选择器完成.

查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值

30、创建节点

）创建节点: 使用 jQuery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回.

）注意:

动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中;

当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个<p>元素, 可以使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“</P>”)或$(“p”)

（3）创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建

31、创建新节点案例

在该节点下添加新的节点

32、删除节点

）remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.

）empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点).

33、使用 JQuery 实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

</head>

<body>

添加用户:<br><br>

姓名: <input type="text" name="name" id="name"/>

email: <input type="text" name="email" id="email" />

电话: <input type="text" name="tel" id="tel" /><br><br>

<hr>

<tbody>

<tr>

<th>email</th>

</tr>

<tr>

<td><a href="deleteEmp?id=Tom">Delete</a></td>

</tr>

<tr>

<td>Jerry</td>

<td>jerry@sohu.com</td>

<td><a href="deleteEmp?id=Jerry">Delete</a></td>

</tr>

</tbody>

</table>

</center>

</body>

//<button id="addUser">提交</button>

$("#addUser").click(function(){

//姓名: <input type="text" name="name" id="name"/>

//email: <input type="text" name="email" id="email" />

//电话: <input type="text" name="tel" id="tel" /><br><br>

//获取用户输入的信息

var $name = $("#name").val();

var $email = $("#email").val();

var $tel = $("#tel").val();

//alert($name);

//---------------------------

//创建tr td

//<td>Jerry</td>

//<td>jerry@sohu.com</td>

//<td>8000</td>

//<td><a href="deleteEmp?id=Jerry">Delete</a></td>

var $tdName = $("<td></td>")

$tdName.text($name);

var $tdEmail = $("<td></td>")

$tdEmail.text($email);

var $tdTel = $("<td></td>");

$tdTel.text($tel);

var $tdDelete = $("<td></td>");

var $a = $("<a></a>");

$a.attr("href","deleteEmp?id="+$tdName);

$a.text("Delete");

$a.click(function(){

//调用删除tr的方法

return deleteTr($a);

});

$a.appendTo( $tdDelete );

//创建TR

//<tr>

//<td>Jerry</td>

//<td>jerry@sohu.com</td>

//<td>8000</td>

//<td><a href="deleteEmp?id=Jerry">Delete</a></td>

//</tr>

var $tr = $("<tr></tr>");

$tr.append($tdName);

$tr.append($tdEmail);

$tr.append($tdTel);

$tr.append($tdDelete);

//将tr 添加到表格中

$("tbody").append($tr);

});

//调用删除tr的方法

function deleteTr($a){

//<tr>

//<td>Jerry</td>

//<td>jerry@sohu.com</td>

//<td>8000</td>

//<td><a href="deleteEmp?id=Jerry">Delete</a></td>

//</tr>

).text();

//alert($deleteName);

var flag = confirm("您确定要删除 [ "+ $deleteName +" ]吗?");

//alert(flag);

if(flag){

//删除tr

$a.parent().parent().remove();

}

return false;

}

</script>

</html>

34、复制节点

）clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.

）clone(true): 复制元素的同时也复制元素中的的事件

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

alert("点击按钮");

});

//克隆节点，不克隆事件

$("button").clone().appendTo("p");

//克隆节点，克隆事件

$("button").clone(true).appendTo("p");

35、替换节点

）replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素

）replaceAll(): 颠倒了的 replaceWith() 方法.

）注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失

//<p>段落</p>

//方式一

$("p").replaceWith("<button>登陆</button>");

//方式二

$("<button>登陆</button>").replaceAll("p");

36、属性操作

）attr(): 获取属性和设置属性

当为该方法传递一个参数时, 即为某元素的获取指定属性

当为该方法传递两个参数时, 即为某元素设置指定属性的值

）jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等.

）removeAttr(“属性名”): 删除指定元素的指定属性

$(“div”).html(“<p>奥运接受了</p>");

$(“div”).html();

37、多选框应用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

请选择您的爱好!

<br><input type="checkbox" id="checkedAll_2"/>全选/全不选

<br/>

<input type="checkbox" name="items" checked="checked" value="足球"/>足球

<input type="checkbox" name="items" value="篮球"/>篮球

<input type="checkbox" name="items" value="游泳"/>游泳

<input type="checkbox" name="items" value="唱歌"/>唱歌

<br/>

</form>

</body>

//<input type="button" id="CheckedAll" value="全选"/>

$("#CheckedAll").click(function(){

$("input[name='items']").each(function(index, domEle){

$(domEle).attr("checked","checked");//attr("checked",true)

});

//<input type="button" id="CheckedNo" value="全不选"/>

$("#CheckedNo").click(function(){

$("input[name='items']").each(function(index, domEle){

$(domEle).attr("checked", null);//attr("checked",false)

});

//<input type="button" id="CheckedRev" value="反选"/>

$("#CheckedRev").click(function(){

$("input[name='items']").each(function(index, domEle){

// $(domEle).attr(checked);

// domEle.checked

$(domEle).attr("checked", !domEle.checked);

});

//<input type="checkbox" id="checkedAll_2"/>全选/全不选

$("#checkedAll_2").click(function(){

$("input[name='items']").each(function(index, domEle){

//alert($("#checkedAll_2").attr("checked"));

$(domEle).attr("checked", $("#checkedAll_2").attr("checked"));

// $(domEle).attr("checked", this.attr("checked"));

});

</script>

</html>

38、样式操作

）获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.

）追加样式: addClass()

）移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class

）切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.

）判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false

39、设置和获取 HTML, 文本和值

）读取和设置某个元素中的 HTML 内容: html(“<p></p>”) . 该方法可以用于 XHTML, 但不能用于 XML 文档

）读取和设置某个元素中的文本内容: text(). 该方法既可以用于 XHTML 也可以用于 XML 文档.

）读取和设置某个元素中的值: val() --- 该方法类似 JavaScript 中的 value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框, 则返回一个包含所有选择值的数组

）即便是一组 radio, 利用 val() 方法为其赋值时, 也要使用 js 数组来为其赋值

40、val()练习_1

<!DOCTYPE HTML>

<html>

<head>

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

</head>

<body>

<!--

-->

<br>

</body>

//window.onload(function(){

//});

// $(window).load(function(){

// });

//$().ready == $(document).ready(function){}

//$().ready(function(){

// //获取焦点

// $("#b1").focus(function(){

// if($(this).val()==this.defaultValue){

// $(this).val("");

// }

// })

// //失去焦点

// $("#b1").blur(function(){

// //alert("1:"+this.value);//当前输入的值

// //alert("2:"+this.defaultValue);//页面加载时的初始值

// if($.trim($(this).val())==""){

// $(this).val(this.defaultValue);

// }

// })

//})

</script>

</html>

41、练习5 val()练习_2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<br/>

</select>

</select>

<br/>

<input type="checkbox" name="c" value="check1"/> 复选1

<input type="checkbox" name="c" value="check2"/> 复选2

<input type="checkbox" name="c" value="check3"/> 复选3

<input type="checkbox" name="c" value="check4"/> 复选4

<br/>

<input type="radio" name="r" value="radio1"/> 单选1

<input type="radio" name="r" value="radio2"/> 单选2

<input type="radio" name="r" value="radio3"/> 单选3

</body>

//<input type="button" value="使单选下拉框的'2号'被选中"/><br>

/**

* <select id="one">

</select>

$("input[type='button']:eq(0)").click(function(){

// alert( $("#one>option:eq(1)").text() );

// $("#one>option:eq(1)").attr("selected","selected");

$("#one").val("2号");

});

//<input type="button" value="使多选下拉框选中的'2号'和'5号'被选中"/><br>

$("input[type='button']:eq(1)").click(function(){

/**

</select>

// $("#many>option").each(function(index, domEle){

// $(domEle).removeAttr("selected");

// if(index ==1 || index == 4){

// $(domEle).attr("selected","selected");

// }

// });

$("#many").val(["2号","5号"]);

});

//<input type="button" value="使复选框的'复选2'和'复选4'被选中"/><br>

// <input type="checkbox" name="c" value="check1"/> 复选1

// <input type="checkbox" name="c" value="check2"/> 复选2

// <input type="checkbox" name="c" value="check3"/> 复选3

// <input type="checkbox" name="c" value="check4"/> 复选4

$("input[type='button']:eq(2)").click(function(){

$("input[type='checkbox']").val(["check2", "check4"]);

});

//<input type="button" value="使单选框的'单选2'被选中"/><br>

$("input[type='button']:eq(3)").click(function(){

$("input[type='radio']").val(["radio2"]);

});

//<input type="button" value="打印已经被选中的值"/><br>

$("input[type='button']:eq(4)").click(function(){

//下拉选

$("select>option").each(function(index, domEle){

if($(domEle).attr("selected")){

alert($(domEle).text());

}

});

//复选框和单选框

$("input:checked").each(function(index,domEle){

alert($(domEle).val());

})

//:checked

//[checked='checked']

});

</script>

</html>

42、常用的遍历节点方法

）取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.

）取得匹配元素后面紧邻的同辈元素的集合:next();

）取得匹配元素前面紧邻的同辈元素的集合:prev()

）取得匹配元素前后所有的同辈元素: siblings()

43、弹出层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>收缩展开效果</title>

</head>

<body>

</script>

<h1>收缩展开效果</h1>

1<br />

2<br />

3<br />

4<br />

5<br />

</div>

<br />

<h1>收缩展开效果</h1>

1<br />

2<br />

</div>

<h1>收缩展开效果</h1>

1<br />

2<br />

</div>

</body>

// $("h1").click(function(){

// //收缩展开效果

// $("h1").next().slideToggle("normal");

// });

$("h1").each(function(index, domEle){

$(domEle).click(function(){

//收缩展开效果

$(domEle).next().slideToggle("normal");

});

</script>

</html>

43、CSS-DOM 操作

）获取和设置元素的样式属性: css()

）获取和设置元素透明度: opacity 属性

注:IE6,IE7不支持此属性,请使用Firefox1.5,或Opera9浏览

opacity:0.1

）获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是 px. 如需要使用其他单位则需传递一个字符串, 例如 $(“p:first”).height(“2em”);

）获取元素在当前视窗中的相对位移: offset(). 其返回对象包含了两个属性: top, left. 该方法只对可见元素有效

）em是相对长度单位。相对于当前对象内文本的字体尺寸

44、jQuery 中的事件 -- 加载 DOM

在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.

45、crm项目中的权限控制

<html>

<head>

<!--

fieldset div {

float:left;

width:24%;

text-align:left;

line-height:25px;

}

td div {

float:left;

width:24%;

text-align:left;

line-height:25px;

}

-->

</style>

function goSelect(id){

var $menuModule = $("#"+id);

var value = $menuModule.val();

var list = value.split(",");

if(list[0]==list[1]){

//操作的是"客户管理"

if($menuModule.attr("checked")){

//* 当选中"客户管理"的时候，所有子元素都被选中

$("input[id^="+list[0]+"]:not([id$="+list[0]+"])").attr("checked","checked");

}else{

//* 当不选中"客户管理"的时候，所有子元素都不被选中

$("input[id^="+list[0]+"]:not([id$="+list[0]+"])").attr("checked",null);

}

}else{

//操作的是所有子元素

//* 当任意一个子元素被选中的时候，"客户管理"也被选中

if($menuModule.attr("checked")){

$("input[id^="+list[0]+"][id$="+list[0]+"]").attr("checked","checked");

}

//* 当所有子元素都不被选中的时候，"客户管理"也不被选中

var flag = false;

$("input[id^="+list[0]+"]:not([id$="+list[0]+"])").each(function(index,domEle){

if($(domEle).attr("checked")){

flag = true;

}

});

if(!flag){

$("input[id^="+list[0]+"][id$="+list[0]+"]").attr("checked",null);

}

</script>

</head>

<body>

<br/>

<button type='button' class='button' onMouseOver="this.className='button_over';" onMouseOut="this.className='button';"

onClick="SelectAllBox()">

<img src="./button/quanbuxz.png" border='0'

align='absmiddle'> 全部选中</button>

<button type='button' class='button' onMouseOver="this.className='button_over';" onMouseOut="this.className='button';"

onClick="UnSelectAllBox()">

<img src="./button/quanbubxz.png" border='0'

align='absmiddle'> 全部不选中</button>

<button type='button' class='button' onMouseOver="this.className='button_over';" onMouseOut="this.className='button';"

onClick="document.ActionForm.submit();">

<img src="./button/baocun.png" border='0'

align='absmiddle'> 保存</button>

<button type='button' class='button' onMouseOver="this.className='button_over';" onMouseOut="this.className='button';"

onClick="parent.close();">

<img src="./button/guanbi.png" border='0'

align='absmiddle'> 关闭</button>

</div>

<tr>

<td align="center" height="25"><span style="color:#FFFFFF; font-weight:bold">操作权限组：人力资源部权限组</span></td>

</tr>

</table>

<tr>

<td>

<legend><input type='checkbox' class='checkbox' name='menuModule' value='company,company'

id='company_company' onClick='goSelect(this.id)'

title="客户管理" >客户管理

</legend>

<div><input type='checkbox' class='checkbox' name='menuModule'

value='company,base'

id='company_base' onClick='goSelect(this.id)'

title='客户拜访'>客户拜访</div>

<div><input type='checkbox' class='checkbox' name='menuModule'

value='company,linkMan'

id='company_linkMan' onClick='goSelect(this.id)'

title='联系人列表' >联系人列表</div>

<div><input type='checkbox' class='checkbox' name='menuModule'

value='company,linkTouch'

id='company_linkTouch' onClick='goSelect(this.id)'

title='联系记录列表' >联系记录列表</div>

<div><input type='checkbox' class='checkbox' name='menuModule'

value='company,rule'

id='company_rule' onClick='goSelect(this.id)'

title='客户查重设置 ' >客户查重设置 </div>

</fieldset>

<legend><input type='checkbox' class='checkbox' name='menuModule' value='sys,sys'

id='sys_sys' onClick='goSelect(this.id)'

title="系统设置 "

>系统设置

</legend>

<div><input type='checkbox' class='checkbox' name='menuModule'

value='sys,group'

id='sys_group' onClick='goSelect(this.id)'

title='部门设置'

>部门设置</div>

<div><input type='checkbox' class='checkbox' name='menuModule'

value='sys,user'

id='sys_user' onClick='goSelect(this.id)'

title='人事管理' >人事管理</div>

<div><input type='checkbox' class='checkbox' name='menuModule'

value='sys,role'

id='sys_role' onClick='goSelect(this.id)'

title='操作权限组' >操作权限组</div>

<div><input type='checkbox' class='checkbox' name='menuModule'

value='sys,province'

id='sys_province' onClick='goSelect(this.id)'

title='省份资料' >省份资料</div>

<div><input type='checkbox' class='checkbox' name='menuModule'

value='sys,city'

id='sys_city' onClick='goSelect(this.id)'

title='城市资料' >城市资料</div>

<div><input type='checkbox' class='checkbox' name='menuModule'

value='sys,code'

id='sys_code' onClick='goSelect(this.id)'

title='编码规则' >编码规则</div>

</fieldset>

<legend><input type='checkbox' class='checkbox' name='menuModule' value='report,report'

id='report_report' onClick='goSelect(this.id)'

title="报表与分析" >报表与分析

</legend>

<div><input type='checkbox' class='checkbox' name='menuModule'

value='report,khflfx'

id='report_khflfx' onClick='goSelect(this.id)'

title='客户分类分析 ' >客户分类分析 </div>

<div><input type='checkbox' class='checkbox' name='menuModule'

value='report,khfx'

id='report_khfx' onClick='goSelect(this.id)'

title='客户分析 ' >客户分析 </div>

</fieldset>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

46、jquery表单验证

下载地址和Demo

http://jquery.bassistance.de/validate/jquery.validate.zip
首页： http://bassistance.de/jquery-plugins/jquery-plugin-validation/

jQuery validation 1.9 ---验证插件需要:jQuery 1.3.2 或 1.4.2版本

调用jquery.validate({});方法进行验证

$("#empForm").validate({

* //自定义验证规则

* //自定义提示信息

})

47、jquery自定义验证规则

自定义校验规则可以通过自定义检验函数的方式新增加校验规则

步骤如下：
  1. 在定义校验规则之前定义一个新的方法
  2. 在rules中指定某个域使用此校验规则
  3. 在messages中指定这个域使用此校验规则没有通过的提示

信息

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery validation plug-in - main demo</title>

$.validator.setDefaults({

submitHandler: function() { alert("submitted!"); }

});

$().ready(function() {

// validate the comment form when it is submitted

$("#commentForm").validate();

// validate signup form on keyup and submit

$("#signupForm").validate({

rules: {

firstname: "required",

lastname: "required",

username: {

required: true,

minlength: 2

password: {

required: true,

minlength: 5

confirm_password: {

required: true,

minlength: 5,

equalTo: "#password"

email: {

required: true,

email: true

topic: {

required: "#newsletter:checked",

minlength: 2

agree: "required"

messages: {

firstname: "Please enter your firstname",

lastname: "Please enter your lastname",

username: {

required: "Please enter a username",

minlength: "Your username must consist of at least 2 characters"

password: {

required: "Please provide a password",

minlength: "Your password must be at least 5 characters long"

confirm_password: {

required: "Please provide a password",

minlength: "Your password must be at least 5 characters long",

equalTo: "Please enter the same password as above"

email: "Please enter a valid email address",

agree: "Please accept our policy"

}

});

// propose username by combining first- and lastname

$("#username").focus(function() {

var firstname = $("#firstname").val();

var lastname = $("#lastname").val();

if(firstname && lastname && !this.value) {

this.value = firstname + "." + lastname;

}

});

//code to hide topic selection, disable for demo

var newsletter = $("#newsletter");

// newsletter topics are optional, hide at first

var inital = newsletter.is(":checked");

var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");

var topicInputs = topics.find("input").attr("disabled", !inital);

// show when newsletter is checked

newsletter.click(function() {

topics[this.checked ? "removeClass" : "addClass"]("gray");

topicInputs.attr("disabled", !this.checked);

});

</script>

#commentForm { width: 500px; }

#commentForm label { width: 250px; }

#commentForm label.error, #commentForm input.submit { margin-left: 253px; }

#signupForm { width: 670px; }

#signupForm label.error {

margin-left: 10px;

width: auto;

display: inline;

}

#newsletter_topics label.error {

display: none;

margin-left: 103px;

}

</style>

</head>

<body>

<h1 id="banner"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery Validation Plugin</a> Demo</h1>

<p>Default submitHandler is set to display an alert into of submitting the form</p>

<legend>Please provide your name, email address (won't be published) and a comment</legend>

<p>

<label for="cname">Name (required, at least 2 characters)</label>

<p>

<label for="cemail">E-Mail (required)</label>

</p>

<p>

<label for="curl">URL (optional)</label>

</p>

<p>

<label for="ccomment">Your comment (required)</label>

</p>

<p>

</p>

</fieldset>

</form>

<legend>Validating a complete form</legend>

<p>

<label for="firstname">Firstname</label>

</p>

<p>

<label for="lastname">Lastname</label>

</p>

<p>

<label for="username">Username</label>

</p>

<p>

<label for="password">Password</label>

</p>

<p>

<label for="confirm_password">Confirm password</label>

</p>

<p>

<label for="email">Email</label>

</p>

<p>

<label for="agree">Please agree to our policy</label>

</p>

<p>

<label for="newsletter">I'd like to receive the newsletter</label>

</p>

<legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend>

Marketflash

</label>

Latest fuzz

</label>

Mailing list digester

</label>

<label for="topic" class="error">Please select at least two topics you'd like to receive.</label>

</fieldset>

<p>

</p>

</fieldset>

</form>

<h3>Syntetic examples</h3>

<ul>

<li><a href="errorcontainer-demo.html">Error message containers in action</a></li>

<li><a href="custom-messages-metadata-demo.html">Custom Messages as Metadata</a></li>

<li><a href="radio-checkbox-select-demo.html">Radio and checkbox buttons and selects</a></li>

<li><a href="ajaxSubmit-intergration-demo.html">Integration with Form Plugin (AJAX submit)</a></li>

<li><a href="custom-methods-demo.html">Custom methods and message display.</a></li>

<li><a href="dynamic-totals.html">Dynamic forms</a></li>

<li><a href="themerollered.html">Forms styled with jQuery UI Themeroller</a></li>

</ul>

<h3>Real-world examples</h3>

<ul>

<li><a href="milk/">Remember The Milk signup form</a></li>

<li><a href="marketo/">Marketo signup form</a></li>

<li><a href="multipart/">Buy and Sell a House multipart form</a></li>

<li><a href="captcha/">Remote captcha validation</a></li>

</ul>

<h3>Testsuite</h3>

<ul>

<li><a href="../test/">Validation Testsuite</a></li>

</ul>

</div>

</script>

_uacct = "UA-2623402-1";

urchinTracker();

</script>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery validation plug-in - main demo</title>

$.validator.setDefaults({

submitHandler: function() { alert("submitted!"); }

});

$().ready(function() {

// validate the comment form when it is submitted

$("#commentForm").validate();

});

</script>

#commentForm { width: 500px; }

#commentForm label { width: 250px; }

#commentForm label.error, #commentForm input.submit { margin-left: 253px; }

#signupForm { width: 670px; }

#signupForm label.error {

margin-left: 10px;

width: auto;

display: inline;

}

#newsletter_topics label.error {

display: none;

margin-left: 103px;

}

</style>

</head>

<body>

<legend>Please provide your name, email address (won't be published) and a comment</legend>

<p>

<label for="cname">Name (required, at least 2 characters)</label>

<p>

<label for="cemail">E-Mail (required)</label>

</p>

<p>

<label for="curl">URL (optional)</label>

</p>

<p>

<label for="ccomment">Your comment (required)</label>

</p>

<p>

</p>

</fieldset>

</form>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery validation plug-in - main demo</title>

$.validator.setDefaults({

submitHandler: function() { alert("submitted!"); }

});

$().ready(function() {

// validate the comment form when it is submitted

// $("#commentForm").validate();

// validate signup form on keyup and submit

$("#signupForm").validate({

rules: {

firstname: "required",

lastname: "required",

username: {

required: true,

minlength: 2

password: {

required: true,

minlength: 5

confirm_password: {

required: true,

minlength: 5,

equalTo: "#password"

email: {

required: true,

email: true

topic: {

required: "#newsletter:checked",

minlength: 2

agree: "required"

messages: {

firstname: "Please enter your firstname",

lastname: "Please enter your lastname",

username: {

required: "Please enter a username",

minlength: "Your username must consist of at least 2 characters"

password: {

required: "Please provide a password",

minlength: "Your password must be at least 5 characters long"

confirm_password: {

required: "Please provide a password",

minlength: "Your password must be at least 5 characters long",

equalTo: "Please enter the same password as above"

email: "Please enter a valid email address",

agree: "Please accept our policy"

}

});

// propose username by combining first- and lastname

$("#username").focus(function() {

var firstname = $("#firstname").val();

var lastname = $("#lastname").val();

if(firstname && lastname && !this.value) {

this.value = firstname + "." + lastname;

}

});

//code to hide topic selection, disable for demo

var newsletter = $("#newsletter");

// newsletter topics are optional, hide at first

var inital = newsletter.is(":checked");

var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");

var topicInputs = topics.find("input").attr("disabled", !inital);

// show when newsletter is checked

newsletter.click(function() {

topics[this.checked ? "removeClass" : "addClass"]("gray");

topicInputs.attr("disabled", !this.checked);

});

</script>

#commentForm { width: 500px; }

#commentForm label { width: 250px; }

#commentForm label.error, #commentForm input.submit { margin-left: 253px; }

#signupForm { width: 670px; }

#signupForm label.error {

margin-left: 10px;

width: auto;

display: inline;

}

#newsletter_topics label.error {

display: none;

margin-left: 103px;

}

</style>

</head>

<body>

<legend>Validating a complete form</legend>

<p>

<label for="firstname">Firstname</label>

</p>

<p>

<label for="lastname">Lastname</label>

</p>

<p>

<label for="username">Username</label>

</p>

<p>

<label for="password">Password</label>

</p>

<p>

<label for="confirm_password">Confirm password</label>

</p>

<p>

<label for="email">Email</label>

</p>

<p>

<label for="agree">Please agree to our policy</label>

</p>

<p>

<label for="newsletter">I'd like to receive the newsletter</label>

</p>

<legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend>

Marketflash

</label>

Latest fuzz

</label>

Mailing list digester

</label>

<label for="topic" class="error">Please select at least two topics you'd like to receive.</label>

</fieldset>

<p>

</p>

</fieldset>

</form>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery validation plug-in - main demo</title>

$.validator.setDefaults({

submitHandler: function() { alert("submitted!"); }

});

$().ready(function() {

// validate the comment form when it is submitted

// $("#commentForm").validate();

// validate signup form on keyup and submit

/**

* 表单验证

* $("#signupForm").validate({key , value});

* 验证规则

* rules:{ key , value }

* key 页面元素中的name属性值

* value 指定的验证规则

* messages:{ key , value }

* key 页面元素中的name属性值 (与rules中key是同一个key)

* value 页面中提示的错误信息

$("#signupForm").validate({

rules: {

firstname: "required",

lastname: "required",

username: {

required: true,

minlength: 2

password: {

required: true,

minlength: 5

confirm_password: {

required: true,

minlength: 5,

equalTo: "#password"

email: {

required: true,

email: true

topic: {

required: "#newsletter:checked",

minlength: 2

agree: "required"

messages: {

firstname: "请输入姓",

lastname: "请输入名",

username: {

required: "请输入用户名",

minlength: "用户名的长度必须大于2位"

password: {

required: "Please provide a password",

minlength: "Your password must be at least 5 characters long"

confirm_password: {

required: "Please provide a password",

minlength: "Your password must be at least 5 characters long",

equalTo: "Please enter the same password as above"

email: "Please enter a valid email address",

agree: "Please accept our policy"

}

});

// propose username by combining first- and lastname

$("#username").focus(function() {

var firstname = $("#firstname").val();

var lastname = $("#lastname").val();

if(firstname && lastname && !this.value) {

this.value = firstname + "." + lastname;

}

});

//code to hide topic selection, disable for demo

var newsletter = $("#newsletter");

// newsletter topics are optional, hide at first

var inital = newsletter.is(":checked");

var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");

var topicInputs = topics.find("input").attr("disabled", !inital);

// show when newsletter is checked

newsletter.click(function() {

topics[this.checked ? "removeClass" : "addClass"]("gray");

topicInputs.attr("disabled", !this.checked);

});

</script>

#commentForm { width: 500px; }

#commentForm label { width: 250px; }

#commentForm label.error, #commentForm input.submit { margin-left: 253px; }

#signupForm { width: 670px; }

#signupForm label.error {

margin-left: 10px;

width: auto;

display: inline;

}

#newsletter_topics label.error {

display: none;

margin-left: 103px;

}

</style>

</head>

<body>

<legend>Validating a complete form</legend>

<p>

<label for="firstname">Firstname</label>

</p>

<p>

<label for="lastname">Lastname</label>

</p>

<p>

<label for="username">Username</label>

</p>

<p>

<label for="password">Password</label>

</p>

<p>

<label for="confirm_password">Confirm password</label>

</p>

<p>

<label for="email">Email</label>

</p>

<p>

<label for="agree">Please agree to our policy</label>

</p>

<p>

<label for="newsletter">I'd like to receive the newsletter</label>

</p>

<legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend>

Marketflash

</label>

Latest fuzz

</label>

Mailing list digester

</label>

<label for="topic" class="error">Please select at least two topics you'd like to receive.</label>

</fieldset>

<p>

</p>

</fieldset>

</form>

</body>

</html>

正文

相关阅读

Jquery删除图片和表单不一致，jquery删除div

Jquery停止冒泡，jquery 阻止冒泡行为

Jquery调用微信扫码，jquery怎么实现二维码扫描

Jquery添加新页面的方法，jquery怎么添加标签

前端修改Jquery代码，如何修改前端代码

Jquery中给元素设置值，jquery设置元素内容

Jquery刷新显示，jquery 刷新div

Jquery表单滚动，jquery div滚动条

目录[+]