一、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" onchange="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>
分享到：
相关推荐
jQuery插件则是对jQuery核心功能的扩展，开发者可以利用这些插件快速实现特定的功能，如表单验证、轮播图、下拉框等。在本例中，jQuery Flexbox 下拉框插件正是为下拉菜单添加了更多样式和行为的选项。 **Flexbox ...
这种多选下拉框常用于表单中，让用户快速地从一系列预设选项中选取多个。比如在用户资料编辑、商品筛选、服务选择等场景。 五、进一步优化 1. ARIA支持：为了提高无障碍性，确保插件符合ARIA（Accessible Rich ...
在网页设计和开发中，表单...通过学习和使用"jQuery联动下拉框表单美化"，开发者可以提升他们的前端技能，为网站或应用创造出更吸引人的表单体验，同时也可以借鉴其中的设计思路，为自己的项目带来创新的交互解决方案。
本项目"jQuery Select下拉框美化表单"正是这样一个解决方案，它基于`jquery.selectlist.js`和`jquery-1.9.1.min.js`两个JavaScript文件，旨在为招聘网站等需要展示学历和薪资范围等选项的场景提供更优雅的用户体验。...
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 JavaScript 的操作，包括DOM操作、事件处理、动画...这种技术可以应用于表单填写、筛选条件设置等多种场景，使得用户能够更直观地进行多项选择。
在这个插件中，jQuery扮演了核心角色，它为实现下拉框的动态行为提供了基础。 该插件的核心特性包括： 1. **分类选项**：将长列表的选项按照类别划分，帮助用户更好地组织和理解下拉菜单的内容。例如，可以将不同...
在很多Form表单中，下拉框是很常见的组件，如果下拉框的选项比较少，少于10个或者20个，都比较容易选择，如果说选项超过50个或者更多，想找到自己想要的选项就不容易了。这种带搜索的下拉框，这个很容易看懂，方便，...
在实际应用中，"jQuery搜索下拉框选择菜单插件"可以广泛应用于各种需要下拉菜单的场合，如表单选择、导航菜单、搜索建议等。配合合理的UI设计，它能够为用户提供更加直观、高效的交互体验。 在压缩包中，"说明.htm"...
在实际应用中，这种插件可以广泛应用于后台系统的表单中，比如用户权限设置、数据过滤条件等场景，让用户能够方便快捷地选择多个选项。插件的可定制性也很强，可以通过调整CSS和JavaScript参数来适应不同的界面风格...
在网页开发中，jQuery 是一个广泛使用的 ...总结，jQuery为下拉框的实现提供了强大的工具和便利的操作，使得开发者能够轻松创建交互丰富的Web应用。通过理解并掌握上述技巧，你将能有效地提升网页的用户体验。
在实际应用中，"jQuery Select下拉框美化特效"可广泛应用于表单、过滤器、导航菜单等多种场景，提升网页的视觉效果和用户交互体验。对于前端开发者来说，掌握这类美化技巧是提高网页设计水平的重要一步。通过学习和...
在网页设计中，下拉框（Select）是常见的表单元素，用于提供多个选项供用户选择。然而，原生的下拉框样式通常比较单调，不符合现代网页的美观需求。`jQuery`是一个强大的JavaScript库，它提供了丰富的API，使得我们...
jQuery联动下拉框是一种常见的网页交互元素，常用于在多个下拉框之间建立数据关联，以便根据用户在第一个下拉框中的选择动态更新第二个或更多下拉框的内容。这种技术可以提升用户体验，减少用户手动输入，提高数据...
"Jquery可编辑下拉框控件"是一种基于jQuery的组件，它提供了更丰富的用户交互体验，允许用户在下拉框中进行编辑，不仅可以选择已有选项，还能输入自定义内容。这样的控件对于数据录入或搜索场景特别有用，因为它结合...
EasyUI是基于jQuery的一个前端UI框架，它提供了一系列的组件，如对话框、表格、下拉框等，帮助开发者快速构建用户界面。在EasyUI中，`combobox`组件可以用来创建具有下拉功能的选择框，且支持多选。 实现下拉框多选...
同时，利用jQuery的灵活性，我们可以将这个插件与其他库和框架（如Bootstrap、Vue.js等）结合使用，构建更复杂的前端应用。 总结起来，jQuery Select下拉框菜单选择插件是一个实用的前端工具，它借助jQuery的威力，...
总的来说，"带搜索框的jQuery美化下拉框"是一个实用的前端开发工具，它结合了jQuery的便捷性、搜索框的高效性和下拉框的易用性，能够帮助开发者创建出既美观又智能的网页表单，从而提升用户的操作体验。在实际应用中...
不过，由于`<select>`元素的限制，我们需要使用jQuery来实现更复杂的行为，如打开和关闭下拉菜单、处理用户交互等。这里的关键是使用jQuery的事件监听器（如`click`、`mouseover`）和DOM操作方法（如`addClass`、`...