下午001-動態操作元素 創建元素：$('標簽字元串')添加元素：append()，appendTo()：追加子元素prepend()，prependTo()：前加子元素after()，insertAfter()：後加兄弟元素before()，insertBefore()：前加兄弟元素動態刪除元素e ...
作業：密碼加強驗證
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
onload = function () {
//為文本框註冊失去焦點事件，失去焦點時，進行密碼驗證
document.getElementById('txtPwd').onblur = function () {
var msg = this.value;
//獲取提示框
var msgPwd = document.getElementById('msgPwd');
if (msg.length < 6) {
msgPwd.innerText = '弱爆了！！！';
} else
{
//純字元：弱；兩種混合：中；三種混合：強。
//if (/^[a-zA-Z]+$/.test(msg)
// || /^[0-9]+$/.test(msg)
// || /^[!@#$%^&*()]+$/.test(msg)
//)
//{
// msgPwd.innerText = "弱";
//}
var pwd = 0;
if (/[a-zA-Z]/.test(msg))
{
pwd++;//有一個字母
}
if (/[0-9]/.test(msg)) {
pwd++;//有一個數字
}
if (/[!@#$%^&*()]/.test(msg)) {
pwd++;//有一個特殊字元
}
switch (pwd) {
case 1: msgPwd.innerText = "弱";
break;
case 2: msgPwd.innerText = "中";
break;
case 3: msgPwd.innerText = "強";
break;
default:
}
}
};
};
</script>
</head>
<body>
<input type="text" id="txtPwd" name="name" value="" />
<span id="msgPwd"></span>
</body>
</html>
【2017.12.23--JQuery 01】
第一：什麼是JQuery
1、當前應用非常廣泛的一個js類庫，封裝了大量方法，可以快速完成常用功能；
2、在使用前需要先引入jquery.js文件，才可以使用這個庫中的成員；
3、$對象是jquery對象的簡寫方式，一般都使用$而不書寫jquery，簡便快捷。
第二：為什麼使用它？
1、官方網址：http://jquery.com/，很好地解決了瀏覽器相容問題；
2、體積小，使用方便（Write Less,Do More）
3、鏈式編程，隱式迭代，插件豐富，開源，免費
4、註意：只是為常用操作提供了方法，並不能實現所有操作，如果沒有實現的操作，還需要手寫js
已經在vs的項目框架中集成了jquery
第三：主要功能
1、對象處理
2、屬性、css
3、選擇器、篩選
4、文檔處理
5、事件
6、效果
7、ajax
8、工具
第四：具體實現
1、基本選擇器
使用$('選擇器')符號進行篩選，用於獲取頁面上的標簽，返回一個jq對象
id選擇器：#id
元素選擇器：標簽
類選擇器：.class
例子：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>//使用 JQuery 必需引入jquery庫文件
<script>
onload = function () {
//jquery對象：本質就是DOM的一個數組
//js對象；dom對象：操作HTML的對象
//通過jquery選擇器得到的都是jquery對象，可以使用juerqy提供的方法
$('#btnShow').click = function () {
}
};
</script>
</head>
<body>
<input type="button" name="name" id="btnShow" value="" />
</body>
</html>
2、屬性操作
用於對標簽元素的屬性進行操作
獲取屬性值：attr(屬性)
設置屬性值：attr(屬性，值)
如果是操作標簽的值可以簡寫為：text()，html()
如果是操作控制項的值可以簡寫為：val()
例子：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
</head>
<body>
<input type="button" id="btnShow" name="name" value="顯示" />
<img src="images/1.jpg" />
<script>
//操作屬性
//獲取屬性的值;只寫第一個參數，屬性的名字
alert($('#btnShow').attr('value'));
//設置屬性的值：寫兩個參數，第一個參數表示屬性的名字，第二個表示值
$('#btnShow').attr('value', "Hello World");
//prop表示html的原有屬性，attr而表示擴展屬性
//如：img的src操作使用prop，2而href操作使用attr
$('#img').attr('href', 'abc');
//移除屬性
$('#btnShow').removeAttr('value');
</script>
</body>
</html>
3、事件註冊處理程式
方式一： bind(事件類型,處理函數)
方式二：事件類型(處理函數)
事件類型與dom的相同，去掉on首碼
卸載事件處理程式
unbind();//移除所有事件處理程式
unbind(‘click’);//移除所有的click事件處理程式
unbind('click',函數名稱);//移除click事件的指定名稱的處理函數，這種方法無法移除匿名函數
說明：dom事件不支持多播，而jquery事件支持多播
例子：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
</head>
<body>
<input type="button" id="btnShow" name="name" value="顯示" />
<script>
alert( $('#btnShow').attr('value'));
////對於value屬性的一種簡寫操作
//alert($('#btnShow').val());
//為按鈕綁定點擊事件
$('#btnShow').click(function () {
alert(this.value);//this是dom對象，不能調用jquery的成員
});
//dom的事件註冊:一個事件只能註冊一個處理函數，不支持多播
document.getElementById('btnShow').onclick = function () {
alert(1);
};
document.getElementById('btnShow').onclick = function () {
alert(2);
};
//jquery事件註冊:支持多播，一個事件可以指定多個處理函數
$('#btnShow').click(function () {
alert(3);
});
$('#btnShow').click(function () {
alert(4);
});
</script>
</body>
</html>
4、頁面載入事件
js方式：window.onload=fn;
jq方式：$(document).ready(fn);->可簡寫為$(fn);
區別一：window.onload表示頁面所有資源載入完成後才會被觸發執行；$(fn)表示只要文檔結構載入完成後就會執行，即所有標簽載入完成
區別二：window.onload重覆賦值會被覆蓋，即不支持多播委托；$(fn)可以添加多個事件處理程式，即在jq中定義的事件支持多播
例子：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
//為window的onload事件註冊處理函數，表示頁面載入完畢後觸發執行
//標簽載入完成，並且標簽指定的資源也要載入完成，才能註冊事件
onload = function () {
};
//表示載入完成後執行此代碼,(dom就緒)只要標簽載入完成後 即可註冊（效率比較高）
$(document).ready(function () {
});
//簡寫如下
$(function () {
$('#btnShow').click(function () {
alert(123);
});
});
</script>
</head>
<body>
<input type="button" id="btnShow" name="name" value="" />
</body>
</html>
5、示例
點誰誰哭
點擊按鈕，設置div中的內容text(),html()
點擊按鈕，讓所有的p中都顯示“我們都是P”
例子1：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
//表示載入就緒，是ready的簡寫
$(function () {
//獲取所有按鈕，得到jquery對象，為對象註冊點擊事件
//隱式迭代：自動將數組當的每個元素都執行一遍操作
//當前：會將數組中的每個input進行click綁定
$('input').click(function () {
//將當前點擊的按鈕的文本變成嗚嗚
//this表示觸發當前事件的dom對象
this.value = '嗚嗚';
});
});
</script>
</head>
<body>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
</body>
</html>
例子2：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function() {
$('#btnShow').click(function () {
//對於標簽對，使用text()、html()進行設置或獲取
$('#txt1').text('這是個div');
});
});
</script>
</head>
<body>
<input type="button" id="btnShow" value="顯示" />
<div id="txt1"></div>
</body>
</html>
DOM對象與JQ對象的轉換
為什麼要轉換呢？
為了使用jq中的方法，需要將dom對象轉換成jq對象
jq並沒有完成所有操作的封裝，需要將jq對象轉換成dom對象，再調用dom方法
dom->jq：$(dom對象名稱)
jq->dom：jq對象.get(index)或jq對象[index]
對於dom對象，有屬性、事件成員
對於jq對象，只有方法成員
例子3：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
//將jquery對象轉換成dom對象：通過[下標]的形式返回dom對象
//通過jquery的選擇器得到的數組，才是jquery對象，才可以調用jquery的成員
//將dom對象轉換成jquery對象：$(dom對象)
$('#btnShow').click(function() {
$('p').text('都是P');//隱式迭代
$(this).val('abc');
var temp = [1, 2, 3];
});
});
</script>
</head>
<body>
<input type="button" id="btnShow" value="都是P"/>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</body>
</html>
6、合成事件處理程式
hover(fn1,fn2):fn1表示mouseover的處理函數，fn2表示mouseout的處理函數
toggle(fn1,fn2...fnN):當元素被click後，輪流執行fn1、fn2、fnN方法
one(type,fn)：表示註冊的事件只響應一次，然後失效，type表示事件類型
例子：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
//合成指向、移開事件
//$('#btnShow').hover(function() {//指向
// this.style.color = 'red';
//}, function() {//移開
// this.style.color = 'black';
//});
//合成點擊事件,指定在n個函數間切換，點擊次數為m
//$('#btnShow').toggle(function() {//第m%n==1次點擊時執行此函數
// alert(1);
//}, function() {//第m%n==2次點擊執行此函數
// alert(2);
//}, function() {//第m%n==0次點擊執行此函數
// alert(3);
//});
//合成事件：只將綁定的事件執行一次
//$('#btnShow').one('click', function() {
// alert(1);
//});
});
</script>
</head>
<body>
<input type="button" id="btnShow" value="顯示"/>
</body>
</html>
7、調用JS成員
直接使用，不需要任何轉換，因為jq就是js
如：array是js對象，不需要進行jq轉換
如：方法parseInt()是js中的方法，在jq編碼時可以直接使用
例子：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
//找到按鈕，並綁定點擊事件
$('#btnShow').click(function() {
//找到文本框並獲取值
var num = parseInt($('#txtNum').val());//直接調用js的成員進行操作
num++;
//將值顯示到文本框
$('#txtNum').val(num);//傳遞參數時，表示將值賦給value
});
});
</script>
</head>
<body>
<input type="text" id="txtNum"/><input type="button" id="btnShow" value="顯示"/>
</body>
</html>
示例：加法計算器
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
//為按鈕綁定點擊事件
$('#btnAdd').click(function () {
//獲取文本框中的值，並轉換成整數
var num1 = parseInt($('#txtNum1').val());
var num2 = parseInt($('#txtNum2').val());
//運算
var result = num1 + num2;
//顯示
$('#txtResult').val(result);
});
});
</script>
</head>
<body>
<input type="text" id="txtNum1"/>+
<input type="text" id="txtNum2"/>
<input type="button" id="btnAdd" value="="/>
<input type="text" id="txtResult"/>
</body>
</html>
8、文檔處理
創建元素：$('標簽字元串')
添加元素：
append()，appendTo()：追加子元素
prepend()，prependTo()：前加子元素
after()，insertAfter()：後加兄弟元素
before()，insertBefore()：前加兄弟元素
動態刪除元素
empty()：清空子元素
remove(selector)：刪除當前元素，無參表示刪除全部，有參表示刪除符合條件的元素
例子：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
$('#btnAppend').click(function () {
//動態創建Jquery對象
var hello= $('<b>Hello World</b>');
//追加:在子元素中，顯示結果： 你好！！！Hello World，在div文本之後追加
$('#divContainer').append(hello);
//追加:在子元素中，顯示結果： Hello World 你好！！！，在div文本之前追加
$('#divContainer').prepend('preappend');
//追加:在元素中，顯示結果： 你好！！！Hello World，在div文本之後追加
$('#divContainer').insertAfter('insertAfter');
//追加:在同級元素中，顯示結果： Hello World 你好！！！，在div文本之前追加
$('#divContainer').insertBefore('insertBefore');
});
$('#btnAppendTo').click(function () {
//追加到：
$('<b>Hello World</b>').appendTo('#divContainer');
$('<b>Hello World</b>').prependTo('#divContainer');
});
$('#btnEmpty').click(function () {
//清空元素
$('#divContainer').empty();
});
$('#btnRemove').click(function () {
//移除元素
$('#divContainer').remove($('b'));
});
});
</script>
</head>
<body>
<input type="button" id="btnAppend" value="Append" />
<input type="button" id="btnAppendTo" value="AppendTo" />
<input type="button" id="btnEmpty" value="Empty" />
<input type="button" name="name" id="btnRemove" value="remove" />
<div id="divContainer">你好！！！</div>
</body>
</html>
9、省市聯動
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
//定義省市數據，鍵值對集合
var datas = {
"北京": ["朝陽", "海澱", "昌平", "丰台"],
"山東": ["青島", "濟南", "煙臺"],
"山西": ["大同", "太原", "運城", "長治"],
"河南": ["洛陽", "開封", "鄭州", "駐馬店"],
"河北": ["石家莊", "張家口", "保定"]
};
$(function () {
//創建省的select
var select = $('<select id="selectProvince"></select>');
//為省的select綁定change事件
select.change(function () {
var citys = datas[$(this).val()];
//刪除市的原有option
$('#selectCity').empty();
//添加option
$.each(citys, function (index,item) {
$('<option>' + item + '</option>').appendTo(selectCity);
});
});
select.appendTo('body');
//遍歷集合
$.each(datas, function (key, value) {
//根據數據創建option並追加到select上
$('<option value="' + key + '">' + key + '</option>').appendTo(select);
});
//創建市的select
var selectCity = $('<select id="selectCity"></select>').appendTo('body');
//獲取選中的省信息
var pro = $('#selectProvince').val();
//將省名稱作為建到集合中獲取值
var citys = datas[pro];
//遍歷市的數組
$.each(citys, function (index, item) {
$('<option>' + item + '</option>').appendTo(selectCity);
});
});
</script>
</head>
<body>
</body>
</html>
10、層級選擇器
符號一：空格，表示取子元素，無論是幾層的子元素，都會被選擇到
符號二：大於號>，表示直接子元素，不包含後代子元素
符號三：加號+，表示之後緊臨的一個同級元素
符號三：波浪號~，表示之後的所有同級元素
next(),表示下一個同級節點
prev(),表示上一個同級節點
nextAll(),表示之後所有同級節點
prevAll(),表示之前所有同級節點
siblings(),表示所有同級節點
parent(),表示父級節點
children()，表示子級節點
例子：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
//空格表示查找所有子級
$('#d1 div');
//大於號 表示查找直接子級，不包含後代
$('#d1>div');
//加號+表示 找到後面緊鄰同級的div，若是沒有則返回空數組
$('#d1+div');
//波浪號 表示之後的所有同級元素
$('#d1~div');
});
</script>
</head>
<body>
<div id="d1">
<div id="d11"></div>
<div id="d12">
<div id="d121"></div>
<div id="d122"></div>
</div>
<div id="d13"></div>
</div>
<div id="d2"></div>
<div id="d3">
<div id="d31">
<div id="d311"></div>
<div id="d312"></div>
<div id="d313"></div>
</div>
</div>
</body>
</html>
11、操作樣式與類
樣式操作：css()，按照鍵值對的格式對樣式進行設置
如果只設置一個樣式，則可直接賦值，如：css('color','red');
如果設置多個樣式，則使用css({鍵1：值1，鍵2：值2})的格式
操作後生成的代碼，都是對標簽的style屬性進行設置
類操作：addClass,hasClass,removeClass,toggleClass
也可以使用屬性方法進行操作：attr('class','className');
例子：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
//設置樣式
$('#btnShow').css('color', 'grren');
$('#btnShow').css('background-color', 'red');
//設置多個樣式
$('#btnShow').css({
'color': 'white',
'background-color': 'blue',
'font-size':'25px'
});
});
</script>
</head>
<body>
<input type="button" id="btnShow" name="name" value="顯示" />
</body>
</html>
12、事例實現
示例1：開關燈
按鈕點一下背景變白
再點一下背景變黑
如此往複
例子1：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
$('#btnLight').click(function () {
if (this.value == '關燈') {
$('body').css('background-color', 'black');
$(this).val('開燈');
} else {
$('body').css('background-color', 'white');
$(this).val('關燈');
}
});
});
</script>
</head>
<body>
<input type="button" id="btnLight" name="name" value="關燈" />
</body>
</html>
示例2：點擊按鈕後，讓頁面中所有p的文字都變成黃色，文字都顯示為‘都是P’（體會：鏈式編程）
例子2：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
$('#btnChange').click(function () {
//鏈式編程：只查找一次，支持逐個使用方法
$('p').text('都是P').css('color','yellow');
});
});
</script>
</head>
<body>
<input type="button" id="btnChange" name="name" value="都是P" />
<p>P1</p>
<p>P2</p>
<p>P3</p>
<p>P4</p>
<p>P5</p>
<p>P6</p>
</body>
</html>
示例3：ul中li的練習
滑鼠指向li時文本變為紅色，提示手圖標
滑鼠移開li時文本變為黑色
點擊li時移到另外一個ul中
例子3：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
$('li').hover(function () {//指向
$(this).css({
'color': 'red',
'cursor': 'pointer'//變成小手
})
}, function () {//移開
$(this).css('color', 'black');
}).click(function () {//鏈式編程，編寫點擊事件
$(this).appendTo('#ul2');
});
});
</script>
</head>
<body>
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>廣州</li>
</ul>
<ul id="ul2"></ul>
</body>
</html>
13、過濾選擇器
用於對選擇結果執行進一步過濾
:first 第一個、:last 最後一個 、:eq() 搜索第幾個、:gt() 大於、:lt() 小於、:not(選擇器)、:even偶數、:odd奇數
說明1：索引下標從0開始
說明2：以下標判斷奇偶，下標從0開始
標題的快速獲取
普通方法：$('h1,h2,h3...h6')
快捷方法：$(':header')
例子:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
$('div:first');
});
</script>
</head>
<body>
<div id="d1">
<div id="d11"></div>
<div id="d12">
<div id="d121"></div>
<div id="d122"></div>
</div>
<div id="d13"></div>
</div>
<div id="d2"></div>
<div id="d3">
<div id="d31">
<div id="d311"></div>
<div id="d312"></div>
<div id="d313"></div>
</div>
</div>
</body>
</html>
14、
根據數據生成表格（數據見備註）
使表格中奇偶行顯示不同背景色
當滑鼠指向行時高亮顯示
當滑鼠離開時離開行時恢復到原來顏色
設置列表中前三名粗體顯示
例子1：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
var list = [
{ id: '1', country: '中國', capital: '北京' },
{ id: '2', country: '美國', capital: '華盛頓' },
{ id: '3', country: '日本', capital: '東京' },
{ id: '4', country: '南韓', capital: '首爾' }
];
$(function () {
//遍歷集合，創建tr跟td
$.each(list, function (index, item) {
$(' <tr><td>' + item.id + '</td><td>' + item.country + '</td><td>' + item.capital + '</td></tr>').appendTo('#list');
});
//為奇偶行指定不同背景顏色
$('#list tr:even').css('background-color', 'red');
$('#list tr:odd').css('background-color', 'green');
$('#list tr').hover(function () {//移上
bgcolor = $(this).css('background-color');
$(this).css('background-color','blue')
}, function () {//移開
$(this).css('background-color', bgcolor)
});
});
</script>
</head>
<body>
<table border="1" >
<thead>
<th width="100"> 編號</th>
<th width="100"> 國家</th>
<th width="100"> 首都</th>
</thead>
<tbody id="list">
</tbody>
</table>
</body>
</html>
15、
設置ul中的li效果
移上時顯示為紅色背景
此節點之前的節點顯示為黃色背景
此節點之後的節點顯示為藍色背景
移開時全都顯示白色背景
提示：方法end() 恢復到最近的"破壞性"操作之前
例子2：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
$('li').hover(function () {//移上
$(this).css('background-color', 'red')
.prevAll()//這方法找到當前節點的所有節點，破壞了之前的鏈
.css('background-color', 'yellow')
.end()//恢復最近一次鏈的破壞
.nextAll().css('background-color','blue');
}, function () {//移開
$(this).css('background-color', 'white').siblings().css('background-color', 'white');
});
});
</script>
</head>
<body>
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>廣州</li>
</ul>
<ul id="ul2"></ul>
</body>
</html>
