自学JavaWeb第五天jQuery进阶

2022-10-09 21:16:11

第五讲jQuery进阶

一、jQuery特效

（一）知识点介绍

jQuery特效，是指jQuery封装了 JS 的一些用于处理元素的显示与隐藏的比较好看的效果，我们可以通过调用函数直接使用。常用的 jQuery 特效有以下几种：

基本效果：

方法名	描述
show(speed,fn);	显示元素
hide(speed,fn);	隐藏元素
toggle(speed,fn);	1、使得显示元素隐藏 2、使得隐藏元素显示

滑动效果：

方法名	描述
slideDown(speed,fn);	显示元素
slideUp(speed,fn);	隐藏元素
slideToggle(speed,fn);	1、使得显示元素隐藏 2、使得隐藏元素显示

淡入淡出效果：

方法名	描述
fadeIn(speed,fn);	显示元素
fadeOut(speed,fn);	隐藏元素
fadeToggle(speed,fn);	1、使得显示元素隐藏 2、使得隐藏元素显示

注意:

以上所有动画效果方法中都有两个参数：

speed 动画效果的持续时间，单位：毫秒

fn 动画效果成功展示完成后，回来调用的函数。

代码准备：

<!DOCTYPE html>

<html>

<head>

<title>显示与隐藏</title>

</head>

<body>

<p>

</p>

</body>

</html>

（二）案例-广告特效

需求说明:

页面加载后延迟 2 秒钟，在网页上方以滑动的方式显示广告图片，鼠标双击图片或者 2 秒后，同样以滑动的方式隐藏广告图片。

代码准备:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

<td>

</td>

</tr>

<tr>

<td>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<tr>

<td>

</a>

</a>

</a>

</a>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</body>

</html>

二、jQuery操作CSS

（一）知识点介绍

jQuery 可以通过以下方法动态的对元素的 CSS 样式进行操作。

属性解析:

方法名	说明
addClass(类样式名称)	给指定标签的 class 属性追加样式
removeClass()	将标签中指定的类样式移除
css(”样式属性”,”值”) css({”样式属性”:”值”, ”样式属性”:”值”})	设置css样式
toggleClass()	在addClass(类样式名称)和removeClass()方法之间进行切换,有样式就移除, 没有就执行添加操作

代码准备:

<!DOCTYPE html>

<html>

<head>

<style>

.blueDiv{

width:200px;

height:200px;

}

.redDiv{

width:200px;

height:200px;

}

</style>

$(function(){

//给第一个div添加样式

//移除第二个div样式

//在添加和移除之间进行切换

})

</script>

</head>

<body>

</body>

</html>

（二）案例-表格隔行变色

1、案例描述

页面加载后表格奇偶行呈现不同的背景颜色，当鼠标悬浮到某一行时，当前行高亮显示。

如下图所示：

2、代码准备

<!DOCTYPE html>

<html>

<head>

<title>表格隔行变色</title>

tr{

text-align: center;

}

.gray{

/*淡灰色*/

}

.bling{

/*浅蓝色*/

}

</style>

</head>

<body>

<table align="center" border="1" cellpadding="0"

cellspacing="0" width="80%">

<tr>

<th>

<input type="checkbox" id="chkall" value="全选" />全选

</th>

</tr>

<tr>

<td>

</td>

<td>手机数码商品信息</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>电脑办公商品信息</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>鞋靴箱包商品信息</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>家居饰品商品信息</td>

<td>

</td>

</tr>

</table>

</body>

</html>

3、代码实现

三、jQuery操作属性

（一）知识点介绍

在日常开发过程中，有时会对元素的属性进行获取或修改操作。jQuery提供了两种操作元素属性的方法。

属性解析:

方法名	描述
prop("属性名");	获取属性的值等价于 attr(“属性名”)
prop("属性名",属性值);	设置属性的值等价于 attr(“属性名”,”属性值”)
removeProp("属性名");	移除属性名的值等价于 removeattr(“属性名”) jQuery的3.X版本之后把removeProp干掉了;

注意:

jQuery1.5版本之后, attr方法不再维护, 推荐使用prop;

Prop与attr方法有区别:

对于html元素本身自带有一些属性(固有属性)的标签, 例如: input(value , type), 此时用的是prop方法

而对于html元素本身没有固有属性的, 是我们自定义的一些属性; 例如: p标签(value), 这时使用attr方法;

（二）案例-全选/全不选

1、案例描述

点击全选按钮, 所有的复选框被选中, 再次点击全选按钮, 将被选中的复选框取消.

2、代码实现

四、jQuery操作DOM

（一）知识点介绍

1、元素 value 属性操作

