jQuery高级
jQuery遍历
传统遍历
<script type="text/javascript">
/**
* 传统形式遍历
*/
window.onload = function(){
//dom对象获取所有的标签option
var options = document.getElementsByTagName("option");
for(var i=0;i<options.length;i++){
alert(options[i].innerHTML);
}
}
</script>
jQuery对象遍历
jQuery对象调用函数each
$("").each( 自己定义的函数 回调函数 )
回调函数 : 函数是自己定义的,但不是自己调用
<script type="text/javascript">
$(function(){
//jQuery方式获取option标签
var $option = $("option");
//jQuery对象调用函数each
/**
* 匿名函数,回调函数
* each函数调用
* 参数: 索引, 遍历到的元素
* each遍历数组,遍历一次调用一次匿名函数
*/
$option.each(function(index,element){
//alert(index+"==="+element);
//jQuery对象本质数组,遍历的元素DOM对象
alert( $(element).html() );
});
});
</script>
jQuery全局函数each遍历
jQuery框架定义函数,each
不需要jQuery对象调用, $调用的
$.each()
<script type="text/javascript">
$(function(){
//jQuery方式获取option标签
var $option = $("option");
var options = document.getElementsByTagName("option");
//jQuery符号$直接调用全局函数each
/**
* 全局函数each的参数
* 被遍历的对象
* 回调函数,传递索引和元素
* 好处: 遍历的容器可以是jQuery对象,也可以是DOM对象
* 灵活
*/
$.each(options, function(index,element) {
alert( $(element).html());
});
});
</script>
增强for
格式:
for( 元素 of 容器){
}
举例:
for(element of $("options")){
执行语句;
}
jQuery的事件
jQuery绑定事件,事件名字没有on
常用事件:
- click 点击事件
- blur 失去焦点
- change 内容改变
- keyup 键盘弹起
- mouseover 鼠标悬停
- mouseout 鼠标离开
DOM对象绑定事件
<script type="text/javascript">
window.onload = function(){
//获取按钮
var btn = document.getElementById("btn");
//DOM对象的事件属性
btn.onclick = function(){
alert("按钮被点击");
}
}
</script>
jQuery对象绑定事件
on()方法优势2:点击子类触发父类事件
on()方法优势3:在jQuery里后生成的标签也可以添加事件(重要)
jQuery对象中函数,实现对一个事件源同时绑定多个事件 on
<script type="text/javascript">
绑定一个事件 :
on("事件名称" , function(){ });
$("#b1").on("click" , function(){
alert("always on ... ");
});
* 绑定多个事件, 做多个事情. 相当于是绑定多个键值对.
* on({ key:value , key:value ,key:value});
*
* on({"事件名":function(){
* ...
* } ,
* "事件名2" : function(){
* ...
* }});
*
$("div").on({
"mouseover": function() {
// 改变颜色
$(this).css("background-color", "green");
},
"mouseout": function() {
$(this).css("background-color", "yellow");
},
"click": function(){
alert($(this).text());
}
});
</script>
jQuery解绑事件
jQuery对象的函数 off
<script type="text/javascript">
$(function(){
对象.off("事件名称");
$("#f").off("mouseover");
});
</script>
jQuery自动触发
jQuery显示与隐藏效果
滑动效果
jQuery停止动画排队
jQuery淡入淡出效果
jQuery自定义动画
H5表单验证
jQuery插件
事件练习
<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript">
$(function(){
//文本框绑定键盘弹起事件
var text = $("#text");
text.keyup(function(){
//取出文本框输入的内容,放在div中
$("#div").html( text.val() ).css("font-size","30px").css("color","red");
});
});
</script>
</head>
<body>
<input type="text" id="text"/>
<div id="div"></div>
</body>
省市联动案例
<script type="text/javascript">
function selectCity(value){
/**
* value是传递的标签option的value的属性值
* 作为索引使用,到二维数组中,找出对应市
* 遍历一维数组
* 追加到标签 select中
*/
var citys = [
["海淀","昌平","朝阳"],["长春","吉林","延边"],["南京","徐州","苏州"]
];
var city = citys[value];
//获取市区标签
var cityId = $("#cityId");
//拼接字符串的操作
var s = "<option >----请-选-择-市----</option>";
//jQuery全局函数each遍历
$.each(city, function(index,element) {
s+="<option >" +element+ "</option>";
});
//字符串放在标签
cityId.html(s);
}
</script>
左右互选案例
<script type="text/javascript">
$(function(){
//左向右移动,被选中的,按钮绑定事件
$("#add").click(function(){
//获取选中的,层次选择器,后代子标签
$("#second").append($("#first option:selected"));
});
//左向右移动,全部,按钮绑定事件
$("#add_all").click(function(){
$("#second").append($("#first option"));
});
//右向做移动,选择的
$("#remove").click(function(){
$("#first").append($("#second option:selected"));
});
//右向左移动,全部的
$("#remove_all").click(function(){
$("#first").append($("#second option"));
});
});
</script>
validate表单验证插件
插件:
基于一个功能开发的另一个功能,插件
validate基于jQuery开发的一个功能,表单验证功能
对原有的jQuery功能进行扩展,插件不能独立使用
表单验证案例
<script type="text/javascript">
$(function(){
$("#empForm").validate({
//表单验证的规则
rules:{
//真实姓名,必须填写
realname:"required",
//登录名,必须填写,长度5-8
username:{
required:true,
rangelength:[5,8]
},
//密码规则,必须填写,长度6-12
psw:{
required:true,
rangelength:[6,12]
},
//确认密码,必须填写,和密码一致
psw2:{
required:true,
equalTo:"#psw"
},
//性别规则,必须选择一个
gender:"required",
//年龄规则,必须填写,范围26-50之间
age:{
required:true,
range:[26,50]
},
//学历规则,必须选一个
edu:"required",
//生日规则,必须填写,格式正确,合法
birthday:{
required:true,
dateISO:true,
date:true
},
//爱好规则,必须选一个
checkbox1:"required",
//邮箱规则,必须填写,符号邮件地址规则
email:{
required:true,
email:true
}
},
//验证消息
messages:{
//真实姓名消息
realname:"请填写真实姓名",
//登录名消息
username:{
required:"必须填写登录名",
rangelength:"用户名长度必须5-8位"
},
//密码消息
psw:{
required:"必须填写密码",
rangelength:"密码长度必须6-12位"
},
//确认密码消息
psw2:{
required:"必须填写密码",
equalTo:"两次密码不一致"
},
//姓名消息
gender:"必须选",
//年龄消息
age:{
required:"必须填写年龄",
range:"年龄必须在26-50之间"
},
//学历消息
edu:"请选择一个学历",
//生日消息
birthday:{
required:"必须填写生日",
dateISO:"日期格式不正确",
date:"日期不存在"
},
//爱好消息
checkbox1:"请选择一个爱好",
//邮箱消息
email:{
required:"必须填写邮箱",
email:"邮箱格式不正确"
}
}
});
});
</script>
自定义验证规则
标准语法规则, jQuery选择符号$调用插件属性validator
属性调用插件函数 addMethod()
参数:
- 规则名
- 回调函数
<script type="text/javascript">
/*"cart15"规则名
* 匿名函数中具有三个参数
* value : 文本框输入的值
* element : 文本框标签对象
* param : 规则后面的参数 range:[5,10]
*/
//自定义身份证号的15位规则
$.validator.addMethod("cart15",function(value,element,param){
//文本框输入的值 value判断
if(value.length==18)
return true;
//定义15位规则,全数字
var reg=/^[0-9]{15}$/;
return reg.test(value);
});
//自定义身份证号的是18位规则
$.validator.addMethod("cart18",function(value,element,param){
if(value.length==15)
return true;
//定义18位规则,前17个数字,最后一位可以是数字,可以是X
var reg = /^[0-9]{17}[0-9X]{1}$/;
return reg.test(value);
});
//自定义身份证的长度规则
$.validator.addMethod("cartlength",function(value,element,param){
if(value.length == 15 || value.length==18)
return true;
return false;
});
//身份证号规则
cart:{
required:"必须填写身份证号",
cartlength:"身份证号码长度只能是15或18位",
cart15:"15位格式全数字",
cart18:"18位格式全数字,最后一位可以是X"
}
786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
