入口函數
/*js加載完成事件*/
window.onload=function(){
console.log("頁面和資源完全加載完畢");
}
/*jQuery的ready函數*/
$(document).ready(function(){
console.log("頁面dom層渲染完畢---我是完整寫法");
});
$(function(){
console.log("頁面dom層渲染完畢---我是簡寫形勢");
});
- onload事件和ready函數的區別執行時機不同 onload需要在頁面dom層和頁面加載的資源全部都加載完成才會執行 ready函數只需要在dom層渲染完畢就會執行，不關心資源是否加載執行次數不同 onload函數在頁面中只有一個有效，如果存在多個，后面的覆蓋前面的。 ready函數在頁面中可以存在多個，按照順序依次執行
jQuery對象和DOM對象的轉換
jQuery對象是一個由DOM對象組成的偽數組，jQuery轉DOM使用數組取值的方式，DOM轉jQuery使用jQuery的工廠函數。
//獲取jq對象
let div=$("div");
//數組取值的方式獲取DOM對象
let divDom=div[0];
//get函數獲取DOM對象
let divDom=div.get(0);
//獲取DOM對象
let box=document.getElementById("box");
//使用jq的工廠函數轉換
/*一般轉換來的jq對象，或者自己創建的jq對象取名時，推薦以$開頭*/
let $box=$(box);
jQuery選擇器（同css的選擇器）
jQuery的選擇器和CSS1-3的選擇器完全一致，但是jQuery選擇器在兼容性上更好。 比如css3的選擇器在IE8及以下瀏覽器中不能使用，但是在jq中可以使用。而jq1.7以下的版本是可以使用在IE8中的，所以間接實現了在IE8里使用CSS3的選擇器。
基本選擇器
- 通配符選擇器
- ID選擇器
- 類選擇器
- 標簽選擇器
- 交集選擇器
- 并集選擇器
層級選擇器
- 子代選擇器(等價于children函數)
- 后代選擇器(等價于find函數)
//使用選擇器的方式實現后代選擇
$("div p").css("color","red");
//使用find函數實現后代選擇
$("div").find("p").css("color","red");
//使用選擇器的方式實現子代選擇
$("div>p").css("color","red");
//使用children函數實現子代選擇
$("div").children("p").css("color","p");
過濾選擇器
//選擇所有匹配的li中下標為0的這一個li
$("li:eq(0)").css("color","red");
//對應函數為eq函數
$("li").eq(0).css("color","red");
//獲取所有匹配的li中下標為奇數的li
$("li:odd").css("color","red");
//獲取所有匹配的li中下標為偶數的li
$("li:even").css("color","red");
jQuery選擇器常用函數
|
函數名 |
說明 |
|
children(selector) |
等價于子代選擇器，如果不給參數（等價于給*）表示獲取所有子代 |
|
find(selector) |
等價于后代選擇器，不給參數如上 |
|
eq(index) |
在得到的一組元素中匹配下標為index的那一個 |
|
siblings(selector) |
查找除了自己以外的兄弟節點，不給參數則找所有。 |
|
next(selector) |
查找下一個兄弟節點，如果給定了參數，下一個節點不符合參數要求則不會選中，一般使用時不給參數 |
|
prev(selector) |
查找上一個兄弟節點，如果給定了參數，上一個節點不符合參數要求則不會選中，一般使用時不給參數 |
|
parent() |
獲取父級節點 |
|
parents(selector) |
獲取所有的父級節點中符合給定的參數要求的第一個這一層級 |
jQuery操作屬性
- attr和prop的區別prop在jQuery1.7以后版本中可以使用，attr所有版本中都可以使用在1.7版本以后，推薦使用prop函數來操作屬性值為布爾類型的屬性，比如checked、selected、readonly等。attr可以操作任意屬性（包括自定義屬性），prop只能操作原生屬性
- attr和prop獲取和操作取值時在匹配到元素中只獲取第一個元素的對應屬性設置是把匹配到的元素全部都設置屬性
//獲取屬性原生屬性---attr和prop結果相同
console.log($("div").attr("title"));
console.log($("div").prop("title"));
//獲取屬性值和屬性名相同的屬性
console.log($("input").attr("checked")); //選中結果為checked否則undefined
console.log($("input").prop("checked")); //選中結果為true否則false
//獲取自定義屬性
console.log($("div").attr("zdy")); //可以正常取值
console.log($("div").prop("zdy")); //結果為undefined
//設置原生屬性
$("div").attr("title","attr設置的標題"); //可以設置
$("div").prop("title","prop設置的標題"); //可以設置
//設置屬性名和屬性值相同的屬性
$("input").attr("checked",true); //設置選中
$("input").attr("checked","checked"); //設置選中，在1.7版本以前只能使用attr設置，推薦使用該方案
$("input").attr("checked",false); //設置取消選中
//在1.7版本以前取消選中
$("input").removeAttr("checked"); //設置取消選中
$("input").prop("checked",true); //設置選中
$("input").prop("checked",false); //設置取消選中
//設置自定義屬性
$("div").attr("zdy2","自定義2"); //可以設置屬性
$("div").prop("zdy2","自定義2"); //設置屬性無效
//一次設置多個屬性
$("div").attr({title:"一次多個屬性",id:"d1"}); //attr函數內傳遞對象的方式批量設置屬性/prop函數同理
jQuery操作樣式
操作行內樣式(css)
- css函數的操作和attr函數基本一致，css函數就是直接對標簽內的style屬性進行設置。
- css函數設置時設置匹配到的所有元素，取值只獲取第一個匹配元素的值
//設置文本顏色
$("p").css("color","red");
//設置背景顏色：background-color屬性要改寫為backgroundColor
$("p").css("backgroundColor","green");
//一次設置多個樣式
$("p").css({color:"red",fontSize:"20px"});
//獲取樣式的值
console.log($("p").css("fontSize"));
操作類(class)
- 追加樣式
//追加一個樣式
$("p").addClass("active");
//追加多個樣式，使用空格隔開即可
$("p").addClass("active hover");
- 移除樣式
$("div").removeClass("active");
- 判斷樣式
let flag=$("p").hasClass("active");
console.log(flag); //如果p標簽有active樣式結果為true否則false
- 切換樣式
//如果p標簽有active樣式則移除該樣式，否則追加active樣式
$("p").toogleClass("active");
jQuery操作DOM
創建DOM
使用jQuery的工廠函數可以直接創建出jQuery對象的DOM節點
let $p=$("<p title="把你鼠標移開~~">我是jq創建的標簽</p>");
//此時$p這個dom對象只存在內存中，頁面中不存在該元素
console.log($p);
添加DOM
- 添加到選中標簽的內部結尾 //$p元素追加到box的標簽的內部結尾
$("#box").Append($p);
//該代碼和append等價，只是調用者發生了變化
//$p.appendTo($("#box")); - 添加到選中標簽的內部開頭 //$p元素追加到box標簽的內部開頭
$("#box").prepend($p);
//該代碼和prepend等價，只是調用者發生了變化
//$p.prependTo($("#box")); - 添加到選中標簽的自身前面 $("#box").before($p);
- 添加到選中標簽的自身后面 $("#box").after($p);
刪除DOM
empty清空元素
//清空box元素內所有內容，box會保留，返回值是box
$("#box").empty();
remove刪除元素
//刪除box元素，box消失，返回值是box
//remove刪除的元素再次追加回頁面，其綁定的事件會消失
$("#box").remove();
detach刪除元素
//刪除box元素，box消失，返回值是box
//detach刪除的元素再次追加回頁面，其綁定的時間會跟隨回來
$("#box").detach();
三種刪除元素的區別
- empty只會清空元素內部，remove和detach會把元素一起清除
- remove刪除的元素其綁定的事件會徹底消失，再次追加該元素到頁面時，事件也不會回來
- detach刪除的元素其綁定的事件會保留，再次追加該元素到頁面時，事件自動綁定
克隆DOM
//只復制box節點
let $box=$("#box").clone();
//復制box節點和其綁定的事件
let $box2=$("#box").clone(true);
//復制的節點追加到頁面中
$("#main").append($box);
jQuery操作內容
- 操作文本內容text()
- 操作標簽內容html()
- 操作表單元素的值val()
<body>
<ul>
<li><b>選項1</b></li>
<li><b>選項2</b></li>
<li><b>選項3</b></li>
</ul>
<input type="text" value="你好">
<input type="text" value="我不好">
<select>
<option value="1">男</option>
<option value="2" selected>女</option>
</select>
</body>
//text函數取值會把匹配到的所有元素的文本內容合并為一個字符串
let texts=$("li").text(); //選項1選項2選項3
//html函數取值只取第一個匹配到的元素的內部的內容，包含標簽結構
let html=$("li").html(); //<b>選項1</b>
//val函數取值只取第一個匹配到的表單元素的value的值
let val=$("input").val(); //你好
let sex=$("select").val(); //獲取到當前選中的option的value的值
$("li").text("設置文本"); //所有li標簽文本內容都變為設置文本，li原先的b標簽也被覆蓋掉了
$("li").html("<i>設置標簽</i>"); //所有li標簽內容變為斜體設置標簽
$("input").val("val函數設置"); //所有input標簽value屬性的值都為設置值
$("select").val("1"); //設置選中value為1的選項
//使用回調函數設置文本內容，設置標簽和value屬性同理
$("li").text(function (index,text) {
console.log(index);//li的下標
console.log(text); //當前li標簽的原始內容
//回調函數一定要給返回值，返回的結果就是最終設置的值
return index+1+text;
});
- 總結： 1.html函數和val函數取值都只取匹配到的第一個元素的值，text獲取所有匹配元素的值 2.設置時都是統一設置，都是覆蓋操作 3.html函數可以識別html代碼進行格式化 4.html和text函數只對非表單元素有效，val只對表單元素有效 5.button標簽設置的按鈕操作按鈕文字使用text或者html函數 6.input標簽設置的按鈕操作按鈕文字使用val
jQuery操作尺寸
|
函數名 |
描述 |
備注 |
|
height() |
獲取/設置元素的高度 |
給參數(數值，不帶單位，默認px)則設置，否則獲取。 |
|
width() |
獲取/設置元素的寬度 |
給參數則設置否則獲取，得到的是內容的寬度，不包括內外邊距和邊框 |
|
innerHeight() |
獲取元素的高度 |
包含內邊距的高度 |
|
innerWidth() |
獲取元素的寬度 |
包含內邊距的寬度 |
|
outerHeight() |
獲取元素的高度 |
包含內邊距和邊框的高度 |
|
outerWidth() |
獲取元素的寬度 |
包含內邊距和邊框的寬度 |
|
outerHeight(true) |
獲取元素的高度 |
包含了外邊距、邊框和內邊距的高度 |
|
outerWidth(true) |
獲取元素的寬度 |
包含了外邊距、邊框和內邊距的寬度 |
jQuery操作位置
|
函數名 |
描述 |
備注 |
|
scrollTop() |
獲取滾動條滾動的高度 |
一般使用$(window).scrollTop()獲取網頁滾動條 |
|
scrollLeft() |
獲取滾動條向右滾動的距離 |
目前一般不使用 |
|
offset() |
獲取元素距離文檔頂部的位置 |
返回值如下:{top:100,left:200} |
|
postion() |
獲取定位元素距離有定位的父級元素的位置 如果所有父級都沒有定位，則返回距離瀏覽器內容左上角的頂點 |
返回值如下:{top:200,left:100} |
- 獲取滾動條高度使用$(window).scrollTop()來獲取，設置時應該使用html或body標簽來設置
$("html,body").animate({scrollTo:0},1000);
jQuery事件
事件注冊和移除
- 事件名函數方式：只能綁定HTML支持的原生事件
- bind綁定：1.7以前版本的綁定方式，目前最新版也能用，但是不推薦。
- on綁定：1.7以后開始推薦使用的方式 綁定事件代碼演示
//函數名方式綁定
$("#box").click(function(){
console.log("函數名方式綁定");
});
//bind方式綁定
$("#box").bind("click",function(){
console.log("bind方式綁定");
});
//on方式綁定
$("#box").on("click",function(){
console.log("on方式綁定");
});
//on或者bind一次綁定多個事件
$("#box").on("click mouseover mouserout",function(){
console.log("一次綁定多個事件");
});
移除事件代碼演示
//unbind函數移除事件
$("#box").unbind("click");
//off函數移除事件
$("#box").off("click");
//off或者unbind移除多個事件
$("#box").off("click mouseout");
主動觸發事件
//通過JS代碼來觸發box的單擊事件
$("#box").trigger("click");
事件對象
jQuery的事件對象必須通過事件觸發的函數傳遞參數的方式來使用，沒有兼容問題
- 常用事件屬性如下屬性說明screenX和screenY基于屏幕左上角的X軸坐標和Y軸坐標clientX和clientY基于瀏覽器內容左上角的X軸坐標和Y軸坐標，忽略滾動條pageX和pageY基于頁面內容左上角的X軸坐標和Y軸坐標，計算滾動條keyCode鍵盤碼stopPropagation()阻止事件冒泡preventDefault()阻止默認行為return false;阻止事件冒泡和默認行為
jQuery動畫
內置動畫
- 顯示(show)和隱藏(hide)
- 滑入(slideDown)和滑出(slideUp)和切換(slideToggle)
- 淡入(fadeIn)和淡出(fadeOut)和切換(fadeToggle)
- 變化到指定透明度：fadeTo
/*
* 內置動畫的參數如下：
* 1：number類型的毫秒數,默認都是400/string類型的單詞表示normal普通速度(400),fast(600),slow(200)
* 2：function類型的回調函數,表示在動畫執行完畢自動執行的函數
* */
$("#show").click(function () {
/*控制div顯示*/
$("#main").show("fast");
});
$("#hide").click(function () {
/*控制div隱藏*/
$("#main").hide("slow");
});
$("#sliderUp").click(function () {
$("#main").slideUp();
});
$("#sliderDown").click(function () {
$("#main").slideDown();
});
$("#toggleSlider").click(function () {
$("#main").slideToggle(5000);
});
$("#fadeIn").click(function () {
$("#main").fadeIn();
});
$("#fadeOut").click(function () {
$("#main").fadeOut();
});
$("#toggleFade").click(function (){
$("#main").fadeToggle(5000);
});
$("#fadeTo").click(function () {
/*
* fadeTo參數如下：
* 1.執行時間
* 2.指定的透明度，可選值0-1之間，0表示完全透明，1表示不透明
* 3.表示執行效果方式，可選值：swing表示緩動，是默認值。或者是linear表示勻速
* 4.動畫執行完畢的回調函數
* */
$("#main").fadeTo(3000,.4,"swing",function () {
console.log("透明度已經調整到40%");
});
});
自定義動畫
/*
* animate函數參數如下：
* 1.對象類型：設置要執行動畫的css屬性[必填]
* 1.1：jQuery動畫不支持transform屬性
* 2.速度:執行動畫所需的時間，單位毫秒[必填]
* 3.執行效果：swing緩速（默認值）,linear勻速
* 4.回調函數：動畫執行完畢后自動調用的函數
* */
/*
* jq動畫中設置的屬性名要符合DOM對象屬性名的設置（駝峰命名）
* 例如：font-size必須寫為：fontSize
* */
$("#d1").animate({left:"200px",opacity:".3",fontSize:"30px"},3000);
隊列動畫
- 回調函數方式實現隊列動畫
- 鏈式編程方式實現隊列動畫(推薦使用)
$("#qu1").click(function () {
/*使用回調函數來實現動畫的隊列效果*/
$("div").animate({left:"200px"},1500,"swing",function () {
$("div").animate({opacity:0.4},1500,"swing",function () {
$("div").animate({fontSize:"50px"},2000,"swing",function () {
$("div").animate({top:"200px",height:"400px",width:"400px"},2000);
});
});
});
});
$("#qu2").click(function () {
/*使用鏈式編程來實現動畫的隊列效果*/
/*
* delay函數用來控制等待時間，單位毫秒，delay函數也可以用在內置動畫中
* */
$("div").animate({left:"200px"},1500)
.animate({opacity: 0.4},1500).delay(3000)
.animate({fontSize: "50px"},1500)
.animate({top:"200px",height:"400px",width: "400px"},2000);
});
等待動畫
隊列動畫已體現效果
停止動畫
stop(是否清除隊列,是否立即完成當前動畫);
$("#box").stop(true,true); //清除后續動畫效果，當前動畫效果立即完成
$("#box").stop(true,false); //清除后續動畫效果，當前動畫效果立即停止,該 效果可省略第二個參數
$("#box").stop(false,true); //后續動畫會繼續執行，當前動畫立即完成
$("#box").stop(false,false); //后續動畫會繼續執行，當前動畫立即停止，該效果可省略兩個參數
jQuery插件
常用插件
- [jQueryUI] https://jqueryui.com/
- [bootstrap] https://www.bootcss.com/
- [easyUI] https://www.jeasyui.net/
- [layui] https://www.layui.com/
- [jQuery插件庫] https://www.jq22.com/
自定義插件
- 靜態方法設置靜態方法：$.方法名=function([參數列表])；使用靜態方法：$.方法名([實參列表]); (function($){
//獲取指定范圍的隨機數
$.getRandom=function (min,max) {
if(min>max){
let temp=max;
max=min;
min=temp;
} if(min==max){
return min;
}else{
let r=Math.floor(Math.random()*(max-min+1)+min);
return r;
} } })(jQuery);
console.log($.getRandom(5,25)); - 實例方法設置實例方法：$.fn.方法名=function([參數列表]);使用實例方法：$(selector).方法名([實參列表]);
(function($){
//設置某個元素的color屬性
$.fn.changeColor=function (color) {
this.css("color",color?color:"red");
}
})(jQuery);
//不傳參數則設置box的字體顏色為red
$("#box").changeColor();
//傳遞正確的參數則設置box的字體顏色為指定顏色
$("box").changeColor("#FFF");//設置box的字體顏色為白色
jQuery經典案例
無縫輪播
- 頁面代碼
<div class="main">
<div class="banner-list">
<div class="banner-item"><a href=""><img src="images/ad-1.png" alt=""></a></div>
<div class="banner-item"><a href=""><img src="images/ad-2.png" alt=""></a></div>
<div class="banner-item"><a href=""><img src="images/ad-3.png" alt=""></a></div>
</div>
<div class="banner-opt">
<span class="left"><</span>
<span class="right">></span>
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
- 樣式代碼
*{
padding: 0;
margin: 0;
}
.main{
height: 300px;
width: 380px;
position: relative;
margin: 100px auto;
overflow: hidden;
}
.banner-list{
position: absolute;
left: 0;
top: 0;
}
.banner-list div{
float: left;
}
.banner-opt span{
display: none;
height: 20px;
line-height: 20px;
width: 20px;
text-align: center;
background-color: #ccc;
color: #fff;
position: absolute;
top: 50%;
margin-top: -10px;
cursor: pointer;
}
.banner-opt span.left{
left: 0;
}
.banner-opt span.right{
right: 0;
}
.main:hover .banner-opt span{
display: block;
}
.banner-opt ul{
list-style: none;
width: 45px;
height: 25px;
position: absolute;
left: 50%;
margin-left: -22px;
bottom: 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
.banner-opt ul li{
height: 10px;
width: 10px;
background-color: #ccc;
border-radius: 50%;
}
.banner-opt ul li.active{
background-color: #5cb85c;
border: 2px solid #fff;
}
- 效果代碼
/*初始化輪播圖默認選中下標*/
let index=0;
/*初始化計時器*/
let inter;
$(function(){
/*無縫輪播*/
/*1.復制首項內容*/
let $itemFirst=$(".banner-item").eq(0).clone(true);
/*2.追加到末尾*/
$(".banner-list").append($itemFirst);
/*3.更新輪播box的寬度:banner-item的寬度*banner-item的個數*/
let listWidth=$(".banner-item").length*$(".banner-item").width();
$(".banner-list").width(listWidth);
/*下一張按鈕*/
$(".right").click(next);
/*上一張按鈕*/
$(".left").click(prev);
/*鼠標進入則停止輪播,移出則繼續輪播*/
$(".banner-list").mouseover(stopMove).mouseout(autoMove);
/*頁面加載則自動輪播*/
autoMove();
});
/*切換下一張*/
function next() {
index++;
if(index===$(".banner-item").length){
index=1;
$(".banner-list").css("left",0);
}
moveItem(index);
}
/*切換上一張*/
function prev(){
index--;
if(index===-1){
index=$(".banner-item").length-2;
$(".banner-list").css("left",($(".banner-item").length-1)*$(".banner-item").width()*-1);
}
moveItem(index);
}
/*移動輪播圖*/
function moveItem(i) {
$(".banner-list").stop().animate({"left":-i*$(".banner-item").width()},500);
/*輪播指示點設置*/
if(i==$(".banner-item").length-1){
$("li").eq(0).addClass("active").siblings().removeClass("active");
}else{
$("li").eq(i).addClass("active").siblings().removeClass("active");
}
}
/*自動輪播*/
function autoMove() {
inter=setInterval(next,1500);
}
/*停止自動輪播*/
function stopMove() {
clearInterval(inter);
}
