jQuery開發案例(筆記)
阿新 • • 發佈：2019-01-21
由於現在接手的專案需要用到jQuery,而身為jQuery小白的我之前略微的接觸了一點,所以只能做到區域性看得懂,卻寫不出.這使我開發效率大大降低,工欲善其事必先利其器!,於是我走上了jQuery的探索之路.下面是我這四天以來,邊學習邊實操的程式碼,分享給大家:
目錄結構:
特別說明:除了最後一個案例,前面所有的案例只用到lib中唯一一個js檔案:jQuery-1.11.3.min.js
下面則是已經copy下來的原始碼:
01- jQuery入口函式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>JQuery入口函式</title> <script src="../lib/jquery-1.11.3.min.js"></script> </head> <body> <input type="button" id="btn" value="123" /> <script> //DOM // window.onload = function () { // var btn = document.getElementById('btn'); // btn.onclick = function (e) { // alert(this.value); // } // }; window.onload = function(){ console.log('load') } //jQuery佔用了兩個全域性變數 $ === jQuery //true $(function () { //頁面載入完成後自動執行 console.log('ready1') var btn = document.getElementById('btn'); btn.onclick = function(e){ alert(this.value); } }); //$是一個函式，Jquery建構函式 //文件載入完成之後自動執行回撥函式 $(document).ready(function () { console.log('ready2') }); </script> </body> </html>
02-jQuery選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jQuery選擇器</title> <script src="../lib/jquery-1.11.3.min.js"></script> </head> <body> <input type="button" value="按鈕" id="btn"/> <script> //dom // window.onload = function(){ // document.getElementById('btn'); // } //jQuery $(function(){ //頁面載入完成之後 var $btn = $('#btn'); //#代表id選擇器 //jQuery的構造方法： //第一種方法： 可以接收一個回撥函式，回撥就是在頁面載入完成之後執行。 //第二種用法：還可以接收一個CSS選擇器(string),返回選擇器對應dom節點的jQuery包裝物件 //我們一般給jQuery的物件家一個$ console.dir($btn); //jQuery包裝物件（所有的選擇器選擇返回的物件都是jQuery的包裝物件。也就是一個偽陣列） //jQuery包裝物件和dom相互轉換。 var btn = $btn[0]; //jQuery → DOM //dom 物件轉換 jQuery var $btn2 = $(btn); //jQuery建構函式的第三種用法，接收一個dom物件，轉成jQuery的包裝物件 console.dir($btn2); //轉成jQuery的包裝物件之後，就擁有了jQuery.fn上的api }); </script> </body> </html>
03-jQuery其他選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jQuery選擇器</title> <script src="../lib/jquery-1.11.3.min.js"></script> </head> <body> <!-- <p>我是P標籤</p> --> <div class="cd"> 我是第一個div1 </div> <div class="cd"> 我是第一個div2 張宜成 </div> <h3 tm="屬性">標題屬性</h3> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <script> $(function(){ //全部選擇器，選擇頁面中的所有的標籤元素 var $all = $('*'); console.dir($all); //類選擇器 var $cd = $('.cd'); console.dir($cd); //將jQuery元素轉換為dom元素，並取出第一個div var div1 = $cd[0]; console.log(div1.innerHTML); //標籤選擇器和並集選擇器 console.dir($('div,h3')); //交集選擇器 console.dir($('div.cd2')); //過濾器選擇器和後代選擇器 console.dir($('.list li:first')); //包含選擇器 var $div = $('div:contains("張宜成")'); //如果選擇器返回的是多個元素的時候，那麼返回第一個元素的內部文字 console.log($div.text()); //jQuery獲取選擇元素的內部文字 var domDiv = $div[0]; console.log(domDiv.innerHTML); }); </script> </body> </html>
04-jQuery實現隔行變色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>隔行變色</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
<style>
html,
body,
div,
table,
td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ccc;
width: 400px;
}
td {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<table>
<tr>
<td>使用者名稱</td>
<td>年齡</td>
<td>編號</td>
</tr>
<tr>
<td>張宜成</td>
<td>11</td>
<td>02</td>
</tr>
<tr>
<td>張程程</td>
<td>44</td>
<td>04</td>
</tr>
<tr>
<td>嗯哼</td>
<td>55</td>
<td>05</td>
</tr>
<tr>
<td>哈哈</td>
<td>66</td>
<td>07</td>
</tr>
</table>
<script>
$(function () {
//獲得奇數行的tr標籤
var oddTrs = $('tr:odd');
console.dir(oddTrs);
//DOM原始的寫法，很麻煩，需要進行遍歷
// for(var i = 0; i < oddTrs.length; i++){
// var domTr = oddTrs[i]; //拿到dom的tr標籤物件
// domTr.style.backgroundColor = "#eee";
// }
//jQuery提供隱式迭代的用法
//jQuery設定dom元素的樣式,提供了方法css('styleName','value')
//如果傳一個引數,代表獲取,傳兩個引數代表設定
oddTrs.css('backgroundColor', '#aaa');
//jQuery:如果包裝物件裡面的元素是多個的時候,做設定操作會影響包裝物件中的所有dom
//但是獲取值,只返回第一個元素的值.
//拿到所有的偶數行
$('tr:even').css('backgroundColor', '#eee');
});
</script>
</body>
</html>05-表格互斥學則高亮顯示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格高亮顯示</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<table>
<tr>
<td>使用者名稱</td>
<td>年齡</td>
<td>編號</td>
</tr>
<tr>
<td>張宜成</td>
<td>11</td>
<td>02</td>
</tr>
<tr>
<td>張程程</td>
<td>44</td>
<td>04</td>
</tr>
<tr>
<td>嗯哼</td>
<td>55</td>
<td>05</td>
</tr>
<tr>
<td>哈哈</td>
<td>66</td>
<td>07</td>
</tr>
</table>
<script>
$(function(){
//Jquery可以通過原型上click方法進行繫結點選事件
//$('tr'); //選擇到了所有的tr
$('tr').click(function(e){
//點選了當前行,那麼讓當前行背景高亮,讓其他的兄弟節點背景不高亮.
//jQuery的事件處理程式中.this依然指向 this依然指向繫結事件dom物件
$(this).css('backgroundColor','#ccc');
//拿到多個兄弟節點,隱式迭代全部設定為白色.
$(this).siblings().css('backgroundColor','#fff');
});
});
</script>
</body>
</html>06-jQuery繫結事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery繫結事件</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<input type="button" value="按鈕" id="btn">
<script>
window.onload = function(){
var btn = document.getElementById('btn');
//dom 0 級繫結時間的方式
//事件處理程式只能繫結一個,繫結多個事件處理程式後面的會覆蓋前面的.
btn.onclick = function(){
console.log('1234');
//this === 繫結事件的dom物件
};
//dom2級繫結事件的方式
//可以繫結多個事件處理程式,多個事件處理程式的執行順序不能保證.
if (btn.addEventListener) {
btn.addEventListener('click',function(){
console.log('1234');
},false);
}else{
//相容ie8及以下瀏覽器.
btn.attachEvent('onclick',function(){
var e = window.event;
});
}
};
</script>
<!-- jQuery繫結事件的方法 -->
<script>
$(function(){
//頁面載入完成(dom樹已經初始化好了,可以進行互動訪問)
$('#btn').click(function(e){ // e = jQuery.fn.event
console.log('1234');
console.log(this.value)
});
$('#btn').click(function(e){ // e = jQuery.fn.event
console.log('12345');
});
$('#btn').click(function(e){ // e = jQuery.fn.event
console.log('123456');
});
//jQuery繫結事件的事件方式:類似於我們的Dom2級繫結事件的方式
//可以繫結多個事件處理程式,而且執行順序是按照註冊順序執行.
//jQuery的事件處理程式中,this也執行綁定當前事件處理程式的dom物件
});
</script>
</body>
</html>07-其他簡單事件繫結案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>其他簡單事件繫結案例</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<div class="input-box">
<input type="text" value="1">
<input type="text" value="2">
<input type="text" value="3">
<input type="text" value="4">
</div>
</body>
<script>
$(function () {
var $inputArray = $('.input-box input');
//jQuery建構函式傳入選擇器,返回的是一個jQuery的包裝物件
//大部分的api都是在jQuery包裝物件上
// console.dir($inputArray);
$inputArray.focus(function (e) {
console.log(this.value); //this 就是當前的input標籤
});
//簡單繫結事件,接收兩個引數的情況
$inputArray.change('張宜成', function (e) {
console.dir(e); //jQuery封裝的事件物件
console.log(e.data);
});
// 事件方法被呼叫,但沒有傳遞引數
//程式碼觸發此事件,並模擬當前事件對應的操作.
$inputArray[3].focus(); //觸發focus事件,模擬獲取焦點的操作
});
</script>
</html>08-觸發事件和事件處理程式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>觸發事件和事件處理程式</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<div>
<input type="button" value="按鈕" id="btn">
</div>
<script>
$(function () {
//繫結事件
$('#btn').click(function (e, a, b) {
console.log(e, a, b);
});
$('div').click(function(e){
console.log('div is cliced');
});
//觸發事件
// $('#btn').click(); //第一種觸發方式
//第二種觸發點選事件
// $('#btn').trigger('click',['1234','3333']);
//觸發事件處理程式,不觸發事件本身
$('#btn').triggerHandler('click',[2,3]);
});
</script>
</body>
</html>09-jQuery省市選擇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery省市選擇</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<select name="pro" id="proSel"></select>
<select name="city" id="citySel"></select>
<script>
//第一步:初始化好所有的省資訊
//模擬從ajax獲取的資料
var data = [{
name:"北京",
cities:[
"西城","東城","崇文","宣武","朝陽"
]
},
{
name:"山東",
cities:[
"濰坊","濟南","青島","日照","威海"
]
}
];
$(function(){
//初始化省的資料
initProSel();
});
//省的下拉列表的初始化
function initProSel(){
var strHTMLArray = [];
for(var i = 0; i < data.length; i++){
var proName = data[i].name;
//<option value = "北京">北京</option>
strHTMLArray.push('<option value="'+ proName +'">' + proName + '</option>')
}
//把拼接好的標籤放到省的select下面
//jQuery的html方法已經對ie8的select設定innerHTML的bug做了相關處理,可以直接用.
$('#proSel').html(strHTMLArray.join(''));
//給省的select標籤繫結change事件
$('#proSel').change(function(){
//當省選擇完之後,要載入城市的資訊到citySel
//拿到當前選擇的省的名字
//console.log($('proSel').val());
var proName = $('#proSel').val();
for(var j = 0; j < data.length; j++){
if(data[j].name == proName){
var cities = data[j].cities;
initCityes(cities);
}
}
});
//觸發省change的事件處理程式
$('#proSel').triggerHandler('change');
}
//初始化城市的資訊
function initCityes(cities){
var strHTMLArray = [];
for(var i = 0; i < cities.length; i++){
//var cityName = cities[i];
strHTMLArray.push('<option value = "'+ cities[i] +'">' + cities[i] + '</option>');
}
$('#citySel').html(strHTMLArray.join(''));
}
</script>
</body>
</html>10-jQuery高階繫結事件的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery高階繫結事件的方式</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<input type="button" value="按鈕" id="btn">
<input type="button" value="按鈕" id="btn2">
<script>
$(function () {
//jQuery簡單繫結事件
// $('#btn').click(function(e){
// });
//第一種:繫結事件的方式,推薦使用
//jQuery高階繫結事件的方式
$('#btn').bind('click', function (e) {
console.log(this.value, e);
});
//第一個引數:事件型別,String
//第二個引數:給事件處理程式的引數的data屬性傳遞資料
//第三個引數:事件處理程式的回撥函式
//jQuery的bind方法,傳遞三個引數
$('#btn').bind('focus','222',function(e){
console.log(e.data);
});
//bind方法可以對同一個事件繫結多個事件處理程式,執行順序就是繫結事件的順序.
$('#btn').bind('focus','333',function(e){
console.log(e.data);
})
//第二種:同時繫結多個事件
// $('#btn2').bind('click focus', function(e){
// console.log(e.type);
// });
//第三種:繫結一個事件物件 最好不要用
$('#btn2').bind({
click:function(e){
console.log('click');
},
mousedown:function(e){
console.log(e.type);
}
});
});
</script>
</body>
</html>11-jQuery繫結事件的其他方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery繫結事件的其他方式</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<input type="button" value="按鈕" id="btn">
<script>
$(function(){
//繫結的事件只執行一次,執行一次完畢後就失效了
$('#btn').one('click',function(e){
console.log(111);
});
});
</script>
</body>
</html>12-jQuery事件委託的繫結方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件委託</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
$(function () {
//事件委託繫結的方式,第一個是引數,是過濾子元素.
//第二個引數:事件型別.
//第三個引數:事件處理程式
$('.list').delegate('li', 'click', function (e) {
//dom
console.log(this.innerHTML); //innerText(ie),textContent(ff)
//jQuery
console.log($(this).text());
});
//jQuery: click(簡單繫結事件)
//bind
//one:事件只執行一次
//live:對動態建立的dom元素繫結事件
//delegate:事件委託繫結
});
</script>
</body>
</html>13-jQuery的大一統繫結事件的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ON繫結事件</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<input type="button" value="按鈕" id="btn">
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
$(function () {
//on替代 bind 動態建立元素繫結事件的方式
$('#btn').on('click', function (e) {
console.log(123);
});
//on替代live動態建立元素繫結事件的方法
//dom動態建立
var domP = document.createElement('p');
domP.innerHTML = '1234';
$(domP).on('click', function (e) {
console.log($(this).text());
});
document.body.appendChild(domP);
//jQuery 動態建立dom標籤
var $p = $('<p>123456789</p>');
//給動態標籤繫結事件
$p.on('click', function (e) {
console.log($(this).text());
});
//給頁面中的body新增$p標籤
$('body').append($p);
//jQuery建構函式的用法複習
//1.接收一個回撥函式,作為:document ready事件
//2.可以接收一個字串作為 選擇器進行選擇頁面中元素,返回jQuery包裝物件.
//3.可以接收一個dom物件,將dom物件轉換jQuery包裝物件
//4.可以接收一個html標籤字串,建立成jQuery包裝物件
//On 替代deledate方法
$('.list').on('click','li',function(e){
console.log($(this).html());
});
});
</script>
</body>
</html>14-accordion手風琴效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>手風琴效果</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<style>
/* 更強大版本看28 */
</style>
<body>
<ul class="ac">
<li class="ac-iteam on">
<div class="ac-item-hd">頭部1</div>
<div class="ac-item-bd">內容1</div>
</li>
<li class="ac-iteam">
<div class="ac-item-hd">頭部2</div>
<div class="ac-item-bd">內容2</div>
</li>
<li class="ac-iteam">
<div class="ac-item-hd">頭部3</div>
<div class="ac-item-bd">內容3</div>
</li>
<li class="ac-iteam">
<div class="ac-item-hd">頭部4</div>
<div class="ac-item-bd">內容4</div>
</li>
</ul>
<script>
$(function () {
$('.ac-item-hd').on('click', function (e) {
//addClass 新增樣式類
$(this).parent().addClass('on');
//removeClass 是移除樣式類
$(this).parent().siblings('li').removeClass('on'); //隱式迭代
});
});
</script>
</body>
</html>15-jQuery解綁事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>解綁事件</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<input type="button" value="解綁事件" id="btn">
<input type="button" value="解綁名稱空間事件" id="btnoffNameSpace">
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
$(function () {
//繫結事件
$('.list li').on('click', function (e) {
console.log(this.innerHTML);
});
//事件型別後面 .demo 表示當前事件所屬 demo名稱空間
$('.list li').on('click.demo',function(e){
console.log("==",this.innerHTML,"==");
});
$('.list li').on('click.demo',function(e){
console.log("===",this.innerHTML,"===");
});
$('#btn').on('click',function(e){
//解綁on的click事件
// $('.list li').off('click');
//解綁所有事件
$('.list li').off();
});
//解綁名稱空間事件
$('#btnoffNameSpace').on('click',function(e){
//解綁了名稱空間事件,其他名稱空間的事件或者沒有名稱空間的事件不受影響
$('.list li').off('click.demo');
});
});
</script>
</body>
</html>16-jQuery事件物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery事件物件</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<p>
張宜成張宜成張宜成張宜成張宜成張宜成
</p>
<input type="text"/>
<script>
$(function () {
$('p').on('click', function (e) {
console.log(e);
console.log(e.width);
});
$('input:text').on('keydown',function(e){
//which可以獲得鍵盤鍵,滑鼠鍵
console.log(e.which);
});
//繫結一個自定義事件
$('input:text').on('myevent',function(e){
console.log('我的自定義事件');
console.log(this.value);
});
//觸發自定義事件
$('input:text').trigger('myevent');
})
</script>
</body>
</html>17-jQuery合成事件案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>合成事件案例</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
<style>
.box {
position: absolute;
overflow: hidden;
border: 1px solid #ccc;
}
.left {
height: 200px;
width: 100px;
float: left;
}
.box .aside {
/* display: none; */
width: 100px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="aside"></div>
</div>
<script>
$(function(){
$('.box').hover(function(e){
//滑鼠移入,讓aside標籤顯示
$('.aside').css('display','block');
},function(e){
$('.aside').css('display','none');
});
});
</script>
</body>
</html>18-jQuery屬性讀寫操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery屬性讀寫</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<input type="checkbox" checked name="ckb" id="ckb2">
<p class="txt" tmd="ss">搜尋</p>
<p class="txt" tmd="ss">搜尋</p>
<p class="txt" tmd="ss">搜尋</p>
<script>
$(function(){
//第一種:屬性讀取的用法,接收一個引數:屬性名字,返回第一個匹配的物件的屬性值
//讀取屬性
console.log($('.txt').attr('tmd'));
//第二種: 設定屬性,接收兩個引數.第一個引數:屬性名字.
//第二個引數是:要設定的屬性值
//寫入屬性
// $('.txt').attr('tmd','1234');
console.log($('.txt').attr('tmd'));
//通過attr方法獲取的單屬性的值的時候就是屬性名字或者undefined
console.log($('#ckb2').attr('checked'));
//第三種用法,可以同時設定多個屬性值,傳入一個屬性物件
$('p').attr({
mk:'123',
md:'456'
});
//第四種用法:jQuery回撥函式
$('p').attr('tmd',function(index,oldAttr){
return oldAttr + index; //隱式迭代
});
console.log($('p'));
//設定單個屬性值設定方法
// $('#ckb2').removeAttr('checked');
// $('#ckb2').attr('checked','checked');
//單屬性的處理一般都要用prop來處理
//checked selected disabled ==> Boolean
$('#ckb2').prop('checked',true);
$('#ckb2').prop('checked',false);
});
</script>
</body>
</html>19-動態建立表格案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>動態建立表格案例</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<table class="list">
<thead>
<th>使用者名稱</th>
<th>郵箱</th>
<th>年齡</th>
</thead>
<tbody>
<tr>
<td>張宜成</td>
<td>[email protected]</td>
<td>18</td>
</tr>
</tbody>
</table>
<script>
var data = [{
name:'張宜成1',
mail:'[email protected]',
age:20
},
{
name:'張宜成2',
mail:'[email protected]',
age:22
},
{
name:'張宜成4',
mail:'[email protected]',
age:33
},
{
name:'張宜成5',
mail:'[email protected]',
age:99
},
{
name:'張宜成6',
mail:'[email protected]',
age:45
}];
//思路:把上面的陣列進行遍歷,拼接字串把html字串放到tbody中去.
$(function(){
var tempStrArray = [];
for(var i = 0; i < data.length; i ++){
var tempStr = "";
tempStr += "<tr>";
tempStr += "<td>" + data[i].name +"</td>";
tempStr += "<td>" + data[i].mail +"</td>";
tempStr += "<td>" + data[i].age +"</td>";
tempStr += "</tr>";
//把拼接的字串放到陣列中
tempStrArray.push(tempStr);
}
//設定元素內部的標籤的字串, 第二種用法
$('.list tbody').html(tempStrArray.join(''));
//讀取標籤內部的html字串,第一種用法
console.log($('.list tbody').html());
//第三種用法
$('.list tbody').html(function(index,oldHtml){
});
});
</script>
</body>
</html>20-jQuery實現開關燈案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>開關燈案例</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<style>
.cls{
background-color: #000;
}
</style>
<body>
<input type="button" value="關燈" id="btnLight">
<script>
$(function () {
$('#btnLight').on('click', function (e) {
//按鈕點選關燈後:文字改成開燈,然後背景變成黑色
//再點選開燈,那麼文字改為關燈,背景變白色
if($(this).val() == '關燈'){
$(this).val('開燈');
//addClass新增樣式類
// $(document.body).addClass('cls');
}else{
//開燈的效果
$(this).val('關燈');
//reomveClass移除樣式類
// $(document.body).removeClass('cls');
}
//切換樣式類:如果有則去掉.,如果沒有則新增上.
$(document.body).toggleClass('cls');
});
});
// attr() prop() html() text() val() addClass() toggleClass()
//hasClass('cls') ==> Boolean
</script>
</body>
</html>21-jQuery樣式處理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>樣式處理</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
<style>
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<script>
$(function(){
//css jQuery內部做了相容處理,即使沒有設定css屬性值,會把最終的結果返回.
//全部標籤顏色設定為紅色
// $('p').css('color','red');
$('p:first').css('color','red');
// $('p:last').css('color','red');
console.log($('p:first').css('color'));
$('p').css({color:'red',"font-size":'18px',"background-color":'blue'})
//動態建立標籤元素
//jQuery建構函式的用法彙總:
//1.選擇器 2.把dom物件轉換jQuery物件, 3.接收回調函式,作為網頁載入完成的入口
//4.接收一個html的字串,建立成動態的dom包裝物件.
// $('<div><span>123</span</div>').appendTo(document.body); //appendTo追加父元素 前面是子 後面是父
var $div = $('<div><span>123</span></div>')
$(document.body).append($div); //append 追加子元素 前面是父 後面是子
});
</script>
</body>
</html>22-jQuery實現視訊案例標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>視訊標籤案例</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<style>
html,
body,
div {
padding: 0;
margin: 0;
}
.label-wrap {
width: 300px;
/* height: 30px; */
line-height: 30px;
padding: 10px;
border: 1px solid #ccc;
overflow: hidden;
margin: 100px auto;
}
.label-wrap .txt-lb {
border: none;
outline: none;
height: 30px;
line-height: 60px;
width: 30px;
float: left;
}
.label-wrap .lb-span {
float: left;
border: 1px solid #ccc;
padding: 0 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="label-wrap">
<span class="lb-span">jQuery
<i class="glyphicon glyphicon-remove"></i>
</span>
<input type="text" class="txt-lb">
</div>
</body>
<script>
$(function () {
//當文字框按下按鍵時處理
$('.txt-lb').on('keydown', function (e) {
//判斷使用者是否按下了回車: e.which == 13 回車鍵
if (e.which == 13) {
InputToLable();
} else if (e.which == 8) {
//按下了刪除鍵
//把最後一個lb-span標籤刪除,把裡面文字放到文字上去
if ($(this).val().length <= 0) {
var txt = $('.label-wrap span:last').text();
$(this).val(txt);
$('.label-wrap span:last').remove();
//取消預設行為,取消後退鍵刪除字元的預設行為
e.preventDefault();
e.stopPropagation();
}
}
});
//給整個div繫結一個點選事件,進行給文字獲取焦點
$('.label-wrap').on('click', function (e) {
$('.txt-lb').focus();
});
//當文字框失去焦點的時候,給div新增span標籤,另外input清空
$('.txt-lb').on('blur', function () {
InputToLable();
});
//刪除label按鈕點選事件
$('.label-wrap').on('click', 'i', function (e) {
$(this).parent().remove();
});
//將文字框中的文字生成label樣式的標籤
function InputToLable() {
//判斷文字框不為空,則進行新增標籤操作
if ($(".txt-lb").val().length > 0) {
//當前文字框的文字生成一個span標籤放到文字框之前
var $lb = $('<span class="lb-span">' + $('.txt-lb').val() + '<i class="glyphicon glyphicon-remove"></i></span>');
//在文字框前面追加一個lb物件
$('.txt-lb').before($lb);
$('.txt-lb').val(''); //設定value為空
}
}
});
</script>
</html>23-jQuery包裹方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery包裹標籤</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<body>
<p id="p1">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<script>
$(function(){
//讓每個p標籤都包裹一個div標籤
// $('p').wrap('<div></div>');
//把所有匹配的元素用一個標籤進行包裹
// $('p').wrapAll('<div></div>');
//把標籤內部的子元素用一個標籤進行包裹
// $('p').wrapInner('<span></span>');
//把A替換掉所有滿足selector條件的B元素
// $('<span>張宜成</span>').replaceAll('p:first');
//把A用B來進行替換
// $('p:last').replaceWith('<div>---</div>');
var t = $('p:first').clone(true);
console.log(t);
$('p:first').clone(true).appendTo('body');
});
// 兄弟節點級別操作:after before insertBefore insertAfter
// 子節點的操作: append appendTo prepend prependTo
// 包裹節點: wrap wrapAll wrapInner
// 刪除子節點: empty remove
// 替換節點: replaceWith replaceAll()
// 動態建立節點:$(<div></div>)
</script>
</body>
</html>24-jQuery寬高和位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>寬高和位置</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
<style>
html,body,div{
padding: 0;
margin: 0;
}
.box{
width: 100px;
height: 100px;
border: 13px solid #ccc;
padding: 10px;
margin: 22px;
background-color: #c09;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<input type="button" value="獲取滾動高度" id="btnGetScrollTop"/>
<script>
$(function() {
console.log('innerHeight:',$('.box').innerHeight());
console.log('innerHeight:',$('.box').innerWidth());
//計算邊框 + 內邊距 + 內容
console.log('innerHeight true:',$('.box').outerHeight());
console.log('innerHeight true:',$('.box').outerWidth());
//計算外邊框 + 內邊距 + 內容 + 邊框
console.log('outerHeight:',$('.box').outerHeight(true));
console.log('outerHeight:',$('.box').outerWidth(true));
//讀取內容區域的寬高
console.log('width:',$('.box').width());
console.log('height:',$('.box').height());
//設定內容區域寬高
console.log('width:',$('.box').height(150));
// console.log('height:',$('.box').height(150));
//也可以傳字串
// console.log('height:',$('.box').width('200px'));
//用的非常少
$('.box').width(function(index,width){
return width + index * 20;
});
//讀取內容區域的寬高
console.log('width:',$('.box').width());
console.log('height:',$('.box').height());
$('#btnGetScrollTop').on('click', function(){
//console.log($(window).scrollTop());
//滾動條滾動效果 (0)為位置
$(window).scrollTop(0);
});
// height width innerWidth innerHeight
//outerHeight outerWidth(true)
//scrollTop scrollLeft 可讀可寫
//position ==> {left:19, top:20}; //相對於定位的元素的dom中 offsetLeft offsetTop
//offset ==> {left:19,top:20} // 相對於視口的寬高 clientLeft clientTop
});
</script>
</body>
</html>25-jQuery動畫系統
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>動畫系統</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
<style>
html,body,div{
padding: 0;
margin: 0;
}
.box{
width: 100px;
height: 100px;
background-color: #000;
display: none;
}
</style>
</head>
<body>
<input type="button" value="顯示" id="btnShow">
<input type="button" value="隱藏" id="btnHide">
<input type="button" value="劃上" id="btnSlideUp">
<input type="button" value="劃下" id="btnSlideDown">
<input type="button" value="切換滑動" id="btnToggleSlide">
<input type="button" value="淡入" id="btnFadeIn">
<input type="button" value="淡出" id="btnFadeOut">
<input type="button" value="設定透明度" id="btnFadeTo">
<div class="box"></div>
<script>
$(function(){
$('#btnShow').on('click',function(e){
//給show 傳的引數: 字串型別:slow(600) 慢 Normal(400) fast:200ms
// $('.box').show('slow');
// $('.box').show('fast');
//給show方法設定時間間隔 單位是毫秒
// $('.box').show(2000);
// $('.box').show(2000,"linear");
$('.box').show(700,"swing",function(e){
console.log('animate is over!!')
});
});
$('#btnHide').on('click',function(e){
$('.box').hide(700); //隱藏
});
$('#btnSlideUp').on('click',function(e){
$('.box').slideUp('slow');
});
$('#btnSlideDown').on('click',function(e){
$('.box').slideDown(300,'linear',function(){
console.log('slide-down is over');
});
});
$('#btnToggleSlide').on('click',function(e){
$('.box').slideToggle(500);
});
$('#btnFadeIn').on('click',function(e){
$('.box').fadeIn(1000);
});
$('#btnFadeOut').on('click',function(e){
$('.box').fadeOut(1000);
});
$('#btnFadeTo').on('click',function(e){
// 0是完全透明
// 1是完全不透明
// $('.box').fadeTo(1000, 0.1);
$('.box').show(1000).slideUp(1000).slideDown(1000).fadeTo(1000,0.5)
});
// show hide
//slideUp slideDown slideToggle
// fadeIn fadeOut fadeToggle
// 引數: [duration]:動畫持續的時間, slow 1000
// [easing]: linear swing 動畫的效果
// fn 動畫結束的時候執行的回撥函式
// 返回值:都是呼叫動畫的包裝物件
});
</script>
</body>
</html>26-jQuery自定義動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定義動畫</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<style>
html,
body,
div {
padding: 0;
margin: 0;
}
.box {
height: 100px;
width: 100px;
background-color: #098;
border: 1px solid #ccc;
position: absolute;
}
</style>
<body>
<input type="button" value="動畫" id="btnAnimate">
<div class="box"></div>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1>
<h1>14</h1>
<h1>15</h1>
<h1>16</h1>
<h1>17</h1>
<h1>18</h1>
<h1>19</h1>
<h1>20</h1>
<input type="button" value="滾動到頂部" id="btnScrollTop"/>
<script>
$(function () {
$('#btnAnimate').on('click',function(e){
$('.box').animate({
height:200,
width:300,
left:'+=30px', //每次都執行增加30畫素的動畫
top:'+=50px',
paddingLeft:'+=50px'
},500,'swing');
});
$('#btnScrollTop').on('click',function(e){
$('html,body').animate({
scrollTop:0 //animate動畫效果 scrollTop實現滾動
},500);
});
});
</script>
</body>
</html>27-動畫佇列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>動畫佇列</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
<style>
.box {
height: 100px;
width: 100px;
border: 1px solid #ccc;
background-color: magenta;
}
</style>
</head>
<body>
<input type="button" value="動畫" id="btn">
<input type="button" value="立即結束動畫" id="btnFinish">
<input type="button" value="停止動畫" id="btnStop">
<div class="box"></div>
<script>
$(function () {
$('#btn').on('click', function (e) {
$('.box').hide(1000)
.show(1000)
.slideUp(1000)
.slideDown(1000)
.fadeTo(1000, 0.5)
.animate({ width: 200 }, 1000);
});
$('#btnFinish').on('click', function (e) {
//立即結束動畫,讓dom元素變化到最終動畫佇列都結束的效果狀態
$('.box').finish();
});
$('#btnStop').on('click',function(e){
//stop方法傳入一個引數:false或者不傳引數,表示結束當前的動畫,後續的動畫不受影響.
// $('.box').stop(false);
//如果傳入第一個引數為true,後續的動畫也都受影響.不執行了.
// $('.box').stop(true);
//讓dom元素動畫狀態結束,然後讓dom元素到當前動畫結果的狀態
$('.box').stop(true,true);
});
});
</script>
</body>
</html>28-手風琴效果動畫版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>手風琴效果</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
</head>
<style>
/* 未新增CSS樣式類,所以效果無法展示,抱歉 */
</style>
<body>
<ul class="ac">
<li class="ac-iteam on">
<div class="ac-item-hd">頭部1</div>
<div class="ac-item-bd">內容1</div>
</li>
<li class="ac-iteam">
<div class="ac-item-hd">頭部2</div>
<div class="ac-item-bd">內容2</div>
</li>
<li class="ac-iteam">
<div class="ac-item-hd">頭部3</div>
<div class="ac-item-bd">內容3</div>
</li>
<li class="ac-iteam">
<div class="ac-item-hd">頭部4</div>
<div class="ac-item-bd">內容4</div>
</li>
</ul>
<script>
$(function () {
$('.ac-item-hd').on('click', function (e) {
//addClass 新增樣式類
$(this).parent().addClass('on');
$(this).siblings('.ac-item-bd').slideDown(500);
//removeClass 是移除樣式類
$(this).parent().siblings('li').removeClass('on').find('.ac-item-bd').slideUp(500); //隱式迭代
});
});
</script>
</body>
</html>29-京東秒殺案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>京東秒殺案例</title>
<script src="../lib/jquery-1.11.3.min.js"></script>
<style>
html,
body,
div {
padding: 0;
margin: 0;
}
.box {
width: 640px;
height: 326px;
border: 1px solid #ccc;
overflow: hidden;
position: relative;
}
.cv-box {
position: absolute;
top: 100%;
}
</style>
</head>
<body>
<div class="box">
<img src="../img/1.png" alt="">
</div>
<div class="cv-box">
<img src="../img/2.png" alt="">
</div>
<script>
$(function () {
$('.box').hover(function (e) {
//滑鼠移入:top減少到0
$('.cv-box').animate({ top: 0 }, 300);
}, function (e) {
//滑鼠移開
$('.cv-box').animate({ top: '100%' }, 300);
});
});
</script>
</body>
</html>30-jQuery高階
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery高階</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="../lib/jquery-1.11.3.min.js"></script>
<script>
//陣列的方法forEach ie9+
var arr = ['a', 'b', 3, 4];
// value陣列的元素 index陣列元素的索引
arr.forEach(function (value, index) {
console.log('index:', index, 'value:', value)
});
//jQuery原型上提供了each
$(function(){
$('li').each(function(index,elem){
console.log(index,elem);
});
});
</script>
</body>
</html>31-jQuery建構函式屬性和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery建構函式屬性和方法</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="../lib/jquery-1.11.3.min.js"></script>
<script>
//jQuery的建構函式方法
//jQuery建構函式的幾個應用:
//1.選擇元素: $('li') $('.box')
//2.dom物件轉換jQuery包裝物件, $(dom) ==> jQuery
//3.動態建立dom標籤jQuery包裝物件, $('<div></div>')
//each方法
// jQuery.each([1, 'abc', 2, 3], function (index, value) {
// console.log(index, value);
// });
$(function () {
//頁面載入完成後才執行
// jQuery.each($('li'),function(index,value){
// console.log(index,value);
// });
//jQuery建構函式的map方法
// var newArrJQuery = jQuery.map(['a', 'b', 'c', 'd'], function (value, index) {
// console.log(value, index);
// return value + index;
// });
// console.log(newArrJQuery);
// var n2 = $.grep([0, 1, 2], function (n, i) {
// return n > 0;
// });
// console.log(n2);
});
//JS ec5 中提供的map方法 對陣列中的元素進行處理並返回新陣列
// var arr = ['a', 'b', 'c', 'd'];
// var newArr = arr.map(function(value, index){
// return value + index; // 'a' + 0
// });
// console.log(newArr);
//淺拷貝,子物件只複製 子物件的地址.具體內容不進行復制.
// var target = {name:'zyc'};
// var obj1 = {age:18, cellphone:'13181699498',mail:'[email protected]'}
// var p1 = {k:123, m:'abc'};
// var obj2 = {run:function(){ console.log(1);}, p:p1}
// var newObj = jQuery.extend(target, obj1, obj2);
// console.log(newObj, target);
// console.log(newObj === target)
// //console.log(newObj.p === p1);
// console.log(newObj.p.k); //123
// p1.k = 444; //newObj.p.k
// console.log(newObj.p.k); //444
//深拷貝
var target = {name:'zyc'};
var obj1 = {age:18, cellphone:'13181699498',mail:'[email protected]'}
var p1 = {k:123, m:'abc'};
var obj2 = {run:function(){ console.log(1);}, p:p1}
var newObj = jQuery.extend(true,target, obj1, obj2);
console.log(newObj, target);
console.log(newObj === target)
//console.log(newObj.p === p1);
console.log(newObj.p.k); //123
p1.k = 444; //newObj.p.k
console.log(newObj.p.k); //123
console.log('p1.k', p1.k); //444
</script>
</body>
</html>32-jQueryl鏈式程式設計
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>鏈式程式設計</title>