jQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框?qū)崙?zhàn)(5)
今天來(lái)完成jQuery實(shí)戰(zhàn)的級(jí)聯(lián)下拉框效果。效果功能如下:
頁(yè)面默認(rèn)只提供汽車廠商,當(dāng)選擇了具體的某品牌汽車,汽車類型下拉框就會(huì)動(dòng)態(tài)的顯示出來(lái),選擇對(duì)應(yīng)的類型,然后出來(lái)該汽車類型對(duì)應(yīng)的輪胎類型下拉框顯示出來(lái),選中輪胎類型,頁(yè)面的正中間會(huì)顯示出汽車的圖片。
思路分析如圖:
建立我們的html頁(yè)面,程序清單如下:
代碼清單1.1: chainSelect.jsp
<body> <div class="loading"> <p><img src="../image/data-loading.gif" alt="數(shù)據(jù)裝載中" /></p> <p>數(shù)據(jù)裝載中......</p> </div> <div class="car"> <span class="carname"> 汽車廠商: <select> <option value="" selected="selected">請(qǐng)選擇汽車廠商</option> <option value="BMW">寶馬</option> <option value="Audi">奧迪</option> <option value="VW">大眾</option> </select> <img src="../image/pfeil.gif" alt="有數(shù)據(jù)"> </span> <span class="cartype"> 汽車類型: <select> <option selected="selected">默認(rèn)選項(xiàng)</option> <option>Test1</option> </select> <img alt="有數(shù)據(jù)" src="../image/pfeil.gif"> </span> <span class="wheeltype"> 車輪類型: <select> <option selected="selected">默認(rèn)選項(xiàng)</option> <option>Test1</option> </select> </span> </div> <div class="carimage"> <p><img src="../image/img-loading.gif" alt="圖片裝載中" class="carloading"></p> <p><img src="" alt="汽車圖片" class="carimg"></p> </div> </body>
body體里面囊括了3個(gè)div,第一個(gè)div的作用是顯示“數(shù)據(jù)正在裝載中…”的圖片和文字。第二個(gè)div顯示級(jí)聯(lián)下拉效果。第三個(gè)div顯示車輛圖片。
css代碼如下:
代碼清單1.2:chainSelect.css
.loading { width: 400px; margin: 0 auto; /* visibility: hidden; */ } .loading p { text-align: center; } p { margin: 0; } .car { text-align: center; } .carimage { text-align: center; } .cartype, .wheeltype, .carloading, .carimg, .car img { display: none; }
代碼清單1.3:chainSelect.js
$(document).ready(function(){ //找到三個(gè)下拉框 var carnameSelect = $(".carname").children("select"); var cartypeSelect = $(".cartype").children("select"); var wheeltypeSelect = $(".wheeltype").children("select"); carnameSelect.change(function(){ console.log("汽車廠商觸發(fā)onChange事件"); }); cartypeSelect.change(function(){ console.log("汽車類型觸發(fā)onChange事件"); }); wheeltypeSelect.change(function(){ console.log("車輪觸發(fā)onChange事件"); }); });
首先用jQuery的class選擇器選擇出三個(gè)下拉的框,當(dāng)它們的值改變時(shí)觸發(fā)對(duì)應(yīng)的jQuery函數(shù),對(duì)jQuery函數(shù)的處理才是重點(diǎn)的內(nèi)容。
首先說(shuō)到j(luò)Query中的ajax交互。前一篇我們用到get()的請(qǐng)求方式,今天來(lái)用以用post()方法的請(qǐng)求方式。
jQuery.post(url, [data], [callback], [type])
概述:
通過(guò)遠(yuǎn)程 HTTP POST 請(qǐng)求載入信息.這是一個(gè)簡(jiǎn)單的 POST 請(qǐng)求功
能以取代復(fù)雜ajax() 。請(qǐng)求成功時(shí)可調(diào)>用回調(diào)函數(shù)。如果需要在出錯(cuò)時(shí)執(zhí)行函數(shù),請(qǐng)使用 $.ajax。
參數(shù)含義:
url:發(fā)送請(qǐng)求地址。
data:待發(fā)送 Key/value 參數(shù)。
callback:發(fā)送成功時(shí)回調(diào)函數(shù)。
type:返回內(nèi)容格式,xml, html, script, json, text, _default。
案例如下:
代碼清單1.4:demo.js
$(document).ready(function(){ //發(fā)起ajax請(qǐng)求 $.post("../chainSelect", {name: "John", time: "2pm"}, function(data){ console.log("name : " + data.name); console.log("type : " + data.type); }, "json"); });
后臺(tái)Serlvet處理如下(當(dāng)然你可以使用java框架,也可以使用其他后臺(tái)語(yǔ)言)。
代碼清單1.5:demo.java
import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class ChainSelect extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("name = " + request.getParameter("name")); System.out.println("time = " + request.getParameter("time")); response.setCharacterEncoding("UTF-8"); response.setContentType("application/json; charset=utf-8"); String jsonStr = "{\"name\":\"fly\",\"type\":\"蟲(chóng)子\"}"; PrintWriter out = null; try { out = response.getWriter(); out.write(jsonStr); } catch (IOException e) { e.printStackTrace(); } finally { if (out != null) { out.close(); } } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
別忘了純Serlvet部屬要在你的web.xml做配置。我的Serlvet的完整路進(jìn)地址是:http://localhost:8080/JqueryStudy/chainSelect ,兩句System.out.println()輸出ajax傳遞過(guò)來(lái)的參數(shù)name和time。response.setCharacterEncoding(“UTF-8”)的作用是告訴瀏覽器字符串為utf-8的編碼,防止中文亂碼問(wèn)題。response.setContentType(“application/json; charset=utf-8”)將返回的字符串以json格式形式返回。out對(duì)象是輸出流,如果返回的是數(shù)組,格式應(yīng)該如下:[“test1”, “test2”, “test3”],如果是json類,則格式如下:{“name”:”fly”,”type”:”蟲(chóng)子”}。
上訴案例返回的是json對(duì)象,后臺(tái)控制臺(tái)輸出:
name = John
time = 2pm
前端瀏覽器的控制臺(tái)輸出:
name : fly
type : 蟲(chóng)子
Servlet返回?cái)?shù)組的案例如下:
代碼清單1.6:demo.java
import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class ChainSelect extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("name = " + request.getParameter("name")); System.out.println("time = " + request.getParameter("time")); response.setCharacterEncoding("UTF-8"); response.setContentType("application/json; charset=utf-8"); String jsonStr = "[\"test1\", \"test2\", \"test3\"]"; PrintWriter out = null; try { out = response.getWriter(); out.write(jsonStr); } catch (IOException e) { e.printStackTrace(); } finally { if (out != null) { out.close(); } } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
前端jQuery代碼:
$(document).ready(function(){ //發(fā)起ajax請(qǐng)求 $.post("../chainSelect", {name: "John", time: "2pm"}, function(data){ for(var i = 0; i < data.length; i++) { console.log((i+1) + " : " + data[i]); } }, "json"); });
后臺(tái)之需要給jsonStr賦值為數(shù)組格式而已,而前端jQuery代碼由于接收到的字符串?dāng)?shù)組,所以這里需要用遍歷數(shù)組的形式來(lái)遍歷。
本案例的Servlet代碼清單:
代碼清單1.7:ChainSelect.java
import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class ChainSelect extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("UTF-8"); response.setContentType("application/json; charset=utf-8"); String jsonStr = this.getStr(request.getParameter("keyword"), request.getParameter("type")); PrintWriter out = null; try { out = response.getWriter(); out.write(jsonStr); } catch (IOException e) { e.printStackTrace(); } finally { if (out != null) { out.close(); } } } private String getStr(String keyword, String type) { String jsonStr = ""; if("top".equals(type)) { if("BMW".equals(keyword)) { jsonStr = "[\"316ti\", \"6ercupe\"]"; } else if("Audi".equals(keyword)) { jsonStr = "[\"tt\"]"; } else if("VW".equals(keyword)) { jsonStr = "[\"Golf4\"]"; } } else if("sub".equals(type)) { if("tt".equals(keyword)) { jsonStr = "[\"rha\", \"rhb\", \"rhc\"]"; } else if("316ti".equals(keyword)) { jsonStr = "[\"rha\", \"rhb\"]"; } else if("6ercupe".equals(keyword)) { jsonStr = "[\"rha\", \"rhb\", \"rhc\"]"; } else if("Golf4".equals(keyword)) { jsonStr = "[\"rha\", \"rhb\"]"; } } return jsonStr; } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
代碼清單1.7與清單1.6的區(qū)別是,后者多了getStr()的方法,該方法用于判斷前端傳遞過(guò)來(lái)的是一級(jí)(top)下拉框的值,還是二級(jí)(sub)下拉框的值,并根據(jù)傳遞的keyword返回需要的字符串。與本后臺(tái)交互的是程序清單1.8所示的代碼。
程序清單1.8:chainSelect.js
/** * 級(jí)聯(lián)下拉框效果 */ $(document).ready(function(){ //找到三個(gè)下拉框 var carnameSelect = $(".carname").children("select"); var cartypeSelect = $(".cartype").children("select"); var wheeltypeSelect = $(".wheeltype").children("select"); carnameSelect.change(function(){ var carname = carnameSelect.val(); if(carname != "") { //汽車廠商不為空發(fā)起ajax請(qǐng)求 $.post("../chainSelect", {keyword: carname, type : "top"}, function(data){ if(data != null && data.length != 0) { //清除上一次change的內(nèi)容 cartypeSelect.html(""); $("<option value=''>請(qǐng)選擇汽車類型</option>").appendTo(cartypeSelect); for(var i = 0; i < data.length; i++) { $("<option value='"+data[i]+"'>"+data[i]+"</option>").appendTo(cartypeSelect); } $(".cartype").show(); carnameSelect.next("img").show(); } }, "json"); } else { //3.如果值為空,那么第二個(gè)下拉框所在span要隱藏起來(lái),第一個(gè)下拉框后面的指示圖片也要隱藏 $(".cartype").hide(); $(".wheeltype").hide(); $(".carimage").hide(); $(this).next("img").hide(); } }); cartypeSelect.change(function(){ var cartype = cartypeSelect.val(); if(cartype != "") { //汽車類型不為空發(fā)起ajax請(qǐng)求 $.post("../chainSelect", {keyword: cartype, type : "sub"}, function(data){ if(data != null && data.length != 0) { //清除上一次change的內(nèi)容 wheeltypeSelect.html(""); $("<option value=''>請(qǐng)選擇車輪類型</option>").appendTo(wheeltypeSelect); for(var i = 0; i < data.length; i++) { $("<option value='"+data[i]+"'>"+data[i]+"</option>").appendTo(wheeltypeSelect); } $(".wheeltype").show(); cartypeSelect.next("img").show(); } }, "json"); } else { //汽車類型為空 $(".wheeltype").hide(); $(".carimage").hide(); $(this).next("img").hide(); } }); wheeltypeSelect.change(function(){ //選中的車輪類型 var wheeltype = wheeltypeSelect.val(); if(wheeltype != "") { //選中的車輛廠商 var carname = carnameSelect.val(); //選中的車輛類型 var cartype = cartypeSelect.val(); //圖片的名稱 var carimgName = carname + "_" + cartype + "_" + wheeltype + ".jpg"; console.log("carimgName : " + carimgName); $(".carimage").show(); $(".carimg").attr("src", "../image/" + carimgName).load(function(){ //隱藏loading圖片 $(".carloading").hide("slow"); }); $(".carimage p img").show("slow"); } else { // alert("內(nèi)容為空"); // $("img").hide(); $(".carimage").hide(); } }); //給數(shù)據(jù)裝載中的節(jié)點(diǎn)定義ajax事件,實(shí)現(xiàn)動(dòng)畫(huà)提示效果 $(".loading").ajaxStart(function(){ $(this).css("visibility", "visible"); $(this).animate({ opacity: 1 },0); }).ajaxStop(function(){ $(this).animate({ opacity: 0 },500); }); });
jQuery代碼的思路是,用class選擇器選擇出三個(gè)下拉框,賦值給變量carnameSelect,cartypeSelect,wheeltypeSelect,默認(rèn)carnameSelect下拉框是顯示的,其他下拉框是隱藏。然后給他們?nèi)咦?cè)change()事件,當(dāng)用戶選擇下拉框的值的時(shí)候執(zhí)行事件函數(shù)體里面的內(nèi)容。這里我以第一級(jí)下拉框?yàn)槔齺?lái)講解處理的過(guò)程。如果用戶選擇了第一級(jí)下拉框”汽車廠商”的”寶馬”,則執(zhí)行如下代碼:
carnameSelect.change(function(){ var carname = carnameSelect.val(); if(carname != "") { //汽車廠商不為空發(fā)起ajax請(qǐng)求 $.post("../chainSelect", {keyword: carname, type : "top"}, function(data){ if(data != null && data.length != 0) { //清除上一次change的內(nèi)容 cartypeSelect.html(""); $("<option value=''>請(qǐng)選擇汽車類型</option>").appendTo(cartypeSelect); for(var i = 0; i < data.length; i++) { $("<option value='"+data[i]+"'>"+data[i]+"</option>").appendTo(cartypeSelect); } $(".cartype").show(); carnameSelect.next("img").show(); } }, "json"); } else { //3.如果值為空,那么第二個(gè)下拉框所在span要隱藏起來(lái),第一個(gè)下拉框后面的指示圖片也要隱藏 $(".cartype").hide(); $(".wheeltype").hide(); $(".carimage").hide(); $(this).next("img").hide(); } });
先將第一級(jí)下拉框內(nèi)容取出來(lái),如果值為空,那么第二個(gè)下拉框所在span要隱藏起來(lái),第一個(gè)下拉框后面的指示圖片也要隱藏。如果有內(nèi)容, 則用該行代碼$.post(“../chainSelect”, {keyword: carname, type : “top”}, function(data){}, “json”)向上訴的Serlvet發(fā)起post請(qǐng)求,post的第一個(gè)參數(shù)是Serlvet的后臺(tái)地址,第二個(gè)參數(shù)畫(huà)括號(hào)括起來(lái)的json數(shù)據(jù),第三個(gè)參數(shù)是回調(diào)函數(shù),第四個(gè)參數(shù)”json”表明發(fā)送的json數(shù)據(jù)。在回調(diào)函數(shù)中,參數(shù)data接收Serlvet返回的值,由于Serlvet返回的是可以解析為字符串?dāng)?shù)組的數(shù)據(jù),所以用for循環(huán)來(lái)遍歷得到的數(shù)據(jù),并生成option新節(jié)點(diǎn)appenTo()插入到select之后。
程序清單1.8中,值得注意的地方還有$(“.loading”).ajaxStart(function(){}).ajaxStop(function(){}),這是為了美化汽車圖片加載的代碼。這里用到j(luò)Query的動(dòng)畫(huà)專用效果的animate(),使程序淡入淡出更加的和諧。
到此幾乎把級(jí)聯(lián)效果實(shí)現(xiàn)了,但是如果在高并發(fā)環(huán)境下,每次用戶切換選項(xiàng)都向服務(wù)器發(fā)送請(qǐng)求,服務(wù)器的壓力可能過(guò)大。所以這里我們用jQuery的緩存來(lái)保存那些已經(jīng)緩存過(guò)的請(qǐng)求。可以使用jQuery的data()方法。
定義和用法
從被選元素中返回附加的數(shù)據(jù)。
$(selector).data(name)
name 可選。規(guī)定要取回的數(shù)據(jù)的名稱。
如果沒(méi)有規(guī)定名稱,則該方法將以對(duì)象的形式從元素中返回所有存儲(chǔ)的數(shù)據(jù)。
向元素附加數(shù)據(jù)
$(selector).data(name,value)
name 必需。規(guī)定要設(shè)置的數(shù)據(jù)的名稱。
value 必需。規(guī)定要設(shè)置的數(shù)據(jù)的值。
data()的使用案例如程序清單1.9:
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn1").click(function(){ $("div").data("greeting", "Hello World"); }); $("#btn2").click(function(){ alert($("div").data("greeting")); }); }); </script> </head> <body> <button id="btn1">把數(shù)據(jù)添加到 div 元素</button><br /> <button id="btn2">獲取已添加到 div 元素的數(shù)據(jù)</button> <div></div> </body> </html>
加上緩存之后的完整jQuery代碼如下程序清單。
程序清單2.0:chainSelect.js
/** * 級(jí)聯(lián)下拉框效果 */ $(document).ready(function(){ //找到三個(gè)下拉框 var carnameSelect = $(".carname").children("select"); var cartypeSelect = $(".cartype").children("select"); var wheeltypeSelect = $(".wheeltype").children("select"); carnameSelect.change(function(){ var carname = carnameSelect.val(); if(carname != "") { if (!carnameSelect.data(carname)) { //汽車廠商不為空發(fā)起ajax請(qǐng)求 $.post("../chainSelect", {keyword: carname, type : "top"}, function(data){ if(data != null && data.length != 0) { //清除上一次change的內(nèi)容 cartypeSelect.html(""); $("<option value=''>請(qǐng)選擇汽車類型</option>").appendTo(cartypeSelect); for(var i = 0; i < data.length; i++) { $("<option value='"+data[i]+"'>"+data[i]+"</option>").appendTo(cartypeSelect); } $(".cartype").show(); carnameSelect.next("img").show(); } //將data放入緩存 carnameSelect.data(carname, data); }, "json"); } else { //從緩存中取出數(shù)據(jù) var data = carnameSelect.data(carname); if(data != null && data.length != 0) { //清除上一次change的內(nèi)容 cartypeSelect.html(""); $("<option value=''>請(qǐng)選擇汽車類型</option>").appendTo(cartypeSelect); for(var i = 0; i < data.length; i++) { $("<option value='"+data[i]+"'>"+data[i]+"</option>").appendTo(cartypeSelect); } $(".cartype").show(); carnameSelect.next("img").show(); } } } else { //3.如果值為空,那么第二個(gè)下拉框所在span要隱藏起來(lái),第一個(gè)下拉框后面的指示圖片也要隱藏 $(".cartype").hide(); $(".wheeltype").hide(); $(".carimage").hide(); $(this).next("img").hide(); } }); cartypeSelect.change(function(){ var cartype = cartypeSelect.val(); if(cartype != "") { if(!cartypeSelect.data(cartype)) { //汽車類型不為空發(fā)起ajax請(qǐng)求 $.post("../chainSelect", {keyword: cartype, type : "sub"}, function(data){ if(data != null && data.length != 0) { //清除上一次change的內(nèi)容 wheeltypeSelect.html(""); $("<option value=''>請(qǐng)選擇車輪類型</option>").appendTo(wheeltypeSelect); for(var i = 0; i < data.length; i++) { $("<option value='"+data[i]+"'>"+data[i]+"</option>").appendTo(wheeltypeSelect); } $(".wheeltype").show(); cartypeSelect.next("img").show(); } cartypeSelect.data(cartype, data); }, "json"); } else { var data = cartypeSelect.data(cartype); if(data != null && data.length != 0) { //清除上一次change的內(nèi)容 wheeltypeSelect.html(""); $("<option value=''>請(qǐng)選擇車輪類型</option>").appendTo(wheeltypeSelect); for(var i = 0; i < data.length; i++) { $("<option value='"+data[i]+"'>"+data[i]+"</option>").appendTo(wheeltypeSelect); } $(".wheeltype").show(); cartypeSelect.next("img").show(); } } } else { //汽車類型為空 $(".wheeltype").hide(); $(".carimage").hide(); $(this).next("img").hide(); } }); wheeltypeSelect.change(function(){ //選中的車輪類型 var wheeltype = wheeltypeSelect.val(); if(wheeltype != "") { //選中的車輛廠商 var carname = carnameSelect.val(); //選中的車輛類型 var cartype = cartypeSelect.val(); //圖片的名稱 var carimgName = carname + "_" + cartype + "_" + wheeltype + ".jpg"; $(".carimage").show(); //通過(guò)Javascript中的Image對(duì)象預(yù)裝載圖片 var cacheimg = new Image(); $(cacheimg).attr("src", "../image/" + carimgName).load(function(){ //隱藏loading圖片 $(".carloading").hide("slow"); $(".carimg").attr("src", "../image/" + carimgName); }); $(".carimage p img").show("slow"); } else { $(".carimage").hide(); } }); //給數(shù)據(jù)裝載中的節(jié)點(diǎn)定義ajax事件,實(shí)現(xiàn)動(dòng)畫(huà)提示效果 $(".loading").ajaxStart(function(){ $(this).css("visibility", "visible"); $(this).animate({ opacity: 1 },0); }).ajaxStop(function(){ $(this).animate({ opacity: 0 },500); }); });
用了data()之后,當(dāng)用戶選擇了下拉框,并不是直接奔著服務(wù)器請(qǐng)求而去的,而是先判斷緩存是否為空,carnameSelect.data(carname)。如果為空,則發(fā)起ajax請(qǐng)求,并將返回的結(jié)果放進(jìn)緩存carnameSelect.data(carname, data)。如果不為空,在循環(huán)添加option節(jié)點(diǎn)之前data從緩存中拿到var data = carnameSelect.data(carname)。同樣的,圖片的緩存放進(jìn)我們的Image對(duì)象中var cacheimg = new Image(),這行代碼往后的第一行和第四行將緩存中的圖片取出并顯示出來(lái)。
代碼下載地址:https://github.com/shizongger/JqueryInAction
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery+PHP+MySQL實(shí)現(xiàn)無(wú)限級(jí)聯(lián)下拉框效果
- JQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框效果實(shí)例講解
- jQuery制作簡(jiǎn)潔的多級(jí)聯(lián)動(dòng)Select下拉框
- JQuery異步加載無(wú)限下拉框級(jí)聯(lián)功能實(shí)現(xiàn)示例
- 基于jquery的無(wú)限級(jí)聯(lián)下拉框js插件
- 省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單javascript版
- jsp從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)填充下拉框?qū)崿F(xiàn)二級(jí)聯(lián)動(dòng)菜單的方法
- javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單
- js實(shí)現(xiàn)的下拉框二級(jí)聯(lián)動(dòng)效果
- js+xml生成級(jí)聯(lián)下拉框代碼
相關(guān)文章
jQuery入門(mén)基礎(chǔ)知識(shí)學(xué)習(xí)指南
這篇文章主要介紹了jQuery入門(mén)基礎(chǔ)知識(shí)學(xué)習(xí)指南,jQuery是當(dāng)下最主流人氣最高的JavaScript庫(kù),需要的朋友可以參考下2015-08-08jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件無(wú)響應(yīng)的解決辦法
這篇文章主要介紹了jQuery on()方法綁定動(dòng)態(tài)元素的點(diǎn)擊事件無(wú)響應(yīng)的解決辦法的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07jQuery判斷當(dāng)前點(diǎn)擊的是第幾個(gè)li的代碼
jQuery中如何判斷當(dāng)前點(diǎn)擊的是第幾個(gè)li,使用$(this).index()取得li的下標(biāo),下面的示例,大家可以看看2014-09-09jquery實(shí)現(xiàn)點(diǎn)擊彈出可放大居中及關(guān)閉的對(duì)話框(附demo源碼下載)
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊彈出可放大居中及關(guān)閉的對(duì)話框,具有可拖動(dòng)、放大、居中及關(guān)閉等功能,提供了2種對(duì)話框模式供讀者選擇,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05基于jquery實(shí)現(xiàn)最簡(jiǎn)單的選項(xiàng)卡切換效果
這篇文章主要介紹了基于jquery實(shí)現(xiàn)最簡(jiǎn)單的選項(xiàng)卡切換效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的朋友可以參考一下2016-05-05jQuery oLoader實(shí)現(xiàn)的加載圖片和頁(yè)面效果
我們使用jQuery的ajax在頁(yè)面中就像使用iframe一樣加載其他頁(yè)面內(nèi)容,今天我給大家分享一個(gè)名叫jQuery oLoader的插件,該插件還集成了oPageLoader,可以輕松實(shí)現(xiàn)加載圖片和頁(yè)面的漂亮效果。2015-03-03jquery UI Datepicker時(shí)間控件的使用方法(加強(qiáng)版)
這篇文章繼續(xù)介紹了jquery UI Datepicker時(shí)間控件的使用方法,主要關(guān)于Datepicker插件的介紹和使用,并分享了第一個(gè)日歷插件的使用實(shí)例,需要的朋友可以參考下2015-11-11