属性解析:

方法名	描述
jQuery对象.val();	获取 value 属性的值
jQuery对象.val(值);	设置 value 属性的值

代码准备:

<!DOCTYPE html>

<html>

<head>

<title>元素value属性操作</title>

//点击获取输入框的值

//点击设置输入框的值

</script>

</head>

<body>

</body>

</html>

2、获取/设置元素体内容

1、获取/设置元素内容体 HTML 代码

属性解析:

方法名

描述

jQuery对象.html()

获得内容体 html 代码，如果有标签代码，一并获得。

等价于 js==> innerHtml

jQuery对象.html("HTML代码")

设置 html 代码，如果有标签，将进行解析。

等价于 js==> innerHtml=”值”

2、获取/设置元素内容体纯文本

方法名

描述

JQ 对象.text()

获得文本，如果有标签，忽略。

等价于 js==> innerText

JQ 对象.text("纯文本")

设置文本，如果含有 HTML 标签，不进行解析。原样输出。

等价于 js==> innerText=”值”

代码准备:

<!DOCTYPE html>

<html>

<head>

<title>设置元素内容体</title>

</head>

<body>

</div>

<hr />

<input type="button" value="点我设置内容体代码为绿色字体"

onclick="run2()"/>

<hr />

</body>

</html>

3、添加/删除元素内容

通过 jQuery 可以很容易的动态添加和删除页面元素及内容。

添加方法：

以下两句效果相同，写法不同(父子关系)

append(B), 向 A 的末尾追加 B
appendTo(A), 将 B 追加到 A 的末尾

--------------------------------------------------------------------------------

以下两句效果相同，写法不同(父子关系)

prepend(B), 向 A 的头部追加 B
prependTo(A), 将 B 追加到 A 的头部

--------------------------------------------------------------------------------

after() - 在被选元素之后插入内容（兄弟关系）

before() - 在被选元素之前插入内容（兄弟关系）

删除方法：

remove() - 删除被选元素及其子元素

代码准备:

<!DOCTYPE html>

<html>

<head>

<title>追加内容体</title>

</head>

<body>

<li>Android</li>

</ul>

<hr />

</body>

</html>

4、知识点补充-jQuery数组遍历

回顾:

Js的数组遍历: 普通for循环或增强for循环;

jQuery 循环遍历元素 each():

方法名	描述
jQuery数组.each(fn);	遍历JQ数组
$.each(jQuery数组,fn);	遍历JQ数组

Fn: 代表是回调函数;

This: 代表当前遍历出来的每一个元素(element)

Index: 代表是索引

（二）案例-省市联动

1、案例描述

需求说明:

页面加载时将省份信息循环添加到省下拉列表框中，当选择一个省时，后面的市级信息会随之改变.

2、代码准备

<!DOCTYPE html>

<html>

<head>

// 定义二维数组,存储城市信息

var cities = new Array();

cities[0] = new Array("海淀区","房山区","朝阳区");

cities[1] = new Array("长春市","吉林市","*市","延边市");

cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");

cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");

cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");

</script>

</head>

<body>

</select>

</select>

</body>

</html>

3、代码实现

五、表单校验

（一）知识点介绍

在学习javascript时候，我们手动的完成过表单数据的校验，这项功能在实际开发中也是常见的，属于通用功能，但是单纯的通过javascript进行校验，如果选项过多，那么还是有些力不从心。实际在开发中我们都是使用第三方工具，本案例中我们将使用jQuery插件validation进行表单的校验。

插件的步骤:

插件的下载
导入工具(依赖的js文件(jQuery的js文件, jQuery-invalidate插件, 语言包的js文件))
填写form表单, 要给表单绑定校验的validate验证方法
在form表单元素中指定校验规则

1、工具下载

下载地址：

https://github.com/jquery-validation/jquery-validation/releases/download/1.17.0/jquery-validation-1.17.0.zip

帮助文档地址：

https://jqueryvalidation.org/documentation/

文件目录介绍:

2、工具导入

依赖的js文件(jQuery的js文件, jQuery-invalidate插件, 语言包的js文件)

注意:

导入是有顺序的:

3、表单绑定验证方法

使用validate需要手动声明，需要对哪个表单进行校验，就给哪个表单绑定validate()方法。

$(function () {

//为指定表单加入校验

$("#表单 ID").validate();

});

</script>

4、为校验加入规则

validate()方法中可以指定添加规则:

