什么是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省略原生當中的循環(huán)的操作
jQuery('li').css('background', 'red'); //$ == jQuery 一個大名一個小名
$==jQuery
事件click()
click() ★★★★★ 點擊事件
內(nèi)容
.html() ★★★★★ 等到內(nèi)容
例子:選擇顏色填充方塊
<!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的鏈式操作
$().css().html().click();
針對設(shè)置的時候
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鏈式操作</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標簽下面的所有標簽
//$('p').prevAll().css('background', 'red'); //p標簽之前的所有標簽
//$('p').siblings().css('background', 'red'); //找p標簽所有的兄弟節(jié)點
//參數(shù)篩選功能
//$('p').siblings('h2').css('background', 'red'); //找p標簽所有的兄弟節(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>
下標
eq() ★★★★★
eq()的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下標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>無標題文檔</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秒罗晕，要走一步（將當前div的下一個div背景色變紅梆惯，當前的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() ★ 切片(從第幾個開始到底幾個結(jié)束)
children() ★★★ 找到所有的子節(jié)點,找不到孫子節(jié)點
find() ★★★★★ 找到所有的節(jié)點
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() ★★★★★ 找指定的一個最近的祖先元素（包括自身）（該函數(shù)必須加參數(shù)）矗蕊；它只能選擇到一個唯一的元素
精準的查找能力窥摄，實戰(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() 獲取當前元素的所有祖先節(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標簽
// var oDiv = document.createElemenet('div');
// oDiv.innerHTML = 'hello';
// oDiv.id = 'div1';
$("body").append($('<div id="div1">hello</div>')) //直接創(chuàng)建了一個具備多種設(shè)置的div標簽
})
</script>
</head>
<body>
</body>
</html>
append() 把元素添加到指定的節(jié)點的里面的最后
prepend() 把元素添加到指定的節(jié)點的里面的最前面
before() 把元素添加到指定的節(jié)點的前面
after() 把元素添加到指定的節(jié)點的后面
<!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() 把元素添加到指定的節(jié)點的里面的最后
prependTo() 把元素添加到指定的節(jié)點的里面的最前面
insertBefore() 把元素添加到指定的節(jié)點的前面
insertAfter() 把元素添加到指定的節(jié)點的后面
<!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ū)別嘁字，會影響到鏈式操作
<!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() ★★★★★ 索引值北苟，代表的就是當前元素在所有兄弟節(jié)點中排第幾碰镜。如果不添加參數(shù)，索引值與標簽類型是無關(guān)的伙判。
第一種用法，兄弟中的排行
第二種用法，篩選后的排行
善于利用索引做實際開發(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()：索引值阿弃，代表的就是當前元素在所有兄弟節(jié)點中排第幾。如果不添加參數(shù)，索引值與標簽類型是無關(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-3.3.1.min.js"></script>
<script>
$(function () {
$("input").click(function () {
$(this).addClass("active").siblings("input").removeClass("active");
var index = $(this).index("input");
$("#div1").find("div").eq(index).show().siblings("div").hide()
})
})
</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)
<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>無標題文檔</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-3.3.1.min.js"></script>
<script>
$(function () {
$("#ul1").find('li').dblclick(function () {
$(this).appendTo($("#ul2"))
})
$("#ul2").find('li').dblclick(function () {
$(this).appendTo($("#ul1"))
})
})
</script>
</head>
<body>
<ul id="ul1">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
<ul id="ul2">
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</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-3.3.1.min.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>無標題文檔</title>
<style>
li {
float: left;
width: 50px;
height: 50px;
background: red;
margin: 5px;
list-style: none;
text-align: center;
line-height: 50px;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(function () {
var isClick=false;
$("li").mouseover(function () {
if(!isClick){
$(this).css("background","blue")
$(this).prevAll().css("background","blue")
}
})
$("li").mouseout(function () {
if(!isClick) {
$(this).css("background", "red")
$(this).prevAll().css("background","red")
}
})
$("li").click(function () {
isClick=true
})
})
</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()); //獲取滾動距離
//當滾動條滾到最底部的時候 $(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-3.3.1.min.js"></script>
<script>
function chang() {
$("div").each(function (index,item) {
if($(window).height()+$(document).scrollTop()>=$(item).offset().top )
{
var url=$(item).find("img").attr("_src")
$(item).find("img").attr("src",url)
}
})
}
$(function () {
chang()
$(window).scroll(function () {
chang()
})
})
</script>
</head>
<body>
<div><img _src="http://127.0.0.1:8080/mysite/1.jpg" alt=""></div>
<div><img _src="http://127.0.0.1:8080/mysite/2.jpg" alt=""></div>
<div><img _src="http://127.0.0.1:8080/mysite/3.jpg" alt=""></div>
<div><img _src="http://127.0.0.1:8080/mysite/4.jpg" alt=""></div>
<div><img _src="http://127.0.0.1:8080/mysite/5.jpg" alt=""></div>
<div><img _src="http://127.0.0.1:8080/mysite/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);}) //這就相當于$('#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); //鼠標的y坐標
//ev.pageX和ev.pageY始終是相對于整個頁面的
alert(ev.clientY); //鼠標的y坐標
//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 當前目標元素弄痹，也就是事件源
$(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>
<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-3.3.1.min.js"></script>
<script>
$(function () {
$("button").click(function () {
$("body").css("background-image","url(img/h2.jpg)")
});
var X=0;
var Y=0;
$("img").mousedown(function (ev) {
var that=this;
X=ev.pageX-$(this).offset().left;
Y=ev.pageY-$(this).offset().top;
$(document).mousemove(function (ev) {
$(that).css("left",ev.pageX-X);
$(that).css("top",ev.pageY-Y);
})
$(document).mouseup(function () {
$(this).off("mousemove");
})
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>
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(); 這種寫法就相當于上面的那種寫法
}
})
})
</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>無標題文檔</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>無標題文檔</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>
