day29JQuery.docx
- 文档编号:26730892
- 上传时间:2023-06-22
- 格式:DOCX
- 页数:22
- 大小:20.50KB
day29JQuery.docx
《day29JQuery.docx》由会员分享,可在线阅读,更多相关《day29JQuery.docx(22页珍藏版)》请在冰豆网上搜索。
day29JQuery
Day29JQuery
01.(val方法)JQuery_案例一_重写省市联动_知识点_val方法
1).作用:
设置、获取元素的value值
2).使用:
设置:
$(对象).val("值");
获取:
$(对象).val();
3).示例代码:
$(function(){
$("#butSet").click(function(){
//$("#txtId").val("呵呵");
$("#txtId").prop("value","嘻嘻");//效果同上
})
$("#butGet").click(function(){
//alert($("#txtId").val());
alert($("#txtId").prop("value"));//效果同上
})
})
02.(html方法_text方法)JQuery_案例一_重写省市联动_知识点
1).回顾JS中,向一个元素内部输出一个文本内容,内部可以带HTML元素:
1).innerHTML:
2).innerText:
2).在JQuery中相同的作用的方法:
1).$("对象").html("文本内容");//如果包含HTML标签,会被解析;
2).$("对象").html():
获取内容;//读取时,如果包含HTML标签,也会一同读取进来;
3).$("对象").text("文本内容"):
//如果包含HTML标签,会作为内容输出,不会解析;
4).$("对象").text():
//读取时,如果包含HTML标签,会被过滤掉。
03(each循环).JQuery_案例一_重写省市联动_知识点_
1).有两种each语法:
1).$.each(JQuery数组对象,function(i,domObj){
//循环体
});
2).JQuery数组对象.each(function(i,domObj){
//循环体
});
2).示例代码:
$(function(){
var$chkArray=$(".c1");
//使用普通for循环的方式
/*
for(vari=0;i<$chkArray.size();i++){
alert($chkArray[i].value);
}
*/
//使用JQuery遍历,有两种方式:
//1.第一种方式:
/*
$.each($chkArray,function(i,obj){
alert(i+"--"+obj.value);
})
*/
//2.第二种方式:
$chkArray.each(function(i,domObj){
alert(i+"--"+domObj.value);
})
})
3).其它说明:
1).function(i,domObj):
这两个参数可以不写,也可以只写一个。
如果只写一个,只接受"索引"值。
04.(append方法_prepend方法)JQuery_案例一_重写省市联动_知识点
1).append()方法和appendTo()方法:
A.append(B):
向A(末尾)添加B
A.appendTo(B):
将A添加到B(末尾)
2).prepend()方法和prependTo()方法:
A.prepend(B):
向A(前面)添加B
A.prependTo(B):
将A添加到B(前面)
3).示例代码:
$(function(){
$("#butPtoFont1").click(function(){
//1.将p元素添加到font元素中原内容的后面
//$("#fontId").append($("#pId"));
$("#pId").appendTo($("#fontId"));
})
$("#butPToFont2").click(function(){
//2.将p元素添加到font元素中原内容的前面
//$("#fontId").prepend($("#pId"));
$("#pId").prependTo($("#fontId"));
})
})
05.JQuery_案例一_重写省市联动_案例实现
1).示例代码:
(核心代码)
$(function(){
//1.为"省"的下拉列表添加事件:
change
$("#province").change(function(){
//2.获取"省"下拉列表的选中项的value值
varproValue=$("#province>option:
selected").val();
//3.获取对应的"市"的数组
varcityArray=cities[proValue];
//4.向"市"下拉列表中输出:
第一项
$("#city").html("");
//5.遍历"市"的数组,将每一项输出到"市"的下拉列表中
$(cityArray).each(function(i,domObj){
$("#city").append("");
})
})
})
------------------------------------------------------------------------------------------------------------------------------------
06.JQuery_案例二_重写左右选择_知识点_常用事件介绍
1).click():
单击事件
2).focus():
获得焦点事件
3).blur():
失去焦点
4).change():
5).dblclick():
双击
6).keydown():
键盘按下
7).keyup():
键盘抬起
8).mousedown():
鼠标按下
9).mouseup():
鼠标抬起
10).mouseover():
鼠标移入
11).mouseout():
鼠标移出
07.JQuery_案例二_重写左右选择_知识点_事件切换
1).当我们需要实现鼠标移入、移出时,我们通常需要写两个方法:
mouseover
mouseout
2).JQuery还提供了一种方便的方式,实现这两个方法:
鼠标移入鼠标移出
JQuery对象.hover(function(){},function(){});
3).示例代码:
//为div绑定鼠标移入、移出事件
varindex=1;
$(function(){
$("#divId").hover(function(){
$("#divId").html("移入......"+index);//index的作用是测试:
只有这一个function时的标记。
index++;
},function(){
$("#divId").html("移出......");
})
})
4).其它说明:
1).JQuery对象.hover():
方法接收两个function,当鼠标移入时,会执行第一个function。
当鼠标移出时,会执行第二个function。
2).此方法也可以只写一个function(),此时,当鼠标移入、移出时都会执行这一个function()。
08.JQuery_案例二_重写左右选择_案例实现
$(function(){
//为四个按钮绑定事件
$("#leftToRightSimple").click(function(){
//将左侧选中项的第一个添加到右侧列表
$("#leftSelectId>option:
selected:
first").appendTo($("#rightSelectId"));
})
$("#leftToRight").click(function(){
//将左侧所有的选中项,添加到右侧列表
$("#leftSelectId>option:
selected").appendTo($("#rightSelectId"));
})
$("#rightToLeftSimple").click(function(){
//将右侧选中项的第一个添加到左侧列表
$("#rightSelectId>option:
selected:
first").appendTo($("#leftSelectId"));
})
$("#rightToLeft").click(function(){
//将右侧所有的选中项,添加到左侧列表
$("#rightSelectId>option:
selected").appendTo($("#leftSelectId"));
})
})
100px;height: 200px;"> 100px;height: 200px;"> ------------------------------------------------------------------------------------------------------------------------------------ 09.JQuery_案例三_重写表单校验_知识点_回顾JS的验证方式 10.JQuery_案例三_重写表单校验_知识点_validation验证框架_使用 1).引入validation验证框架:
...
--这个文件中的验证信息会覆盖validate.js中的验证信息--> ... 注意: 由于validation验证框架是基于JQuery的,所以必须先导入JQuery再导入validate.js 2).编写验证规则: 四层: $(fucntion(){ //第一层: 调用"表单"对象的validate()方法 $("#formId").validate({ //第二层: 规则列表 rules: { //第三层: 为那个HTML组件绑定规则: name属性 username: { //第四层: 验证规则列表 required: true, rangelength: [6,12], } } }) }) 3).注意: 1).第三层: 使用的是HTML组件的name属性,不能使用id属性; 2).第四层: 可以同时指定多个规则,每个规则都使用"规则: 值"的形式; 多个规则之间,必须使用逗号隔开。 最后一个规则后面,可以不写逗号(也可以写)。 3).第四层: rangelength: [6,12] 6和12两个值可以加双引号,也可以不加。 11.JQuery_案例三_重写表单校验_知识点_validation验证框架_自定义提示信息 1).我们可以在一个项目中的大部分页面都使用messages_zh.js中的提示信息, 对于某个、某些字段,可以单独指定验证信息。 2).基本格式: //第一层: 为
$("#formId").validate({
//第二层:
规则列表:
rules:
{
username:
{
required:
true,
}
},
//并列第二层:
提示信息列表
messages:
{
username:
{
required:
"哥们,用户名必填!
"
}
}
})
3).示例代码:
--这个文件中的验证信息会覆盖validate.js中的验证信息--> $(function(){ //第一层: 为
$("#formId").validate({
//第二层:
规则列表
rules:
{
//第三层:
验证的字段
username:
{
//第四层:
验证规则列表
required:
true,
},
pwd:
{
required:
true,
}
},
messages:
{//提示消息列表
pwd:
{
required:
"哥们,密码必须填写!
"//这个验证信息会覆盖messages_zh.js中的验证信息
}
}
})
})
用户名:
密码:
12.JQuery_案例三_重写表单校验_知识点_validation验证框架_设置错误信息样式_位置
1).正常运行后,在浏览器上点击:
F12键,下面打开:
查看器。
通过这里可以看到,validation验证框架的提示信息是输出到一个
有两个重要属性:
class="error"for="验证的组件的name"
2).我们可以通过这个信息来设置验证信息的样式和位置:
3).示例代码:
.error{/*由于生成的
error,所以这里可以定义一个error样式*/
color:
red;
}
$(function(){
//第一层:
为