$(function () {

//为指定表单加入校验

$("#表单 ID").validate({

rules:{

name1:{

规则 1:规则值,

规则 2：规则值

name2:{

规则 1:规则值,

规则 2：规则值

}

});

</script>

校验规则速查表：

5、测试案例-注册表单验证

代码准备:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

<td width="40%">Email（符合邮件格式）</td>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<td width="40%">一天工作时长（值范围6~16）</td>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<td width="40%">确认密码（必须填写，且与密码值要相同）</td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

label{

color: red;

}

</style>

$(function(){

//为表单绑定校验方法

$("#f1").validate({

//加入校验规则

rules:{

//name的name属性的值

username:{

required:true,

/*minlength:6,

maxlength:10*/

rangelength:[6,10]

email:{

email:"email"

birthday:{

dateISO:"YYYY-MM-dd"

sal:{

number:true

workForday:{

range:[6,16]

pwd:{

required:true

repwd:{

required:true,

equalTo:"#pwd"

}

//自定义提示错误信息

messages:{

username:{

required:"亲, 这是必须要填写的哦...",

rangelength:"亲, 用户名的长度必须在${0}到${1}个字符之间..."

}

})

</script>

</head>

<body>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

<td width="40%">Email（符合邮件格式）</td>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<td width="40%">一天工作时长（值范围6~16）</td>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<td width="40%">确认密码（必须填写，且与密码值要相同）</td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

6、为规则自定义错误信息

messages 可以为已经定好的规则自定义错误信息.

$(function () {

//为指定表单加入校验

$("#表单 ID").validate({

rules:{

name1:{

规则 1:规则值,

规则 2:规则值

}

messages:{

name1:{

规则 1:"自定义错误信息"

}

});

</script>

动态取值:rangelength:[6,10]

${0}: 动态取出第一个值

${1}: 动态取出第二个值

（二）案例-注册表单验证

1、案例描述

需求说明与分析:

需求:

用户名, 密码, 确认密码, 邮箱, 出生日期不能为空
用户名的长度在6-12个字符之间
密码和确认密码必须一致
Email必须符合邮箱格式
出生日期必须符合date日期类型

2、代码准备

<!DOCTYPE html>

<html>

<head>

<title>案例-注册表单验证</title>

.tab{

width: 800px;

height: 300px;

}

.tab,.tab tr td{

border: 1px solid darkgray;

}

.tab tr th{

color: green;

}

.t_right{

text-align: right;

width: 15%;

}

</style>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td class="t_right">Email:</td>

</tr>

<tr>

</tr>

</tr>

</table>

</form>

</body>

</html>

3、代码实现

<!DOCTYPE html>

<html>

<head>

.tab{

width: 800px;

height: 300px;

}

.tab,.tab tr td{

border: 1px solid darkgray;

}

.tab tr th{

color: green;

}

.t_right{

text-align: right;

width: 15%;

}

label{

color: red;

}

</style>

//页面加载事件

$(function(){

//为表单绑定校验方法

$("#regist").validate({

//加入校验规则

rules:{

username:{

required:true,

rangelength:[6,12]

pwd:{

required:true,

rangelength:[3,8]

repwd:{

required:true,

rangelength:[3,8],

equalTo:"#pwd"

email:{

required:true,

email:true

birthday:{

required:true,

dateISO:"YYYY-MM-dd"

}

messages:{

username:{

required:"用户名不能为空",

rangelength:"用户名长度必须在6-12个字符之间"

pwd:{

required:"密码不能为空",

rangelength:"密码长度必须在3-8个字符之间"

repwd:{

required:"确认密码不能为空",

rangelength:"密码长度必须在3-8个字符之间",

equalTo:"两次密码不一致"

email:{

required:"邮箱不能为空",

email:"邮箱格式不正确"

birthday:{

required:"出生日期不能为空",

dateISO:"日期格式不正确"

}

})

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td class="t_right">Email:</td>

</tr>

<tr>

</tr>

</tr>

</table>

</form>

</body>

</html>

码农公寓

第五讲jQuery进阶

一、jQuery特效

二、jQuery操作CSS

（一）知识点介绍

（二）案例-表格隔行变色

1、案例描述

2、代码准备

3、代码实现

三、jQuery操作属性

（一）知识点介绍

（二）案例-全选/全不选

四、jQuery操作DOM

（一）知识点介绍

1、元素 value 属性操作

2、获取/设置元素体内容

3、添加/删除元素内容

4、知识点补充-jQuery数组遍历

（二）案例-省市联动

1、案例描述

2、代码准备

3、代码实现

五、表单校验

（一）知识点介绍

1、工具下载

2、工具导入

3、表单绑定验证方法

4、为校验加入规则

5、测试案例-注册表单验证

6、为规则自定义错误信息

（二）案例-注册表单验证

1、案例描述

2、代码准备

3、代码实现

相关文章