一、操作元素
- 寬高
- $(“div”).height(); // 高度
- $(“div”).width(); // 寬度
.height()方法和.css(“height”)的區別：返回值不同
.height()方法返回的是 數字類型(20)，
.css(“height”)返回的是字符串類型(20px)，
因此.height()方法常用在參與數學計算的時候
- 坐標值
$(“div”).offset(); // 獲取或設置坐標值！設置值后變成相對定位！（在position沒有設置值的情況下）
$(“div”).position(); // 獲取坐標值 子絕父相 不能設置只能讀取！ - 滾動條（滾動事件）
$(“div”).scrollTop(); // 相對于滾動條頂部的偏移
$(“div”).scrolllLeft(); // 相對于滾動條左部的偏移
- 案例：兩側跟隨的廣告
$(window).scroll(function(){
var docScrollTop = $(document).scrollTop();
// console.log(docScrollTop);
$(".main").animate({"top":docScrollTop+80},50);
});
- 案例：固定導航欄
var topHeight = $(".top").height();
$(window).scroll(function(){
var docScrollTop = $(document).scrollTop();
//文檔被卷去的高度大于或者等于top高度的時候，變成固定定位
if(docScrollTop >= topHeight) {
$(".nav").css({
"position":"fixed",
"top":0
});
$(".main").css("margin-top",$(".nav").height()+20+"px");
}
// 否則變成static定位
else {
$(".nav").css({
"position":"static"
});
$(".main").css("margin-top","20px");
}
});
二、事件分析
- 綁定事件
click/mouseenter/blur/keyup // 綁定事件
bind：$node.bind(“click”,function(){}); // 觸發一次
one : $node.one(“click”,function(){});
delegate : $node.delegate(“p”,”click”,function(){});
on： $node.on(“click”,”p”,function(){});
//2
// $(function(){
// $("button").bind("click mouseenter",function(){
// alert("www");
// })
// });
//2
// $(function(){
// $("button").bind({
// "click":function(){
// alert("1");
// },
// "mouseenter":function(){
// alert("2");
// }
// })
// });
//傳遞數據
// $(function(){
// $("button").bind("click",{aa:true},function(e){
// alert(e.data.aa);
// });
// });
// one 只觸發一次
// $(function(){
// $("button").one("click",function(){
// alert("one");
// });
// });
//綁定
// $(function(){
// $("li").bind("click",function(){
// alert($(this).html());
// }
// });
//delegate
// $(function(){
// $("ul").delegate("li","click",function(){
// alert($(this).html());
// });
// });
//on強烈推薦
$(function(){
$("ul").on("click","li",function(){
alert($(this).html());
});
});
- 解綁事件
unbind undelegate off
$(function(){
$("ul").on("click mouseenter","li",function(){
alert($(this).html());
});
$("ul").off("mouseenter");
});
- 觸發事件
click : $(“div”).click();
trigger：觸發事件，并且觸發瀏覽器默認行為
triggerHandler：不觸發瀏覽器默認行為
$("#btnSub").click(function(){
var txtName = $("#txtName").val();
if(txtName === "1"){
alert("提交");
}else {
// $("#txtName").val("").triggerHandler("focus");
$("#txtName").val("").trigger("focus");
}
})
$("#btntrr").bind("click",function(){
// $("#btnSub").trigger("click");
$("#btnSub").triggerHandler("click");
})
- 事件對象介紹
- event.stopPropagation() //阻止事件冒泡
event.preventDefault(); //阻止默認行為
$(function(){
$(".link").on("click",function(e){
e.preventDefault(); //阻止事件默認行為
e.stopPropagation();
console.log(e.type);
});
$(".box").on("click",function(e){
alert("父盒子被點擊了")
})
})
event.keycode //獲取鍵盤的按鈕
$(window).click(function(e){
console.log(e.which); //鼠標左1中2右3
}).keydown(function(e){
console.log(e.keyCode);
})
})
-
event.target事件觸發源，不一定===this。
例如event.target===this判斷是否觸發事件是本身 -
event.currentTarget事件響應方法中=this，當前dom對象 -
event.data傳遞的額外事件響應方法的額外參數
三、事件補充
- animate動畫：不支持背景的動畫效果
animate動畫支持的屬性列表 - 在線文檔：
w3school：http://www.w3school.com.cn/jquery/index.asp
jQuery官網：http://jquery.com/ - $()的幾種常用用法：
1.$(“#id”) 選擇某個元素，返回值為jQuery對象
2.$(this) 將DOM對象轉換成jQuery對象
3.$(“<div></div>”) 創建元素，返回值為jQuery對象
4.$(function(){}); 入口函數的簡寫方式
$("div").html() 獲取內容的時候，只返回匹配到的第一個元素的數據 - 鏈式編程問題：
$("div").html() 后面就不能繼續鏈式了？
為什么？函數返回值問題！
- 案例 五角星 鏈式編程
end()可以取消鏈式的斷開。結束當前這個方法
$(function(){
var star = "★";
var kong = "☆";
// 鏈式編程，這種方法就是斷掉了。
// $(this).text(star).prevAll().text(star);
// $(this).nextAll().text(kong);
$(".comment").on("mouseenter","li",function(){
$(this).text(star).prevAll().text(star).end().nextAll().text(kong);
}).on("click","li",function(){
$(this).addClass("clicked").siblings().removeClass("clicked");
}).on("mouseleave",function(){
$(".comment li").text(kong);
//鼠標移開時，要先把沒被點擊的標簽，設置為空
$(".clicked").text(star).prevAll().text(star).end().nextAll().text(kong);
})
})
- map返回數組(了解)
$(function(){
//全局的map函數參數和jq對象的函數參數是相反的
// var arr = $.map($("li"),function(e,index){
// return index;
// });
var arr2 = $("li").map(function(index,e){
console.log(index);
return index;
})
});
- each函數（和map相似）
$node.each(function(index,element){});
// $("li").each(function(index,e){
// var t = $(e).text();
// $(e).text(t+index);
// })
$.each($("li"),function(index,e){
var t = $(e).text();
$(e).text(t+index);
})
$.each([1,2,3,5,6,7], function (i,v) {
console.log(i + " : " + v);
});
- 隱式迭代
選擇器選擇的數組后面的方法會實現數組中每個標簽！
如果獲取多元素的值，默認返回第一個元素的值。 - 處理全局$沖突
市面上框架很少用$；
如果命名沖突，jq對象會把其他$對象替代
使用$.noConflict();讓jQuery釋放$ ，讓$回歸到jq之前的對象定義上去。
如果還想沿用，可以var JQ = $.noConflict(); 用JQ替代$ jq可以替換成任何字符串
jjQuery也可以。 - 數據緩存
$(“div”).data(“index”); // 獲取數據index的值
html里面的data 屬性，例如：data-ROLE，jQuery獲取的時候用：$(“div”).data(“role”);；
設置data屬性的時候，例如：$(“div”).data(“UPCASE”,123);，獲取的時候使用：$(“div”).data(“UPCASE”);；
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'>注意HTML屬性不區分大小寫</div>
$( "div" ).data( "lastValue" ) === 43;
lastValue -> data-last-value
- data()跟.attr() 方法的區別：
- 獲取數據的時候，attr方法需要傳入參數，data方法可以不傳入參數，這時候獲取到的是一個js對象，即使沒有任何data屬性。
- 獲取到的數據類型不同，attr方法獲取到的數據類型是字符串(String)，data方法獲取到的是相應的類型。
- data方法獲取到數據之后，我們使用一個對象來接收它，那么就可以直接操作(設置值或獲取值)這個對象，而attr方法不可以；并且通過這種方式，要比.data(key,value)的方式更高效！
- data-attribute屬性會在頁面初始化的時候放到jQuery對象，被緩存起來，而attr方法不會。
- Query優勢：
1.書寫簡潔、代碼優雅
2.Write Less，Do More
3.強大的選擇器，支持CSS1-3所有的選擇器
4.瀏覽器兼容性好，兼容IE6、7、8
5.統一的入口，降低了學習、記憶成本
6.強大的動畫效果、事件支持
7.開源、免費
8.插件豐富，可擴展性強
四、jQuery插件
- 全局jq函數擴展方法
$.log = function(){
console.log(new Date());
}
$.log();
- 擴展一個普通的jq對象方法
$.fn.log = function(){
console.log($(this).text());
}
$(function(){
$("div").log();
});
- 第三方插件
- 顏色插件
引入插件之后：
$(function(){
$(".box").animate({
backgroundColor:"white"},2000)
});
- 延遲加載插件
鼠標滾動到某處才會加載內容，提高效率
<img class="lan" data-original="a.jpg" width="100" height="150">
$(function(){
$(".lan").lazyload();
});
- 自定義選擇器：
jQuery.extend(jQuery.expr[':'], {
"class-itcast": function(ele) {
return jQuery(ele).hasClass("itcast");
}
});
$(":class-itcast").css("background","pink");
-
jQueryUI
第三方
（npm包管理工具 了解一下）
引入js和css的庫和樣式，照著人家demo寫
