省市縣聯(lián)動
html代碼
<select name="province" id="p">
<option value="">省份</option>
<!-- 內(nèi)部之后 -->
</select>
<select name="city" id="c">
<option value="">城市</option>
</select>
<select name="district" id="d">
<option value="">區(qū)縣</option>
</select>
<script type="text/javascript" src="../../jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
// 就緒函數(shù)
$(document).ready(function(){
// 加載省份信息
$.ajax({
type: 'post',
url: 'region.php',
data: 'parentid=0',
success: function(res){
console.log(res);
var ps = JSON.parse(res);
console.log(ps);
// 遍歷省份數(shù)組
$.each(ps, function(i,v){
// v是對象,表示單個省份信息
// console.log(v);
// 將省份信息追加到省份下拉框中
$('#p').append('<option value="'+v.id+'">'+v.firstletter+' '+v.name+'</option>');
});
}
});
// 點選省份,獲取省份下的城市
$('#p').change(function(){
// parentid=省份的id
console.log($(this).val());
$.ajax({
type: 'post',
url: 'region.php',
data: {parentid: $(this).val()},
dataType: 'json',
success: function(res){
console.log(res);
// 添加之前
// 先清空城市下拉框的歷史記錄
$('#c').empty().prepend('<option value="">城市</option>');
$('#d').children().first().nextAll().remove();
// 將城市數(shù)組添加到城市下拉框
$.each(res, function(i, v){
$('#c').append('<option value="'+v.id+'">'+v.firstletter+' '+v.name+'</option>');
});
}
});
});
// 點選城市,獲取城市下的區(qū)縣
$('#c').change(function(){
$.ajax({
type: 'post',
url: 'region.php',
data: {parentid: $(this).val()},
dataType: 'json',
success: function(res){
console.log(res);
// 先清空區(qū)縣的歷史記錄
$('#d').children().first().nextAll().remove();
$.each(res, function(i,v){
// 將區(qū)縣數(shù)組添加到區(qū)縣下拉框中
$('#d').append('<option value="'+v.id+'">'+v.firstletter+' '+v.name+'</option>');
});
}
});
});
});
</script>
php代碼
// 接收參數(shù)
$parentid = $_POST['parentid'];
// $parentid = 0;
if (is_numeric($parentid) && $parentid >= 0) {
// 1. 連接數(shù)據(jù)庫
$dsn = "mysql:host=localhost;dbname=coding;port=3306";
$pdo = new PDO($dsn, 'root', '');
// 2. 根據(jù)參數(shù)查詢行政區(qū)劃信息
$sql = "SELECT id, firstletter, name FROM coding_region WHERE parentid=:pid ORDER BY firstletter ASC";
$stmt = $pdo->prepare($sql);
$param = [
':pid' => $parentid,
];
$stmt->execute($param);
$res = $stmt->fetchAll(PDO::FETCH_ASSOC);
// 3. 將PHP的變量轉(zhuǎn)換成json,響應(yīng)給瀏覽器端
echo json_encode($res);
} else {
echo json_encode([]);
}
jQuery-ui 手風(fēng)琴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_accordion(手風(fēng)琴)</title>
<link rel="stylesheet" href="../../jquery-ui/jquery-ui.css">
</head>
<body>
<h3 class="demoHeaders">手風(fēng)琴</h3>
<div id="accordion">
<div class="group">
<h3>水滸傳</h3>
<div>105個男人和3個女人的故事</div>
</div>
<div class="group">
<h3>西游記</h3>
<div>1個人和一群妖怪的故事</div>
</div>
<div class="group">
<h3>紅樓夢</h3>
<div>一個男人和一群女人的故事</div>
</div>
<div class="group">
<h3>三國演義</h3>
<div>屌絲奇遇記</div>
</div>
</div>
<script type="text/javascript" src="../../jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../../jquery-ui/jquery-ui.js"></script>
<script type="text/javascript">
// 就緒函數(shù)
$(function () {
$("#accordion")
.accordion({
header: "> div > h3", //設(shè)置標(biāo)題項
collapsible:true //允許所有折疊
})
.sortable({
axis: "y", //只能上下移動
handle: "h3", //拖動h3標(biāo)簽, 寫 h3,div 就可以拖動兩者
stop: function (event, ui) {
// 當(dāng)排序時到忽，IE 不能注冊 blur艰躺，所以觸發(fā) focusout 處理程序來移除 .ui-state-focus
ui.item.children("h3").triggerHandler("focusout");
$('#accordion').accordion('refresh');
}
});
});
</script>
</body>
</html>
jQuery-ui 日歷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_datepicker</title>
<link rel="stylesheet" href="../../jquery-ui/jquery-ui.css">
</head>
<body>
<form action="">
生日: <input type="text" name="birthday" value="" id="birthday">
</form>
<script type="text/javascript" src="../../jquery-3.4.1.min.js" ></script>
<script type="text/javascript" src="../../jquery-ui/jquery-ui.js"></script>
<script type="text/javascript">
// 就緒函數(shù)
$(function(){
// 調(diào)用日歷組件: 詳細(xì)
$("#birthday").datepicker({
changeMonth: true, //月份下拉選項
changeYear: true, //年份下拉選項
dateFormat: 'yy-mm-dd' //日期選中后的格式化字符串
});
});
</script>
</body>
</html>
jQuery-validation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_validation</title>
<link rel="stylesheet" href="../../jquery-validation/demo/css/screen.css">
</head>
<body>
<h3>用戶注冊</h3>
<form action="#" method="post">
<table>
<tr>
<td>用戶名</td>
<td><input type="text" name="username" value=""></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" name="password" value="" id="password"></td>
</tr>
<tr>
<td>確認(rèn)密碼</td>
<td><input type="password" name="repassword" value=""></td>
</tr>
<tr>
<td>郵箱</td>
<td><input type="text" name="email" value=""></td>
</tr>
<tr>
<td>手機號</td>
<td><input type="text" name="phone" value=""></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="注冊"></td>
</tr>
</table>
</form>
<script type="text/javascript" src="../../jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../../jquery-validation/dist/jquery.validate.js"></script>
<script type="text/javascript">
// 自定義手機號的驗證規(guī)則
$.validator.addMethod('isPhone', function (value) {
if (value != "") {
var pattern = /^1(3\d|4[579]|5[0-35-9]|66|7[35-8]|8\d|9[89])\d{8}$/;
return pattern.test(value);
} else {
// 交給required規(guī)則驗證
return true;
}
}, '手機號格式不正確');
// 就緒函數(shù)
$(function () {
// 調(diào)用驗證器:
// $(選擇器).validate({驗證規(guī)則,報錯消息});
$('form').validate({
rules: {
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
repassword: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
// required: true,
email: true
},
phone: {
isPhone: true
}
},
messages: {
username: {
required: "用戶名不能為空",
minlength: "用戶名最短是2位"
},
password: {
required: "密碼不能為空",
minlength: "密碼最短是5位"
},
repassword: {
required: "密碼不能為空",
minlength: "密碼最短是5位",
equalTo: "兩次輸入的密碼不一致"
},
email: {
email: "請輸入合法的郵箱地址"
},
phone: {
isPhone: "手機號非法"
}
}
});
});
</script>
</body>
</html>
自定義jQuery擴展方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
<script type="text/javascript" src="../../jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
$.extend({
min: function(a, b) {
return a < b ? a : b;
},
max: function(a, b) {
return a > b ? a : b;
}
});
// 就緒函數(shù)
$(function(){
// 求最大值
console.log($.max(2, 7));
// 求最小值
console.log($.min(2, 7));
});
</script>
</body>
</html>
自定義選擇器擴展方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
<input type="checkbox" name="class[]" value="php"> PHP<br>
<input type="checkbox" name="class[]" value="js" checked="checked"> JS<br>
<button id="check">全選</button>
<button id="uncheck">取消</button>
<button id="rcheck">反選</button>
<script type="text/javascript" src="../../jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
$.fn.extend({
// 全選
check: function() {
// this表示選擇器選中的結(jié)果集
console.log(this);
return this.each(function() {
// this是單個checkbox
console.log(this);
this.checked = true;
});
},
// 取消
uncheck: function() {
return this.each(function() {
this.checked = false;
});
},
// 反選
rcheck: function() {
return this.each(function() {
this.checked = !this.checked;
});
}
});
// 就緒函數(shù)
$(function(){
// 單擊"全選"按鈕
$('#check').click(function(){
$('[type="checkbox"]').check();
});
// 單擊"取消"按鈕
$('#uncheck').click(function(){
$('[type="checkbox"]').uncheck();
});
// 單擊"反選"按鈕
$('#rcheck').click(function(){
$('[type="checkbox"]').rcheck();
});
});
</script>
</body>
</html>
