JQuery省市聯(lián)動(dòng)效果實(shí)現(xiàn)過(guò)程詳解
Js相關(guān)技術(shù)
JS中的數(shù)組: ["城市"]
new Array()
DOM樹(shù)操作:
- 創(chuàng)建節(jié)點(diǎn): document.createElement
- 創(chuàng)建文本節(jié)點(diǎn): document.createTextNode
- 添加節(jié)點(diǎn): appendChild
需求分析
在我們的注冊(cè)表單中,通常我們需要知道用戶的籍貫,需要一個(gè)給用選擇的項(xiàng),當(dāng)用戶選中了省份之后,列出省下面所有的城市
技術(shù)分析
準(zhǔn)備工作 : 城市信息的數(shù)據(jù)
添加節(jié)點(diǎn) : appendChild (JS)
a. append : 添加子元素到末尾
$("#div1").append("<font color='red'>this is replacing text</font>")
b. appendTo : 給自己找一個(gè)爹,將自己添加到別人家里
$("#div1").prepend("<font color='red'>this is replacing text</font>")
和第一個(gè)效果一樣
c. prepend : 在子元素前面添加
$("#div1").after("<font color='red'>this is replacing text</font>")
d. after : 在自己的后面添加一個(gè)兄弟
$("<font color='red'>this is replacing text</font>").appendTo("#div1")
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <script> $(function () { $("#btn1").click(function () { // $("#div1").append("<font color='red'>this is replacing text</font>") // $("#div1").prepend("<font color='red'>this is replacing text</font>") $("#div1").after("<font color='red'>this is replacing text</font>") // $("<font color='red'>this is replacing text</font>").appendTo("#div1") }); }); </script> </head> <body> <input type="button" value="click me, replace text" id="btn1"> <div id="div1">this is a text that will be replaced!</div> </body> </html>
遍歷的操作:
<script> var cities = ["深圳市", "東莞市", "惠州市", "廣州市"]; $(cities).each(function (i, n) { console.log(i + "====" + n); }) $.each(cities, function (i, n) { console.log(i + ">>>>" + n); }) </script>
步驟分析:
- 導(dǎo)入JQ的文件
- 文檔加載事件:頁(yè)面初始化
- 進(jìn)一步確定事件: change事件
- 函數(shù): 得到當(dāng)前選中省份
- 得到城市, 遍歷城市數(shù)據(jù)
- 將遍歷出來(lái)的城市添加到城市的select中
代碼實(shí)現(xiàn):
$(function(){ $("#province").change(function(){ // alert(this.value); //得到城市信息 var cities = provinces[this.value]; //清空城市select中的option /*var $city = $("#city"); //將JQ對(duì)象轉(zhuǎn)成JS對(duì)象 var citySelect = $city.get(0) citySelect.options.length = 0;*/ $("#city").empty(); //采用JQ的方式清空 //遍歷城市數(shù)據(jù) $(cities).each(function(i,n){ $("#city").append("<option>"+n+"</option>"); }); }); });
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery-Citys省市區(qū)三級(jí)菜單聯(lián)動(dòng)插件使用詳解
- jquery+php后臺(tái)實(shí)現(xiàn)省市區(qū)聯(lián)動(dòng)功能示例
- 使用PHP+MySql+Ajax+jQuery實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)功能示例
- jquery+ajax實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)(封裝和不封裝兩種方式)
- jQuery ajax實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)
- jQuery實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單功能示例【測(cè)試可用】
- 省市區(qū)三級(jí)聯(lián)動(dòng)jquery實(shí)現(xiàn)代碼
- jQuery+jsp實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)效果(附源碼)
相關(guān)文章
jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)小圖查看大圖的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)滑過(guò)小圖查看大圖的方法,涉及jquery鼠標(biāo)事件及圖片樣式動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07jquery.blockUI.js上傳滾動(dòng)等待效果實(shí)現(xiàn)思路及代碼
上傳滾動(dòng)等待效果想必大家在很多場(chǎng)合都有見(jiàn)過(guò)吧,本文將介紹jquery.blockUI.js實(shí)現(xiàn)上傳滾動(dòng)等待效果,感興趣的你可不要錯(cuò)過(guò)了哈,希望可以幫助到你2013-03-03jQuery實(shí)現(xiàn)獲取綁定自定義事件元素的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取綁定自定義事件元素的方法,涉及jQuery方法重載、事件綁定及元素操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12jQuery實(shí)現(xiàn)點(diǎn)擊旋轉(zhuǎn),再點(diǎn)擊恢復(fù)初始狀態(tài)動(dòng)畫效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊旋轉(zhuǎn),再點(diǎn)擊恢復(fù)初始狀態(tài)動(dòng)畫效果,結(jié)合實(shí)例形式分析了jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12jquery二級(jí)目錄選中當(dāng)前頁(yè)的css樣式
下面小編就為大家?guī)?lái)一篇jquery二級(jí)目錄選中當(dāng)前頁(yè)的css樣式。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12jQuery實(shí)現(xiàn)仿新浪微博浮動(dòng)的消息提示框(可智能定位)
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿新浪微博浮動(dòng)的消息提示框,具有智能定位功能,涉及jQuery控制頁(yè)面元素浮動(dòng)效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-10-10jQuery中extend函數(shù)的實(shí)現(xiàn)原理詳解
這篇文章主要介紹了jQuery中extend函數(shù)的實(shí)現(xiàn)原理詳解,extend()函數(shù)用于jQuery插件的開(kāi)發(fā),本文主要分析它的實(shí)現(xiàn)原理,需要的朋友可以參考下2015-02-02