一、影片
1.簡單影片
| $元素.show() $元素.hide() $元素.toggle() | 顯示隱藏 |
| $元素.slideUp() $元素.slideDown() $元素.slideToggle() | 上滑下滑 |
| $元素.fadeIn() $元素.fadeOut() $元素.fadeToggle() | 淡入淡出 |
舉例：
<body>
<h1>jQuery影片函式——顯示隱藏影片</h1>
<button id="btn1">顯示/隱藏div</button>
<div id="target">
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></p>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
//點按鈕，執行簡單影片效果
$("#btn1").click(function () {
$("#target").fadeToggle();
})
</script>
</body>舉例：顯示隱藏部分品牌；
<body>
<ul id="list">
<li>0尼康(234)</li>
<li>1佳能(22)</li>
<li>2索尼(932)</li>
<li>3賓得(11)</li>
<li>4愛國者(3234)</li>
<li>5歐巴(32)</li>
<li>6海鷗(2334)</li>
<li>7卡西歐(334)</li>
<li>8三星(834)</li>
<li>9松下(234)</li>
<li>10其它品牌(2343)</li>
</ul>
<button data-toggle="brandlist">收起</button>
<script src="js/jquery-1.11.3.js"></script>
<script>
//DOM 4步
//1. 查找觸發事件的元素
// 點擊按鈕觸發事件
$("button")
//2. 系結事件處理函式
.click(function () {
//3. 查找要修改的元素
$("li:gt(4):not(:last-child)").toggle()
//4. 修改元素
var $this = $(this)
if ($this.html() === "收起") {
$this.html("更多")
} else {
$this.html("收起")
}
})
</script>
</body>2.萬能影片
能對多種css屬性應用影片效果，但只支持單個數值的css屬性，不支持顏色過渡和css3變換，
//啟動影片
$元素.animate({
css屬性名: 目標值
},持續時間ms)
//停止影片
$元素.stop()
舉例：
<body>
<h1>animate</h1>
<button id="btn1">啟動影片</button>
<div id="d1">abcd</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
//點按鈕，對任意一個css屬性，應用影片效果
$("#btn1").click(function () {
$("#d1").animate({
top: 500,
left: 300,
width: 500,
height: 300,
borderRadius: 150
}, 2000)
})
</script>
</body>3.排隊和并發
（1）排隊：多個css屬性先后依次變化；同一個元素，先后呼叫多個animate時，多個animate中的css屬性會排隊變化，
（2）并發：多個css屬性同時變化，放在一個animate中的多個css屬性默認同時變化，
4.選擇器
:animated //專門匹配正在播放animate影片5.停止影片
$元素.stop() //默認停止當前一個animate影片，影片佇列中后續animate繼續執行
$元素.stop(true) //既停止當前animate，又清空后續影片佇列
6.影片播放后，自動執行
animate()還有第三個實參值——回呼函式，凡是放在animate()中第三回呼函式引數中的代碼，只能在影片結束后自動執行，格式如下：
$元素.animate(
{ css屬性: 目標值 },
影片持續時間,
function(){ ... } //第三回呼函式
);
舉例：點星星，播放影片；
<body>
<img id="s1" src="imgs/star.png"><br />
<img id="s2" src="imgs/star.png"><br />
<img id="s3" src="imgs/star.png"><br />
<img id="s4" src="imgs/star.png"><br />
<script src="js/jquery-1.11.3.js"></script>
<script>
//s1在螢屏左上角的小星星， 點擊后從左移動到螢屏右邊
$("#s1").click(function () {
var $this = $(this)
// 如果影片正在執行，則讓他停止
if ($this.is(":animated")) {
$this.stop()
// 否則執行
} else {
$(this).animate({
left: 400
})
}
});
//s2在螢屏左上角的小星星，點擊后從左移動到螢屏右邊，再移動到下邊——走直角
$("#s2").click(function () {
var $this = $(this)
if ($this.is(":animated")) {
$this.stop(true);
} else {
$(this).animate({
left: 400
}).animate({
top: 400
})
}
})
//s3在螢屏左上角的小星星，點擊后從左上角移動到螢屏右下邊，走斜線
$("#s3").click(function () {
$(this).animate({
left: 400,
top: 400
})
})
//s4點擊小星星，變大、變淡.... 直至消失
$("#s4").click(function () {
alert("123456");
$(this).animate({
width: 175,
opacity: 0
}, 5000,
function () {
alert(`我是第三回呼函式中的代碼，最后執行`);
}
)
})
</script>
</body>二、類陣列物件操作
1.遍歷
//js陣列
arr.forEach(function(當前元素, 當前下標, 當前陣列){ })
//jQuery
$jQuery查找結果.each(function(當前下標, 當前DOM元素){ })
舉例：遍歷找到的每個元素，并執行相關操作；
<body>
<ul id="list">
<li>98</li>
<li>85</li>
<li>33</li>
<li>99</li>
<li>52</li>
</ul>
<script src="js/jquery-1.11.3.js"></script>
<script>
//請給每個不足60分的成績+10分，并將超過90分的成績用綠色背景標識出來
$("ul>li").each(function (i, li) {
var $li = $(li);
// 獲取當前元素的內容
var n = parseInt($li.html());
if (n < 60) {
$li.html(n + 10)
} else if (n >= 90) {
$li.css("background-color", "green")
}
})
</script>
</body>2.查找
//js陣列
var i=arr.indexOf(要找的元素值);
//在陣列arr中查找"要找的元素值"出現的下標位置i，如果沒找到，回傳-1
//jQuery
var i=$jq查找結果.index(要找的DOM元素)舉例：五星評價；
<body>
<h3>請打分</h3>
<ul class="score">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script src="js/jquery-1.11.3.js"></script>
<script>
//獲得當前單擊的li在所有li中的位置i,i及其執行的都變為紅色，i之后的都變為白色
//DOM 4步
//1. 查找觸發事件的元素
$("ul")
//2. 系結事件處理函式
.click(function (e) {
//e.target代替this
var $tar = $(e.target)
//只有點在li上才能觸發事件
if ($tar.is("li")) {
var i = $("ul>li").index($tar);
$(`ul>li:lt(${i+1})`)
.css("background-color", "yellow");
//讓>i位置的所有li背景變為白色
$(`ul>li:gt(${i})`)
.css("background-color", "#fff");
}
})
//3. 查找要修改的元素
//4. 修改元素
</script>
</body>三、添加自定義函式
如果經常使用的一個功能，jquery中沒有提供，就可以自定義函式加入到jquery，格式：
//向jquery原型物件中添加一個自定義函式
jQuery.prototype.自定義函式=function(){ }
//使用自定義函式
$查找結果.自定義函式()
舉例：封裝自定義函式，對找到的所有元素內容求和；
<body>
<ul>
<li>85</li>
<li>91</li>
<li>73</li>
<li>59</li>
</ul>
<script src="js/jquery-1.11.3.js"></script>
<script>
//假設在專案中經常需要對找到的所有元素求和
// 自定義函式
jQuery.prototype.sum = function () {
// 定義初始化值
var result = 0;
// 遍歷陣列中的元素值
for (var i = 0; i < this.length; i++) {
// 將當前元素累加到初始化值上
result += parseInt(this[i].innerHTML);
}
return result;
}
// 呼叫自定義函式
console.log($("ul>li").sum());
</script>
</body>四、封裝自定義插件
自定義插件是頁面中一塊可反復使用的獨立的功能區域，只要頁面中一塊獨立的功能區域，可能被反復使用時，都要封裝為插件，然后再反復使用插件，
jQuery官方插件庫jqueryui，在jQueryui官網下載即可；下載后引入插件庫的檔案：
<link rel="stylesheet" href="css/jquery-ui.css"> //1
<script src="js/jquery-1.11.3.js"> //2
<script src="js/jquery-ui.js"> //3
//注意2、3順序不可顛倒
插件的使用：
a. 按照插件要求，自行撰寫HTML內容和結構，不要加任何class；
b. 用$("選擇器")查找插件的父元素，對插件父元素呼叫jquery ui提供的專門的插件函式，
舉例：用jquery ui快速生成手風琴；
<head>
<title> new document </title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery-ui.js"></script>
</head>
<body>
<h1>jQueryUI：Widgets —— Accordion</h1>
<div id="my">
<div>《西游記》簡介</div>
<div>一個和尚和四個動物的故事</div>
<div>《水滸傳》簡介</div>
<div>105個男人和三個女人的故事</div>
<div>《紅樓夢》簡介</div>
<div>一個男人和一群女人的故事</div>
</div>
<script>
// 呼叫accordion
$("#my").accordion();
</script>
</body>除了使用jQuery的官方插件庫，我們也可以自定義插件：
a.將原頁面中插件相關的css代碼提取到一個獨立的css檔案中保存；
b.在獨立的js中，向jQuery的原型物件中添加一個自定義的插件函式；
jQuery.prototype.自定義插件函式=function(){ }自定義之后的呼叫與jQuery ui是一致的，
舉例如下：
補充：this 7種
判斷this，一定不要看定義在哪兒，只看在哪里如何呼叫！
（1）obj.fun() fun中的this指 .前的obj物件（誰呼叫指誰）；
（2）new Fun() Fun中的this指new創建的新物件；
（3）fun() 或 (function(){ ... })() 或 回呼函式 thisz默認指windozw；
（4）原型物件(prototype)中的this指將來呼叫這個共有函式的.前的某個子物件（誰呼叫指誰）；
（5）訪問器屬性中的this指代訪問器屬性所在的當前物件；
（6）DOM和jq中事件處理函式中的this指正在觸發事件的當前DOM元素物件；
（7）在jQuery自定義函式中：
jQuery.prototype.共有方法=function(){
//this指將來呼叫這個共有方法的.前的$(...)jq物件，
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/306469.html
標籤：其他
上一篇：selenium--面試官問元素定位不到怎么辦？作業中還在為元素定位不到而煩惱？看這一文就夠了--內附決議跟代碼解決案例！讓面試官對你刮目相看