一、jquery入门
见附件d1.html：
<html>
<head>
<title>2323232 </title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
//等DOM结构加载完成后，就会执行下面的jQuery
$(document).ready(function(){
$("#demo1").click(function(){
alert("jquery demo");
});
});
function dianji(){
alert("javascript test");
}
</script>
</head>
<body>
<p name="demo1" id="demo1" class="demo1" >这是一个测试用，点击我</p>
</body>
</html>
二、文本框及表单验证
见input01.htm
<!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=utf-8" />
<title>jquery验证</title>
<style type="text/css">
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
span{color:red;}
</style>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript" src="jquery.validate.js"></script>
<script language="javascript" type="text/javascript" src="messages_cn.js"></script>
<script language="javascript">
/*
function getValue(){
//alert( $("#input01").val()); //获得文本框的值
var a = $("#input02").val($("#input01").val()); //将文本框的值赋给另一个文本框
}
//改选成jquery写法
$(document).ready(function(
//JQuery代码写在这里
));*/
$(function(){
$("#input01").blur(function(){
var a = $("#input01").val();//获得文本框的值
var b = $("#input02").val(a); 值赋给文本框
// alert(a); //alert 123
// alert(b); //alert [object Object]
});
$("#form1").validate({
rules: {
input01:{
digits:true,
rangelength:[0,8]
},
userName:{
// required:true,
//maxlength:[5]
CHNlength:[1,10]
},
email:{
required:true,
email:true
}
}
});
});
function setPageSize(){
var b = $("#pagesize").val();
$("#input03").val(b);
}
</script>
</head>
<body>
<form id="form1" name="form1">
<div>
<label for="input01">输入的值：</label>
<input type="text" name="input01" id="input01" /><br />
<label for="input02">得到的值：</label>
<input type="text" name="input02" id="input02" /><br />
</div>
<label for="input01">选择的值：</label>
<select id="pagesize" name="pagesize" οnchange="setPageSize(this);">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
<input type="text" name="input03" id="input03" />
<br />
<div>
<table>
<!--"for" 属性可把 label 绑定到另外一个元素，请把 "for" 属性的值设置为相关元素的 id 属性的值-->
<tr>
<td><label for="userName">用户名：<span id="Ired">*</span></label></td>
<td><input type="text" name="userName" id="userName" /></td>
</tr>
<tr>
<td><label for="e-mail">邮 箱：<span id="Ired">*</span></label></td>
<td><input type="text" name="email" id="e-mail" /></td>
</tr>
</table>
</div>
</form >
</body>
</html>
三、下拉框功能及样式变化
见select.html
<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//给选中项添加样式
$(".demo1").click(function(){
$(".demo1").css("background","#bbffaa");
//alert("jquery demo");
});
//省市，动态下拉列表
$("#sel").change(function(){
var sel_value = $(this).val();
// alert("selvalue="+sel_value);
if(selvalue==1){
$("#sel01").show();
$("#sel02").hide();
$("#sel03").hide();
}
if(selvalue==2){
$("#sel01").hide();
$("#sel02").show();
$("#sel03").hide();
}
if(selvalue==3){
$("#sel01").hide();
$("#sel02").hide();
$("#sel03").show();
}
})
//显示图片，模拟图片的一种预览效果
$("#img").change(function(){
//alert($("#img").val());
$("#imagePreview").empty();
if($("#img").val()!=""){
$("#imagePreview").append("<img src=\"" + $("#img").val() + "\" />");
}else{
$("#imagePreview").append("displays image here");
}
})
/*var items ;
var h3 = $("h3").val();
alert(h3.length);*/
$("h3").click(function(){
$("h3").css("background","#bbccdd");
//alert("123");
})
//动态显示选中的项
$("#box1").hide();
$("#box2").hide();
$("#box3").hide();
$("#thechoices").change(function(){
if(this.value == "all")
{$("#boxes").children().show();}
else
{$("#" + this.value).show().siblings().hide();}
$("#thechoices").change();
});
});
</script>
</head>
<body>
<p class="demo1">这是一个测试用，点击我，我会变色的哦</p>
<p class="demo1">这是一个测试用，点击我2</p>
<p class="demo1">这是一个测试用，点击我3</p>
<p class="demo1">这是一个测试用，点击我4</p>
<h3>标题1</h3>
<h3>标题2</h3>
<h3>标题3</h3>
<h3>标题4</h3>
<form name="form1" id="form1">
<div>
<table border="0">
<tr>
<td>
请选择:
</td>
<td>
<select id="sel">
<option value="">请选择</option>
<option value="1">湖北省</option>
<option value="2">湖南省</option>
<option value="3">江苏省</option>
</select>
</td>
<td id="sel01" style="display:none">
<!--//湖北-->
<select >
<option value="1">武汉市</option>
<option value="2">天门市</option>
<option value="3">仙桃市</option>
</select>
</td>
<td id="sel02" style="display:none">
<!-- //湖南-->
<select >
<option value="1">长沙市</option>
<option value="2">彬州市</option>
<option value="3">丰河市</option>
</select>
</td>
<td id="sel03" style="display:none">
<!-- //江苏-->
<select >
<option value="1">南京市</option>
<option value="2">苏州市</option>
<option value="3">常州市</option>
</select>
</td>
</tr>
</table>
</div>
<!-- 图片预览效果-->
图片预览
<select name="img" id="img">
<option value="">请选择一个图片</option>
<option value="img1.jpg">image1.jpg</option>
<option value="img2.jpg">image2.jpg</option>
<option value="img3.jpg">image3.jpg</option>
</select>
<div id="imagePreview">
displays image here
</div>
<!--//选择all时则会全部显示-->
<select id="thechoices">
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
<option value="all">All Boxes</option>
</select>
<!-- the DIVs -->
<div id="boxes">
<div id="box1"><p>Box 1 stuff</p></div>
<div id="box2"><p>Box 2 stuff</p></div>
<div id="box3"><p>Box 3 stuff</p></div>
</div>
</form>
</body>
</html>
扫一扫
2465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
