jQuery 第三天知識(shí)點(diǎn)大綱
一、復(fù)習(xí)
第一天jQuery優(yōu)點(diǎn)
jQuery入口函數(shù)
jQuery 選擇器
第二天jQuery CSS操作
jQuery 動(dòng)畫
jQuery Dom操作
二、jQuery的元素操作
2.1 jQuery獲取元素的高和寬
$(“div”).height(); // 高度
$(“div”).width(); // 寬度
.height()方法和.css(“height”)的區(qū)別：
返回值不同，.height()方法返回的是 數(shù)字類型(20)，.css(“height”)返回的是字符串類型(20px)，因此.height()方法常用在參與數(shù)學(xué)計(jì)算的時(shí)候
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../jquery-1.11.1.min.js"></script>
<script>
jQuery(document).ready(function () {
// 設(shè)置div的背景色
$("div").css("background-color","green");
// 設(shè)置高度
$("button").eq(0).click(function () {
// css方式設(shè)置高度
//$("div").css("height","300px");
//$("div").height(300);
$("div").height("300px");
});
// 獲取高度
$("button").eq(1).click(function () {
// 給div設(shè)置thml內(nèi)容
$("div").html("div的高度是：" + $("div").height());
});
// 設(shè)置寬度
$("button").eq(2).click(function () {
$("div").width(600);
});
// 獲取寬度
$("button").eq(3).click(function () {
$("div").html("div的寬度是：" + $("div").width());
});
// 對(duì)比.css("height")和.height()
$("button").eq(4).click(function () {
console.log("height()方式獲取的結(jié)果是：" + $("div").height());
console.log("height()方式獲取的結(jié)果類型：" + typeof $("div").height());
console.log("css()方式獲取的結(jié)果是：" + $("div").css("height"));
console.log("css()方式獲取的結(jié)果類型：" + typeof $("div").css("height"));
/*$("div").html();
$("div").html();*/
});
});
</script>
</head>
<body>
<button>設(shè)置高度</button>
<button>獲取高度</button>
<button>設(shè)置寬度</button>
<button>獲取寬度</button>
<button>對(duì)比CSS和height寬度</button>
<div></div>
</body>
</html>
innerHeight //只能獲?。簝?nèi)邊距+內(nèi)容的高度
innerWidth //同上.........寬度
outerHeight
outerWidth //獲取：左右內(nèi)邊距+內(nèi)容+左右邊框
2.2 jQuery元素坐標(biāo)操作
$(“div”).offset(); // 獲取或設(shè)置坐標(biāo)值** 設(shè)置值后變成相對(duì)定位**
$(“div”).position(); // 獲取坐標(biāo)值 子絕父相 只能讀取不能設(shè)置
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div {
/*position: absolute;*/
top: 100px;
left: 200px;
width: 400px;
height: 300px;
background-color: #000000;
}
p {
background: #666;
position: absolute;
top: 80px;
left: 90px;
}
</style>
<script src="../jquery-1.11.1.min.js"></script>
<script>
$(function () {
// 獲取offset坐標(biāo)值
$("#btn1").click(function () {
console.log("距離頁面上部的距離：" + $("div").offset().top);
console.log("距離頁面左邊的距離：" + $("div").offset().left);
});
// 獲取相對(duì)于父元素的位置
$("#btn2").click(function () {
console.log("相對(duì)與父元素上部的距離：" + $("p").position().top);
console.log("相對(duì)與父元素左邊的距離：" + $("p").position().left);
});
// 設(shè)置offset
$("#btn3").click(function () {
var txtTop = $("#txtTop").val();
var txtLeft = $("#txtLeft").val();
// 設(shè)置兩個(gè)值：top和left
/*$("div").offset({
top: txtTop,
left: txtLeft
});*/
$("div").offset({
left: txtLeft
});
});
});
</script>
</head>
<body>
<button id="btn1">獲取offset坐標(biāo)值</button>
<button id="btn2">獲取position坐標(biāo)值</button>
<button id="btn3">設(shè)置position坐標(biāo)值</button>
<label for="txtTop">top：</label><input type="text" id="txtTop"/>
<label for="txtLeft">left：</label><input type="text" id="txtLeft"/>
<div>
<p>我是div的子元素p</p>
</div>
</body>
</html>
offset() 獲取或設(shè)置元素相對(duì)于文檔位置的方法
返回一個(gè)object，包含left和top屬性，值是相對(duì)于document的位置。
如果傳入一個(gè)參數(shù)，則是對(duì)元素重新設(shè)置相對(duì)于document的位置。
傳入?yún)?shù)必須包括：left和top屬性。比如： {left：100，top：150}
例如：$(selector).offset({left:100, top: 150});
position() 獲取相對(duì)于其最近的定位的父元素的位置。
只能獲取，不能設(shè)置。
相對(duì)與其最近的定位元素
返回一個(gè)object，包含left和top屬性
例如： $(selector).position();
2.3元素的滾動(dòng)
$(“div”).scrollTop(); // 相對(duì)于滾動(dòng)條頂部的偏移
$(“div”).scrolllLeft(); // 相對(duì)于滾動(dòng)條左部的偏移
scrollLeft() 獲取或者設(shè)置元素水平方向滾動(dòng)的位置
scrollTop() 獲取或者設(shè)置窗口垂直方向的滾動(dòng)的位置
例如： $(selector).scrollLeft(100);
scroll() 事件觸發(fā)或者綁定滾動(dòng)事件
scroll(hander) 綁定滾動(dòng)事件
scroll() 觸發(fā)滾動(dòng)事件 $(selector).scroll(function(){ //當(dāng)選擇的元素發(fā)生滾動(dòng)的時(shí)候觸發(fā) });
案例：01 固定導(dǎo)航欄案例
鏈接：http://pan.baidu.com/s/1i4PbQKX 密碼：hnxi
案例：02 兩側(cè)跟隨的廣告
鏈接：http://pan.baidu.com/s/1pLk4pbt 密碼：za8t
三、jQuery事件綁定機(jī)制
3.1-3.5綁定
click/mouseenter/blur/keyup
// 綁定事件
bind：$node.bind(“click”,function(){});
// 觸發(fā)一次
one : $node.one(“click”,function(){});
delegate : $node.delegate(“p”,”click”,function(){});
on： $node.on(“click”,”p”,function(){});
3.1 簡(jiǎn)單事件綁定方法
.click(hander) .click() //綁定事件 或者觸發(fā) click事件
.blur() //失去焦點(diǎn)事件，同上
.hover(mousein, mouseleave) //鼠標(biāo)移入，移出
mouseout： 當(dāng)鼠標(biāo)離開元素及它的子元素的時(shí)都會(huì)觸發(fā)。
mouseleave: 當(dāng)鼠標(biāo)離開自己時(shí)才會(huì)觸發(fā)，子元素不觸發(fā)。
.dbclick() 雙擊
change 改變,比如：文本框發(fā)送改變，下來列表發(fā)生改變等...
focus 獲得焦點(diǎn)
keyup, keydown, keypress : 鍵盤 鍵被按下。
mousedown, mouseover
其他參考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
3.2 綁定事件的方式 bind方式
（不推薦，1.7以后的jQuery版本被on取代）
語法格式：.bind( eventType [, eventData ], handler )
【參數(shù)說明】：
第一個(gè)參數(shù)：事件類型
第二個(gè)參數(shù)：傳遞給事件響應(yīng)方法的數(shù)據(jù)對(duì)象，可以省略。
事件響應(yīng)方法中獲取數(shù)據(jù)方式： e.data
第三個(gè)參數(shù)：事件響應(yīng)方法
第二個(gè)參數(shù)可以省略。
例如： $("p").bind("click", function(e){ //事件響應(yīng)方法 });
3.3 delegate方式（推薦，性能高，支持動(dòng)態(tài)創(chuàng)建的元素）
語法格式：$(selector).delegate( selector, eventType, handler )
語法說明：第一個(gè)參數(shù):selector， 子選擇器
第二個(gè)參數(shù)：事件類型
第三個(gè)參數(shù)：事件響應(yīng)方法
例如：
$(".parentBox").delegate("p", "click", function(){ //為 .parentBox下面的所有的p標(biāo)簽綁定事件 });
優(yōu)勢(shì)：效率較高
3.4 on方式（最現(xiàn)代的方式，兼容zepto，強(qiáng)烈建議使用的方式）
jQuery1.7版本后，jQuery用on統(tǒng)一了所有的事件處理的方法
語法格式：$(selector).on( events [, selector ] [, data ], handler )
參數(shù)介紹：第一個(gè)參數(shù)：events，事件名
第二個(gè)參數(shù)：selector,類似delegate
第三個(gè)參數(shù): 傳遞給事件響應(yīng)方法的參數(shù)
第四個(gè)參數(shù)：handler，事件處理方法
例如：
//綁定一個(gè)方法
$( "#dataTable tbody tr" ).on( "click", function() {
console.log( $( this ).text() );
});
//給子元素綁定事件
$( "#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});
//綁定多個(gè)事件的方式 $( "div.test" ).on({ click: function() {
$( this ).toggleClass( "active" ); }, mouseenter: function() {
$( this ).addClass( "inside" ); }, mouseleave: function() {
$( this ).removeClass( "inside" );
}
});
3.5 one綁定一次事件的方式
.one( events [, data ], handler )
例如：
$( "p" ).one( "click", function() { alert( $( this ).text() ); });
3.6 解綁事件
unbind、undelegate
off
unbind解綁 bind方式綁定的事件( 在jQuery1.7以上被 on和off代替)
$(selector).unbind(); //解綁所有的事件
$(selector).unbind("click"); //解綁指定的事件
undelegate解綁delegate事件
$( "p" ).undelegate(); //解綁所有的delegate事件
$( "p" ).undelegate( "click" ); //解綁所有的click事件
例如：
var foo = function () {
// Code to handle some kind of event };
// ... Now foo will be called when paragraphs are clicked... $( "body" ).delegate( "p", "click", foo );
// ... foo will no longer be called. $( "body" ).undelegate( "p", "click", foo );
off解綁on方式綁定的事件$( "p" ).off();
$( "p" ).off( "click", "*" );
// 解綁所有的click事件，兩個(gè)表示所有
$( "body" ).off( "click", "p", foo );
案例：
var foo = function() {
// Code to handle some kind of event };
// ... Now foo will be called when paragraphs are clicked ... $( "body" ).on( "click", "p", foo );
// ... Foo will no longer be called. $( "body" ).off( "click", "p", foo );
3.7 觸發(fā)事件
click : $(“div”).click();
trigger：觸發(fā)事件，并且觸發(fā)瀏覽器默認(rèn)行為
triggerHandler：不觸發(fā)瀏覽器默認(rèn)行為
簡(jiǎn)單事件觸發(fā)$(selector).click(); //觸發(fā) click事件
trigger方法觸發(fā)事件$( "#foo" ).trigger( "click" );
triggerHandler觸發(fā) 事件響應(yīng)方法，不觸發(fā)瀏覽器行為$( "input" ).triggerHandler( "focus" );
3.8 jQuery事件對(duì)象的簡(jiǎn)介
event.stopPropagation() //阻止事件冒泡
event.preventDefault(); //阻止默認(rèn)行為
event.data //傳遞的額外事件響應(yīng)方法的額外參數(shù)
event.currentTarget //在事件響應(yīng)方法中等同于this，當(dāng)前Dom對(duì)象
**event.target **//事件觸發(fā)源，不一定===this
event.pageX //The mouse position relative to the left edge of the document
event.pageY
event.stopPropagation()//阻止事件冒泡
e.preventDefault(); //阻止默認(rèn)行為
event.type //事件類型：click，dbclick...
event.which //鼠標(biāo)的按鍵類型：左1 中2 右3
jQuery其他補(bǔ)充
鏈?zhǔn)骄幊蹋?end()補(bǔ)充
五角星評(píng)論案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星案例</title>
<style>
* { margin: 0; padding: 0; }
ul { list-style: none; }
.comment {
color: red;
/*font-size: 0;*/
/*設(shè)置字符間距*/
/*letter-spacing: -13px;*/
/*設(shè)置單 詞間距 I am a teacher */
/*word-spacing: -13px;*/
}
.comment li {
float: left;
/*display: inline-block;*/
font-size: 40px;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script>
jQuery(document).ready(function($) {
var wjx_sel = "★",
wjx_none = "☆";
$(".comment").on("mouseenter", "li", function(){
//prevAll前面所有的兄弟節(jié)點(diǎn)
// $(this).text(wjx_sel).prevAll().text(wjx_sel);
// $(this).nextAll().text(wjx_none);
//當(dāng)執(zhí)行的jQuery 鏈?zhǔn)骄幊虜嗟舻臅r(shí)候，如果能把鏈再鏈上就好了。
//end()可以結(jié)束當(dāng)前調(diào)用的鏈。 恢復(fù)上一級(jí)的調(diào)用鏈。
$(this).text(wjx_sel)
.prevAll()
.text(wjx_sel)
.end() //結(jié)束prevAll，回到 $(this)鏈
.nextAll()
.text(wjx_none);
//第二步： 記錄一下用戶點(diǎn)擊的那個(gè)五角星
//給點(diǎn)擊的li標(biāo)簽添加一個(gè)樣式類
}).on("click","li", function(){
$(this).addClass('clicked').siblings().removeClass('clicked');
}).on("mouseleave",function(){
//鼠標(biāo)移開的時(shí)候，先給所有的li標(biāo)簽添加一個(gè)空心的 五角星
//隱式迭代
$(".comment li").text(wjx_none);
var t = $(".comment li").text();
$(".clicked").text(wjx_sel).prevAll().text(wjx_sel).end()
.nextAll().text(wjx_none);
//第三步： 當(dāng)鼠標(biāo)移開評(píng)分控件的時(shí)候，把click（包括自己）之前的五角星全部變成實(shí)心的，后面的變成空心。
});
});
</script>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
第一步：鼠標(biāo)移入，當(dāng)前五角星和前面的五角星變實(shí)體。后面的變空心五角星
第二步：鼠標(biāo)點(diǎn)擊的時(shí)候，為當(dāng)前元素添加clicked類，其他的移除clicked類
第三步：當(dāng)鼠標(biāo)移開整個(gè)評(píng)分控件的時(shí)候，把clicked的之前的五角星顯示實(shí)心
隱式迭代
默認(rèn)情況下，會(huì)自動(dòng)迭代執(zhí)行jQuery選擇出來所有dom元素的操作。
如果獲取的是多元素的值，默認(rèn)返回的是第一個(gè)元素的值
map函數(shù)
$.map(arry,function(object,index){}) 返回一個(gè)新的數(shù)組
$("li").map(function(index, element){}) 注意參數(shù)的順序是反的
each函數(shù)
$.each(array, function(index, object){})
$("li").each(index, element )
參數(shù)的順序是一致的
each和 map函數(shù)的使用案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>each和 map函數(shù)的使用案例</title>
<script src="jquery-1.11.3.min.js"></script>
<script>
jQuery(document).ready(function($) {
// $("li").each(function(index, el) {
// var originTxt = $(el).text();
// $(el).text(originTxt + index);
// });
$.each($("li"), function(i, e) {
var originTxt = $(e).text();
$(e).text(originTxt + i+1);
});
//map函數(shù)： 會(huì)把所有的
// 全局的map 函數(shù) 參數(shù) 跟 jQuery對(duì)象的參數(shù)是反的。
var temp = $.map($("li"), function(elme, index) {
return index;
});
var temp2 = $("li").map(function(i, e){
console.log(i);
return i;
});
});
</script>
</head>
<body>
<ul>
<li>圣誕快樂</li>
<li>圣誕快樂</li>
<li>圣誕快樂</li>
<li>圣誕快樂</li>
</ul>
</body>
</html>
noConflict 全局對(duì)象污染沖突
$ jQuery
var $ = {name : "it"};
<script src="jQueryDemos/jquery-1.11.3.min.js"></script>
var laoma_jQ - $.noConflict();//讓jQuery釋放$,讓$回歸到j(luò)Query之前的對(duì)象定義上去。
$.name
jQuery
jQuery.data() jQuery對(duì)象的數(shù)據(jù)緩存。(了解)
* $(".nav").data("name", 123);//設(shè)置值。
var t = $(".nav").data("name"); //獲取值
t.name = "18";//對(duì)象的更改，會(huì)直接同步到 元素的jQuery對(duì)象上去。
