jQuery實現省市聯動
#### jQuery的each遍歷操作
有兩種使用each的方法
使用each實現全選，//使用物件訪問的方法$().each(function(){})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../js/jquery-1.8.3.js"></script>
<script> 使用each遍歷方法遍歷物件和陣列//$.each(object,[callback])
append追加元素
- append：A.append(B) 將B追加到A的內容末尾處
- appendTo：A.appendTo(B) 將A追加到B的內容末尾處
清除
- empty 將所有子元素刪除
- remove 連同匹配到的元素一起刪除
change()
規定當被選元素的 change 事件發生時執行的函式。
createTextNode和InnerHTML區別
innerHTML會將b標籤效果呈現，而createTextNode不會
var p=document.createElement("p");
p.className="p";
p.innerHTML="<b>Hello world!</b>";
document.body.appendChild(p);
var p=document.createElement("p");
p.className="p";
var textnode=document.createTextNode("<b>Hello world!<b/>");
p.appendChild(textnode);
$("body").append(p);
省市聯動
- 確定事件（change事件），在繫結的函式裡面獲取使用者選擇的省份
- 建立二維陣列來儲存
- 遍歷二維陣列中的省份（找到匹配使用者選擇的省份）（jQuery遍歷操作）
- 遍歷陣列中的城市
- 建立一個城市的文字節點（ DOM操作）
- 建立option元素節點（DOM操作）
- 將文字節點新增到元素節點中（使用jQuery的文件操作方法）
- 獲取第二個下拉列表並將option元素節點新增進去
- 清除第二個下拉列表的option內容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery完成省市二級聯動</title>
<style type="text/css">
.top{
border: 1px solid red;
width: 32.9%;
height: 50px;
float: left;
}
#clear{
clear: both;
}
#menu{
border: 1px solid blue;
width: 99%;
height: 40px;
background-color: black;
}
#menu ul li{
display: inline;
color: white;
font-size: 19px;
}
#bottom{
text-align: center;
}
#contanier{
border: 1px solid red;
width: 99%;
height: 600px;
background: url(../img/regist_bg.jpg);
position: relative;
}
#content{
border: 5px solid gray;
width: 50%;
height: 60%;
position: absolute;
top: 100px;
left: 300px;
background-color: white;
padding-top: 50px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//2.建立二維陣列用於儲存省份和城市
var cities = new Array(3);
cities[0] = new Array("武漢市","黃岡市","襄陽市","荊州市");
cities[1] = new Array("長沙市","郴州市","株洲市","岳陽市");
cities[2] = new Array("石家莊市","邯鄲市","廊坊市","保定市");
cities[3] = new Array("鄭州市","洛陽市","開封市","安陽市");
$("#province").change(function(){
//10.清除第二個下拉列表的內容
$("#city").empty();
//1.獲取使用者選擇的省份
var val = this.value;
//alert(val);
//3.遍歷二維陣列中的省份
$.each(cities,function(i,n){
//alert(i+":"+n);
//4.判斷使用者選擇的省份和遍歷的省份
if(val==i){
//5.遍歷該省份下的所有城市
$.each(cities[i], function(j,m) {
//alert(m);
//6.建立城市文字節點
var textNode = document.createTextNode(m);
//7.建立option元素節點
var opEle = document.createElement("option");
//8.將城市文字節點新增到option元素節點中去
$(opEle).append(textNode);
//9.將option元素節點追加到第二個下拉列表中去
$(opEle).appendTo($("#city"));
});
}
});
});
});
</script>
</head>
<body>
<div>
<!--1.logo部分的div-->
<div>
<!--切分為3個小的div-->
<div class="top">
<img src="../img/logo2.png" height="47px"/>
</div>
<div class="top">
<img src="../img/header.png" height="47px"/>
</div>
<div class="top" style="padding-top: 15px;height: 35px;">
<a href="#">登入</a>
<a href="#">註冊</a>
<a href="#">購物車</a>
</div>
</div>
<!--清除浮動-->
<div id="clear">
</div>
<!--2.導航欄部分的div-->
<div id="menu">
<ul>
<li >首頁</li>
<li >電腦辦公</li>
<li >手機數碼</li>
<li >孕嬰保健</li>
<li >鞋靴箱包</li>
</ul>
</div>
<!--3.中間登錄檔單部分div-->
<div id="contanier">
<div id="content">
<table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
<form method="get" action="#" onsubmit="return checkForm()">
<tr>
<td colspan="2" align="center">
<font size="5">會員註冊</font>
</td>
</tr>
<tr>
<td>
使用者名稱
</td>
<td>
<input type="text" name="username" id="username" onfocus="showTips('username','必須以字母開頭')" onblur="check('username','使用者名稱不能為空')" /><span id="usernamespan"></span>
</td>
</tr>
<tr>
<td>密碼</td>
<td>
<input type="password" name="password" id="password" onfocus="showTips('password','密碼長度不能低於6位！')" onblur="check('password','密碼不能為空！')" /><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>確認密碼</td>
<td>
<input type="password" name="repassword" />
</td>
</tr>
<tr>
<td>email</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<!--1.編寫HTML檔案部分的內容-->
<tr>
<td>籍貫</td>
<td>
<!--2.確定事件，通過函式傳參的方式拿到改變後的城市-->
<select id="province">
<option>--請選擇--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select>
</td>
</tr>
<tr>
<td>性別</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday" />
</td>
</tr>
<tr>
<td>驗證碼</td>
<td>
<input type="text" name="yanzhengma" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="註冊" />
</td>
</tr>
</form>
</table>
</div>
</div>
<!--4.廣告圖片的div-->
<div id="">
<img src="../img/footer.jpg" width="99%" />
</div>
<!--5.超連結與版權資訊的div-->
<div id="bottom">
<a href="#">關於我們 </a>
<a href="#">聯絡我們 </a>
<a href="#">招賢納士 </a>
<a href="#">法律宣告</a>
<a href="#">友情連結</a>
<a href="#">支付方式</a>
<a href="#">配送方式 </a>
<a href="#">服務宣告 </a>
<a href="#">廣告宣告 </a>
<p>Copyright © 2005-2018 商城 版權所有 </p>
</div>
</div>
</body>
</html>
屬性操作
- val() 獲取value屬性的值
val(…) 給value屬性設定值
html() 獲得html()程式碼，如果有標籤，一併獲得
- html(…) 設定html程式碼 ，如果有標籤，將進行解析
- text() 獲得文字，如果有標籤，忽略
- text(…) 設定文字，如果含有標籤，不進行解析
下拉列表左右選擇
- 確定事件（滑鼠單擊事件click）
- 獲取左側下拉列表被選中的option($(“#left option:selected”))
- 將獲取到的option新增到右側的下拉列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表左右選擇</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
/*1.選中單擊去右邊*/
$("#selectOneToRight").click(function(){
$("#left option:selected").appendTo($("#right"));
});
/*2.單擊全部去右邊*/
$("#selectAllToRight").click(function(){
$("#left option").appendTo($("#right"));
});
/*3.選中雙擊去右邊*/
$("#left option").dblclick(function(){
$("#left option:selected").appendTo($("#right"));
});
});
</script>
</head>
<body>
<table border="1" width="600" align="center">
<tr>
<td>
分類名稱
</td>
<td>
<input type="text" name="cname" value="手機數碼"/>
</td>
</tr>
<tr>
<td>
分類描述
</td>
<td>
<textarea name="cdesc" rows="4" cols="20">手機數碼類商品</textarea>
</td>
</tr>
<tr>
<td>
分類商品
</td>
<td>
<span style="float: left;">
<font color="green" face="宋體">已有商品</font><br/>
<select multiple="multiple" style="width: 100px;height: 200px;" id="left">
<option>IPhone6s</option>
<option>小米4</option>
<option>錘子T2</option>
</select>
<p><a href="#" style="padding-left: 20px;" id="selectOneToRight">>></a></p>
<p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p>
</span>
<span style="float: right;">
<font color="red" face="宋體">未有商品</font><br/>
<select multiple="multiple" style="width: 100px;height: 200px;" id="right">
<option>三星Note3</option>
<option>華為6s</option>
</select>
<p><a href="#" ><<</a></p>
<p><a href="#" ><<<</a></p>
</span>
</td>
</tr>
<tr>
<td colspan="2">
<input type='submit' value="修改"/>
</td>
</tr>
</table>
</body>
</html>
jQuery事件ready
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script>
document.getElementById("click1").onclick=function(){
alert("元素載入完畢！！");
}
// 執行錯誤,為什麼?
// 因為DOM還沒有載入完畢
</script>
</head>
<body>
<div id="click1">點我</div>
</body>
</html>
解決方法：將JS程式碼引動到需要執行的HTML程式碼後面去，一般建議移動到body標籤後。
或者將JS程式碼放到一個頁面載入函式window.onload=function(){}裡面去
事件處理bind
api文件解釋的太麻煩，看程式碼
<!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>
<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
<script src="../../../js/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#panel h5.head").bind("click", function() {
var $content = $(this).next();
if($content.is(":visible")) {
$content.hide();
} else {
$content.show();
}
})
})
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什麼是jQuery?</h5>
<div class="content">
.is()用一個表示式來檢查當前選擇的元素集合，如果其中至少有一個元素符合這個給定的表示式就返回true。
如果沒有元素符合，或者表示式無效，都返回'false'。
注意：在jQuery 1.3中才對所有表示式提供了支援。在先前版本中，如果提供了複雜的表示式，比如層級選擇器（比如 + , ~ 和 > ），始終會返回true
</div>
</div>
</body>
</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>
<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
<script src="../../../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
相關推薦
使用JQuery實現省市聯動
使用JQuery實現省市聯動
環境準備
1.準備資料庫
2.準備頁面
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="
jquery實現省市聯動的兩種方式（xml，，，json）
省市聯動，xml傳值方式
匯入相應的jar
建立表單
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
&
jQuery實現省市聯動
#### jQuery的each遍歷操作
有兩種使用each的方法
使用each實現全選，//使用物件訪問的方法$().each(function(){})
<!DOCTYPE html>
<html>
&
JQuery實現AJAX異步請求實現省市聯動（數據傳輸格式為xml）
集合 .html 省市聯動 utf func app 字符串 tco name AJAX的響應的數據格式：
文本，一段HTML的數據，XML，JSON。
使用工具生成xml的文件：
通常使用XStream工具，將集合，數組，對象轉化成XML格式。
步驟一：導
JQuery實現AJAX異步請求實現省市聯動（數據傳輸格式為json）
數據傳輸 char html utf-8 har change 字段 語法規則 false json概述：javascript object notation 是一種輕量級的數據交換格式。json本質上就是一種數據格式的字符串；javascript可以直接解析json，因為
分別使用js和JQuery實現省市二級聯動
1.1html
js中this指的是當前操作的物件
<tr>
<td>籍貫</td>
<td><select onchange="changeCity(this.value)" id="province" &g
JQuery 載入並解析 XML實現省市聯動
/*
* jquery通過$.get()或者$.post()方法來解析並載入xml檔案
*
* * 以$.get(url,callback)方法為例
* * url
jQuery實現三級聯動
alert 三級 jic ads 9.png http cti charset where 代碼如下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="con
jQuery實現 三級聯動--省市縣
jQuery1.遍歷省 在省的一列追加遍歷出來的省2.遍歷市2.1 根據省的索引來選擇對應的市2.2 清空上一回選擇的市和縣2.3 如果省的索引大於 0 ，使其為 0 ，才能正常的遍歷市，否則不能正常匹配2.4 在市的一列後邊追加遍歷出來的市3.遍歷縣3.1 根據市的索引來選擇對應的縣3.2 清空上一回選擇的
【javaweb】JQ實現省市聯動
需求：比如在註冊頁面中，需要選擇籍貫，當我們選擇省的時候，市可以隨著省的選擇不同而變動。
步驟分析：1. 匯入JQ的檔案 2. 文件載入事件:頁面初始化 &
【javaweb】JS實現省市聯動
需求：比如在註冊頁面中，需要選擇籍貫，當我們選擇省的時候，市可以隨著省的選擇不同而變動。
字首知識：https://blog.csdn.net/qq_42370146/article/details/84326604
過程分析：
1. 確定事件: onchange 2. 函式
ajax+jQuery實現三級聯動
liandong.html
<!DOCTYPE html>
<html>
<meta charset='utf-8' />
<script src="jquery-3.3.1.min.js"></script>
&
jquery實現二級聯動
這兩天一直在看jquery實現二級聯動於是自己結合網上的編寫了一個小demo 程式碼如下：首先引入jquery 其次編寫頁面:
<body>
<select id="checkE">
<option value="">請選擇種
XML與JSON的格式資料，實現 省市聯動
1，XML
後臺設定響應格式：response.setContentType("text/xml;charset=GBK");
/*
* xml格式
* <citys>
<city id="1">
<pid>2</pid>
ajax實現省市聯動
jsp頁面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTM
Ajax+servlet+ json+ mysql+jsp 實現省市聯動
CityServlet
package com.suse.servlet;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import
JS實現省市聯動
不說多了，直接上程式碼，實現省市二級聯動
思路是：點選省份下拉時，觸發getCity()函式，遍歷陣列來獲取市的值
javascript程式碼：
var city=[
[],
[],
["石家莊","唐山",
JavaScript實現省市聯動
spa lose utf-8 二維數組 for col script 結果 meta 我們經常會遇到選擇省市縣的下拉框。比如我們選擇了省份的話，縣的下拉框會自動篩選，接下來我們就做一個這樣的省市聯動吧！！！
先使用一個二維數組存儲省份的信息：
<
jquery ajax實現省市二級聯動
今天給大家帶來使用jQuery ajax實現的省市聯動效果。我們直奔主題，先說下實現思路：
準備資料
這裡資料庫我使用的是mysql，先看下錶格：
provience表
city表
這裡使用provience表的主鍵作為city表的外來鍵，