二次封裝element的日期元件
阿新 • • 發佈：2020-08-26
1.jQuery 基礎選擇器
1.2 jQuery 層級選擇器
1.3 隱式迭代
遍歷內部DOM元素（偽陣列形式儲存）的過程叫做隱式迭代
簡單理解：給匹配到的所有元素進行迴圈便利，執行相應的方法，而不用我們再進行迴圈，簡化我們的操作，方便呼叫。
1.4 jQuery篩選選擇器
1.5 jQuery 篩選方法
<script type="text/javascript">
//注意 都是方法 帶括號
$(function(){
//1.兄弟元素siblings 除了自身元素之外的所有兄弟
$('ol .item').siblings('li').css('color','red');
新浪下拉選單 案例
<script type="text/javascript"> $(function(){//滑鼠經過 $('.nav>li').mouseover(function(){ //$(this) jQuery 當前元素 this不要加引號 $(this).children('ul').show(); }); //滑鼠離開 $('.nav>li').mouseout(function(){ $(this).children('ul').hide(); }) })</script>
1.6 jQuery 排他思想
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script type="text/javascript">
$(function(){
//隱式迭代 給所有的按鈕都綁定了點選事件
$('button').click(function(){
//當前元素變化背景顏色
$(this).css('background','pink');
//其餘兄弟去掉背景顏色 隱式迭代
$(this).siblings('button').css('background','');
})
})
</script>
淘寶精品服飾 案例（側邊tab）
<script type="text/javascript"> $(function(){ $('#left>li').mouseover(function(){ //得到當前li的索引號 var index = $(this).index(); $(this).css('border-color','pink'); $('#content div').eq(index).show(); $(this).siblings('li').css('border-color',''); $('#content div').eq(index).siblings('div').hide(); }); }) </script>View Code
2. jQuery 樣式操作
2.1 操作css方法
（1）引數只寫屬性名，則返回屬性值
$('div').css('width');
（2）引數是屬性名，屬性值，逗號分隔，是設定一組樣式，屬性必須加引號，值如果是數字可以不用跟單位和引號
$('div').css('width','200px');
（3） 引數可以是物件形式，方便設定多組樣式。屬性名和屬性值用冒號隔開，屬性可以不用加引號
如果是複合屬性則必須採取駝峰命名法，如果值不是數字，則需要加引號
$('div').css({width:200px,color:'white',font-size:20px,backgroundColor:'red'});
2.2 設定類樣式方法
<script type="text/javascript"> $(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>
tab欄切換 案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{ padding: 0; margin: 0; } li{ list-style: none; } .tab{ width: 500px; margin: 100px; } .tabTop{ border: 1px solid #ccc; background-color: #eef0ee; height: 30px; } .tabTop ul li{ float: left; padding: 0 10px; line-height: 30px; cursor: pointer; } .current{ background: #f00; color: #fff; } .item{ display: none; } </style> </head> <body> <div class="tab"> <div class="tabTop"> <ul class="tabUl"> <li class="current">商品介紹</li> <li>商品介紹</li> <li>商品介紹</li> <li>商品介紹</li> <li>商品介紹</li> </ul> </div> <div class="tabCon"> <div class="item" style="display: block;">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> </div> <script type="text/javascript"> $(function(){ $('.tabUl li').click(function(){ //鏈式程式設計 $(this).addClass('current').siblings().removeClass('current'); var index = $(this).index(); $('.tabCon .item').eq(index).show().siblings().hide(); }) }) </script> </body> </html>View Code
2.3 類操作與className區別
原生JS中className 會覆蓋元素原來裡面的類名。
jQuery 裡面類操作知識對指定類進行操作，不影響原先的類名。addClass相當於追加類名 不影響以前的類名
3.jQuery 效果
//1.事件切換hover 滑鼠經過和離開的複合寫法 $('.nav>li').hover(function(){ $(this).children('ul').slideDown(); },function(){ $(this).children('ul').slideUp(); }) //2.事件切換 hover 如果只寫一個函式 那麼滑鼠經過和移開都會觸發這個函式 $('.nav>li').hover(function(){ //slideToggle 滑動切換 $(this).children('ul').slideToggle(); })
3.4 動畫佇列及其停止排隊方法
（1）動畫或效果佇列
動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行。
（2）停止排隊stop()
//stop方法必須寫到動畫的前面 $(this).children('ul').stop().slideToggle();
3.5 淡入淡出效果
修改透明度
//修改透明度 fadeTo() 這個速度和透明度要必須寫 $("button").eq(2).fadeTo(1000,0.5);
滑鼠移上去圖片高亮顯示 案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> body{ background-color: #000; } /**清除浮動**/ .clearfix{*zoom:1;}/*IE6 7專門清除浮動*/ .clearfix:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } *{ padding: 0; margin: 0; } .wrap{ width: 640px; border: 1px solid #fff; padding-bottom: 10px; margin: 100px auto; } .wrap ul li{ list-style: none; float: left; width: 200px; padding: 10px 0 0 10px; } .wrap img{ width: 200px; display: block; border: 0; } </style> <script type="text/javascript"> $(function(){ //滑鼠進入的時候，其他li標籤透明度0.5 $('.wrap li').hover(function(){ $(this).siblings().stop().fadeTo(400,0.4); },function(){ //滑鼠離開，其他li透明度改為1 $(this).siblings().stop().fadeTo(400,1); }) }) </script> </head> <body> <div class="wrap"> <ul class="clearfix"> <li><a href="#"><img src="img/2.jpg" alt="" /></a></li> <li><a href="#"><img src="img/3.jpg" alt="" /></a></li> <li><a href="#"><img src="img/4.jpg" alt="" /></a></li> <li><a href="#"><img src="img/5.jpg" alt="" /></a></li> <li><a href="#"><img src="img/6.jpg" alt="" /></a></li> <li><a href="#"><img src="img/7.jpg" alt="" /></a></li> </ul> </div> </body> </html>View Code
3.6 自定義動畫 animate
（1）語法
animate(params,[speed],[easing],[fn])
（2）引數
· params：想要更改的樣式屬性，以物件形式傳遞，必須寫。屬性名可以不用帶引號，如果是複合屬性
則需要採取駝峰命名法borderLeft。其餘引數都可以省略。
<script type="text/javascript"> $(function(){ $('button').click(function(){ $('div').animate({ left:500, top:300, opacity:.4, },500); }) }) </script>
王者榮耀手風琴效果 案例
<script type="text/javascript"> $(function(){ //滑鼠經過li 有兩步操作 $('.king li').mouseenter(function(){ //1.當前li 寬度變為224px，同時裡面的小圖片淡出，大圖片淡入 $(this).stop().animate({ width:224 },200).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn(); //2.其餘兄弟li寬度變為69px 小圖片淡入，大圖片淡出 $(this).siblings('li').stop().animate({ width:69 },400).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut(); }) }) </script> <div class="king"> <ul> <li><a href=""><img src="" alt="" class="small" /><img src="" alt="" class="big" /></a></li> <li><a href=""><img src="" alt="" class="small" /><img src="" alt="" class="big" /></a></li> <li><a href=""><img src="" alt="" class="small" /><img src="" alt="" class="big" /></a></li> <li><a href=""><img src="" alt="" class="small" /><img src="" alt="" class="big" /></a></li> <li><a href=""><img src="" alt="" class="small" /><img src="" alt="" class="big" /></a></li> <li><a href=""><img src="" alt="" class="small" /><img src="" alt="" class="big" /></a></li> <li><a href=""><img src="" alt="" class="small" /><img src="" alt="" class="big" /></a></li> </ul> </div>View Code
5.jQuery 屬性操作
5.1 設定或獲取元素固有屬性值 prop()
所謂元素固有屬性就是元素本身自帶的屬性，比如<a>元素裡面的href
$(function(){ //element.prop("屬性名") 獲取屬性值 $("a").prop("href"); //設定屬性 $("a").prop("title","這裡是百度"); })
5.2 設定或獲取元素自定義屬性值 attr()
//元素的自定義屬性 通過attr() $('div').attr('index');
5.3 資料快取 data()
data()方法可以在指定元素上存取資料，並不會修改DOM元素結構。一旦頁面重新整理，之前存放的資料都將被移除。
//3.資料快取data() 這個裡面的資料是存放在元素的記憶體裡面 $("span").data("uname","andy"); //這個方法獲取data-index h5自定義屬性 ① 不用寫data- 而且返回的是數字型 console.log($("div").data("index"));
購物車全選按鈕實現 案例
$(function(){ //1.全選 全不選 功能模組 //就是把全選按鈕(checkall)的狀態賦值給三個小的按鈕(j-checkbox)就可以了 $(".checkall").change(function(){ $(".j-checkbox,.checkall").prop("checked",$(this).prop("checked")); }); //2.如果小複選框被選中的個數等於3 就應該把全選按鈕選上，否則全選按鈕不選。 if($(".j-checkbox:checked").length === $(".j-checkbox").length){ $(".checkall").prop("checked",true); }else{ $(".checkall").prop("checked",false); } })
6. jQuery 內容文字值
（1）普通元素內容html()(相當於原生innerHTML)
（2）普通元素文字內容text() (相當於原生innerText)
（3）表單的值val()(相當於原生value)