JQuery——级联下拉框
来源:互联网 发布:苹果mac更新系统版本 编辑:程序博客网 时间:2024/05/15 13:48
最近看JQuery视频,跟着实现了几个例子,整个过程中感觉不只是学到了新知识,更重新巩固了之前学习的内容,收获着实不小,今天小编敲的级联下拉框效果的视频,很喜欢这个效果,也把学习成果记录下来。
效果实现过程
1.chainselect.html部分
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>JQuery实例-级联下拉框效果</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link type="text/css" rel="stylesheet" href="css/chainselect.css" /><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/chainselect.js"></script></head><body><div class="loading"><p><img src="images/data-loading.gif" alt="数据装载中" /></p><p>数据装载中......</p> <!--<p></p>中显示的是一行的内容,只要在去后面就换行--></div><div class="car"><span class="carname">汽车厂商:<select><option value="" selected="selected">请选择汽车厂商</option> <!--文本框中默认显示内容--><option value="BMW">宝马</option><option value="Audi">奥迪</option><option value="VW">大众</option></select><img src="images/pfeil.gif" alt="有数据" /></span><span class="cartype">汽车类型:<select></select><img src="images/pfeil.gif" alt="有数据" /></span><span class="wheeltype">车轮类型:<select></select></span></div><div class="carimage"><p><img src="images/img-loading.gif" alt="图片装载中" class="carloading" /></p><p><img src="" alt="汽车图片" class="carimg"/></p></div></body></html>
2.chainselect.css部分
.loading{width:400px;/*margin-left:auto; /*左边距,这个属性使之居中*//*margin-right:auto;*/margin:0 auto;visibility:hidden; /*隐藏*/}.loading p{text-align:center;}p{margin:0;}.car{width:500px;margin:0 auto;text-align:center;}.carimage{text-align:center; }.cartype, .wheeltype, .car img, .carloading, .carimg{display:none; /*加载时内容暂时不显示*/ }
3.chainselect.js部分
$(document).ready(function(){var carnameSelect=$(".carname").children("select");var cartypeSelect=$(".cartype").children("select");var wheeltypeSelect=$(".wheeltype").children("select");//给三个下拉框注册事件,carnameSelect.change(function(){//1.获取当前下拉框的值var carnameValue=$(this).val();//2,如果值不为空,则将下拉框的值传送给服务器if(carnameValue!=""){$.post("chainSelect",{keyword.carnameValue.type:top},function(data){//2.1接受服务器返回的汽车类型if(data.length!=0){//2.2解析汽车类型的数据,填充到汽车类型的下拉框中for(var i=0;i<data.length;i++){$("<option value='" +data[i] + "'>" +data[i] +"</option>").appendTo(cartypeSelect);}//2.2.1汽车类型的下拉框显示出来cartypeSelect.parent().show();//2.2.2第一个下拉框往后的指示图片显示出来carnameSelect.next().show();}else{//2.3没有任何汽车类型的数据}},"json");}else{//3.如果值为空,那么第二个下拉框所在的span要隐藏起来,第一个下拉框后面的指示图片也要隐藏cartypeSelect.parent().hide();carnameSelect.next().hide();}});cartypeSelect.change(function){});wheeltypeSelect.change(function){});});
实现效果
学习收获
1.img标签的alt属性要写上,在图片尚未装载进来或图片不存在时,这个属性的文字信息会显示出来;
2.select表示下拉框,下拉框的每一项都是一个option,option开始结尾标签中的内容会显示在页面上,value属性的值则是用于在JQuery中用val方法获取并发送给服务器的。定义了selected的属性值为selected时,表示当前option被选中;
3.div元素居中显示的方法:给div设定宽度,然后margin-left和margin-right的值都为auto。简写方法margin: 0 auto;
4.html的p标签表示一个段落的内容,其中的内容会独占一行或多行,后面的内容会另起一行显示;
5.为了让p中文字和图片居中,可以使用text-align属性,属性值为center。p标签默认有margin-top和margin-bottom的值,需要的话可以通过css清除;
4.html的p标签表示一个段落的内容,其中的内容会独占一行或多行,后面的内容会另起一行显示;
5.为了让p中文字和图片居中,可以使用text-align属性,属性值为center。p标签默认有margin-top和margin-bottom的值,需要的话可以通过css清除;
6.visibility的属性值为hidden时,元素隐藏,但是和display为none不同的时,在页面中任然占据一定空间,只是不显示;
7.多个选择器如果有相同的属性值,可以放在一起定义,选择器之间用逗号分割;
8.change方法对应标准Javascript中的onchange事件,可以处理下拉框内容变化的事件;
7.多个选择器如果有相同的属性值,可以放在一起定义,选择器之间用逗号分割;
8.change方法对应标准Javascript中的onchange事件,可以处理下拉框内容变化的事件;
9.parent方法可以获得一个节点的父节点;
10.next方法可以获得一个节点的下一个兄弟节点,对应的previous方法可以获得一个节点的上一个兄弟节点;
11.$.post方法可以和服务器端发起post的异步请求。第一个参数是请求的服务器端地址,第二个参数是发送给服务器端的数据,参数是Javascript的对象,采用名值对的方式表示,第三个参数是回调方法,第四个参数指示服务器端返回的数据类型,JQuery会根据这个参数帮我们进行转换。get方法只有第二个参数不同,其他几个参数用法相同;
10.next方法可以获得一个节点的下一个兄弟节点,对应的previous方法可以获得一个节点的上一个兄弟节点;
11.$.post方法可以和服务器端发起post的异步请求。第一个参数是请求的服务器端地址,第二个参数是发送给服务器端的数据,参数是Javascript的对象,采用名值对的方式表示,第三个参数是回调方法,第四个参数指示服务器端返回的数据类型,JQuery会根据这个参数帮我们进行转换。get方法只有第二个参数不同,其他几个参数用法相同;
12.Javascript中的简单对象定义方式是{key1:value1, key2: value2};
13.JSON的数据格式其实就是Javascript中的一个对象或数据定义的文本格式内容,比如{key1: value1, key2: [1,2,3]}或[1,2,{key2:value2}];
14.可以直接$(“<option></option>”)的方法来建立下拉框中的选项,然后用appendTo这样的方法加入到下拉框中;
13.JSON的数据格式其实就是Javascript中的一个对象或数据定义的文本格式内容,比如{key1: value1, key2: [1,2,3]}或[1,2,{key2:value2}];
14.可以直接$(“<option></option>”)的方法来建立下拉框中的选项,然后用appendTo这样的方法加入到下拉框中;
15.attr方法可以设置或获取某一个节点的属性值;
16.ajaxStart在每一个JQuery发出的ajax请求开始前执行,ajaxStop在JQuery队列中所有的ajax请求结束后行,ajaxComplete在每一个JQuery发出的ajax请求结束后执行;
17.fadeOut和fadeIn可以实现淡出淡入的效果,参数内容和slideUp,slideDown方法类似;
16.ajaxStart在每一个JQuery发出的ajax请求开始前执行,ajaxStop在JQuery队列中所有的ajax请求结束后行,ajaxComplete在每一个JQuery发出的ajax请求结束后执行;
17.fadeOut和fadeIn可以实现淡出淡入的效果,参数内容和slideUp,slideDown方法类似;
18.animate方法可以实现任意的动画效果,可以控制某个css属性在某个时间内进行变化,从而达到动画的效果
19.opacity可以改变元素的透明度,IE中使用过滤器实现,100表示完全显示,0表示完全透明,非IE浏览器使用opacity属性,1表示完全显示,0表示透明。JQuery在animate方法中屏蔽了浏览器差异,直接使用opacity就可以达到淡入淡出的效果;
19.opacity可以改变元素的透明度,IE中使用过滤器实现,100表示完全显示,0表示完全透明,非IE浏览器使用opacity属性,1表示完全显示,0表示透明。JQuery在animate方法中屏蔽了浏览器差异,直接使用opacity就可以达到淡入淡出的效果;
20.data方法可以用于缓存数据。缓存可以提高系统的运行效率,降低服务器端的负荷;
21.可以使用Javascript中的Image对象来预装载图片,这样可以知道图片何时装载完成,以便给出一些图片装载的提示信息;
22.load方法可以对应Javascript中的onload事件,本例中用于捕捉图片加载完成的事件;
21.可以使用Javascript中的Image对象来预装载图片,这样可以知道图片何时装载完成,以便给出一些图片装载的提示信息;
22.load方法可以对应Javascript中的onload事件,本例中用于捕捉图片加载完成的事件;
小结
通过不断的反复学习,对很多知识点都有了更深一步的理解。最近学的几个阶段的视频很多都是共性的,当然也是相通的,他们更像是互相的补充和提高,每往下学习一步就会有更深一层次的理解。
小编在敲例子的同时对自己不太懂的地方选择性的添加了注释,给自己的学习做个标记,不怕不知道,就怕不知道!要先知道,才能再知道!
1 0
- JQuery——级联下拉框
- 【JQuery】——级联下拉框效果
- jquery级联下拉框
- JQuery学习5——级联下拉框效果
- JQuery实战:级联下拉框
- ajax jquery springmvc 级联下拉框
- 级联下拉框 ajax jquery springmvc
- JQuery Servlet Json 下拉框级联
- jquery 级联下拉框实例代码
- JQuery级联下拉框的实现
- jQuery实战-省市级联下拉框
- jQuery效果之级联下拉框
- jQuery easyUI combobox下拉框 联动 级联
- jQuery实战5:级联下拉框效果
- js jquery 级联显示下拉框
- 使用jQuery制作级联下拉列表框
- jQuery实现级联下拉
- jquery 下拉列表级联
- 11078Open Credit System
- leetcode之Lowest Common Ancestor of a Binary Search Tree
- android 源码剖析之------Window的内部实现机制(添加、删除、更新)
- 赋值不是初始化
- 获取和设置asp:RadioButtonList的值
- JQuery——级联下拉框
- 来到CSDN的第一天
- Servlet的使用
- 决策树 算法 理论
- UVa 11472 - Beautiful Numbers
- OpenGL ES2.0开发经验(一) :
- 集合初探(一)
- matlab中 bsxfun函数
- 直接初始化与拷贝(复制)初始化