mysql 建立使用者, 分配許可權, 刪除使用者
jQuery
一、jQuery概述
1.1、JavaScript庫
倉庫:可以把很多東西放到這個倉庫裡面,找東西只需要到倉庫裡面查詢到就可以了
JavaScript庫:即library,是一個封裝好的特定的集合(方法和函式)。從封裝一大堆函式的角色理解庫,就是在這個庫中,封裝了很多預先定義好的函式在裡面,比如動畫animate、hide、show,比如獲取元素等。
簡單理解:就是一個JS檔案,裡面對我們原生js程式碼進行了封裝,存放到裡面,這樣我們可以快速高速的使用這些封裝好的功能了。
比如jQuery,就是為了快速方便的操作DOM,裡面基本都是函式(方法)。
常見的JavaScript庫
(1)jQuery
(2)Prototype
(3)YUI
(4)Dojo
(5)Ext JS
(6)移動端的zepto
這些庫都是對原生JavaScript的封裝,內部都是用JavaScript實現的,我們主要學習的是jQuery。
1.2、jQuery的概念
jQuery是一個快速、簡潔的JavaScript庫,其設計的宗旨是“write Less,Do More”,即倡導寫更少的程式碼,做更多的事情。
j就是JavaScript;Query查詢;意思就是查詢js,把js中的DOM操作做了封裝,我們可以快速的查詢使用裡面的功能。
jQuery封裝了JavaScript常用的功能程式碼
學習jQuery本質:就是學習呼叫這些函式(方法)。
jQuery出現的目的是加快前端人員的開發速度,我們可以非常方便的呼叫和使用它,從而提高開發效率。
1.3、jQuery的優點
(1)輕量級。核心檔案才幾十kb,不會影響頁面載入速度
(2)跨瀏覽器相容,基本相容了現在主流的瀏覽器
(3)鏈式程式設計、隱式迭代
(4)對事件、樣式、動畫支援,大大簡化了DOM操作
(5)支援外掛擴充套件開發。有著豐富的第三方的外掛,例如:樹形選單、日期控制元件、輪播圖等
(6)免費、開源
二、jQuery的基本使用
2.1、jQuery的下載
官網地址:https://jquery.com/
版本:
(1)1x:相容IE 678等低版本瀏覽器,官網不在更新
(1)2x:不相容IE 678等低版本瀏覽器,官網不在更新
(1)3x:相容IE 678等低版本瀏覽器,是官方主要更新維護的版本
各個版本的下載:https://code.jquery.com/
2.3、jQuery的入口函式
$(function () {
... // 此處是頁面DOM載入完成的入口
});
$(document).ready(function () {
... // 此處是頁面DOM載入完成的入口
})
1.等著DOM結構渲染完畢即可執行內部程式碼,不必等到所有外部資源載入完成,jQuery幫我們完成了封裝。
2.相當於原生js中的DOMContentLoaded.
3.不同於原生js中的load事件是頁面文件、外部的js檔案、css檔案、圖片載入完畢才執行內部程式碼。
4.更推薦使用第一種方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery的基本使用</title>
<style>
div{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
// $('div').hide();
// 1.等著頁面DOM載入完畢再去執行js程式碼
// 複雜寫法
// $(document).ready(function () {
// $('div').hide();
// })
// 簡單寫法
$(function () {
$('div').hide();
})
</script>
<div></div>
</body>
</html>
2.4、jQuery的頂級物件$
1.$是jQuery的別稱,在程式碼中可以使用jQuery代替$,但一般為了方便,通常都直接使用$。
2.$是jQuery的頂級物件,相當於 原生JavaScript中的window,把元素利用$包裝成jQuery物件,就可以呼叫jQuery的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery頂級物件</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
// 1.$是jQuery的別稱(另外的名字)
// $(function () {
// alert(11);
// });
jQuery(function () {
alert(11);
// $('div').hide();
// jQuery('div').hide();
});
// 2.$同時也是jQuery的頂級物件
</script>
<div></div>
</body>
</html>
2.5、jQuery物件和DOM物件
DOM物件與jQuery物件之間是可以相互轉換的。
因為原生js比jQuery更大,原生的一些屬性和方法jQuery沒有給我們封裝,要想使用這些屬性和方法需要把jQuery物件轉換為DOM物件才能使用。
1.DOM物件轉換為jQuery物件:$(DOM物件)
$('div')
2.jQuery物件轉換為DOM物件(兩種方式)
$('div')[index] index是索引號
$('div').get(index) index是索引號
三、jQuery常用API
3.1、jQuery基礎選擇器
原生JS獲取元素方式很多,很雜,而且相容性情況不一致,因此jQuery給我們做了封裝,使獲取元素統一標準。
$("選擇器") // 裡面選擇器直接寫css選擇器即可,但是要加引號
3.2、jQuery層級選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery基本和層級選擇器</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<div>我是div</div>
<div class="nav">我是nav</div>
<p>我是p</p>
<ol>
<li>我是ol的</li>
<li>我是ol的</li>
<li>我是ol的</li>
<li>我是ol的</li>
</ol>
<ul>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
</ul>
<script>
$(function () {
console.log($(".nav"));
console.log($("ul li"));
})
</script>
</body>
</html>
四、jQuery選擇器
4.1、jQuery設定樣式
$('div').css('屬性','值')
4.2、隱式迭代(重要)
遍歷內部DOM元素(偽陣列形式儲存)的過程就叫做隱式迭代。
簡單理解:給匹配到的所有元素進行迴圈遍歷,執行相應的方法,而不用我們在進行迴圈,簡化我們的操作,方便我們呼叫。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery隱式迭代</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<div>驚喜不,意外不</div>
<div>驚喜不,意外不</div>
<div>驚喜不,意外不</div>
<div>驚喜不,意外不</div>
<ul>
<li>相同的操作</li>
<li>相同的操作</li>
<li>相同的操作</li>
</ul>
<script>
// 1.獲取四個div元素
console.log("div");
// 2.給四個div設定背景顏色為粉色,jquery物件不能使用style
$('div').css("background","pink");
// 3.隱式迭代就是把匹配的所有元素內部進行遍歷迴圈,給每個元素新增css這個方法
$("ul li").css("color","red");
</script>
</body>
</html>
4.3、jQuery篩選選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery篩選選擇器</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<ul>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
</ul>
<ol>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
<li>多個裡面篩選幾個</li>
</ol>
<script>
$(function () {
$("ul li:first").css("color","red");
$("ul li:eq(2)").css("color","blue");
$("ol li:odd").css("color","skyblue");
$("ol li:even").css("color","pink");
})
</script>
</body>
</html>
4.4、jQuery篩選方法(重點)
重點記住:parent()、children()、find()、siblings()、eq()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=q">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery篩選方法(上)</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="grandpa">
<div class="father">
<div class="son"></div>
</div>
</div>
<div class="nav">
<p>我是第一個p</p>
<div>
<p>我是第二個p</p>
</div>
</div>
<script>
// 注意一下,都是方法,帶括號
$(function () {
// 查詢父級,返回的是最近一級的父級元素
console.log($(".son").parent());
// 查詢子級,返回的是最近一級的子級元素,利用children(),類似於子代選擇器ul>li
$('.nav').children('p').css("color","blue");
// 可以選擇裡面的所有孩子,包括兒子和孫子,find()類似於後代選擇器
$('.nav').find('p').css("color","red");
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery篩選方法(下)</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<ol>
<li>你好</li>
<li>你好</li>
<li class="item">你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ol>
<ul>
<li>哆啦A夢</li>
<li>哆啦A夢</li>
<li>哆啦A夢</li>
<li>哆啦A夢</li>
<li>哆啦A夢</li>
<li>哆啦A夢</li>
</ul>
<div class="current">有current</div>
<div>沒有current</div>
<script>
// 注意一下都是方法,帶括號
$(function () {
// 1.兄弟元素siblings 選擇除了自身以外的所有親兄弟
$("ol .item").siblings("li").css("color","red");
// 2.第n個元素
var index = 2;
// (1)利用選擇器的方式選擇
// $("ul li:eq(2)").css("color","blue");
// $("ul li:eq(" + index + ")").css("color","blue");
// (2)利用選擇方法的方式選擇,更推薦這種寫法
$("ul li").eq(index).css("color","red");
// 3.判斷是否有某個類名
console.log($("div:first").hasClass("current"));
console.log($("div:last").hasClass("current"));
})
</script>
</body>
</html>
五、jQuery樣式操作
5.1、操作css方法
jQuery可以使用css方法來修改簡單元素樣式;也可以操作類,修改多個樣式。
1、引數只寫屬性名,則是返回屬性值
$(this).css("color");
2、引數是屬性名、屬性值、逗號分隔,是設定一組樣式,屬性必須加引號,值如果是數字可以不用跟單位和引號。
$(this).css("color","red");
3、引數可以是物件形式,方便設定多組樣式。屬性名和屬性值用冒號隔開,屬性可以不用加引號
$(this).css({"color":"white","font-size":"20px"});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery操作樣式之css方法</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
$(function () {
// 1.引數只寫屬性名,返回的是屬性名
console.log($("div").css("width")); //200px
// 2.將width的屬性值改為300px
// $("div").css("width","300px");
// $("div").css("width",300);
// 屬性名一定要加引號
// $("div").css(height,"300px");
$("div").css({
width: 400,
height: 400,
backgroundColor: "red"
// 如果是複合屬性則必須採取駝峰命名法,如果值不是數字,則需要加引號
})
})
</script>
</body>
</html>
5.2、設定類樣式方法
作用等同於以前的classList,可以操作類樣式,注意操作類裡面的引數不要加點。
1.新增類
$("div").addClass("current");
2.移除類
$("div").removeClass("current");
3.切換類
$("div").toggleClass("current");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery操作樣式之類操作</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 0.5s;
}
.current{
background-color: red;
transform: rotate(360deg);
}
</style>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<div ></div>
<script>
$(function () {
// 1.新增類 addClass()
// $("div").click(function () {
// $(this).addClass("current");
// })
// 2.刪除類 removeClass()
// $("div").click(function () {
// $(this).removeClass("current");
// })
// 3.切換類 toggleClass()
$("div").click(function () {
$(this).toggleClass("current");
})
})
</script>
</body>
</html>
5.3、類操作與className區別
原生JS中className會覆蓋元素原先裡面的類名。
jQuery裡面類操作只是對指定類進行操作,不影響原先的類名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery類操作不形象原先類</title>
<style>
.one{
width: 200px;
height: 200px;
background-color: pink;
transition: all 0.5s;
}
.two{
transform: rotate(720deg);
}
</style>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="one"></div>
<script>
// 原生js中className會覆蓋元素原先裡面的類名
// var one = document.querySelector('.one');
// one.className('two');
// 這個addClass相當於追加類名,不影響以前的類名
$(".one").addClass("two");
// $(".one").removeClass("two");
</script>
</body>
</html>
六、jQuery效果
jQuery給我們封裝了很多了很多動畫效果,最為常見的如下:
6.1、顯示效果
1、顯示語法規範
show([speed],[easing],[fn])
2、顯示引數
(1)引數都可以省略,無動畫直接顯示
(2)speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值(如:1000)。
(3)easing:(Optional)用來指定切換效果,預設是"swing",可用引數"linear"。
(4)fn:回撥函式,在動畫完成時執行的函式,每個元素執行一次。
6.2、隱藏效果
1、隱藏語法規範
hide([speed],[easing],[fn]);
2、隱藏引數
(1)引數都可以省略,無動畫直接顯示
(2)speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值(如:1000)。
(3)easing:(Optional)用來指定切換效果,預設是"swing",可用引數"linear"。
(4)fn:回撥函式,在動畫完成時執行的函式,每個元素執行一次。
6.3、切換效果
1、切換語法規範
toggle([speed],[easing],[fn]);
2、切換引數
(1)引數都可以省略,無動畫直接顯示
(2)speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值(如:1000)。
(3)easing:(Optional)用來指定切換效果,預設是"swing",可用引數"linear"。
(4)fn:回撥函式,在動畫完成時執行的函式,每個元素執行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery效果之顯示與隱藏</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button>顯示</button>
<button>隱藏</button>
<button>切換</button>
<div></div>
<script>
$(function () {
$("button").eq(0).click(function () {
$("div").show(1000,function () {
alert(1);
});
})
$("button").eq(1).click(function () {
$("div").hide(1000,function () {
alert(1);
});
})
$("button").eq(2).click(function () {
$("div").toggle(1000,function () {
alert(1);
});
})
})
</script>
</body>
</html>
6.4、下滑效果
1、下滑效果語法規範
slideDown([speed],[easing],[fn]);
2、下滑效果引數
(1)引數都可以省略,無動畫直接顯示
(2)speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值(如:1000)。
(3)easing:(Optional)用來指定切換效果,預設是"swing",可用引數"linear"。
(4)fn:回撥函式,在動畫完成時執行的函式,每個元素執行一次。
6.5、上滑效果
1、上滑效果語法規範
slideUp([speed],[easing],[fn]);
2、上滑效果引數
(1)引數都可以省略,無動畫直接顯示
(2)speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值(如:1000)。
(3)easing:(Optional)用來指定切換效果,預設是"swing",可用引數"linear"。
(4)fn:回撥函式,在動畫完成時執行的函式,每個元素執行一次。
6.6、切換效果
1、切換效果語法規範
slideToggle([speed],[easing],[fn]);
2、切換效果引數
(1)引數都可以省略,無動畫直接顯示
(2)speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值(如:1000)。
(3)easing:(Optional)用來指定切換效果,預設是"swing",可用引數"linear"。
(4)fn:回撥函式,在動畫完成時執行的函式,每個元素執行一次。
6.7、事件切換
hover([over,]out)
(1)over:滑鼠移到元素上要觸發的函式(相當於mouseenter)
(2)out:滑鼠移出元素要觸發的函式(相當於mouseleave)
6.8、動畫佇列及其停止排隊方法
1、動畫或效果佇列
動畫或者效果一旦觸發就會執行,如果多次觸發,就造成多個動畫或者效果排隊執行。
2、停止排隊
stop()
(1)stop()方法用於停止動畫或效果。
(2)注意:stop()寫到動畫或者效果的前面,相當於停止結束上一次的動畫。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>新浪下拉選單</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
.nav{
margin: 100px;
}
.nav>li{
float: left;
height: 30px;
width: 120px;
/* margin: 0 auto; */
margin-right: 10px;
text-align: center;
line-height: 30px;
background-color: pink;
}
.nav ul{
display: none;
border-left:1px solid orange;
border-right:1px solid orange;
}
.nav ul > li{
border-bottom:1px solid orange;
}
</style>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<ul class="nav">
<li >
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">評論</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">部落格</a>
<ul>
<li>
<a href="">部落格評論</a>
</li>
<li>
<a href="">未讀提醒</a>
</li>
</ul>
</li>
<li>
<a href="#">郵箱</a>
<ul>
<li>
<a href="">免費郵箱</a>
</li>
<li>
<a href="">VIP郵箱</a>
</li>
<li>
<a href="">企業郵箱</a>
</li>
<li>
<a href="">新浪郵箱客戶端</a>
</li>
</ul>
</li>
</ul>
<script>
$(function () {
// $(".nav>li").mouseover(function () {
// 滑鼠經過
// $(this).children("ul").slideDown(200);
// });
// $(".nav>li").mouseout(function () {
// 滑鼠離開
// $(this).children("ul").slideUp(200);
// });
// 1.事件切換 hover就是滑鼠經過和離開的複合寫法
// $(".nav>li").hover(function () {
// $(this).children("ul").slideDown(200);
// },function () {
// $(this).children("ul").slideUp(200);
// });
// 2.事件切換 hover如果只寫一個函式,那麼滑鼠經過和滑鼠離開都會觸發這個函式
$(".nav>li").hover(function () {
$(this).children("ul").stop().slideToggle();
})
})
</script>
</body>
</html>
6.9、淡入效果
1、淡入效果語法規範
fadeIn([speed],[easing],[fn]);
2、淡入效果引數
(1)引數都可以省略,無動畫直接顯示
(2)speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值(如:1000)。
(3)easing:(Optional)用來指定切換效果,預設是"swing",可用引數"linear"。
(4)fn:回撥函式,在動畫完成時執行的函式,每個元素執行一次。
6.10、淡出效果
1、淡出效果語法規範
fadeOut([speed],[easing],[fn]);
2、淡出效果引數
(1)引數都可以省略,無動畫直接顯示
(2)speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值(如:1000)。
(3)easing:(Optional)用來指定切換效果,預設是"swing",可用引數"linear"。
(4)fn:回撥函式,在動畫完成時執行的函式,每個元素執行一次。
6.11、淡入淡出切換效果
1、淡入淡出切換效果語法規範
fadeToggle([speed],[easing],[fn]);
2、淡入淡出切換效果引數
(1)引數都可以省略,無動畫直接顯示
(2)speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值(如:1000)。
(3)easing:(Optional)用來指定切換效果,預設是"swing",可用引數"linear"。
(4)fn:回撥函式,在動畫完成時執行的函式,每個元素執行一次。
6.12、淡入淡出效果
1、淡入淡出效果語法規範
fadeTo([speed],opacity,[easing],[fn]);
2、淡入淡出效果引數
(1)opacity透明度必須寫,取值0~1之間。
(2)speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值(如:1000)。必須寫
(3)easing:(Optional)用來指定切換效果,預設是"swing",可用引數"linear"。
(4)fn:回撥函式,在動畫完成時執行的函式,每個元素執行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery效果之淡入淡出</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切換</button>
<button>修改透明度</button>
<div></div>
<script>
$(function () {
$("button").eq(0).click(function () {
// 淡入 fadeIn()
$("div").fadeIn(1000);
})
$("button").eq(1).click(function () {
// 淡出 fadeOut()
$("div").fadeOut(1000);
})
$("button").eq(2).click(function () {
// 淡入淡出切換 fadeToggle()
$("div").fadeToggle(1000);
})
$("button").eq(2).click(function () {
// 修改透明度 fadeTo()
$("div").fadeTo(1000,0.5);
})
})
</script>
</body>
</html>
6.13、自定義動畫animate
1、語法
animate(params,[speed],[easing],[fn]);
2、引數
(1)params:想要更改的樣式屬性,以物件形式傳遞,必須寫,屬性名可以不用帶引號,如果是複合屬性則需要採取駝峰命名法borderLeft。其餘引數都可以省略。
(2)speed:三種預定速度之一的字串("slow","normal",or "fast")或表示動畫時長的毫秒數值(如:1000)。
(3)easing:(Optional)用來指定切換效果,預設是"swing",可用引數"linear"。
(4)fn:回撥函式,在動畫完成時執行的函式,每個元素執行一次。
七、jQuery屬性操作
7.1、設定或獲取元素固有屬性值prop()
所謂元素固有屬性就是元素本身自帶的屬性,比如元素裡面的href,比如元素裡面的type.
1.獲取屬性語法
prop('屬性')
2.設定屬性語法
prop("屬性","屬性值")
7.2、設定或獲取元素自定義屬性值attr()
使用者自己給元素新增的屬性,我們稱為自定義屬性,比如給div新增index = "1"
1.獲取屬性語法
attr("屬性") // 類似原生getAttribute()
2.設定屬性語法
attr("屬性","屬性值") // 類似原生setAttribute()
改方法也可以獲取H5自定義屬性
7.3、資料快取 data()
data()方法可以在指定的元素上存取資料,並不會修改DOM元素結構,一旦頁面重新整理,之前存放的資料都將被移除。
1.附加資料語法
data("name","value") // 向被選元素附加資料
2.獲取資料語法
data("name") // 向被選元素獲取資料
同時,還可以讀取HTML5自定義屬性data-index,得到的是數字型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全選反選</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.wrap table{
width: 200px;
margin: 100px auto;
border:1px solid #000;
border-spacing: 0;
}
thead th{
text-align: center;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
tbody td{
text-align: center;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cdAll">
</th>
<th>商品</th>
<th>價錢</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox">
</td>
<td>蘋果</td>
<td>3.5元/斤</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>梨</td>
<td>2.5元/斤</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>榴蓮</td>
<td>35元/斤</td>
</tr>
</tbody>
</table>
</div>
<script>
$(function () {
// 通過全選判斷單選框狀態,全選框狀態發生改變
$("#j_cdAll").change(function () {
// 在控制檯列印全選框狀態
// console.log($(this).prop("checked"));
// 將全選框狀態賦值給單選框
$("#j_tb input").prop("checked",$(this).prop("checked"))
})
// 通過單選框狀態判斷全選框狀態,單選框全選中,全選框也選中
$("#j_tb input").change(function () {
// 如果單選框的長度等於單選框全部長度
if($("#j_tb input:checked").length === $("#j_tb input").length){
// 全選框按鈕就選中
$("#j_cdAll").prop("checked",true);
}else{
// 否則全選框按鈕不選中
$("#j_cdAll").prop("checked",false);
}
})
})
</script>
</body>
</html>
八、jQuery內容文字值
主要針對元素的內容還有表單的值操作。
8.1、普通元素內容html() (相當於原生inner HTML)
html() //獲取元素的內容
html("內容") //設定元素的內容
8.2、普通元素文字內容text() (相當於原生inner Text)
text() // 獲取元素的文字內容
text("文字內容") //設定元素的文字內容
8.3、表單的值val() (相當於原生value)
val() //獲取元素表單的值
val("內容") // 設定元素的表單的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery內容文字值</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<div>
<span>我是內容</span>
</div>
<input type="text" value="請輸入內容">
<script>
// 獲取設定元素內容 html()
console.log($("div").html());
console.log($("div").html("123"));
// 獲取設定元素文字內容 text()
console.log($("div").text());
console.log($("div").text("123"));
// 獲取設定元素表單的值 val()
console.log($("input").val());
console.log($("input").val("456"));
</script>
</body>
</html>
8.4、parents('選擇器')可以返回指定祖先元素
8.5、通過toFixed(2)保留2位小數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>商品數量加減</title>
<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
.form{
position: relative;
width: 100px;
height: 20px;
margin: 100px auto;
border: 1px solid #000;
}
.decrement{
position: absolute;
top: 0;
left: 0px;
width: 20px;
text-align: center;
/* border-right: 1px solid #000; */
}
.itxt{
position: absolute;
top: 0;
left: 25px;
width: 50px;
text-align: center;
}
.increment{
position: absolute;
top: 0;
left: 75px;
width: 30px;
text-align: center;
/* border-left: 1px solid #000; */
}
</style>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<!-- 商品單價 -->
<div class="p-price">¥12.60</div>
<!-- 商品數量加減 -->
<div class="form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
<!-- 商品總價 -->
<div class="p-sum">¥12.60</div>
<script>
$(function () {
// 增加數量
$(".increment").click(function () {
// 獲取商品的數量
var n = $(this).siblings(".itxt").val();
// 點選加號商品數量也增加
n++;
// 將增加後數量賦值給數量值
$(this).siblings(".itxt").val(n);
// 獲取商品的單價
var p = $(this).parent().siblings(".p-price").html();
// 將獲取的單價¥12.60剪下為商品價格12.60
p = p.substr(1);
console.log(p);
// 將獲取到的單價和數量相乘賦值給商品總價,並保留兩位小數
$(this).parent().siblings(".p-sum").html("¥" + (p * n ).toFixed(2));
})
// 減少數量
$(".decrement").click(function () {
var n = $(this).siblings(".itxt").val();
if(n==1){
return false;
}
n--;
$(this).siblings(".itxt").val(n);
var p = $(this).parent().siblings(".p-price").html();
p = p.substr(1);
console.log(p);
$(this).parent().siblings(".p-sum").html("¥" + (p * n ).toFixed(2));
})
// 使用者直接修改文字框的值
$(".itxt").change(function () {
// 先得到使用者輸入文字框的值
var n = $(this).val();
// 當前商品的單價
var p = $(this).parent().siblings(".p-price").html();
// 將獲取的單價¥12.60剪下為商品價格12.60
p = p.substr(1);
// 將獲取到的單價和數量相乘賦值給商品總價,並保留兩位小數
$(this).parent().siblings(".p-sum").html("¥" + (p * n ).toFixed(2));
})
})
</script>
</body>
</html>
九、jQuery元素操作
主要是遍歷、建立、新增、刪除元素操作。
9.1、遍歷元素
jQuery隱式迭代是對同一類元素做了同樣的操作,如果想要同一類元素做不同操作,就需要用到遍歷。
語法1:
$("div").each(function(index,domEle) {xxx;})
1.each()方法遍歷匹配的每一個元素,主要用DOM處理,each每一個
2.裡面的回撥函式有2個引數:index是每個元素的索引號,demEle是每個DOM元素物件,不是jquery物件
3.所以要想使用jquery()方法,需要給這個dom元素轉換為jquery物件 $(domEle)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery遍歷元素</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function () {
// 針對於同一元素做不同操作,需要用到遍歷元素(類似於for 但相比較for更強大)
var arr = ["red","pink","blue"];
var sum = 0;
// 利用each()方法遍歷元素
$("div").each(function (i,domEle) {
// 回撥函式第一個引數一定是索引號,可以自己指定索引號名稱
console.log(i);
// 回撥函式第二個引數一定是dom元素物件,也是自己命名
console.log(domEle);
// domEle.css("color");dom物件沒有css方法
$(domEle).css("color",arr[i]);
sum += parseInt($(domEle).text());
})
console.log(sum);
})
</script>
</body>
</html>
執行結果:
語法2:
$.each(object,function (index,element) {xxx; })
1.$.each()方法可用於遍歷任何物件。主要用於資料處理,比如陣列,物件
2.裡面的函式有2個引數:index是每個元素的索引號;element遍歷內容
$.each({
name:"andy",
age:18
},function(i,ele) {
console.log(i);// 輸出的是 name age屬性名
console.log(ele);// 輸出的是 name age屬性值
})
9.2、新增元素
1.內部新增
(1)element.append("內容")
把內容放入匹配元素內部最後面,類似原生appendChild。
(2)element.prepend("內容")
把內容放入匹配元素內部最前面
2、外部新增
(1)element.after("內容") // 把內容放入目標元素後面
(2)element.before("內容") // 把內容放入目標元素前面
(1)內部新增元素:生成之後,它們是父子關係。
(2)外部新增元素:生成之後,它們是兄弟關係。
9.3、刪除元素
element.remove() // 刪除匹配的元素(本身)
element.empty() // 刪除匹配的元素集合中所有的子節點
element.html("") // 清空匹配的元素內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>建立新增刪除元素</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<ul>
<li>1</li>
</ul>
<div class="test">我是第一個</div>
<script>
$(function () {
// 1.建立元素
var li = $("<li>2</li>");
// 2.新增元素
// (1) 內部新增
// $("ul").append(li); 內部新增並且放到內容的最後面
$("ul").prepend(li); // 內部新增並且放到內容的最前面
// (2) 外部新增
var div = $("<div>我是後媽生的</div>");
// $(".test").after(div);
$(".test").before(div);
// 3.刪除元素
$("ul").remove(); // 可以刪除匹配的元素
$("ul").empty(); // 可以刪除匹配的元素裡面的子節點 孩子
$("ul").html(""); // 可以刪除匹配的元素裡面的子節點 孩子
})
</script>
</body>
</html>
十、jQuery事件
1、jQuery事件註冊
1.1、單個事件註冊
語法:
element.事件(function () {})
$("div").click(function () { 事件處理程式})
其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等
2、jQuery事件處理
2.1、事件處理on()繫結事件
on()方法在匹配元素上繫結一個或多個事件的事件處理函式。
語法:
element.on(events,[selector],fn)
1.events:一個或多個用空格分隔的事件型別,如"click"或"keydown"。
2.selector:元素的子元素選擇器。
3.fn:回撥函式即繫結在元素身上的偵聽函式
on()方法優勢1:
可以繫結多個事件,多個處理事件處理程式。
$("div").on({
mouseover:function(){},
mouseout:function(){},
click:function(){}
});
$("div").on("mouseover mouseout",function () {
$(this).toggleClass("current");
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件處理</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: blue;
}
.current{
background-color: blueviolet;
}
</style>
</head>
<body>
<div></div>
<script>
$(function () {
// 1.單個事件註冊
// $("div").click(function () {
// $(this).css("background","red");
// })
// $("div").mouseenter(function () {
// $(this).css("background","skyblue");
// })
// 2.事件處理on
// $("div").on({
// mouseenter : function () {
// $(this).css("background","red");
// },
// click : function () {
// $(this).css("background","skyblue");
// },
// mouseleave : function () {
// $(this).css("background","orange");
// }
// });
// 3.通過滑鼠經過和滑鼠離開自動切換
$("div").on("mouseenter mouseleave" , function () {
$(this).toggleClass("current");
})
})
</script>
</body>
</html>
on()方法優勢2:
可以事件委派操作,事件委派的定義就是,把原來加給子元素身上的事件繫結在父元素身上,就是把事件委派給父元素。
$('ul').on('click','li',function () {
alert('hello world!');
});
在此之前有bind(),live(),delegate()等方法來處理事件繫結或者事件委派,最新版本的請用on代替他們。
on()方法優勢3:
動態建立的元素,click()沒有辦法繫結事件,on()可以給動態生成的元素繫結事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件處理</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: blue;
}
.current{
background-color: blueviolet;
}
</style>
</head>
<body>
<div></div>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<ol></ol>
<script>
$(function () {
// 1.事件處理on
// (1) on可以繫結1個或者多個事件處理程式
$("div").on("mouseenter mouseleave" , function () {
$(this).toggleClass("current");
});
// (2) on可以實現事件委託(委派)
$("ul").on("click","li",function () {
alert(1);
});
// click是繫結在ul身上的,但是觸發的物件是ul裡面的li
// (3) on可以給未來動態建立的元素繫結事件
// $("ol li").click(function() {
// alert(2); // 無法做點選事件
// })
$("ol").on("click","li",function () {
alert(2);
})
var li = $("<li>我是後來建立的</li>");
$("ol").append(li);
})
</script>
</body>
</html>
2.2、事件處理off()解綁事件
off()方法可以移除通過on()方法新增的事件處理程式。
$("p").off() // 解綁p元素所有事件處理程式
$("p").off("click") // 解綁p元素上面的點選事件,後面的off是偵聽函式名
$("ul").off("click","li"); // 解綁事件委託
如果有的事件只想觸發一次,可以使用one()來繫結事件。
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件解綁</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script>
$(function () {
$("div").on({
click:function () {
console.log('我被點選了');
},
mouseover:function() {
console.log('我被滑鼠經過了');
}
});
$("ul").on("click","li",function () {
alert(1);
});
// 1.事件解綁off()
$("div").off(); //這個是解除了div上的所有事件
$("div").off("click"); // 這個是解除了div上的點選事件
$("ul").off("click","li"); // 這個是解綁了ul下所有li的點選事件
// 2.one() 只能觸發事件一次
$("p").one("click",function () {
alert(2);
});
})
</script>
</head>
<body>
<div></div>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<p>你好</p>
</body>
</html>
2.3、自動觸發事件trigger()
有些事件希望自動觸發,比如輪播圖自動播放功能跟點選右側按鈕一致,可以利用定時器自動觸發右側按鈕點選事件,不必滑鼠點選觸發。
1.element.click() // 第一種簡寫形式
2.element.trigger("type") //第二種自動觸發模式
// 案例:
$("p").on("click",function () {
alert("hi");
});
$("p").trigger("click"); // 此時自動觸發點選事件,不需要滑鼠點選
3.element.triggerHandler(type) // 第三種自動觸發模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自動觸發事件</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script>
$(function () {
$("div").click(function () {
alert(1);
});
// 自動觸發事件
// 1.元素.事件()
// $("div").click(); 會觸發元素的預設行為
// 2.元素.trigger("事件")
$("div").trigger("click"); // 會觸發元素的預設行為
$("input").trigger("focus");
// 3.元素.triggerHandler("事件") 就是不會觸發元素的預設行為
$("div").triggerHandler("click");
$("input").on("focus",function () {
$(this).val("你好嗎?");
});
})
</script>
</head>
<body>
<div></div>
<input type="text">
</body>
</html>
3、jQuery事件物件
事件被觸發,就會有事件物件的產生。
element.on(events,[selector],function(event) {})
阻止預設行為:event.preventDefault() 或者 return false
阻止冒泡:event.stopPropagation()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件物件</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script>
$(function () {
$(document).on("click",function () {
console.log("點選了document");
})
$("div").on("click",function () {
console.log("點選了div");
event.stopPropagation();
})
})
</script>
</head>
<body>
<div></div>
</body>
</html>
十一、jQuery物件拷貝
如果想要把某個物件拷貝(合併)給另外一個物件使用,此時可以使用$.extend()方法。
語法:
$.extend([deep],target,object1,[objectN])
1.deep:如果設為true為深拷貝,預設為false淺拷貝
2.target:要拷貝的目標物件
3.object1:待拷貝到第一個物件的物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery物件拷貝</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var targetObj = {
id: 2,
msg: {
sex: '男'
}
};
var obj = {
id: 1,
name: "andy",
msg: {
age:18
}
}
// $.extend(targetObj,obj);
// console.log(targetObj); 會覆蓋targetObj,裡面原來的資料
// // 1.淺拷貝把原來物件裡面的複雜資料型別地址拷貝給目標物件
// targetObj.msg.age = 20;
// console.log(targetObj);
// console.log(obj); obj裡面的msg()方法中的age也變為20
// 2.深拷貝把裡面的資料完全複製一份給目標物件,如果裡面有不衝突的屬性,會合並在一起
$.extend(true,targetObj,obj);
targetObj.msg.age = 20;
console.log(targetObj);
console.log(obj);
})
</script>
</head>
<body>
</body>
</html>
十二、多庫共存
問題概述
jQuery使用$作為識別符號,隨著jQuery的流行,其它js庫也會用$作為識別符號,這樣一起作用會引起衝突。
客觀需求
需要一個解決方案,讓jQuery和其他的js庫不存在衝突,可以同時存在,這就叫做多庫共存。
jQuery解決方案:
1.把裡面的$符號統一改為jQuery,比如jQuery("div")
2.jQuery變數規定新的名稱:$.noConflict() var xx = $.noConflict();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多庫共存</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script>
$(function () {
function $(ele){
return document.querySelector(ele);
}
console.log($("div"));
// 1.如果$符號衝突,我們就是用jquery
jQuery.each();
// 2.讓jquery釋放對$控制權讓使用者自己決定
var s = jQuery.noConflict();
console.log(s("span"));
s.each();
})
</script>
</head>
<body>
<div></div>
<span></span>
</body>
</html>
執行效果:
十三、jQuery外掛
jQuery功能比較有限,想要更復雜的特效效果,可以藉助於jQuery外掛完成。
注意:這些外掛也是依賴與jQuery來完成的,所以必須要先引入jQuery檔案,因此也稱為jQuery外掛。
jQuery外掛常用的網站:
1.jQuery外掛庫:http://www.jq22.com/
2.jQuery之家:http://www.htmleaf.com/
jQuery外掛使用步驟:
1.引入相關檔案。(jQuery檔案和外掛檔案)
2.複製相關html、css、js(呼叫外掛)
jQuery外掛演示
1、瀑布流
2、圖片懶載入(圖片使用延遲載入在可提高網頁下載速度,他也能幫助減輕服務區負載)
當我們頁面滑動到可視區域,在顯示圖片
我們使用jquery外掛庫EasyLazyload。注意,此時的js引入檔案和js呼叫必須寫到DOM元素(圖片)最後面。
3、全屏滾動(fullpage.js)
gitHub:https://github.com/alcarotrigo/fullPage.js
中文翻譯網站:http://www.dowebok.com/demo/2014/77/
十四、jQuery尺寸、位置
1、jQuery尺寸
(1)以上引數為空,則是獲取相應值,返回的是數字型。
(2)如果引數是數字,則是修改相應值。
(3)引數可以不必寫單位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery位置</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
padding: 10px;
border: 1px solid #000;
margin: 2px;
}
</style>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<div></div>
<script>
$(function () {
// 1.width() height() 獲取設定元素 width和height大小
console.log($("div").width());
// $("div").width(300);
// 2.innerWidth() innerHeight() 獲取設定元素width和height + padding 大小
console.log($("div").innerWidth());
// 3.outerWidth() outHeight() 獲取設定元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4.outerWidth(true) outHeight(true) 獲取設定元素 width和height + padding + border + margin 大小
console.log($("div").outerWidth(true));
})
</script>
</body>
</html>