<!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.min.js"></script> <style> .box{ width: 100px; height: 100px; background: pink; }
<!-- 定義影片 -->
@keyframes 影片名稱{
0%{
transform: scale(0);
}
50%{
transform:scale(1.5)；
}
100%{
transform:scale(0);
}
}
<!-- .v-enter-active{ transform-origin: left center; animation: 影片名稱 影片持續時長; } -->
<!-- .v-leave-active{ transform-origin: left center; animation: 影片名稱 影片持續時長 reverse; ) //reverse表示反向執行 -->
<!-- .fade-enter-active{ 如果不定義name，影片的類名就是默認的v-enter-active -->
.enter { <!-- transition重新定義了enter-active的類名為enter 那么就可以用enter代替.fade-enter-active -->
transform-origin: left center;
animation: 影片名稱 影片持續時長;
}.fade-enter-active{
transform-origin: left center;
animation: 影片名稱 影片持續時長;
}
</style></head><body> <div class="box"> </div> <ul> <li>大比分輸給</li> <li>那我如果不我</li> <li>那我</li> <li>引號6額</li> <li>了就人工</li> </ul>
<!-- 影片 -->
<transition name="fade" enter-active-color: #ff00ff;">enter" :duration="enter:1000, leave:5000"> <!-- 這里的自定義類名，直接把類名加進來就行，所以可以在這里使用animate.css里面的影片效果，引入animate.css,將影片對應的類名寫進來就好 :duration="1000"表示自定義影片的整體持續時長為1s -->
<div v-show="show">hello</div>
<!-- 或者v-if也行 -->
</transiton> <script> // jQuery是將原生js里常用的一些功能進行封裝 // $(function () { });是等待頁面的dom元素全部加載完畢，再執行代碼 是jquery的入口函式 $(function () { $('.box').hide(); // 用原生js獲取到的物件就是dom物件， 【 dom物件只能使用原生js的屬性和方法】 var mydiv = document.querySelector('.box'); // document.querySelector(css selectors)回傳檔案中匹配的第一個元素 console.dir(mydiv); // 用jquery方式獲取到的物件就是jquery物件， 【 jquery物件只能使用jquery方法】 jquery物件是以陣列形式存盤的 $('.box'); console.dir($('.box')); // dom物件和jquery物件相互轉換/////////////////////////////// var myvideo = document.querySelector('video');// dom物件 $(myvideo);// dom物件轉jquery物件 // jquery物件轉dom物件 方法一：$('div')[index] index是索引號； 方法二：$('div').get(index) index是索引號 $('video')[0]; $('video').get[0]; // jquery設定樣式： $('div').css('屬性','值'); // jquery指定，篩選選擇器 ：first :last :odd選擇索引號為奇數的元素 :even選擇索引號為偶數的元素 $('ul li:first').css('color','red'); $('ul li:eq(1)').css('color','orange');// :eq(index) 索引號從0開始 // jquery篩選方法： $('li').parent(); //parent()查找父元素 回傳的是最近一級的父元素 $('ul').children('li');//children()查找最近一級的子元素 $('ul').find('li');//find()相當于后代選擇器 $('li:first').siblings('li');// siblings()查找兄弟節點，不包括自身 $('li:eq(1)').nextAll('li');// nextAll()查找當前元素之后的所有同輩元素 $('li:eq(1)').prevtAll('li');// prevtAll()查找當前元素之前的所有同輩元素 $('li:eq(2)').hasClass('box');// 檢查當前元素是否又某個特定類，有就回傳true // $(this).index()得到當前索引號 // eq()去獲取相應索引號所對應的元素 index()獲取某元素的索引號 // 【jquery影片效果：】
//v-enter v-enter-active v-leave v-leave-active
// 顯示show(['speed](slow/normal/fast)','[easing(用來指定切換效果：'默認swing先緩慢變化再快速變化再慢下來/linear每一時刻的速度都是相同的')]','[fn(回呼函式，在影片完成時執行的函式，每個元素執行一次)]','time')； 顯示時的速度和影片時常，如果沒有任何引數就是直接顯示 //隱藏hide() // 滑動：slideDown() slideUp() slideToggle() 滑動切換，點一下下拉，再點一下上拉 // 淡入淡出效果:fadeIn() fadeOut() fadeToggle() fadeTo(speed,opacity,easing,[fn])修改元素透明度【speed和opacity必須寫】 // 自定義影片：animate(params[表示想要更改的樣式屬性 必須寫 符合屬性采用駝峰命名法 屬性名可以不加引號],speed,easing,[fn]); // 【影片佇列：影片一旦觸發就會執行，如果短時間多次觸發影片就可能出現影片排隊效果】：stop()停止影片或效果，stop【必須寫到影片或者效果的前面】相當于停止上一次的影片，實作不管觸發多少次影片，只執行最后的s一次影片效果 // hover(over/out)事件切換 over--mouseenter out---mouseleave // 鏈式編程 // $('span').eq(index).show().siblings().hide();讓當前元素顯示，讓當前元素的兄弟元素隱藏 // 修改樣式：.css({key:'value',key:'value'});屬性名可以不加引號，屬性值時數字也可以不加引號 // 通過操作類名來修改樣式的方法比較多用 類名的樣式寫在css中.操作類名不影響原有的類名 // 【操作類名，可以在類名里定義一些屬性和值，要不要這些屬性取決于有沒有類名】 // 添加類:$('').addClass('類名'); [注意類名不要加點] // 洗掉類：$('').removeClass('類名'); // 切換類：如果沒有該類名就給它加上，如果有就給它去除 $('').toggleClass('類名'); 即可以實作，在點擊事件中，第一下加上類名，再點一下移除 可以實作影片效果 // 設定或獲取元素的固有屬性值：【設定屬性值prop('屬性',屬性值) 獲取屬性值prop('屬性')】 【元素的自定義屬性用prop()獲取不到 通過attr()獲取】 // 資料快取 data() 資料快取在data()里面，不會改變dom元素 當頁面重繪，資料也會被移除 // 獲取文本值內容： $('div').html(); 相當于innerHTML 修改內容 $('div').html('屬性值'); 獲取或者修改文本內容，不包含標簽text() 獲取或設定表單/textarea的value值 val() // 節流閥 互斥鎖：用來保證在任何時刻都只有一個執行緒訪問該物件 // toggleClass('類名') 如果存在該類名就洗掉它，如果不存在該類名就添加它
//jQuery尺寸
//width() height() 獲取元素的寬高值
// innerHeight() innerWidth()獲取元素的寬高值，包含padding
// outerHeight() outerWidth()包含padding border
// outerWidth(true) outerHeight(true) 包含padding border margin
// jquery位置
// offset() 設定或獲取元素的相對于瀏覽器的偏移坐標，與父元素無關， left top， 可以獲取，也可以設定
// offset() 設定或獲取元素的相對于瀏覽器的偏移坐標，與父元素無關， left top， 可以獲取，也可以設定
// positon() 偏移與帶有定位的父元素有關 如果沒有帶定位的父元素 就以瀏覽器為準， 只能獲取，不能設定
// scrollTop() 被卷去的頭部 $(document).scrollTop()表示檔案被卷去的頭部是多少 獲取或者設定檔案距離瀏覽器頂部的距離$(document).scrollTop(100) 用處：當頁面滾動到某個位置時，顯示回傳頂部圖示
// scrollLeft() 被卷去的左側
// 頁面滾動事件 $(window).scroll(function()){} 表示當頁面發生滾動時觸發函式
// 點擊回傳頂部，頁面慢慢回傳頂部：$("body,html").stop().animate({scrollTop: 0}); animate一定時給函式做影片效果，不能使用$(document
});</script> </body></html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/34132.html
標籤：jQuery