jQuery
程序员文章站
2024-03-05 20:29:19
...
jQuery遍历
传统遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<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); //dom
}
}
</script>
</head>
<body>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</body>
</html>上面用的是dom循环
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() ); //Jquery
});
});
</script>jQuery循环
jQuery全局函数each遍历
jQuery框架定义函数,each
不需要jQuery对象调用, $调用的
参数为被遍历对象，既可以是jQuery对象$option，也可以为DOM对象options
$.each()
<script type="text/javascript">
$(function(){
//jQuery方式获取option标签
var $option = $("option");
var options = document.getElementsByTagName("option");
//jQuery符号$直接调用全局函数each
/**
* 全局函数each的参数
* 被遍历的对象
* 回调函数,传递索引和元素
* 好处: 遍历的容器可以是jQuery对象,也可以是DOM对象
*/
//也可以填$option
$.each(options, function(index,element) {
alert( $(element).html());
});
});
</script>
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>绑定id为btn的标签。
jQuery对象绑定事件
jQuery对象中函数,实现对一个事件源同时绑定多个事件
bind函数,实现绑定事件
<script type="text/javascript">
$(function(){
//获取按钮,jQuery对象调用函数 bind
/*$("#btn").bind("click",function(){
alert("按钮被点击");
});*/
/*
* 函数bind同时绑定多个事件
* bind( {
* "事件类型":function(){},
* "事件类型":function(){}
* } );
*/
$("#btn").bind({
//点击事件
"click":function(){
alert("绑定点击事件");
},
//悬停事件
"mouseover":function(){
alert("绑定鼠标悬停事件");
}
});
});
</script>同样绑定id为btn的标签。
jQuery解绑事件
jQuery对象的函数 unbind
<script type="text/javascript">
$(function(){
$("#btn").bind({
"click":function(){alert("点击事件")},
"mouseover":function(){alert("鼠标悬停")}
});
//解绑
$("#unbtn").click(function(){
//解除按钮btn的事件绑定
//unbind()什么参数不传递,解除所有事件
//$("#btn").unbind();
//解除点击事件
//$("#btn").unbind("click");
//解除多个事件
$("#btn").unbind("click mouseover");
})
});
</script>validate表单验证插件
插件:
基于一个功能开发的另一个功能,插件
validate基于jQuery开发的一个功能,表单验证功能
对原有的jQuery功能进行扩展,插件不能独立使用
D:\BaiduNetdiskDownload\19年JAVA课件\03_javaweb\day15_jQuery基础\课程资料\JavaWeb10\jquery-validation-1.9.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>jQuery validation plug-in - main demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// 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
});
</script>
<style type="text/css">
#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>
<div id="main">
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="firstname">Firstname</label>
<input id="firstname2" name="firstname" />
</p>
<p>
<label for="lastname">Lastname</label>
<input id="lastname" name="lastname" />
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" />
</p>
<p>
<label for="agree">Please agree to our policy</label>
<input type="checkbox" class="checkbox" id="agree" name="agree" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</div>
</body>
</html>效果：
自定义验证规则
标准语法规则, jQuery选择符号$调用插件属性validator
属性调用插件函数 addMethod()
参数:
- 规则名
- 回调函数
<script type="text/javascript">
/*
* 匿名函数中具有三个参数
* 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"
}
上一篇： 解决Java中OutOfMemoryError的问题
下一篇： Java类的定义以及执行顺序学习教程