下载文档原格式
jQuery实现⼆级下拉菜单效果⼤家都知道jQuery是⼀个框架，它对JS进⾏了封装，使其更⽅便使⽤。
前⾯两篇博⽂分别是⽤CSS样式和JS实现的，那么这篇就⽤jQuery来实现⼆级下拉式菜单。
使⽤JQuery实现需要⽤到的知识有：1)使⽤$(function(){...})获取到想要作⽤的HTML元素。
2)通过使⽤children()⽅法寻找⼦元素。
3)通过使⽤show()⽅法来显⽰HTML元素。
4)通过使⽤hide()⽅法来隐藏HTML元素。
5)jQuery库引⽤⽅法:先来看看效果图：最后我们来看看代码的情况，和前⾯的区别不⼤：HTML代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>下拉菜单</title><link rel="stylesheet" type="text/css" href="style.css" /><!--引⽤百度服务器的jQuery库--><script src="/jquery/1.9.0/jquery.js"></script><script type="text/javascript" src="script.js"></script></head><body><div id="nav" class="nav"><ul><li><a href="#">⽹站⾸页</a></li><li class="navmenu"><a href="#">课程⼤厅</a><ul><li><a href="#">JavaScript</a></li><li><a href="#">jQuery</a></li><li><a href="#">Ajax</a></li></ul></li><li class="navmenu"><a href="#">学习中⼼</a><ul><li><a href="#">视频学习</a></li><li><a href="#">案例学习</a></li><li><a href="#">交流平台</a></li></ul></li><li><a href="#">经典案例</a></li><li><a href="#">关于我们</a></li></ul></div></body></html>CSS样式表外部style.css⽂件代码：/*CSS全局设置*/*{margin:0;padding:0;}.nav{background-color:#EEEEEE;height:40px;width:450px;margin:0 auto;}ul{list-style:none;}ul li{float:left;line-height:40px;text-align:center;}a{text-decoration:none;color:#000000;display:block;width:90px;height:40px;}a:hover{background-color:#666666;color:#FFFFFF;}ul li ul li{float:none;background-color:#EEEEEE;}ul li ul{display:none;}/*为了兼容IE7写的CSS样式，但是必须写在a:hover前⾯*/ul li ul li a:link,ul li ul li a:visited{background-color:#EEEEEE;}ul li ul li a:hover{background-color:#009933;}JS脚本外部script,js⽂件代码：$(function(){$(".navmenu").mouseover(function(){$(this).children("ul").show();})$(".navmenu").mouseout(function(){$(this).children("ul").hide();})})希望本⽂所述对⼤家学习jquery程序设计有所帮助。
（实⽤篇）jQuery+PHP+MySQL实现⼆级联动下拉菜单⼆级联动下拉菜单选择应⽤在在很多地⽅，⽐如说省市下拉联动，商品⼤⼩类下拉选择联动。
本⽂将通过实例讲解使⽤jQuery+PHP+MySQL来实现⼤⼩分类⼆级下拉联动效果。
先看下效果实现的效果就是当选择⼤类时，⼩类下拉框⾥的选项内容也随着改变。
实现原理：根据⼤类的值，通过jQuery把值传给后台PHP处理，PHP通过查询MySQl数据库，得到相应的⼩类，并返回JSON数据给前端处理。
XHTML⾸先我们要建⽴两个下拉选择框，第⼀个是⼤类，第⼆个是⼩类。
⼤类的值可以是预先写好，也可以是从数据库读取。
<label>⼤类：</label><select name="bigname" id="bigname"><option value="1">前端技术</option><option value="2">程序开发</option><option value="3">数据库</option></select><label>⼩类：</label><select name="smallname" id="smallname"></select>jQuery先写⼀个函数，获取⼤类选择框的值，并通过$.getJSON⽅法传递给后台server.php，读取后台返回的JSON数据，并通过$.each⽅法遍历JSON数据，将对应的值写⼊⼀个option字符串，最后将option追加到⼩类⾥。
function getSelectVal(){$.getJSON("server.php",{bigname:$("#bigname").val()},function(json){var smallname = $("#smallname");$("option",smallname).remove(); //清空原有的选项$.each(json,function(index,array){var option = "<option value='"+array['id']+"'>"+array['title']+"</option>";smallname.append(option);});});}注意，在遍历JSON数据追加之前⼀定要先将⼩类⾥的原有的项清空。
jQuery下拉列表⼆级联动插件jQuery⼆级联动插件：jQuery.selected⼀个页⾯可以引⽤多个联动效果，使⽤⽅法：配置js：1var defaults = {2 NextSelId: '#Select2',3 SelTextId: '#Text1',4 Separator: '--',5 SelStrSet: [6 { name: '请选择', subname: '请选择'},7 { name: '★⾼起本★', subname: '计算机科学与技术|汉语⾔⽂学' },8 { name: '★⾼起专★', subname: '语⽂教育|⽂秘|学前教育|旅游管理|法律事务|经济管理|会计电算化|电⼦商务|计算机信息管理|软件⼯程|机电⼀体化|精细化学品⽣产技术|机械制造设计及⾃动化|播⾳与主持|艺术设计|书法⽅向艺术设计' },9 { name: '★专升本★', subname: '思想政治教育|汉语⾔⽂学|英语|数学与应⽤数学|电⼦信息⼯程|计算机科学与技术|会计学|公共事业管理|旅游管理|体育教育|⾳乐学|艺术设计|书法⽅向艺术设计'}]10 }1112var defaults2 = {13 NextSelId: '#Select4',14 SelTextId: '#Text2',15 Separator: '★',16 SelStrSet: [17 { name: '请选择', subname: '请选择'},18 { name: '北京', subname: '北京1|北京2' },19 { name: '上海', subname: '上海1|上海2|上海3|上海4' },20 { name: '天津', subname: '天津'}]21 } 配置说明： NextSelId：需要联动加载的下拉列表 ID SelTextId：显⽰选择选项的⽂本框 ID Separator：⼀级菜单、⼆级菜单分割字符串 SelStrSet：配置下拉选项 [{ name: '请选择', subname: '请选择'}] name：⼀级下拉选项；subname：⼆级下拉选项，多个⽤“|”分开；html页⾯：1<body>2<script type="text/javascript">3 $(function () {4 $('#Select1').selected(defaults);5 $('#Select3').selected(defaults2);67 });8</script>9<select id="Select1">10</select>11<select id="Select2">12</select>13<input id="Text1" type="text"/>14<br />15<select id="Select3">16</select>17<select id="Select4">18</select>19<input id="Text2" type="text"/>20</body>有好的建议请留⾔评论！。
Jquery实现纵向横向菜单第⼀个菜单实现的是点击菜单项显⽰相应的⼦菜单项，三⾓变为向下的三⾓。
下⾯的菜单⿏标移动到菜单项显⽰对应的⼦菜单项，⿏标移开⼦菜单消失。
下⾯介绍它的代码部分：html代码：head代码部分添加标题及引⽤：<span style="font-family:KaiTi_GB2312;font-size:18px;"><head><title>JQuery实战-菜单效果</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link type="text/css" rel="stylesheet" href="css/menu.css" /><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/menu.js"></script></head></span>body部分编辑菜单项内容，通过嵌套的ul和li来表⽰，菜单最外层为ul，⼀层每个主菜单放在⼀个li中。
如果有⼦菜单，在这个主菜单的li中建⽴新的ul，再依次嵌套就可以构建多层的菜单。
<span style="font-family:KaiTi_GB2312;font-size:18px;"><body><ul><li class="main"><a href="#">菜单项1</a><ul style="display:none;"><li><a href="#">⼦菜单项11</a></li><li><a href="#">⼦菜单项12</a></li></ul></li><li class="main"><a href="#">菜单项2</a><ul><li><a href="#">⼦菜单项21</a></li><li><a href="#">⼦菜单项22</a></li></ul></li><li class="main"><a href="#">菜单项3</a><ul><li><a href="#">⼦菜单项31</a></li><li><a href="#">⼦菜单项32</a></li></ul></li></ul><br/><ul><li class="hmain"><a href="#">菜单项1</a><ul><li><a href="#">⼦菜单项11</a></li><li><a href="#">⼦菜单项12</a></li></ul></li><li class="hmain"><a href="#">菜单项2</a><ul><li><a href="#">⼦菜单项21</a></li><li><a href="#">⼦菜单项22</a></li></ul></li><li class="hmain"><a href="#">菜单项3</a><ul><li><a href="#">⼦菜单项31</a></li><li><a href="#">⼦菜单项32</a></li></ul></li></ul></body></span>css代码部分1.浏览器中的ul和li元素默认情况下⽂字前都有圆点标识符，li元素会有缩进2.list-style属性值为none,可清除ul和li前⾯的⼩圆点。
jquery下拉菜单
下拉菜单或者导航是我们在⽹站开发中不可或缺的⽹站元素之⼀，使⽤jQuery可以制作出简洁易⽤、美观⼤⽅的下拉菜单或者导航效果。
下⾯展⽰的12款利⽤jQuery实现的下拉菜单即导航效果整理⾃前端⼤⽜爱好公众号的美⽂推送，⽤于分享和收藏。
1，全屏⼤幅下拉菜单导航
2，电商⽹站分类导航菜单特效
3，⿊⾊⽹站导航下拉菜单
4，动画下拉导航菜单
5，多条件筛选下拉选择框
6，hover响应下拉导航菜单栏
7，input⽂本框点击下拉选择
8，响应式下拉导航菜单
9，适应移动端选择框下拉列表
10，⿏标经过⼆级菜单下拉
11，垂直⼿风琴菜单列表
12，左侧下拉菜单
代码下载：
以上效果整理前端⼤⽜爱好者，如有侵权，请联系删除。
jq实现页面无限下拉功能的方法（原创实用版2篇）目录（篇1）I.页面无限下拉功能的概念和意义II.jq实现页面无限下拉功能的方法III.总结正文（篇1）一、页面无限下拉功能的概念和意义页面无限下拉功能是指当用户滚动到页面底部时，可以继续向下滚动并加载更多内容，以实现无缝的浏览体验。
这种功能可以提高用户体验，使网站更加友好和易于使用。
二、jq实现页面无限下拉功能的方法1.使用CSS实现无限下拉功能使用CSS的`overflow`属性可以控制元素是否溢出，将其设置为`auto`可以触发无限下拉功能。
然后，使用JavaScript监听滚动事件，当滚动到页面底部时，向服务器请求更多内容并更新页面。
2.使用Ajax实现无限下拉功能Ajax是一种使用XMLHttpRequest对象来异步地向服务器发送请求的技术。
使用Ajax可以实现页面无刷新加载数据，从而实现无限下拉功能。
当用户滚动到页面底部时，向服务器发送请求并获取更多数据，然后更新页面。
3.使用jQuery插件实现无限下拉功能jQuery是一种流行的JavaScript库，它简化了JavaScript编程。
许多插件可以帮助开发者快速实现无限下拉功能，例如`loadmore`插件。
使用这些插件可以大大减少开发时间和工作量。
三、总结jq实现页面无限下拉功能的方法有很多种，包括使用CSS、Ajax和jQuery插件等。
无论使用哪种方法，都可以提高用户体验和网站性能。
目录（篇2）1.页面无限下拉功能的需求分析2.jq实现页面无限下拉功能的实现方法3.总结和展望正文（篇2）一、页面无限下拉功能的需求分析页面无限下拉功能是指在页面加载时，初始显示部分内容，通过下拉页面，动态加载更多内容的功能。
这种功能在很多场景下都有应用，例如新闻滚动、商品列表等。
二、jq实现页面无限下拉功能的实现方法1.使用jq的滚动事件监听器，当页面滚动一定距离时，触发一个函数。
2.在这个函数中，使用ajax请求获取更多数据，并将数据动态添加到页面中。
本文通过一段实例代码给大家介绍jquery实现下拉加载功能，代码简单易懂，需要的朋友参考下吧直接给大家贴代码了，具体代码如下所示：<script>var str = '';if(page=="") page=1;var stop=true;//触发开关，防止多次调用事件$(window).scroll( function(event){//当内容滚动到底部时加载新的内容100当距离最底部100个像素时开始加载.if ($(this).scrollTop() + $(window).height() + 10 >= $(document).height() && $(this).scrollTop() > 10) {//if(stop==true){//stop=false;//var canshu="page/"+page+";var url = "";var parm = {'page':page};page=page+1;//当前要加载的页码//加载提示信息$("#showlists").append("<li class='ajaxtips'><div style='font-size:2em'>Loding…..</div><>");$.post(url,parm,function(data){if( data.count == 0 ) {$('.prolist-abtn').html('已全部加载完');return;}$.each(eval(data), function(data, val) {var url1 = "";$(".ajaxtips").hide();str = '<div class="content" id="showdiv">';str +='<div class="cont clearfix">';str +='<a href="url"><div class="cont_img fl">';str +='<img src='+val.imgurl+' alt="" /></div>';str += '<div class="cont_list fl"><p>'+val.sceneryname+'</p><ul class="cont_list fl">';str += '<li class="cont_list2"><span>￥</span>';str +='<strong>'+val.sellerprice+'</strong>起<i>￥'+val.sellerprice+'</i></li>';str +='</ul></div></a></div></div>';$("#showdiv").append(str);//把新的内容加载到内容的后面});stop=true;},'JSON')}});</script>以上代码是小编给大家分享的jQuery实现下拉加载功能实例代码，希望对大家有所帮助！。
使⽤Ajax和Jquery配合数据库实现下拉框的⼆级联动的⽰例⾸先我们需要先建⽴好数据库，将⼀些数据插⼊进去需要两张表：province：省份表city：城市表如图：然后再在java中建⽴相关的实体类与之对应再然后，我们就能开始做jdbc的操作了public class ConnectionFactory {private static String driver;private static String url;private static String user;private static String password;static {Properties prop = new Properties();//读取⽂件try {InputStream in = ConnectionFactory.class.getResourceAsStream("./jdbc.properties");prop.load(in);driver = prop.getProperty("jdbc.driver");url = prop.getProperty("jdbc.url");user = prop.getProperty("er");password = prop.getProperty("jdbc.password");} catch (IOException e) {e.printStackTrace();}}/*** 获取连接对象* @returnpublic static Connection getConnection(){Connection conn = null;try {Class.forName(driver);conn = DriverManager.getConnection(url, user, password);} catch (Exception e) {throw new RuntimeException(e);}return conn;}/*** 关闭资源* @param conn* @param pstmt* @param stmt* @param rs*/public static void close(Connection conn,PreparedStatement pstmt,Statement stmt,ResultSet rs){ try {if (conn != null) {conn.close();}if (pstmt != null) {pstmt.close();}if (stmt != null) {stmt.close();}if (rs != null) {rs.close();}} catch (SQLException e) {throw new RuntimeException(e);}}⾸先我们可以在页⾯加载的时候获取所有省份的信息，SQL语句如下Connection conn = null;PreparedStatement pstmt = null;Province province2 = null;@Overridepublic ArrayList<Province> findAllPro() {ResultSet rs = null;ArrayList<Province> pros = null;try {String sql = "select id,place from province";conn = ConnectionFactory.getConnection();pstmt = conn.prepareStatement(sql);pros = new ArrayList<Province>();rs = pstmt.executeQuery();while(rs.next()){Province province = new Province();province.setId(rs.getInt(1));province.setPlace(rs.getString(2));pros.add(province);}} catch (SQLException e) {throw new RuntimeException(e);}return pros;将查到的数据放到后台,建⽴⼀个SelectedServlet类，⽤于接收查询到的所有省份的信息response.setContentType("application/json;charset=utf-8");response.setCharacterEncoding("utf-8");request.setCharacterEncoding("utf-8");//创建⼀个Place对象ArrayList<Province> pros= new Place().findAllPro();PrintWriter out = response.getWriter();//将集合直接转换为Json对象out.write(JSONArray.fromObject(pros).toString());在这⾥会⽤到集合转换Json对象，我们需要导⼊以下⼏个包然后我们开始写前台页⾯：<body>省份:<select id="province"><option>--请选择省份--</option></select>城市:<select id="city"><option>--请选择城市--</option></select><br/><br/><span></span></body>然后jQuery代码如下:（由于我导⼊的jQuery版本⽐较低，所以使⽤的⽅法是getJSON，⽽不是getJson）$.getJSON("SelectedServlet",function(data,textStatus){var provinces = data;var res = "";for(var i =0;i<provinces.length;i++){<span style="white-space:pre"> </span>res += "<option>"+provinces[i].place+"</option>";}$("#province").append(res);});这样就能在页⾯加载的时候获取到数据然后我们再来做联动，⾸先给下拉框添加⼀个change事件，然后获取选中的信息，将选中的信息发送到另⼀个CityServlet中//下拉框改变时触发的事件$("#province").change(function(){var seled = $("option:selected").html();$("span").html(seled);$.getJSON("CityServlet",{"province":encodeURI(encodeURI(seled))},function(data){$("#city").html("");var citys = data;var res = "";for(var i = 0;i<citys.length;i++){res += "<option>"+citys[i].place+"</option>";}$("#city").append(res);});});服务器通过获得的信息通过sql语句查询出来，SQL代码如下：public ArrayList<City> findAllCityByPro(String name) {ResultSet rs = null;ArrayList<City> citys = null;try {//通过名字获得所有值String sql = "select c.city_place from city c ,"+ "province p where c.province_id = "+ " (select id from province where place = '"+ name +"') "+ " and c.province_id = p.id";conn = ConnectionFactory.getConnection();pstmt = conn.prepareStatement(sql);citys = new ArrayList<City>();System.out.println(sql);rs = pstmt.executeQuery();while(rs.next()){City city = new City();city.setPlace(rs.getString(1));citys.add(city);}System.out.println(citys);} catch (SQLException e) {e.printStackTrace();}return citys;}将查询到的数据发送到后台，后台接收到数据后将其转换为Json对象，并通过回调函数发送到前台，然后前台就可以通过事件直接获取到数据，⽽不⽤各种跳转页⾯，这就是Ajax(Asynchronous Javascript And XML),protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("application/json;charset=utf-8");response.setCharacterEncoding("utf-8");request.setCharacterEncoding("utf-8");// String proName = "浙江";String proName = URLDecoder.decode(URLDecoder.decode(request.getParameter("province"), "utf-8"),"utf-8");ArrayList<City> citys= new Place().findAllCityByPro(proName);PrintWriter out = response.getWriter();out.write(JSONArray.fromObject(citys).toString());}⾄于显⽰页⾯的代码也在前⾯写到jQuery语句中了效果如下：以上这篇使⽤Ajax和Jquery配合数据库实现下拉框的⼆级联动的⽰例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。
jquery 无限极下拉菜单的简洁实例(精简浓缩版)_下面我就为大家带来一篇jquery 无限极下拉菜单的简洁实例(精简浓缩版)。
我觉得挺不错的，现在就分享给大家，也给大家做个参考。
jquery 无限极下拉菜单的简洁实例(精简浓缩版)!doctype htmlhtmlheadmeta charset="utf-8"meta name="viewport" content="width=device-width" title脚本之家 /titlescript type="text/javascript" src="js/jquery-1.9.1.js"/scriptscript type="text/javascript"$(document).ready(function(){$(".menu li").hover(function(){$(this).children("ul").show(); //mouseover},function(){$(this).children("ul").hide(); //mouseout});});/scriptstyle type="text/css"ul{ list-style:none; margin:0; padding:0;}.menu { height:30px; line-height:30px; }.menu li { float:left; position:relative;} /*这一级是导航*/.menu li a { display:block; height:30px; line-height:30px; padding:0 20px; }.menu li a:hover { color:#000; background:#EFEFEF; } .menu li a.more { color:red; }.menu li ul { position:absolute; float:left; width:150px; border:1px solid #000; display:none;} /*这是其次级菜单*/.menu li ul a { width:110px; }.menu li ul a:hover { background:gray;}.menu li ul ul{ top:0;left:150px;} /*从第三级菜单开头,全部的子级菜单都相对偏移*//style/headbodyul class="menu"lia href="#"菜单一/aul class="one"lia href="#"菜单一/a/lilia href="#"菜单二/a/lilia href="#"菜单三/a/lilia href="#"菜单四/a/lilia href="#" class="more"菜单五/a ul class="two"lia href="#"菜单一/a/lilia href="#"菜单二/a/lilia href="#"菜单三/a/lilia href="#"菜单四/a/lilia href="#" class="more"菜单五/a ul class="three"lia href="#"菜单一/a/lilia href="#"菜单二/a/lilia href="#"菜单三/a/lilia href="#"菜单四/a/lilia href="#" class="more"菜单五/a ul class="four"lia href="#"菜单一/a/lilia href="#"菜单二/a/lilia href="#"菜单三/a/lilia href="#"菜单四/a/lilia href="#" class="more"菜单五/a ul class="four"lia href="#"菜单一/a/lilia href="#"菜单二/a/lilia href="#"菜单三/a/lilia href="#"菜单四/a/lilia href="#"菜单五/a/li/ul/li/ul/li/ul/li/ul/li/ullia href="#"菜单二/aul class="one"lia href="#"菜单一/a/lilia href="#"菜单二/a/lilia href="#" class="more"菜单三/a ul class="two"lia href="#"菜单一/a/lilia href="#"菜单二/a/lilia href="#" class="more"菜单三/a ul class="three"lia href="#"菜单一/a/lilia href="#"菜单二/a/lilia href="#"菜单三/a/lilia href="#"菜单四/a/lilia href="#"菜单五/a/li/ul/lilia href="#"菜单四/a/li/ul/li/ullia href="#"菜单三/a/lilia href="#"菜单四/a/lilia href="#"菜单五/aul class="one"lia href="#"菜单一/a/lilia href="#"菜单二/a/lilia href="#"菜单三/a/li/ul/li/ul/body/html以上这篇jquery 无限极下拉菜单的简洁实例(精简浓缩版)就是我分享给大家的全部内容了，盼望能给大家一个参考...。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
div.nav{
line-height: 36px;
background-color: #333;
height:36px;
width:960px;
margin-right:auto;
margin-left:auto;
color:#fff;
z-index:-1;
}
div.nav a{
color:#999;
text-decoration: none;
display:block;
float:left;
text-align: center;
padding-right:5px;
padding-left:5px;
width:100px;
}
div.navul li ul li{
line-height:28px;
height:28px;
}
div.navul{
float:left;
list-style-type: none;
z-index:20;
}
div.navul li{
float:left;
margin-bottom: 5px;
/*min-width: 65px;*/
width:110px;
}
div.navul li a:hover{
color:#f90;
background-color: #ccc;
padding-right: 5px;
padding-left:5px;
}
.on{
background-color: #666;
}
div.navul li ul{
display: none;
}
</style>
</head>
<body>
<div id="header">
<div class="nav">
<ul class="menulist">
<li id="n0"><a href="default.htm">首页</a></li>
<li ><a href="#">新闻</a>
<ul>
<li><a href="#">in</a></li>
<li><a href="#">out</a></li>
<li><a href="#">news</a></li>
</ul>
</li>
<li ><a href="#">信息</a>
<ul>
<li><a href="#">info</a></li>
<li><a href="#">education</a></li>
<li><a href="#">mobile</a></li>
</ul>
</li>
<li ><a href="#">社区</a>
<ul>
<li><a href="#">taobao</a></li>
<li><a href="#">amazon</a></li>
<li><a href="#">jd</a></li>
</ul>
</li>
</ul>
</div>
</div>
<scriptsrc="js/jquery-3.1.1.js"></script>
<script>
$(document).ready(function(){
menu();
});
function menu(){
$(".nav>ul>li:not(#n0)").hover(function(){
$(".nav>ul>li:not(#n0)").removeClass("on");
$(this).addClass("on");
$(this).find("ul").show();
},function(){
$(this).removeClass("on");
$(this).find("ul").hide();
})
}
</script>
</body>
</html>。
