?什么是JQ
?JS的升級版，寫越少的代碼，做越多的事情
?學(xué)習(xí)JQ的基礎(chǔ)
?HTML CSS Javascript后臺（了解）
?JQ官網(wǎng)
? http：//jquery.com/?
如何使用JQ
?官網(wǎng)下載jquery.js文件
引入JQuery的
<script src="jquery/jquery.js"></script>
選擇元素
$（）★★★★★
css（）★★★★★
JQ的$（）選擇符和CSS（）
//document.getElementById('div1').style.color= 'red';
//document.getElementsByTagName('div')[0].style. color = 'red';
//document.getElementsByClassName('box')[0].style. color = 'red';
// JQ選擇元素的風(fēng)格跟CSS風(fēng)格特別類似
//$('#div1').css('color', 'red');
//$('div').css('color', 'red);
//$('.box').css('color', 'red);
省略原生的循環(huán)操作
JQ省略循環(huán)
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
var aLi = document.getElementsByTagName('li');
/*
for(){
aLi[i].style...
}
*/
//$('li').css('background', 'red'); //JQ省略原生當(dāng)中的循環(huán)的操作
jQuery('li').css('background', 'red'); //$ == jQuery 一個大名一個小名
$ == jQuery
事件click（）
?點擊（）★★★★★
內(nèi)容html（）
?html（）★★★★★
例子：選擇顏色填充方塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇顏色填充方塊</title>
<style>
div { width: 100px; height: 100px; border: 1px solid #000; float: left; margin: 10px; }
</style>
<script src="jquery-1.11.1.js"></script>
</head>
<body>
<span>red</span>
<span>yellow</span>
<span>green</span>
<span>blue</span>
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var color = '';
$('span').click(function(){
color = $(this).html()
});
$('div').click(function(){
$(this).css('background', color);
});
</script>
</body>
</html>
取值與賦值的關(guān)系
?通過參數(shù)決定
取值與賦值的關(guān)系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>取值與賦值的關(guān)系</title>
<script src="jquery-1.11.1.js"></script>
</head>
<body>
<div id="div1" class="box">aaaaa</div>
<script>
// oDiv.innerHTML; //獲取
// oDiv.innerHTML = 'bbbbb'; //賦值
//$('#div1').html(); //獲取
//$('#div1').html('bbbbbb'); //賦值
$('#div1').css('color', 'red'); //賦值
alert($('#div1').css('color')); //獲取div的color屬性的屬性值
</script>
</body>
</html>
屬性attr（）
?attr（）★★★★★
值val（）
?val（）★★★
attr（）和val（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>取值與賦值的關(guān)系</title>
<script src="jquery-1.11.1.js"></script>
</head>
<body>
<div id="div1" class="box" miaov="miaov">aaaaa</div>
<input type="text" value="123">
<input type="text" value="456">
<script>
//操作屬性attr()
$('#div1').attr('class', 'box2'); //用attr改class屬性
$('#div1').attr('title', 'hello'); //添加原本沒有的屬性
alert($('#div1').attr('class')); //獲取屬性值
alert($('#div1').attr('miaov')); //也可以獲取自定義的屬性
//val()
//alert($('input').val()); //獲取
//$('input').val('7777'); //針對多個input的value值進行設(shè)置
alert($('input').val()); // 針對集合進行獲取操作颠放，只獲取第一個
</script>
</body>
</html>
強大的$（）
加載
?$（function（）{}）; ★★★★★
屬性選擇
?[=]★★★★★
?[^ =]以......起始★★★★★
?[$ =]以......結(jié)束★★★★★
?[* =]包含......的★★★ ★★
?引號的問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加載和通配符選擇</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//$('input[value]').css('background', 'red'); //input有value屬性的才背景變紅
//$('input[value=123]').css('background', 'red'); //value必須等于123的input才背景變紅
//$('input[value^=123]').css('background', 'red'); //value以123為起始的input元素
//$('input[value$=444]').css('background', 'red'); //value以123為結(jié)束的input元素
//$('input[value*=3]').css('background', 'red'); //value中有3的input元素
$('div[class="box box2"]).css('color', 'red'); //這種情況下，box box2必須要用引號引起來
});
</script>
</head>
<body>
<div id="div1" class="box box2" miaov="妙味">aaaaaa</div>
<input type="text" value="123_444">
<input type="text" value="123_555">
<input type="text" value="777_888">
</body>
</html>
用$(function(){});來加載
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加載</title>
<script src="jquery-1.11.1.js"></script>
<script>
/*
window.onload = function(){
};
*/
$(function(){
});
</script>
</head>
<body>
...
</body>
</html>
JQ的鏈?zhǔn)讲僮?/h3>
? $().css().html().click()
? 針對設(shè)置的時候
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鏈?zhǔn)讲僮?lt;/title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
/*
var oDiv = $('#div1');
oDiv.html('bbbbb');
oDiv.css('color', 'red');
oDiv.click(function(){
alert(123);
});
*/
$('#div1').html('bbbbb').css('color', 'red').click(function(){alert(123)});
})
</script>
</head>
<body>
<div id="div1">aaaaaaa</div>
</body>
</html>
集合的長度
length ★★★★★
? $()獲取到的都是一個集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>集合的長度</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//alert($('div').length); //3 注意沒有括號糜烹，獲得集合的長度
alert($('#div1').length); //1 用$()獲取到的都是元素的集合
})
</script>
</head>
<body>
<div id="div1" class="box box2" miaov="妙味">aaaaaaa</div>
<div></div>
<div></div>
</body>
</html>
JQ實戰(zhàn)小技巧
? 利用length判斷元素是否存在
? 例子：刪除指定顏色的方塊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通過length來糾錯娶靡，發(fā)現(xiàn)頁面中沒有的元素</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
var $span = $('#span1'); //這個span并不存在
console.log($span.length); //0 說明頁面中沒有$span這個元素
$span.html('bbbbb');
})
</script>
</head>
<body>
<div id="div1">aaaaaaa</div>
</body>
</html>
刪除指定顏色方塊的背景顏色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>刪除指定顏色的方塊</title>
<style>
div { width: 100px; height: 100px; border: 1px solid #000; float: left; margin: 10px; }
</style>
<script src="jquery-1.11.1.js"></script>
</head>
<body>
<span>red</span>
<span>yellow</span>
<span>green</span>
<span>blue</span>
<br>
<input type="button" value="清空紅色">
<br>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
var color = '';
$('span').click(function(){
color = $(this).html();
});
$('div').click(function(){
$(this).css('background', color);
});
$('input').click(function(){
$('div[style*=red]').css('background', '');
});
</script>
</body>
</html>
class的操作
addClass() ★★★
removeClass() ★★★
toggleClass() ★★★
class操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class的操作</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('#div1').addClass('box2 box4'); //添加多個class，可以用空格隔開揖膜；重復(fù)的class不會添加進去（JQ自動去重了）
$('#div1').removeClass('box2 box4'); //找到的class會被刪掉誓沸，沒有找到的class被JQ自動忽略了
$('#div1').toggleClass('box3'); //如果沒有該class，就自動加上壹粟；如果有了拜隧，就自動刪去
})
</script>
</head>
<body>
<div id="div1" class="box box2" miaov="妙味">aaaaaa</div>
</body>
</html>
顯示隱藏
show() / hide() ★★★★★
? 與CSS()的區(qū)別
? 例子：點擊彈出菜單（1）
show()、hide()方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class的操作</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
var bBtn = true;
$('input').click(function(){
if(bBtn){
$('div').hide();
} else {
$('div').show();
}
bBtn = !bBtn;
});
})
</script>
</head>
<body>
<input type="button" value="點擊">
<div>div</div>
</body>
</html>
點擊彈出菜單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>點擊彈出菜單</title>
<style>
ul { display: none; }
.box { display: block; }
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('input').click(function(){
$('ul').toggleClass('box');
});
})
</script>
</head>
<body>
<input type="button" value="點擊">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</body>
</html>
節(jié)點的選擇
prev() next() ★★★★★
prevAll() nextAll() ★★★
siblings() ★★★
? 參數(shù)的篩選功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>節(jié)點的選擇</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//$('span').next().css('background', 'red'); //p, h1
//$('span').prev().css('background', 'red'); //div, p
//$('p').nextAll().css('background', 'red'); //p標(biāo)簽下面的所有標(biāo)簽
//$('p').prevAll().css('background', 'red'); //p標(biāo)簽之前的所有標(biāo)簽
//$('p').siblings().css('background', 'red'); //找p標(biāo)簽所有的兄弟節(jié)點
//參數(shù)篩選功能
//$('p').siblings('h2').css('background', 'red'); //找p標(biāo)簽所有的兄弟節(jié)點中的h2節(jié)點
//$('span').next('h1').css('background', 'red');
//$('span').next('h2').css('background', 'red'); //兩個span的下一個都沒有h2的，所以就沒有
});
</script>
</head>
<body>
<div>div</div>
<span>span</span>
<p>p</p>
<span>span</span>
<h1>h1</h1>
<h2>h2</h2>
<h2>h2</h2>
<h3>h3</h3>
<em>em</em>
</body>
</html>
JQ實戰(zhàn)小技巧
? 例子：點擊彈出菜單（2）
點擊彈出菜單（2）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>點擊彈出菜單</title>
<style>
ul { display: none; }
.box { display: block; }
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('input[type=button]').click(function(){
//$(this).next().toggleClass('box');
$(this).nextAll('ul').toggleClass('box');
});
})
</script>
</head>
<body>
<input type="button" value="點擊">
<input type="hidden">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</body>
</html>
下標(biāo)
eq() ★★★★★
eq()的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下標(biāo)eq()的操作</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('li').eq(1).css('background', 'red');
})
</script>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</body>
</html>
? 本課練習(xí)
? 抽獎效果
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<style>
ul{ width:328px;}
li {
width: 100px;
height: 100px;
border: 1px #000 solid;
float: left;
margin-left: 5px;
list-style: none;
}
.active{ background:red;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
var index = 0;
$('input').click(function () {
//確定要走的步數(shù)（隨機數(shù) 20-39）
//每個0.3秒洪添，要走一步（將當(dāng)前div的下一個div背景色變紅垦页，當(dāng)前的div的背景清空）,總步數(shù)減一
//如果步數(shù)變?yōu)?，停止干奢，看此時落到哪個div痊焊，就輸出對應(yīng)的文本，顯示獲得了幾等獎
var step = parseInt(Math.random() * 20) + 20;
var timerID = setInterval(function () {
$('li').eq(index).addClass('active').siblings().removeClass('active');
index++;
step--;
if(index == 9)
{
index = 0;
}
if(step == 0)
{
clearInterval(timerID);
$('div').html('恭喜您中了' + $('.active').html())
}
},100)
})
})
</script>
</head>
<body>
<input type="button" value="抽獎">
<ul>
<li>1等獎</li>
<li>2等獎</li>
<li>3等獎</li>
<li>4等獎</li>
<li>5等獎</li>
<li>6等獎</li>
<li>7等獎</li>
<li>8等獎</li>
<li>9等獎</li>
</ul>
<div></div>
</body>
</html>
節(jié)點的選擇
first() ★★★
last() ★★★
slice() ★
children() ★★★
find() ★★★★★
? children和find區(qū)別
節(jié)點的選擇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>節(jié)點的選擇</title>
<script src="jquery-1.11.1.js"></script>
<script>
// eq(0) == first();
$(function(){
// $('li').first().css('background', 'red'); //選擇第一個
// $('li').last().css('background', 'red'); //選擇最后一個
// $('li').slice(1, 3).css('background', 'red'); //得到的其實是從eq(1)開始到eq(2)結(jié)束
// $('li').slice(1).css('background', 'red'); //如果在slice里面只寫起始位置不寫結(jié)束位置忿峻，那么就是從起始位置開始薄啥，一直到最后一個元素
//$('ul').children().css('background', 'red'); //找到ul的所有子節(jié)點，但是孫子節(jié)點是找不到的
// $('ul').children('div').css('background', 'red'); //children()可以過濾篩選
// $('ul').find('p').css('background', 'red'); //可以用find找ul之下的所有節(jié)點中匹配的節(jié)點炭菌，find查找的范圍比children更加廣泛
})
</script>
</head>
<body>
<ul>
<li>
1111
<p>pppp</p>
</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<div>div</div>
</ul>
</body>
</html>
JQ實戰(zhàn)小技巧
? 避免復(fù)雜的選擇器操作罪佳，而采用find操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>節(jié)點的選擇</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
// $('ul p').css('background', 'red');
$('ul').find('p').css('background', 'red'); //用下面這種find的方式性能會更高一些
})
</script>
</head>
<body>
<ul>
<li>
1111
<p>pppp</p>
</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<div>div</div>
</ul>
</body>
</html>
節(jié)點的選擇
parent() ★★★
parents() ★
closest() ★★★★★
? 精準(zhǔn)的查找能力，實戰(zhàn)開發(fā)之王
? 找的是最近的唯一一個元素
? 例子：點擊查找指定節(jié)點
parent()和parents()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>節(jié)點的選擇</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
// $('#div2').parent().css('border', '1px solid red'); //parent()找父級
//parents() 獲取當(dāng)前元素的所有祖先節(jié)點
// $('#div2').parents().css('border', '1px solid red'); //div1, body, html都加上了邊框
// $('#div2').parents('body').css('border', '1px solid red'); //parents()也有篩選的功能
})
</script>
</head>
<body>
<div id="div1">aaa
<div id="div2">bbb</div>
</div>
</body>
</html>
closest()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>節(jié)點的選擇</title>
<script src="jquery-1.11.1.js"></script>
<script>
//closest()：找指定的一個最近的祖先元素（包括自身）（該函數(shù)必須加參數(shù)）黑低；它只能選擇到一個唯一的元素
$(function(){
// $('#div2').closest().css('border', '1px solid red'); //這樣寫不對赘艳，因為closest函數(shù)沒有參數(shù)
$('#div2').closest('.box').css('border', '1px solid red'); //只加在了div1上
//如果給div2添加上class為box，那么上面的語句找到的就是div2了
})
</script>
</head>
<body class="box">
<div id="div1" class="box">aaa
<div id="div2">bbb</div>
</div>
</body>
</html>
點擊查找指定節(jié)點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>節(jié)點的選擇</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//點擊span克握，讓其對應(yīng)的li變紅
$('span').click(function(){
$(this).closest('li').css('background', 'red');
});
})
</script>
</head>
<body>
<ul>
<li><div>aaa <span>span</span><div></li>
<li><div>aaa <span>span</span><div></li>
<li><div>aaa <span>span</span><div></li>
<li><div>aaa <span>span</span><div></li>
</ul>
</body>
</html>
節(jié)點的操作
創(chuàng)建節(jié)點
? $(<>) ★★★★★
? 比原生JS更強大的創(chuàng)建方式
添加節(jié)點
? insertBefore() before() ★★★★★
? insertAfter() after() ★★★★★
? appendTo() append() ★★★★★
? prependTo() prepend() ★★★★★
? 兩種寫法的區(qū)別
創(chuàng)建節(jié)點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>節(jié)點的操作</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
// document.createElement('div');
// $('<div>'); //這樣就創(chuàng)建了一個div標(biāo)簽
/*
var oDiv = document.createElemenet('div');
oDiv.innerHTML = 'hello';
oDiv.id = 'div1';
*/
// $('<div id="div1">hello</div>'); //直接創(chuàng)建了一個具備多種設(shè)置的div標(biāo)簽
})
</script>
</head>
<body>
</body>
</html>
append()蕾管、prepend()、before()菩暗、after()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>節(jié)點的操作</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//append()：把元素添加到指定的節(jié)點的里面的最后
var $li = $('<li>hello</li>');
// $('ul').append($li);
//prepend()：把元素添加到指定的節(jié)點的里面的最前面
// $('ul').prepend($li);
//before()：把元素添加到指定的節(jié)點的前面
// $('ul').before($li);
//after()：把元素添加到指定的節(jié)點的后面
$('ul').after($li);
})
</script>
</head>
<body>
<ul>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
</ul>
</body>
</html>
appendTo()吭历、prependTo()勾邦、insertBefore()、insertAfter()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>節(jié)點的操作</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
var $li = $('<li>hello</li>')
//$('ul').append($li);
//$li.appendTo($('ul'));
$li.prependTo($('ul'));
})
</script>
</head>
<body>
<ul>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
</ul>
</body>
</html>
兩種寫法的區(qū)別，會影響到鏈?zhǔn)讲僮?/p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>節(jié)點的操作</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
var $li = $('<li>hello</li>')
//$('ul').append($li).css('background', 'red'); //整個ul背景變紅
$li.appendTo($('ul')).css('background', 'red'); //僅指定li背景變紅
})
</script>
</head>
<body>
<ul>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
<li><div>aaa <span>span</span></div></li>
</ul>
</body>
</html>
? JQ實戰(zhàn)小技巧
? 添加html形式的操作與元素形式的操作
節(jié)點的操作
remove() ★★★★★
remove()操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>刪除元素</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//原生的刪除元素的方式
//document.body.removeChild(oDiv);
//jQuery的方法
$('div').remove();
})
</script>
</head>
<body>
<div>div</div>
</body>
</html>
clone() ★★★
? 默認的剪切操作
? 如何克隆事件(clone函數(shù)添加參數(shù)true)
? 例子：節(jié)點上移下移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>刪除元素</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//$('div').appendTo($('span')); //默認是剪切操作
$('div').click(function(){
alert(123);
});
var $div = $('div').clone();
$div.appendTo($('span')); //克隆過來的div默認沒有原來div的click事件灾馒。
//clone()默認是克隆元素結(jié)構(gòu)捻勉，而不克隆行為事件粗卜。
//clone(true)猾编，參數(shù)true就是可以復(fù)制之前的操作行為
})
</script>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
</html>
例子：節(jié)點的上移下移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>刪除元素</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('input[value="上移"]').click(function(){
var $nowLi = $(this).closest('li');
var $prevLi = $nowLi.prev();
if($prevLi.length == 0){
alert('到頭了');
} else {
$nowLi.insertBefore($prevLi);
}
});
$('input[value="下移"]').click(function(){
var $nowLi = $(this).closest('li');
var $nextLi = $nowLi.next();
if($nextLi.length == 0){
alert('到尾了');
} else {
$nowLi.insertAfter($nextLi);
}
});
})
</script>
</head>
<body>
<ul>
<li>1.<input type="button" value="上移"><input type="button" value="下移"></li>
<li>2.<input type="button" value="上移"><input type="button" value="下移"></li>
<li>3.<input type="button" value="上移"><input type="button" value="下移"></li>
<li>4.<input type="button" value="上移"><input type="button" value="下移"></li>
<li>5.<input type="button" value="上移"><input type="button" value="下移"></li>
</ul>
</body>
</html>
JQ中的索引
index() ★★★★★
? 第一種用法，兄弟中的排行
? 第二種用法舌胶，篩選后的排行
? 善于利用索引做實際開發(fā)
? 例子：選項卡
兄弟中的排行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>刪除元素</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
alert($('#div1').index());
//index()：索引值捆蜀，代表的就是當(dāng)前元素在所有兄弟節(jié)點中排第幾。如果不添加參數(shù)幔嫂，索引值與標(biāo)簽類型是無關(guān)的辆它。
})
</script>
</head>
<body>
<div></div>
<p>p</p>
<div id="div1">div</div>
<div>div</div>
</body>
</html>
注意事項
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>索引</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
alert($('#span1').index()); //彈出0
})
</script>
</head>
<body>
<div><span>span</span></div>
<div><span id="span1">span</span></div>
<div><span>span</span></div>
</body>
</html>
篩選后的排行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>索引</title>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
alert($('#span1').index('span')); //2
//添加了參數(shù)span，現(xiàn)在的index就與div沒有關(guān)系了履恩，而是看#span1在所有span中的排行
//第二種寫法也可以
alert($('span').index($('#span1')));
//代表在所有span獲取之后進行排行锰茉，看#span1排行老幾
})
</script>
</head>
<body>
<div><span>span</span></div>
<span>span</span>
<div><span id="span1">span</span></div>
<div><span>span</span></div>
</body>
</html>
選項卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>刪除元素</title>
<style>
#div1 div {width: 200px; height: 200px; border: 1px #000 solid; display: none;}
.active {background: red;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('#div1').find('input').click(function(){
/*
$('#div1').find('input').attr('class', '');
$(this).attr('class', 'active');
$('#div1').find('div').css('display', 'none');
$('#div1').find('div').eq($(this).index('input')).css('display', 'block');
*/
$(this).attr('class', 'active').siblings('input').attr('class', '');
$('#div1').find('div').eq($(this).index('input')).css('display', 'block').siblings('div').css('display', 'none');
})
})
</script>
</head>
<body>
<div id="div1">
<input type="button" value="1" class="active">
<input type="button" value="2">
<input type="button" value="3">
<div style="display: block;">111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
JQ中的遍歷
each() ★★★★★
? 回調(diào)函數(shù)的兩個參數(shù)
? this指向
? 用return false跳出each()循環(huán);
回調(diào)函數(shù)的兩個參數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>刪除元素</title>
<style>
#div1 div {width: 200px; height: 200px; border: 1px #000 solid; display: none;}
.active {background: red;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//each() => for
//$('li').html('hello'); //相同操作的，不用each就可以
/*
$('li').each(function(i, elem){
alert(i);
});
//each中的第一個形參i就是for循環(huán)中的i
*/
/*
$('li').each(function(i, elem){
//elem.style.background = 'red';
$(elem).css('background', 'red');
});
//each中的第二個參數(shù)elem就是每個元素
//elem返回的是原生的元素似袁，要轉(zhuǎn)成jQuery對象要用$()括起來
*/
})
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
each的回調(diào)函數(shù)中this的指向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>刪除元素</title>
<style>
#div1 div {width: 200px; height: 200px; border: 1px #000 solid; display: none;}
.active {background: red;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('li').each(function(i, elem){
//this == elem jQuery中的each循環(huán)中的this與elem是一回事洞辣；而且這個this也是原生的
$(this).html(i);
});
})
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
each()循環(huán)中用return false跳出循環(huán)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>刪除元素</title>
<style>
#div1 div {width: 200px; height: 200px; border: 1px #000 solid; display: none;}
.active {background: red;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('li').each(function(i, elem){
//原生跳出循環(huán)用break
//jQuery中跳出循環(huán)用return false;
$(this).html(i);
if(i == 2){
return false;
}
});
})
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
本課練習(xí)
? 左右切換數(shù)據(jù)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標(biāo)題文檔</title>
<style>
#ul1, #ul2 {
width: 200px;
height: 200px;
border: 1px #000 solid;
float: left;
}
li{ cursor:pointer;}
.active{ background:red;}
input {
float: left;
margin-top: 100px;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
$('li').click(function () {
$(this).toggleClass('active')
})
$('input').eq(0).click(function () {
$('#ul1').find('.active').appendTo($('#ul2')).removeClass('active')
})
$('input').eq(1).click(function () {
$('#ul2').find('.active').appendTo($('#ul1')).removeClass('active')
})
})
</script>
</head>
<body>
<ul id="ul1">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
<input type="button" value="→">
<input type="button" value="←">
<ul id="ul2">
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
</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>無標(biāo)題文檔</title>
<style>
li{ float:left; width:50px; height:50px; background:red; margin:5px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
var bBtn = true;
$('li').mouseover(function(){
if(bBtn){
var index = $(this).index();
$('li').each(function(i,elem){
if(index>=i){
$(elem).css('background','blue');
}
else{
$(elem).css('background','red');
}
});
}
}).mouseout(function(){
if(bBtn){
$('li').css('background','red');
}
});
$('li').click(function(){
//$('li').off();
bBtn = false;
});
});
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
元素的尺寸
width() height() ★★★★★
innerWidth() innerHeight() ★★★★★
outerWidth() outerHeight() ★★★★★
? 參數(shù)的作用
? 與原生JS的區(qū)別
元素尺寸的獲取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的尺寸的獲取</title>
<style>
#div1 {width: 100px; height: 100px; background: red; padding: 10px; border: 1px solid #000;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
alert($('#div1').width()); //100 不帶單位
//width() => width
alert($('#div1').innerWidth()); //120
//innerWidth() => width + padding
alert($('#div1').outerWidth()); //122
//outerWidth() => width + padding + border
alert($('#div1').outerWidth(true)); //132
//outerWidth(true) => width + padding + border + margin
})
</script>
</head>
<body>
<div id="div1">div</div>
</body>
</html>
元素尺寸的設(shè)置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素的尺寸的設(shè)置</title>
<style>
#div1 {width: 100px; height: 100px; background: red; padding: 10px; border: 1px solid #000; margin: 5px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//$('#div1').width(200); //設(shè)置了style中的width
//$('#div1').innerWidth(200); //padding左右是20咐刨；然后總共是200昙衅，那么style中的width就是180 => width: 200 - padding
//$('#div1').outerWidth(200); //padding左右是20扬霜；border左右是2；總共200而涉，那么width就是178 => width: 200 - padding - border
$('#div1').outerWidth(200, true);
//width: 200 - padding - border - margin為168
})
</script>
</head>
<body>
<div id="div1">div</div>
</body>
</html>
實戰(zhàn)小技巧
可視區(qū)的尺寸
頁面的尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可視區(qū)的尺寸</title>
<style>
body {margin: 0; padding: 0;}
#div1 {width: 100px; height: 100px; background: red; display: none; }
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
alert($(window).height()); //可視區(qū)的高
alert($(document).height()); //頁面的高
//如果沒有給body清margin和padding著瓶，得到的是2016；如果清掉了啼县，得到的就是2000
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">div</div>
</body>
</html>
滾動距離
scrollTop() ★★★★★
scrollLeft() ★
滾動距離
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可視區(qū)的尺寸</title>
<style>
body {margin: 0; padding: 0;}
#div1 {width: 100px; height: 100px; background: red; display: none; }
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$(document).click(function(){
//alert($(document).scrollTop()); //獲取滾動距離
//當(dāng)滾動條滾到最底部的時候 $(document).scrollTop() == $(document).height() - $(window).height()
$(document).scrollTop(300); //設(shè)置滾動距離
})
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">div</div>
</body>
</html>
元素距離
offset() ★★★★★
? left top
position() ★★★
? left top
? 不認margin值
offset()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>到達頁面的距離：offset()</title>
<style>
body {margin: 0; padding: 0;}
#div1 {width: 200px; height: 200px; background: red; margin-left: 200px; position: relative; }
#div2 {width: 100px; height: 100px; margin-left: 50px; background: yellow;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//offset()的距離值都是相對于整個頁面的
alert($('#div1').offset().left); //元素距離整個頁面左邊的距離是offset().left材原，top就是距離整個頁面上邊的距離。注意left和top后面都不加括號季眷。
alert($('#div2').offset().left); //不論怎樣嵌套余蟹，定位父級是誰，都是到達頁面邊緣的距離子刮。這個與原生的offsetLeft和offsetTop不同威酒。原生的相對于定位的祖先節(jié)點的距離。
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>到達頁面的距離：offset()</title>
<style>
body {margin: 0; padding: 0;}
#div1 {width: 200px; height: 200px; background: red; margin: 200px; position: relative; }
#div2 {width: 100px; height: 100px; margin: 50px; background: yellow;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
alert($('#div2').position().left); //0
//position()就是到有定位的祖先節(jié)點的距離
//position()方法默認是不認margin值的挺峡。所以上面的代碼彈出0
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>到達定位祖先元素的距離position()</title>
<style>
body {margin: 0; padding: 0;}
#div1 {width: 200px; height: 200px; background: red; margin: 200px; position: relative; }
#div2 {width: 100px; height: 100px; position: relative; left: 50px; background: yellow;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
alert($('#div2').position().left); //50
//position()就是到有定位的祖先節(jié)點的距離
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
實戰(zhàn)小技巧
? 利用計算原理葵孤，得到相應(yīng)值
? offsetParent() ★
? 例子：懶加載頁面中的圖片
計算出到有定位的祖先節(jié)點的距離
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {margin: 0; padding: 0;}
#div1 {width: 200px; height: 200px; background: red; margin: 200px; position: relative; }
#div2 {width: 100px; height: 100px; margin: 50px; background: yellow;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
alert($('#div2').offset().left - $('#div2').offsetParent().offset().left); //50
//通過計算的方法獲得到達有定位的祖先元素的距離，不管是不是由margin產(chǎn)生的橱赠，因此規(guī)避了position()不認margin的問題
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
懶加載圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {margin: 0; padding: 0;}
div {margin-top: 300px; width: 470px; height: 150px; border: 1px #000 solid;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
toChange();
$(window).scroll(toChange);
function toChange(){
$('img').each(function(i, elem){
if($(elem).offset().top < $(window).height() + $(document).scrollTop()){ //如果圖片進入了可視區(qū)
$(elem).attr('src', $(elem).attr('_src'));
}
});
}
})
</script>
</head>
<body>
<div><img _src="img/1.jpg" alt=""></div>
<div><img _src="img/2.jpg" alt=""></div>
<div><img _src="img/3.jpg" alt=""></div>
<div><img _src="img/4.jpg" alt=""></div>
<div><img _src="img/5.jpg" alt=""></div>
<div><img _src="img/6.jpg" alt=""></div>
</body>
</html>
JQ的事件
on() ★★★★★
off() ★★★★★
? JQ中都是綁定的形式
? 支持多事件寫法
? click()寫法尤仍，也是采用off()取消
用on()的形式綁定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的事件</title>
<script src="jquery-1.11.1.js"></script>
<script>
//在JQ中的事件操作都是綁定的形式
$(function(){
//原生中有的事件都可以像下面這么用（去掉on）
//$('#div1').click(function(){alert(123);});
//$('#div1').mouseover(function(){alert(123);});
//$('#div1').mousedown(function(){alert(123);});
//$('#div1').scroll(function(){alert(123);})
//$('#div1').on('click', function(){alert(123);}) //這就相當(dāng)于$('#div1').click(function(){alert(123);})
//$('#div1').on('click mouseover', function(){alert(123);}); //通過空格分隔多個事件名稱，可以同時綁定
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">aaaaaa</div>
</body>
</html>
用off()取消事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的事件</title>
<script src="jquery-1.11.1.js"></script>
<script>
//無論是用on()還是用click()形式綁定的事件狭姨，都是用off()取消的
$(function(){
/*
$('#div1').on('click mouseover', function(){
alert(123);
$(this).off(); //刪除所有的事件操作
})
*/
$('#div1').on('click mouseover', function(){
alert(123);
$(this).off('mouseover'); //取消指定的事件
})
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">aaaaaa</div>
</body>
</html>
Event對象 ★★★★★
pageX, pageY
? 與cient的區(qū)別
which
target
stopPropagation()
preventDefault()
return false
pageX和pageY宰啦；clientX和clientY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的event事件對象</title>
<style>
#div1 {margin: 200px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('#div1').click(function(ev){
alert(ev.pageY); //鼠標(biāo)的y坐標(biāo)
//ev.pageX和ev.pageY始終是相對于整個頁面的
alert(ev.clientY); //鼠標(biāo)的y坐標(biāo)
//ev.clientX和ev.clientY始終是相對于可視區(qū)的
})
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">aaaaaa</div>
</body>
</html>
which鍵盤鍵值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的event事件對象</title>
<style>
#div1 {margin: 200px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
//ev.which是鍵盤的鍵值
$(function(){
$(document).keydown(function(ev){
alert(ev.which); //頁面上按下按鍵，彈出鍵盤鍵值
//alert(ev.keyCode); //也可以彈出鍵盤鍵值
//alert(ev.ctrlKey); //可以檢測是否ctrl鍵是按下的
})
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">aaaaaa</div>
</body>
</html>
ev.target事件源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的event事件對象</title>
<style>
#div1 {margin: 200px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
//ev.target 當(dāng)前目標(biāo)元素饼拍，也就是事件源
$(function(){
$(document).click(function(ev){
//alert(this); //這個this總是指向document
alert(ev.target); //如果點擊到a上赡模，那么彈出的就是#div1這個元素
})
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">aaaaaa</div>
</body>
</html>
ev.stopPropagation() 阻止冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的event事件對象</title>
<style>
#div1 {margin: 200px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
//stopPropagation()：阻止冒泡
$(function(){
$(document).click(function(){
alert(123);
})
$('#div1').click(function(ev){
ev.stopPropagation(); //阻止了#div1的事件冒泡，那么點擊#div1就不會再彈出123了
})
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">aaaaaa</div>
</body>
</html>
ev.preventDefault() 阻止默認事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的event事件對象</title>
<style>
#div1 {margin: 200px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
//ev.preventDefault()：阻止默認事件
$(function(){
$(document).contextmenu(function(ev){ //點擊右鍵就不會彈出默認右鍵菜單了
ev.preventDefault();
})
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">aaaaaa</div>
</body>
</html>
return false 既阻止默認事件又阻止冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的event事件對象</title>
<style>
#div1 {margin: 200px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
//在事件函數(shù)中寫return false代表：既阻止默認事件又阻止冒泡
$(function(){
$(document).contextmenu(function(ev){
//代碼
return false;
})
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">aaaaaa</div>
</body>
</html>
JQ實戰(zhàn)小技巧
? 例子：拖拽效果
用jQuery實現(xiàn)拖拽效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用JQ實現(xiàn)拖拽</title>
<style>
* {margin: 0; padding: 0;}
#div1 {width: 100px; height: 100px; background: red; position: absolute; left: 100px; top: 100px;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
var disX = 0;
var disY = 0;
var $div = $('#div1');
$div.on('mousedown', function(ev){
disX = ev.pageX - $(this).offset().left;
disY = ev.pageY - $(this).offset().top;
$(document).on('mousemove', function(ev){
$div.css('left', ev.pageX - disX);
$div.css('top', ev.pageY - disY);
})
$(document).on('mouseup', function(){
$(this).off();
})
return false;
})
})
</script>
</head>
<body style="height: 2000px;">
<div id="div1">div</div>
</body>
</html>
插花
<!DOCTYPE html>
<html>
<head>
<title>flower</title>
<meta charset="utf-8">
<style type="text/css">
body
{
background-repeat: no-repeat;
background-position: 50% 400px;
background-image: url(img/h.jpg);
}
img
{
position: absolute;
width: 150px;
height: 150px;
}
img:nth-child(1)
{
left:200px;
}
img:nth-child(2)
{
left:400px;
}
img:nth-child(3)
{
left:600px;
}
img:nth-child(4)
{
left:800px;
}
img:nth-child(5)
{
left:1000px;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('button').click(function () {
$('body').css('background-image','url(img/h1.jpg)')
})
var disX = 0;
var disY = 0;
var $div = $('img');
$div.on('mousedown', function(ev){
var that = this;
disX = ev.pageX - $(this).offset().left;
disY = ev.pageY - $(this).offset().top;
$(document).on('mousemove', function(ev){
$(that).css('left', ev.pageX - disX);
$(that).css('top', ev.pageY - disY);
})
$(document).on('mouseup', function(){
$(this).off();
})
return false;
})
})
</script>
</head>
<body>
<img src="img/1.png">
<img src="img/2.gif">
<img src="img/3.gif">
<img src="img/4.png">
<img src="img/5.png">
<button>變花瓶</button>
</body>
</html>
trigger() ★★★★★
? 比click()形式更強大
? 例子：主動觸發(fā)的添加內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的命名空間</title>
<style>
</style>
<script src="jquery-1.11.1.js"></script>
<script>
// trigger(): 主動觸發(fā)
$(function(){
$('#input1').click(function(){
var $li = $('<li>'+ $('#input2').val() +'</li>');
$('ul').append($li);
})
$('#input2').keydown(function(ev){
if(ev.which == 13){
$('#input1').trigger('click'); //點擊回車的時候惕耕，就主動觸發(fā)#input1的click事件
//$('#input1').click(); 這種寫法就相當(dāng)于上面的那種寫法
}
})
})
</script>
</head>
<body style="height: 2000px;">
<input id="input1" type="button" value="添加"><input id="input2" type="text">
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</body>
</html>
本課練習(xí)
? 登錄彈窗效果
<!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>無標(biāo)題文檔</title>
<style>
*{ margin:0; padding:0;}
#login {
width: 300px;
height: 300px;
background: white;
border: 1px #000 solid;
position: absolute;
display:none;
}
#close {
position: absolute;
top: 0;
right: 0;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('#input1').click(function () {
$('#login').css('left',$(window).width()/2 - $('#login').outerWidth()/2);
$('#login').css('top',$(window).height()/2 - $('#login').outerHeight()/2);
$('#login').css('display','block');
})
$('#close').click(function () {
$(this).parent().hide();
})
$(window).scroll(function () {
$('#login').css('top',$(window).height()/2 - $('#login').outerHeight()/2 + $(window).scrollTop());
})
});
</script>
</head>
<body style="height:2000px">
<input id="input1" type="button" value="登錄" />
<div id="login">
<p>用戶名:<input type="text" /></p>
<p>密碼:<input type="text" /></p>
<div id="close">X</div>
</div>
</body>
</html>
$.ajax() ★★★★★
? 什么是ajax
? 提交數(shù)據(jù)纺裁、查詢數(shù)據(jù)
? url
? success
? type
? data
? error
? dataType
? async
? 例子：ajax版本的選項卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<style>
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('#input1').on('input', function(){
//console.log(1);
$.ajax({
url: 'user.do', //不寫data數(shù)據(jù)，通過在url中添加'user.php?user='+ $(this).val() 也可以以get的方式傳輸數(shù)據(jù)
type: 'post', //默認的type為get方式司澎，還有一種提交方式是post方式
data: {user: $(this).val()}, //可以寫成json欺缘，也可以寫成拼接字符串 'user='+ $(this).val()
dataType: 'json', //這里可以設(shè)置返回數(shù)據(jù)轉(zhuǎn)化成什么類型。這里寫了類型挤安，在success里面就不需要再解析谚殊。有json、html和xml
success: function(data){ //返回1的時候可以注冊蛤铜；返回0的時候不可以注冊
//var dataJson = $.parseJSON(data); //如果沒有寫dataType的話嫩絮，這里要把返回的data先解析成想要的形式
if(data == 1){
$('#div1').html('可以注冊');
} else if(data == 0){
$('#div1').html('已經(jīng)注冊過了丛肢，不能注冊');
}
},
error: function(err){ //請求不成功的時候走error這里
console.log(err); //404 500以上服務(wù)器錯誤
}
async: false//操作是否異步。默認情況下ajax都是異步操作剿干。如果async為false蜂怎，即為同步的。同步形勢下置尔，ajax執(zhí)行完畢之后杠步，ajax后面的console.log(123);才會執(zhí)行
});
console.log(123);
})
});
</script>
</head>
<form action="reg.php">
<input type="text" name="user" id="input1">
<input type="submit" value="注冊">
</form>
<div id="div1"></div>
<body>
</body>
</html>
用ajax實現(xiàn)選項卡
<!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>無標(biāo)題文檔</title>
<style>
#div1 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
.active{ background:red;}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
$('#div1').find('input').click(function(){
var index = $(this).index();
$('#div1').find('input').attr('class','');
$('#div1').find('div').css('display','none');
$(this).attr('class','active');
$('#div1').find('div').eq( index ).css('display','block');
loadData(index,function(data){
$('#div1').find('div').eq(index).html(data);
});
});
loadData(0,function(data){
$('#div1').find('div').eq(0).html(data);
});
function loadData(num,fn){
$.ajax({
url : 'data.do?num=' + num,
success : function(data){
fn(data);
}
});
}
});
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<div style="display:block">正在加載...</div>
<div>正在加載...</div>
<div>正在加載...</div>
</div>
</body>
</html>
$.get() ★★★★★
? 參數(shù)的作用
$.post() ★★★★★
? 參數(shù)的作用
//第一個參數(shù)url，第二個是data榜轿，第三個是回調(diào)函數(shù)幽歼，第四個函數(shù)是datatype∶危基本上$.post()也是這種寫法甸私。如果獲取失敗了，可以調(diào)用error()這個方法飞傀。
$.get('user3.do', {name: "hello"}, function(data){
console.log(data);
}, 'json').error(function(err){
console.log(err);
});
ajax擴展
輔助
serialize() ★★★
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function(){
//serialize()是針對form表單的實例方法
var a = $('form').serialize(); //注意：一定是針對form中的name和value的形式
console.log(a); //a就處理為字符串："a=1&b=2&c=3"
$.ajax({
data: a //通過以上操作皇型，在調(diào)用ajax的時候就可以直接調(diào)用這個a了
})
})
</script>
</head>
<body>
<form action="">
<input type="text" name="a" value="1">
<input type="text" name="b" value="2">
<input type="text" name="c" value="3">
</form>
</body>
</html>
