1. 程式人生 > >JQ 的class類的操作 效果 遍歷 內置遍歷數組的函數 事件

JQ 的class類的操作 效果 遍歷 內置遍歷數組的函數 事件

pla ngs sed event out sun get 祖先 time

class類的操作:

向指定元素添加相應類名:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../public/jquery-3.3.1/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            *{
                margin: 
0; padding: 0; } .dd{ background-color: red; width: 100px; height: 100px; } .ee{ background-color: black; color: white; } </style> </head> <body> <button>ddclass類</button> <button>eeclass類</button> <div id="a"> 我是測試class類的div
</div> </body> </html> <script type="text/javascript"> $(‘button:eq(0)‘).click(function(){ $(‘#a‘).addClass("dd"); }) $(‘button:eq(1)‘).click(function(){ $(‘.dd‘).addClass("ee"); })
</script>

效果如下:

技術分享圖片技術分享圖片技術分享圖片

檢查指定元素是否有指定的類:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../public/jquery-3.3.1/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .dd{
                background-color: red;
                width: 100px;
                height: 100px;
            }
            .ee{
                background-color: black;
                color: white;
            }
        </style>
    </head>
    <body>
        <button>判斷</button>
        <div id="a" class=‘dd‘>
            我是測試class類的div
        </div>
    </body>
</html>
<script type="text/javascript">
        
            $(‘button:eq(0)‘).click(function(){
                alert($(‘#a‘).hasClass("dd"));
                
            })    
        
</script>

技術分享圖片技術分享圖片

修改後:

$(‘button:eq(0)‘).click(function(){
                alert($(‘#a‘).hasClass("ee"));
                
            })    

技術分享圖片技術分享圖片

刪除指定指定元素的指定類名或者全部類名:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../public/jquery-3.3.1/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .dd{
                background-color: red;
                width: 100px;
                height: 100px;
            }
            .ee{
                color:blue;
            }
        </style>
    </head>
    <body>
        <button>刪除</button>
        <div id="a" class=‘dd ee‘>
            我是測試class類的div
        </div>
    </body>
</html>
<script type="text/javascript">
        
            $(‘button:eq(0)‘).click(function(){
                $(‘#a‘).removeClass("dd");
                
            })    
        
</script>

技術分享圖片技術分享圖片

修改後:如需移除若幹類,請使用空格來分隔類名

$(‘button:eq(0)‘).click(function(){
                $(‘#a‘).removeClass("dd ee");
                
            })

技術分享圖片技術分享圖片

切換toggle:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../public/jquery-3.3.1/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .dd{
                background-color: red;
                width: 100px;
                height: 100px;
            }
            .ee{
                color:blue;
            }
        </style>
    </head>
    <body>
        <button>刪除</button>
        <div id="a" class=‘dd ee‘>
            我是測試class類的div
        </div>
    </body>
</html>
<script type="text/javascript">
        
            $(‘button:eq(0)‘).click(function(){
                $(‘#a‘).toggleClass("dd");
                
            })    
        
</script>

效果如下:

技術分享圖片技術分享圖片技術分享圖片技術分享圖片

效果:

顯示與隱藏:

顯示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../public/jquery-3.3.1/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #a{
                background-color: red;
                width: 100px;
                height: 100px;
                display: none;
            }
        </style>
    </head>
    <body>
        <button>顯示與隱藏</button>
        <div id="a">
            我是測試顯示與隱藏的div
        </div>
    </body>
</html>
<script type="text/javascript">
        
            $(‘button:eq(0)‘).click(function(){
                $(‘#a‘).show();
            })    
        
</script>

技術分享圖片技術分享圖片

隱藏:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../public/jquery-3.3.1/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #a{
                background-color: red;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <button>顯示與隱藏</button>
        <div id="a">
            我是測試顯示與隱藏的div
        </div>
    </body>
</html>
<script type="text/javascript">
        
            $(‘button:eq(0)‘).click(function(){
                $(‘#a‘).hide();
            })    
        
</script>

技術分享圖片技術分享圖片

淡入淡出:

fadeIn(speed,callback)、fadeOut(speed,callback)、 fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換、fadeTo(speed,opacity,callback)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../public/jquery-3.3.1/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #a{
                background-color: red;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <button>淡出</button>
        <button>淡入</button>
<button>淡入淡出</button> <div id="a"> 我是測試淡入淡出的div </div> </body> </html> <script type="text/javascript"> $(‘button:eq(0)‘).click(function(){ $(‘#a‘).fadeOut(1000); }); $(‘button:eq(1)‘).click(function(){ $(‘#a‘).fadeIn(1000); })
       $(‘button:eq(2)‘).click(function(){
                $(‘#a‘).fadeToggle(1000);
            })
</script>

劃入劃出:

$(selector).slideDown(speed,callback);$(selector).slideUp(speed,callback);$(selector).slideToggle(speed,callback);
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../public/jquery-3.3.1/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #a{
                background-color: red;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <button>劃入劃出</button>
        <div id="a">
            我是測試劃入劃出的div
        </div>
    </body>
</html>
<script type="text/javascript">
        
            $(‘button:eq(0)‘).click(function(){
                $(‘#a‘).slideToggle(1000);
            });
            
        
</script>

遍歷:

直接父元素:parent();

<button>父</button>
        <button>子</button>
        <div id="a">
            a
            <div id="b">
                b
                <div id="c">
                    c
                    <div id="d">
                        d
                        <div id="e">
                            e
                        </div>
                    </div>
                </div>
            </div>
        </div>
$(‘button:eq(0)‘).click(function(){
            console.log($(‘#d‘).parent());            
        });

技術分享圖片

所有父元素直到html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../public/jquery-3.3.1/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <button>父</button>
        <button>子</button>
        <div id="a">
            a
            <div id="b">
                b
                <div id="c">
                    c
                    <div id="d">
                        d
                        <div id="e">
                            e
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
<script type="text/javascript">
        $(‘button:eq(0)‘).click(function(){
            console.log($(‘#d‘).parents());            
        });
</script>

技術分享圖片

parentsUntil() 方法返回介於被選元素與括號中元素之間的所有祖先元素。不包含被選元素與括號中選擇的元素:

<button>父</button>
        <button>子</button>
        <div id="a">
            a
            <div id="b">
                b
                <div id="c">
                    c
                    <div id="d">
                        d
                        <div id="e">
                            e
                        </div>
                    </div>
                </div>
            </div>
        </div>
$(‘button:eq(0)‘).click(function(){
            console.log($(‘#d‘).parentsUntil(‘#a‘));            
        });

技術分享圖片

children() 方法返回被選元素的所有直接子元素:

<button>父</button>
        <button>子</button>
        <div id="a">
            a
            <div id="b">
                b
                <div id="c">
                    c
                    <div id="c-1">
                        c-1
                    </div>
                    <div id="d">
                        d
                        <div id="e">
                            e
                        </div>
                    </div>
                </div>
            </div>
        </div>

  $(‘button:eq(1)‘).click(function(){
    console.log($(‘#c‘).children());
  });

技術分享圖片

find() 方法返回被選元素的後代元素,一路向下直到最後一個後代。

<button>父</button>
        <button>子</button>
        <div id="a">
            a
            <div id="b">
                b
                <div id="c">
                    c
                    <div id="c-1">
                        c-1
                    </div>
                    <div id="d">
                        d
                        <div id="e">
                            e
                        </div>
                    </div>
                </div>
            </div>
        </div>
$(‘button:eq(1)‘).click(function(){
            console.log($(‘#c‘).find(".d"));            
        });

技術分享圖片

當修改後:

$(‘button:eq(1)‘).click(function(){
            console.log($(‘#c‘).find("#d"));            
        });

技術分享圖片

兄弟元素:

siblings();

<button>父</button>
<button>子</button>
<button>兄弟</button>
<div id="a">
a
<div id="b">
b
<div id="c">
c
<div id="c-1">
c-1
</div>
<div id="d">
d
<div id="e">
e
</div>
</div>
</div>
</div>
</div>


$(‘button:eq(2)‘).click(function(){ console.log($(‘#d‘).siblings()); });

技術分享圖片

next() 方法返回被選元素的下一個同胞元素:

<body>
        <button>父</button>
        <button>子</button>
        <button>兄弟</button>
        <div id="a">
            a
            <div id="b">
                b
                <div id="c">
                    c
                    <div id="c-1">
                        c-1
                    </div>
                    <div id="c-2">
                        c-2
                    </div>
                    <div id="c-3">
                        c-3
                    </div>
                    <div id="d">
                        d
                        <div id="e">
                            e
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
<script type="text/javascript">
        $(‘button:eq(2)‘).click(function(){
            console.log($(‘#c-2‘).next());            
        });
</script>

技術分享圖片

nextAll() 方法返回被選元素的所有跟隨的同胞元素:

    <body>
        <button>父</button>
        <button>子</button>
        <button>兄弟</button>
        <div id="a">
            a
            <div id="b">
                b
                <div id="c">
                    c
                    <div id="c-1">
                        c-1
                    </div>
                    <div id="c-2">
                        c-2
                    </div>
                    <div id="c-3">
                        c-3
                    </div>
                    <div id="d">
                        d
                        <div id="e">
                            e
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
<script type="text/javascript">
        $(‘button:eq(2)‘).click(function(){
            console.log($(‘#c-2‘).nextAll());            
        });
</script>

技術分享圖片

nextUntil() 方法返回介於兩個給定參數之間的所有跟隨的同胞元素:

    <body>
        <button>父</button>
        <button>子</button>
        <button>兄弟</button>
        <div id="a">
            a
            <div id="b">
                b
                <div id="c">
                    c
                    <div id="c-1">
                        c-1
                    </div>
                    <div id="c-2">
                        c-2
                    </div>
                    <div id="c-3">
                        c-3
                    </div>
                    <div id="d">
                        d
                        <div id="e">
                            e
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
<script type="text/javascript">
        $(‘button:eq(2)‘).click(function(){
            console.log($(‘#c-2‘).nextUntil("#d"));            
        });
</script>

技術分享圖片

prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似,

過濾

first() 方法返回被選元素的首個元素。
last() 方法返回被選元素的最後一個元素。
eq() 方法返回被選元素中帶有指定索引號的元素。
filter() 方法返回符合一定條件的元素。
該方法讓您規定一個條件。不符合條件的元素將從選擇中移除,符合條件的元素將被返回。

改變所有 div 的顏色,然後向類名為 "middle" 的類添加邊框:
$("div").css("background", "#c8ebcc")
  .filter(".middle")
  .css("border-color", "red");
 
該方法通常用於縮小在被選元素組合中搜索元素的範圍。 not() 方法返回不匹配標準的所有元素。not() 方法與 filter() 相反。 slice() 把匹配元素集合縮減為指定的指數範圍的子集。

舉個例子:

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
</html>
<script type="text/javascript">
    $(‘li‘).slice(1, 3).css(‘background-color‘, ‘red‘);
</script>

技術分享圖片

each()

$("li").each(function(){
  $(this).attr();
})

技術分享圖片

內置遍歷數組的函數

$.map(array, function() {    
});

取到數組或者對象array中每一項進行遍歷 然後在function中處理

var attr = [1,2,3];
var newattr = $.map(attr, function(index) {
return index*2;
});
console.log(newattr);
得到//newattr = [2,4,6]

技術分享圖片

$.each(attr, function(key,value) {
});


對數組或者對象中每一項進行遍歷 然後在function中處理

var attr = ["name","age","say"];
$.each(attr, function(key,value) {
alert(attr[key]);
//console.log(this);
});

技術分享圖片技術分享圖片技術分享圖片

事件

bind() 向匹配元素附加一個或更多事件處理器 blur() 觸發、或將函數綁定到指定元素的 blur 事件 change() 觸發、或將函數綁定到指定元素的 change 事件 click() 觸發、或將函數綁定到指定元素的點擊事件 dblclick() 觸發、或將函數綁定到指定元素的雙擊事件 delegate() 向匹配元素的當前或未來的子元素附加一個或多個事件處理器 die() 移除所有通過 live() 函數添加的事件處理程序。 error() 觸發、或將函數綁定到指定元素的 error 事件 event.isDefaultPrevented() 返回 event 對象上是否調用了 event.preventDefault()。 event.pageX 相對於文檔左邊緣的鼠標位置。 event.pageY 相對於文檔上邊緣的鼠標位置。 event.preventDefault() 阻止事件的默認動作。 event.result 包含由被指定事件觸發的事件處理器返回的最後一個值。 event.target 觸發該事件的 DOM 元素。 event.timeStamp 該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數。 event.type 描述事件的類型。 event.which 指示按了哪個鍵或按鈕。 focus() 觸發、或將函數綁定到指定元素的 focus 事件 keydown() 觸發、或將函數綁定到指定元素的 key down 事件 keypress() 觸發、或將函數綁定到指定元素的 key press 事件 keyup() 觸發、或將函數綁定到指定元素的 key up 事件 live() 為當前或未來的匹配元素添加一個或多個事件處理器 load() 觸發、或將函數綁定到指定元素的 load 事件 mousedown() 觸發、或將函數綁定到指定元素的 mouse down 事件 mouseenter() 觸發、或將函數綁定到指定元素的 mouse enter 事件 mouseleave() 觸發、或將函數綁定到指定元素的 mouse leave 事件 mousemove() 觸發、或將函數綁定到指定元素的 mouse move 事件 mouseout() 觸發、或將函數綁定到指定元素的 mouse out 事件 mouseover() 觸發、或將函數綁定到指定元素的 mouse over 事件 mouseup() 觸發、或將函數綁定到指定元素的 mouse up 事件 one() 向匹配元素添加事件處理器。每個元素只能觸發一次該處理器。 ready() 文檔就緒事件(當 HTML 文檔就緒可用時) resize() 觸發、或將函數綁定到指定元素的 resize 事件 scroll() 觸發、或將函數綁定到指定元素的 scroll 事件 select() 觸發、或將函數綁定到指定元素的 select 事件 submit() 觸發、或將函數綁定到指定元素的 submit 事件 toggle() 綁定兩個或多個事件處理器函數,當發生輪流的 click 事件時執行。 trigger() 所有匹配元素的指定事件 triggerHandler() 第一個被匹配元素的指定事件 unbind() 從匹配元素移除一個被添加的事件處理器 undelegate() 從匹配元素移除一個被添加的事件處理器,現在或將來 unload() 觸發、或將函數綁定到指定元素的 unload 事件

其中上述event事件的用法實例

<script type="text/javascript">
$(document).ready(function(){
$("p, button, h1, h2").click(function(event){
$("div").html("點擊事件由一個 " + event.target.nodeName + " 元素觸發");
});
});
</script>
</head>

<body>
<h1>這是一個標題</h1>
<h2>這是另一個標題</h2>
<p>這是一個段落</p>
<button>這是一個按鈕</button>
<p>標題、段落和按鈕元素定義了一個點擊事件。如果您觸發了事件,下面的 div 會顯示出哪個元素觸發了該事件。</p>
<div></div>
</body>
</html>

JQ 的class類的操作 效果 遍歷 內置遍歷數組的函數 事件