入口函數(shù)
原生JS
window.onload():只能出現(xiàn)一次顽耳，在dom元素凸椿、圖片和外部資源都加載完成的時(shí)候才會(huì)調(diào)用
jquery入口函數(shù)
$(document).ready()和$():文檔加載完畢，但是圖片沒有加載完畢
$(window).ready():文檔和圖片加載完畢的時(shí)候
jquery的入口函數(shù)可以出現(xiàn)多次介陶，不會(huì)出現(xiàn)事件覆蓋
DOM元素和JQuery對(duì)象
//原生
var nativeTagBox = document.getElementsByTagName("div");
var nativeClassBox = document.getElementsByClassName("box");
var nativeIdBox = document.getElementById("box");
console.log(nativeTagBox);
console.log(nativeClassBox);
console.log(nativeIdBox);
//jquery
var jqTagBox = $("div");
var jqClassBox = $(".box");
var jqIdBox = $("#box");
console.log(jqTagBox);
console.log(jqClassBox);
console.log(jqIdBox);
- 無論什么方式獲取的jquery獲取的對(duì)象都是數(shù)組卖漫，數(shù)組中包含原生js的DOM對(duì)象霎肯，也就是說jsDOM元素只是jquery的一部分胧弛。
- jquery獲取的DOM在原生jsDOM的基礎(chǔ)上包裝了一些東西而已
js轉(zhuǎn)jquery
$(nativeIdBox);//用$包裹一層原生DOM就轉(zhuǎn)化成jquery對(duì)象
jquery轉(zhuǎn)成js
console.log(jqIdBox[0]);//從數(shù)組中取
console.log(jqIdBox.get(0));//調(diào)用get方法
選擇器
基本選擇器
$("div");//標(biāo)簽
$(".box");//類名
$("#box");//id
層級(jí)選擇器
//后代選擇器(只要后代中有l(wèi)i都會(huì)設(shè)置)
$("ul li").html("1111231231231");
//自帶選擇器(必須是他的兒子才能設(shè)置)
$("ul>li").html("1111231231231");
基本過濾選擇器
//even:從0開始索引值是偶數(shù)
$("ul li:even").css("background-color","red");
//odd:從0開始索引值是奇數(shù)
$("ul li:odd").css("background-color","blue");
//eq:傳入索引骂维，如果是負(fù)數(shù)就從后面開始找
$("ul li:eq(-3)").css("backgroundColor","green");
篩選選擇器
//find:篩選所有后代元素查找指定元素，必須指定參數(shù)
$("ul").find("span").css("background-color","pink");
//children:篩選所有子代指定元素
$("ul").children("a").css("background-color","gray");
//eq:查找前面對(duì)象中所有元素中索引值的元素
$("ul").children().eq(1).css("background-color","gray");
//prev:當(dāng)前元素的上一個(gè)兄弟元素
$("ul").find("a").prev().css("background-color","gray");
//prevAll:當(dāng)前元素前面所有元素
console.log($("ul").find("a").prevAll());
//next:當(dāng)前元素的下一個(gè)兄弟元素
$("ul").find("a").next().css("background-color","gray");
//nextAll:當(dāng)前元素后面所有元素
console.log($("ul").find("a").prevAll());
//siblings:當(dāng)前元素的除自己之外的素有兄弟元素
$("ul").find("a").siblings().css("background-color","gray");
//parent:父親元素
$("ul").find("a").parent().css("background-color","gray");
樣式操作
直接通過CSS方法操作
// css(json);
$("div").css({"width":100,"height":100,"background-color":"red"});
// css(兩個(gè)參數(shù)：方法和值)
$("div").css("background-color","pink");
// css(一個(gè)參數(shù)：屬性值，獲取屬性）,帶單位
console.log($("div").css("width"));
類操作
- 添加類
//添加類（原生js就是className = 'box'）
$("div").eq(0).mouseover(function () {
$("div").eq(1).addClass("box");
});
- 移除類
//移除類
$("div").eq(0).mouseout(function () {
$("div").eq(1).removeClass("box");
})
- 切換類
//切換類（toggle）
$("div").eq(1).toggleClass("box");
- 判斷是否有類名
//判斷是否有類名
console.log($("div").eq(0).hasClass("box"));
動(dòng)畫
- 顯示和隱藏:show毛萌，hide ,toggle(切換顯示和隱藏)
//不帶參數(shù)
$("#show").click(function () {
$(".box").show();//毫秒值
});
//毫秒值（通過寬高，透明度喝滞，dispay控制動(dòng)畫）
$("#show").click(function () {
$(".box").show(1000);//毫秒值
});
//字符串阁将，slow大概600毫秒值 normal大概400毫秒 fast大概是200毫秒
$("#show").click(function () {
$(".box").show("fast");
});
//回調(diào)函數(shù)
$("#show").click(function () {
$(".box").show("fast",function() {
alert("1");//動(dòng)畫完成
});
});
- 滑入滑出：slideUp，slideDown
//滑入滑出(通過控制高度和display)
$("#slideUp").click(function () {
$(".box").slideUp();//也可以傳參數(shù)右遭，毫秒值做盅，字符串，回調(diào)函數(shù)
});
$("#slideDown").click(function () {
$(".box").slideDown();
});
//滑入滑出切換
$("#slideToggle").click(function () {
$(".box").slideToggle();
});
- 淡入淡出
//淡入淡出(通過控制透明度和display)
$("#fadeIn").click(function () {
$(".box").fadeIn();//也可以穿參數(shù)窘哈，毫秒值吹榴，字符串，回調(diào)函數(shù)
});
$("#fadeOut").click(function () {
$(".box").fadeOut();
});
//淡入淡出切換
$("#fadeToggle").click(function () {
$(".box").fadeToggle();
});
//改透明度(從當(dāng)前的透明度變到給定的透明度滚婉，再規(guī)定時(shí)間內(nèi))
$("#fadeTo").click(function () {
$(".box").fadeTo(1000,0.5)//必須給時(shí)間
});
- 自定義動(dòng)畫
//自定義動(dòng)畫：第一個(gè)參數(shù)json,第二個(gè)參數(shù)毫秒值图筹，第三個(gè)參數(shù)回調(diào)函數(shù)
$("#animate").click(function () {
$(".box")
.animate({"width":100},1000)
.animate({"height":100},1000)
.animate({"width":400},1000)
.animate({"height":400},1000);
});
- 停止動(dòng)畫
//第一個(gè)參數(shù)代表后續(xù)動(dòng)畫是否需要執(zhí)行，true代表后續(xù)動(dòng)畫不執(zhí)行让腹，
//第二個(gè)參數(shù)代表當(dāng)前動(dòng)畫是否執(zhí)行完畢远剩，true代表當(dāng)前動(dòng)畫執(zhí)行完畢再停止
$("#stop").click(function () {
$(".box").stop(true,true);
});
節(jié)點(diǎn)操作
動(dòng)態(tài)創(chuàng)建jquery對(duì)象
/**
* 動(dòng)態(tài)創(chuàng)建Jquery對(duì)象
*/
//方法一(類比于createElement)
console.log($("<div>我是創(chuàng)建出來的</div>"));
//方法二（類比于innerHTML,識(shí)別標(biāo)簽）,創(chuàng)建出來并添加到ul上
$("ul").html("<li>我是html創(chuàng)建出來的</li>");
添加、刪除骇窍、復(fù)制元素
/**
* 添加元素
*/
var newLi = $("<li>添加的li</li>");
//append（添加與被添加是父子關(guān)系）
$("ul").append(newLi);//用append添加瓜晤，從后追加
newLi.appendTo($("ul"));//把新創(chuàng)建的li塞進(jìn)ul中
//prepend（添加與被添加是父子關(guān)系）
$("ul").prepend(newLi);//prepend，從頭追加
newLi.prependTo($("ul"));
//after（添加與被添加是兄弟關(guān)系）
$("li").after(newLi);//在當(dāng)前元素的后面添加元素
//before（添加與被添加是兄弟關(guān)系）
$("li").before(newLi);//在當(dāng)前元素的前面添加元素
/**
* 刪除和清空元素
*
*/
//清空里面所有子元素(保留自己)：方法一
$("ul").html("");
//清空里面所有子元素(保留自己)：方法二
$("ul").empty();
//刪除指定元素：刪除自己(自殺)
newLi.remove();
/**
* 復(fù)制元素
*/
$("ul").append(newLi.clone());
屬性操作
attr腹纳、prop
/**
* attr和prop痢掠，用法類比oc存取方法
* prop多用來影響DOM的動(dòng)態(tài)屬性，例如表單中的checked嘲恍、selected足画、disabled
*
*
*/
//綁定屬性
$("input").attr("aaa",111);//對(duì)沒有的屬性綁定，對(duì)已有的屬性就是設(shè)置
$("button").eq(0).click(function () {
console.log($("input").attr("aaa"));//獲取屬性
});
//移除屬性
$("button").eq(1).click(function () {
$("input").removeAttr("aaa");//移除
console.log($("input").attr("aaa"));
});
val():表單value值
//val()：設(shè)置獲取表單元素返回的值蛔钙，例如input,select,textarea
console.log($("input").val());//獲取inut標(biāo)簽的值p
$("button").eq(2).click(function () {
$("input").val("我是新設(shè)置的value值");
console.log($("input").val());
});
text()锌云、html()
//text()：設(shè)置獲取文本內(nèi)容，類比innerText
//html()：類比innerHTML
console.log($("div").text());//獲取文本內(nèi)容
$("button").eq(3).click(function () {
$("div").eq(0).text("我是新設(shè)置的文本內(nèi)容");
});
坐標(biāo)值操作
width吁脱、height
//width和height與js中的offset scroll桑涎，client都不一樣，只是獲取寬高兼贡，跟magin padding border都沒關(guān)系
//獲取寬高沒單位
console.log($(".div2").width());
console.log($(".div2").height());
//設(shè)置寬高
$(".div2").width(200);
$(".div2").height(200);
offset攻冷、position
//設(shè)置或者獲取元素相對(duì)于文檔的left和top,無論當(dāng)前盒子是否有定位，無論父盒子是否有定位遍希，都是相對(duì)文檔的left和top
console.log($(".div2").offset());//獲取
//設(shè)置等曼，如果通過jquery設(shè)置了offset，那么會(huì)默認(rèn)讓當(dāng)前元素設(shè)置為相對(duì)定位(relative)
$(".div2").offset({left:100,top:100});
//獲取距離當(dāng)前盒子最近的帶有定位的父盒子的位置，只能獲取不能設(shè)置
console.log($(".div2").position());//基本就是獲取css設(shè)置的position的left和top
scroll
//scrollTop,scrollLeft和原生js的scroll一樣禁谦，可以設(shè)置也可以獲取
console.log($(document).scrollTop());
console.log($(document).scrollLeft());
事件機(jī)制
綁定事件
/**
* 綁定事件
*/
//第一種綁定事件,并且不會(huì)被覆蓋
$(document).click(function () {
alert("1");
});
$(document).click(function () {
alert("2");
});
//第二種綁定,可以綁定多個(gè)事件胁黑，也不會(huì)被覆蓋
$(document).bind("click mouseover",function () {
alert("1");
});
$(document).bind("click mouseover",function () {
alert("2");
});
//第三種delegate，用父盒子綁定里面子盒子的事件,可以綁定多個(gè)事件,也不會(huì)被覆蓋
//第一個(gè)參數(shù)：子元素州泊，第二個(gè)參數(shù)：事件名
$(document).delegate("div","click mouseover",function () {
alert("1");
});
$(document).delegate("div","click mouseover",function () {
alert("2");
});
//第四種on,用的最多
//第一個(gè)參數(shù)：事件名丧蘸，第二個(gè)參數(shù)：子元素 第三個(gè)參數(shù)：data，傳遞給處理函數(shù)的數(shù)據(jù)遥皂，事件觸發(fā)的時(shí)候通過event.data來使用
$(document).on("click mouseover","div",{"name":"aaa"},function (event) {
alert(event.data.name);
});
$(document).on("click mouseover","div",{"name":"bbb"},function (event) {
alert(event.data.name);
});
解綁事件
//解綁 unbind/undelegate/off分別對(duì)應(yīng)后三種綁定
//第一個(gè)參數(shù)是事件名力喷，第二個(gè)參數(shù)元素，第三個(gè)參數(shù)事件函數(shù)名
$(document).off("click","div");//把所有的div下的click事件都解綁
事件觸發(fā)
/**
* 事件觸發(fā)
*/
//正常情況下都是用戶觸發(fā)事件
$(document).on("click mouseover",function () {
alert("頁(yè)面被點(diǎn)擊了");
});
//手動(dòng)觸發(fā)事件:方式一
$(document).click();
$(document).mouseover();
//手動(dòng)觸發(fā)事件：方法二(觸發(fā)瀏覽器默認(rèn)行為)
$(document).trigger("click");
$(document).trigger("mouseover");
//手動(dòng)觸發(fā)事件：方法三(不觸發(fā)瀏覽器默認(rèn)行為)演训，比如文本框獲取焦點(diǎn)行為就是瀏覽器的默認(rèn)行為
//也就是只執(zhí)行程序弟孟，但是不會(huì)觸發(fā)事件，而trigger即執(zhí)行了程序又觸發(fā)了事件
$(document).triggerHandler("click");
事件對(duì)象
/**
* 事件對(duì)象event
*/
$(document).on("click",{"name":"hahaha"},function (event) {
console.log(event.data); //傳遞給事件處理程序的額外數(shù)據(jù)
console.log(event.currentTarget); // 等同于this样悟，當(dāng)前DOM對(duì)象
console.log(event.pageX); // 鼠標(biāo)相對(duì)于文檔左部邊緣的位置
console.log(event.target); // 觸發(fā)事件源拂募，不一定===this
console.log(event.stopPropagation()); // 阻止事件冒泡
console.log(event.preventDefault()); // 阻止默認(rèn)行為
console.log(event.type); // 事件類型：click，dbclick…
console.log(event.which); // 鼠標(biāo)的按鍵類型：左1 中2 右3
console.log(event.keyCode); // 鍵盤按鍵代碼
});
其他
each:雖然jquery有隱式迭代乌奇，但是有些情況也需要迭代
//為每一個(gè)元素匹配一個(gè)回調(diào)函數(shù)
var liArr = $("ul li");
liArr.each(function (index,element) {
liArr.eq(index).css("opacity", parseFloat((index + 1) / liArr.length));
console.log(element);//這個(gè)元素是原生jsDom對(duì)象没讲，不是jquery對(duì)象
element.innerHTML = index + 1;
});
});
多庫(kù)共存
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(function () {
//打印版本號(hào)。
console.log($.fn.jquery);//1.11.1
//讓1.11.1放棄$的使用權(quán)
$.noConflict();//放棄一個(gè)使用權(quán)
console.log($.fn.jquery);
console.log(jQuery.fn.jquery);
//放棄兩個(gè)符號(hào)的使用權(quán)礁苗，同時(shí)定義一個(gè)新的使用權(quán)
var newJquery = $.noConflict(true);//放棄兩個(gè)版本$的使用權(quán)
console.log($.fn.jquery);
console.log(jQuery.fn.jquery);
console.log(newJquery.fn.jquery);
});
</script>
插件
<script src="jquery-1.11.1.js"></script>
<script src="jquery.color.js"></script>
<script src="jquery.lazyload.min.js"></script>
<!--自定義插件-->
<script src="jquery.custom.js"></script>
<script>
$(function () {
//插件之color
$("button").eq(0).on("click",function () {
//background-color不支持爬凑，可以用插件讓支持
$(".colorDiv").animate({"background-color":"red","width":"200"},2000,function () {
alert("動(dòng)畫結(jié)束");
});
});
//插件之懶加載
//使用插件：
// 1.引包。(必須在jquery之下)
// 2.通過調(diào)用方法實(shí)現(xiàn)功能试伙，而參數(shù)的不同嘁信，功能也可能不同。
$("img.lazy").lazyload();
});
//自定義插件
$("button").on("click",function () {
$("button").setColorRed();
});
</script>
