JQuery

時間 2019-11-17

標籤 jquery 欄目 JQuery 简体版

原文原文鏈接

一 . jQuery 的介紹

　　1.1 jQuery是什麼 ? javascript

［1］ jQuery由美國人John Resig建立，至今已吸引了來自世界各地的衆多 javascript高手加入其team。css

［2］ jQuery是繼prototype以後又一個優秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!html

［3］它是輕量級的js庫(壓縮後只有21k) ，這是其它的js庫所不及的，它兼容CSS3，還兼容各類瀏覽器java

［4］ jQuery是一個快速的，簡潔的javaScript庫，使用戶能更方便地處理HTMLdocuments、events、實現動畫效果，而且方便地爲網站提供AJAX交互。jquery

［5］ jQuery還有一個比較大的優點是，它的文檔說明很全，並且各類應用也說得很詳細，同時還有許多成熟的插件可供選擇。編程

[ 6 ] jQuery 是 js 的一個庫，封裝了咱們開發過程當中經常使用的一些功能，方便咱們調用，提升開發效率。json

js庫是把咱們經常使用的功能放到一個單獨的文件中，咱們用的時候，直接引用到頁面裏便可。api

關於jQuery的相關資料：數組

官網：http://jquery.com/瀏覽器
官網API文檔：http://api.jquery.com/
漢化API文檔：http://www.css88.com/jqapi-1.9/

　　1.2 爲何要使用jQuery

在用js寫代碼時，會遇到一些問題：

window.onload 事件有事件覆蓋的問題，所以只能寫一個事件。
代碼容錯性差。
瀏覽器兼容性問題。
書寫很繁瑣，代碼量多。
代碼很亂，各個頁面處處都是。
動畫效果很難實現。

可是jQuery的出現完美的解決了這些問題.

　　1.3 jQuery 的帶一個代碼

用原生 js 來實現下面代碼效果 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 20px;
            display: none;
        }
    </style>

    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementsByTagName('button')[0];
            var divArr = document.getElementsByTagName('div');
            oBtn.onclick = function () {
                        for (var i = 0; i < divArr.length; i++) {
                            divArr[i].style.display = "block";
                            divArr[i].innerHTML = "趙雲";
                            }
             }
        }
    </script>
    
</head>
<body>
    
    <button>操做</button>
    <div></div>
    <div></div>
    <div></div>
    

</body>
</html>

若是用 jQuery 來寫 ,保持其餘的代碼不變 ,<script> 部分的代碼修改成 : (須要提早引入)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <button>操做</button>
    <div></div>
    <div></div>
    <div></div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // 獲取dom元素
            var oBtn = $('button'); //根據標籤名獲取元素
            var oDiv = $('div'); //根據標籤名獲取元素
            oBtn.click(function(){
                oDiv.show(1000);//顯示盒子
                oDiv.html('趙雲'); // 設置內容
            });//事件是經過方法綁定的
        })
    </script>
    
</body>
</html>

　　1.4 jQuery 的兩大特色

(1) . 鏈式編程 : 好比 .show() 和 .html() 能夠連寫成 .show().html()

(2) . 隱式迭代 : 隱式對應的就是顯式 . 隱式迭代的意識就是 : 在方法內部進行循環遍歷,而不是用咱們本身在進行循環,簡化咱們的操做,方便咱們使用.

二 . jQuery 的使用

　　1 . 使用jQuery 的基本步驟

　　(1) . 引包

　　 (2) . 入口函數

(3) . 功能實現代碼(事件處理)

如圖 :

注意 : 導包的代碼必定要放在 js 代碼的最上面

jQuery 的版本

jQuery 有兩個大版本：

1.x版本：最新版爲 v1.11.3。
2.x版本：最新版爲 v2.1.4（再也不支持IE六、七、8）。
3.x版本。

下載jQuery包以後裏面會有兩個文件，一個是jquery-3.3.1.js，一個是jquery-3.3.1.min.js

它們的區別是：

第一個是未壓縮版，第二個是壓縮版。
平時開發過程當中，可使用任意一個版本；可是，項目上線的時候，推薦使用壓縮版。

　　2 . jQuery 的入口函數和 $ 符號

入口函數********

原生 js 的入口函數指的是 : window.onload = funcction(){}; 以下 :

//原生 js 的入口函數.頁面上全部的內容加載完畢 , 才執行.
//不只要等文本加載完畢,並且要等圖片也要加載完畢 ,才執行函數

window.onload = function(){
       alert(1);  
}

可是 jQuery 的入口函數 ,有如下集中寫法 :

　　寫法一 :

// 1 . 文檔加載完畢,圖片不加載的時候就能夠執行這個函數

$(document).ready(function () {
       alert(1);
})

　　寫法二 : (寫法一的簡潔版)

// 2 . 文檔加載完畢,圖片比較早的時候執行函數.

$(function () {
      alert(1);
});

　　寫法三 :

// 3 . 文檔加載完畢,圖片也加載完畢的時候,在執行這個函數

$(window).ready(function () {
      alert(1);
})

jQuery 入口函數與 js 入口函數的區別 :

區別一 :書寫個數不一樣 :

　　　　● JS 的入口函數只能出現一次,出現屢次會存在事件覆蓋的問題.

　　　　● jQuery 的入口函數 , 能夠出現任意屢次,並不存在事件覆蓋問題

　　區別二 : 執行時機不一樣 :

　　　　● JS 的入口函數是在全部的文件資源加載完成後 , 才執行,這些文件資源包括 : 頁面文檔 , 外部的js文件,外部的 css 文件,圖片等.

　　　　● jQuery 的入口函數 , 是在文檔加載完成後,就執行.文檔加載完成指的是 : DOM樹加載完成後就能夠操做DOM了 , 不用等到全部的外部資源價值完畢.

文檔加載順序 : 從上到下,邊解析邊執行.

jQuery 的$符號

jQuery 使用$符號的緣由 : 書寫簡單,相對於其餘字符不同凡響 ,容易被記住.

jQuery 佔用了咱們兩個變量 : $ 和 jQuery .當咱們子代碼中打印他們倆的時候 :

<script src = "jquery-3.3.1.js"></script>
    <script>
        
        console.log($);
        console.log(jQuery);
        console.log($===jQuery);

    </script>

打印結果 :

從打印結果能夠看出 $ 表明的就是 jQuery.

$ 實際表示的是一個函數名 :

    $(); // 調用上面咱們自定義的函數$

    $(document）.ready(function(){}); // 調用入口函數

    $(function(){}); // 調用入口函數

    $(「#btnShow」) // 獲取id屬性爲btnShow的元素

    $(「div」) // 獲取全部的div標籤元素

如上方所示，jQuery 裏面的 $ 函數，根據傳入參數的不一樣，進行不一樣的調用，實現不一樣的功能。返回的是jQuery對象。

jQuery這個js庫，除了$ 以外，還提供了另一個函數：jQuery。jQuery函數跟 $ 函數的關係：jQuery === $。

　　3 . js中的DOM對象和 jQuery對象比較 ********

兩者的區別

經過 jQuery 獲取的元素是一個數組 , 數組中包含着原生 JS 中的DOM 對象 :

例如 :

<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div

經過原生 JS 獲取這些元素節點的方式是 :

    var myBox = document.getElementById("app");           //經過 id 獲取單個元素
    var boxArr = document.getElementsByClassName("box");  //經過 class 獲取的是僞數組
    var divArr = document.getElementsByTagName("div");    //經過標籤獲取的是僞數組

經過 jQuery 獲取這些元素節點的方式是 : (獲取的是數組)

  //獲取的是數組，裏面包含着原生 JS 中的DOM對象。
　　console.log($('#app'));
　　console.log($('.box'));
　　console.log($('div'));

設置當前4個div的樣式 :

　　　　　　$('div').css({
                'width': '200px',
                'height': '200px',
                "background-color":'red',
                'margin-top':'20px'
            })

因爲 jQuery 自帶了 css() 方法 ,咱們還能夠直接給代碼中的 div 設置 css 屬性.

總結 : jQuery 就是把DOM 樹對象從新包裝了一下,讓其具備了 jQuery 方法.

兩者的相互轉換

1 . DOM 對象 --->>> jQuery 對象

$(js對象);

2 . jQuery 對象 --->>> DOM 對象 :

  jquery對象[index];      //方式1（推薦）

  jquery對象.get(index);  //方式2

jQuery 對象轉換成了 DOM 對象以後,能夠直接調用DOM 提供的一些功能. 如 :

$('div')[1].style.backgroundColor = 'yellow';
$('div')[3].style.backgroundColor = 'green';

總結 : 若是想要那種方式設置屬性或者方法 ,必須轉換成該類型.

三 . jQuery 的選擇器

　　1 . jQuery 的基本選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div></div>
    <div id="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div></div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        //入口函數
        $(function(){
            //三種方式獲取jquery對象
            var jqBox1 = $("#box");
                   var jqBox2 = $(".box");
            var jqBox3 = $('div');

            //操做標籤選擇器
            jqBox3.css('width', '100');
            jqBox3.css('height', 100);
            jqBox3.css('background-color', 'red');
            jqBox3.css('margin-top', 10);


            //操做類選擇器(隱式迭代，不用一個一個設置)
                    jqBox2.css("background", "green");
                    jqBox2.text('哈哈哈')

                    //操做id選擇器
                    jqBox1.css("background", "yellow");
                   
        })
    </script>
    
</body>
</html>

　　2 . 層級選擇器

示例 :

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //獲取ul中的li設置爲粉色
            //後代：兒孫重孫曾孫玄孫....
            var jqLi = $("ul li");
            jqLi.css("margin", 5);
            jqLi.css("background", "pink");

            //子代：親兒子
            var jqOtherLi = $("ul>li");
            jqOtherLi.css("background", "red");
        });
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
</ul>
</body>
</html>

　　3 . 基本過濾選擇器

解釋 :

示例 :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本過濾選擇器</title>
    </head>
    <body>
        <ul>
            <li>哈哈哈哈，基本過濾選擇器</li>
            <li>嘿嘿嘿</li>
            <li>天王蓋地虎</li>
            <li>小雞燉蘑菇</li>
            
        </ul>
    </body>
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            //獲取第一個 :first ,獲取最後一個 :last
            
            //奇數
            $('li:odd').css('color','red');
            //偶數
            $('li:even').css('color','green');
            
            //選中索引值爲1的元素 *
            $('li:eq(1)').css('font-size','30px');
            
            //大於索引值1
            $('li:gt(1)').css('font-size','50px');
            
            //小於索引值1
            $('li:lt(1)').css('font-size','12px');
            
            
            
            
        })
        
        
    </script>
</html>

效果 :

　　4 . 屬性選擇器

示例 :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <div id="box">
            <h2 class="title">屬性元素器</h2>
            <!--<p class="p1">我是一個段落</p>-->
            <ul>
                <li id="li1">分手應該體面</li>
                <li class="what" id="li2">分手應該體面</li>
                <li class="what">分手應該體面</li>
                <li class="heihei">分手應該體面</li>

            </ul>

            <form action="" method="post">

                <input name="username" type='text' value="1" checked="checked" />
                <input name="username1111" type='text' value="1" />
                <input name="username2222" type='text' value="1" />
                <input name="username3333" type='text' value="1" />
                <button class="btn-default">按鈕1</button>
                <button class="btn-info">按鈕1</button>
                <button class="btn-success">按鈕1</button>
                <button class="btn-danger">按鈕1</button>


            </form>
        </div>
    </body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            //標籤名[屬性名] 查找全部含有id屬性的該標籤名的元素
            $('li[id]').css('color','red');
            
            //匹配給定的屬性是what值得元素
            $('li[class=what]').css('font-size','30px');
            //[attr!=value] 匹配全部不含有指定的屬性，或者屬性不等於特定值的元素
            $('li[class!=what]').css('font-size','50px');
            
            //匹配給定的屬性是以某些值開始的元素
            $('input[name^=username]').css('background','gray');
            //匹配給定的屬性是以某些值結尾的元素
            $('input[name$=222]').css('background','greenyellow');
            
            //匹配給定的屬性是以包含某些值的元素
            $('button[class*=btn]').css('background','red')
        
            
        })
    
    </script>
</html>

效果 :

　　5 . 篩選選擇器

示例 :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <div id="box">
            <p class="p1">
                <span>我是第一個span標籤</span>
                <span>我是第二個span標籤</span>
                <span>我是第三個span標籤</span>
            </p>
            <button>按鈕</button>
        </div>
        <ul>
            <li class="list">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        
        //獲取第n個元素 數值從0開始
        $('span').eq(1).css('color','#FF0000');
        
        //獲取第一個元素 :first :last    點語法  ：get方法 和set方法
        $('span').last().css('color','greenyellow');
        $('span').first().css('color','greenyellow');
        
        //查找span標籤的父元素（親的）
        $('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'});
        
        //選擇全部的兄弟元素（不包括本身）
                  $('.list').siblings('li').css('color','red');

                  
                //查找全部的後代元素
                   $('div').find('button').css('background','yellow');

                
                //不寫參數表明獲取全部子元素。
                   $('ul').children().css("background", "green");
                   $('ul').children("li").css("margin-top", 10);
                   

        
        
    </script>
</html>

　　　效果　：　

四 . jQuery 的動畫效果

　　顯示動畫

方式一 :

$("div").show();

解釋 : 無參數,表示讓指定的元素直接顯示出來.其實這個方法的底層就是經過 display:block; 實現的.

方式二 :

$("div").show(3000);

解釋 : 經過控制元素的寬高 , 透明度 , display屬性 , 逐漸顯示 , 2秒後顯示完畢.

方式三 :

$("div").show("show");

參數能夠是 :

　　　　● slow 慢 : 600ms

　　　　● normal 正常 : 400ms

　　　　● fast 快 : 200ms

解釋 : 和方式二相似 , 也是經過控制元素的寬高,透明度 ,display屬性 ,逐漸顯示.

方式四 :

 //show(毫秒值，回調函數;
    $("div").show(5000,function () {
        alert("動畫執行完畢！");
    });

解釋 : 動畫執行後,當即調用回調函數.

總結 : 參數能夠有兩個,第一個是動畫執行的時長,第二個是動畫執行結束後執行回調函數.

　　隱藏動畫

    $(selector).hide();

    $(selector).hide(1000); 

    $(selector).hide("slow");

    $(selector).hide(1000, function(){});

實現點擊按鈕顯示盒子,再點擊按鈕隱藏盒子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                background-color: green;
                border: 1px solid red;
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="box">        
        </div>
        <button id="btn">隱藏</button>    
    </body>
    <script src="jquery-3.3.1.js"></script>
    
    <script type="text/javascript">
        
        //jquery 提供了一些方法 show() hide() 控制元素顯示隱藏
        var isShow = true;
        $('#btn').click(function(){
            if(isShow){
                $('#box').show('slow',function(){
                    $(this).text('盒子出來了');            
                    $('#btn').text('顯示');
                    isShow = false;
                })
            }else{
                $('#box').hide(2000,function(){
                    $(this).text('');    
                    $('#btn').text('隱藏');
                    isShow = true;
                    
                })
            }
        })
    
        
    </script>
</html>

　　開關式顯示隱藏動畫

$('#box').toggle(3000,function(){});

顯示和隱藏的來回切換採用的是 toggle() 方法 : 就是先執行 show() , 在執行 hide() .

    $('#btn').click(function(){
            $('#box').toggle(3000,function(){
                $(this).text('盒子出來了');    
                if ($('#btn').text()=='隱藏') {
                    $('#btn').text('顯示');    
                }else{
                    $('#btn').text('隱藏');    
                }
            });
        })

　　滑入和滑出

1 . 滑入動畫效果 : (相似於捲簾門)

$(selector).slideDown(speed, 回調函數);

解釋 : 下拉動畫,顯示元素.

注意：省略參數或者傳入不合法

2 . 滑出動畫效果 :

$(selector).slideUp(speed, 回調函數);

解釋 : 上拉動畫,隱藏元素.

3 . 滑入滑出切換動畫效果 :

 $(selector).slideToggle(speed, 回調函數);

示例 :

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 300px;
            display: none;
            background-color: green;
        }
    </style>

    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //點擊按鈕後產生動畫
            $("button:eq(0)").click(function () {

                //滑入動畫： slideDown(毫秒值，回調函數[顯示完畢執行什麼]);
                $("div").slideDown(2000, function () {
                    alert("動畫執行完畢！");
                });
            })

            //滑出動畫
            $("button:eq(1)").click(function () {

                //滑出動畫：slideUp(毫秒值，回調函數[顯示完畢後執行什麼]);
                $("div").slideUp(2000, function () {
                    alert("動畫執行完畢！");
                });
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切換（一樣有四種用法）
                $("div").slideToggle(1000);
            })

        })
    </script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切換</button>
<div></div>

</body>
</html>

　　淡入淡出動畫

1 . 淡入動畫效果 :

$(selector).fadeIn(speed, callback);

做用 : 讓元素以淡淡的進入視線的方式展現出來.

2 . 淡出動畫效果 :

$(selector).fadeOut(1000); 
//一秒後

做用 : 讓元素以漸漸消失的方式隱藏起來.

3 . 淡入淡出切換動畫效果 :

 $(selector).fadeToggle('fast', callback);

做用 : 經過改變透明度 ,切換匹配元素的顯示或隱藏狀態.

參數的含義同 show() 方法.

示例 :

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 300px;
            height: 300px;
            display: none;
            /*透明度*/
            opacity: 0.5;
            background-color: red;
        }
    </style>

    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //點擊按鈕後產生動畫
            $("button:eq(0)").click(function () {

//                //淡入動畫用法1:   fadeIn();   不加參數
                $("div").fadeIn();

//                //淡入動畫用法2:   fadeIn(2000);   毫秒值
//                $("div").fadeIn(2000);
//                //經過控制  透明度和display

                //淡入動畫用法3:   fadeIn(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeIn("slow");
//                $("div").fadeIn("fast");
//                $("div").fadeIn("normal");

                //淡入動畫用法4:   fadeIn(毫秒值，回調函數[顯示完畢執行什麼]);
//                $("div").fadeIn(5000,function () {
//                    alert("動畫執行完畢！");
//                });
            })

            //滑出動畫
            $("button:eq(1)").click(function () {
//                //滑出動畫用法1:   fadeOut();   不加參數
               $("div").fadeOut();

//                //滑出動畫用法2:   fadeOut(2000);   毫秒值
//                $("div").fadeOut(2000);  //經過這個方法實現的：display: none;
//                //經過控制  透明度和display

                //滑出動畫用法3:   fadeOut(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeOut("slow");
//                $("div").fadeOut("fast");
//                $("div").fadeOut("normal");

                //滑出動畫用法1:   fadeOut(毫秒值，回調函數[顯示完畢執行什麼]);
//                $("div").fadeOut(2000,function () {
//                    alert("動畫執行完畢！");
//                });
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切換
                //一樣有四種用法
                $("div").fadeToggle(1000);
            })

            $("button:eq(3)").click(function () {
                //改透明度
                //一樣有四種用法
                $("div").fadeTo(1000, 0.5, function () {
                    alert(1);
                });
            })
        })
    </script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切換</button>
<button>改透明度爲0.5</button>
<div></div>

</body>
</html>

　　自定義動畫 *********

語法 :

 $(selector).animate({params}, speed, callback);

做用 : 執行一組CSS屬性的自定義動畫.

　　　　● 第一個參數表示 : 要執行動畫的CSS屬性(必寫)

　　　　● 第二個參數表示 : 執行動畫時長(可選)

　　　　● 第三個參數表示 : 動畫執行完畢後,當即執行的回調函數(可選)

示例 :

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        jQuery(function () {
            $("button").click(function () {
                var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
                var json2 = {
                    "width": 100,
                    "height": 100,
                    "left": 100,
                    "top": 100,
                    "border-radius": 100,
                    "background-color": "red"
                };

                //自定義動畫
                $("div").animate(json, 1000, function () {
                    $("div").animate(json2, 1000, function () {
                        alert("動畫執行完畢！");
                    });
                });

            })
        })
    </script>
</head>
<body>
<button>自定義動畫</button>
<div></div>
</body>
</html>

　　中止動畫　　　

$(selector).stop(true, false);

　　裏面的兩個參數的含義 :

　　　　第一個參數 :

　　　　　　● true : 後續動畫不執行.

　　　　　　● false : 後續動畫會執行.

　　　　第二個參數 :

　　　　　　● true : 當即執行完成當前動畫.

　　　　　　● false : 當即中止當前動畫.

注意 ; 參數若是都不寫,默認兩個都是false. 能夠直接用 stop() 中止動畫.

示例 : 鼠標懸停時,彈出下拉菜單(下拉時代動畫.)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-color: pink;
        }

        .wrap li {
            background-color: green;
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        //入口函數
        $(document).ready(function () {
            //需求：鼠標放入一級li中，讓他裏面的ul顯示。移開隱藏。
            var jqli = $(".wrap>ul>li");

            //綁定事件
            jqli.mouseenter(function () {
                $(this).children("ul").stop().slideDown(1000);
            });

            //綁定事件(移開隱藏)
            jqli.mouseleave(function () {
                $(this).children("ul").stop().slideUp(1000);
            });
        });
    </script>

</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一級菜單1</a>
            <ul>
                <li><a href="javascript:void(0);">二級菜單2</a></li>
                <li><a href="javascript:void(0);">二級菜單3</a></li>
                <li><a href="javascript:void(0);">二級菜單4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">二級菜單1</a>
            <ul>
                <li><a href="javascript:void(0);">二級菜單2</a></li>
                <li><a href="javascript:void(0);">二級菜單3</a></li>
                <li><a href="javascript:void(0);">二級菜單4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">三級菜單1</a>
            <ul>
                <li><a href="javascript:void(0);">三級菜單2</a></li>
                <li><a href="javascript:void(0);">三級菜單3</a></li>
                <li><a href="javascript:void(0);">三級菜單4</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

注意 :

javascript:void(0); //跟javascript:;效果同樣

上方代碼中，關鍵的地方在於，用了stop函數，再執行動畫前，先停掉以前的動畫。

五 . jQuery 的屬性操做

jQuery 的屬性操做模塊分爲四個部分 : HTML操做 , dom操做 , 類樣式操做 , 值操做

　　　　● html屬性操做 : 是對 html 文檔中的屬性進行讀取,設置和移除操做,好比 attr(),removeAttr().

　　　　● DOM屬性操做 : 對DOM元素的屬性進行讀取,設置和移除操做,好比 prop() , removeProp().

　　　　● 類樣式操做 : 是指對DOM屬性 className 進行添加,移除操做,好比 : addClass(),removeClass(),toggleClass().

　　　　● 值操做 : 是對DOM屬性 value 進行讀取和設置操做. 好比 : html() , text(), , val().

　　attr()

設置屬性值或者返回被選元素的屬性值.

       //獲取值：attr()設置一個屬性值的時候 只是獲取值
        var id = $('div').attr('id')
        console.log(id)
        var cla = $('div').attr('class')
        console.log(cla)
        //設置值
        //1.設置一個值 設置div的class爲box
        $('div').attr('class','box')
        //2.設置多個值，參數爲對象，鍵值對存儲
        $('div').attr({name:'hahaha',class:'happy'})

　　removeAttr()

移除屬性 :

// 刪除單個屬性

$("#box") .removeAttr("name");
$("#box") .removeAttr("class");

//刪除多個屬性

$("#box") .removeAttr("name class");

　　prop()

prop() 方法設置或者返回被選元素的屬性和值.

　當該方法用於返回屬性值時,則返回第一個匹配元素的值.

當該方法用於設置屬性值時,則爲匹配元素集合設置一個或者多個屬性/值對.

語法 :

返回屬性的值 :

$(selector).prop(property)

返回屬性和值:

$(selector).prop(property,value)

設置多個屬性和值:

$(selector).prop({property:value, property:value,...})

　　關於 attr() 和 prop() 的區別

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    男<input type="radio" id='test' name="sex"  checked/>
    女<input type="radio" id='test2' name="sex" />
    <button>提交</button>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            //獲取第一個input
            var el = $('input').first();
            //undefined  由於attr是獲取的這個對象屬性節點的值，很顯然此時沒有這個屬性節點，天然輸出undefined
            console.log(el.attr('style'));
            // 輸出CSSStyleDeclaration對象，對於一個DOM對象，是具備原生的style對象屬性的，因此輸出了style對象
            console.log(el.prop('style'));
            console.log(document.getElementById('test').style);

            $('button').click(function(){
                alert(el.prop("checked") ? "男":"女");
            })
            


        })
    </script>
    
</body>
</html>

注意 : 當有 true , false 兩個屬性時使用--prop(),不然使用attr().

　　類樣式操做

1 . addClass() : 添加多個類名

爲每一個匹配的元素添加指定的類名 :

$('div').addClass("box");//追加一個類名到原有的類名

爲匹配的元素添加多個類名

$('div').addClass("box box2");//追加多個類名

2 . removeClass()

從全部匹配的元素中刪除所有或者指定的類

移除指定的類(一個或多個)

$('div').removeClass('box')；

　　移除所有的類

$('div').removeClass();

能夠經過添加刪除類名,來實現元素的顯示隱藏.

示例 :

var tag  = false;
        $('span').click(function(){
            if(tag){
                $('span').removeClass('active')
                tag=false;
            }else{
                $('span').addClass('active')
                tag=true;
            }    
})

案例 :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .active{
            color: red;
        }
    </style>
</head>
<body>
     <ul>
         <li class="item">張三</li>
         <li class="item">李四</li>
         <li class="item">王五</li>
     </ul>
     <script type="text/javascript" src="jquery-3.3.1.js"></script>
     <script type="text/javascript">
         $(function(){

             $('ul li').click(function(){
                 // this指的是當前點擊的DOM對象 ,使用$(this)轉化jquery對象
                 $(this).addClass('active').siblings('li').removeClass('active');
             })
         })
     </script>
    
</body>
</html>

3 .toggleClass()

若是存在(不存在) 就刪除(添加) 一個類 .

語法 : toggleClass("box")

$('span').click(function(){
    //動態的切換class類名爲active
    $(this).toggleClass('active')
})

　　值操做

1 . html

獲取值 :

語法 :

html() 是獲取選中標籤元素中全部的內容

$('#box').html();

設置值 : 設置該元素的全部內容會替換掉標籤中原來的內容.

$('#box').html('<a href="https://www.baidu.com">百度一下</a>');

2 . text

　　text() 獲取匹配元素中包含的文本內容

語法 :

$('#box').text();

　　設置值 : 設置該全部的文本內容.

$('#box').text('<a href="https://www.baidu.com">百度一下</a>');

　　注意 : 值爲標籤的時候不會被渲染爲鏢旗屬性,只會被當成值渲染到瀏覽器中.

3 . val

　　獲取值

　　 val() 用於表單控件中獲取值,好比 : input , textarea , select

　　設置值 :

$('input').val('設置了表單控件中的值')；

4. 使用jQuery 操做 input 的 value 值

　　　　點擊 --- >>> ○○○○○○

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

JQuery

一 . jQuery 的介紹

二 . jQuery 的使用

1 . 使用jQuery 的基本步驟

2 . jQuery 的入口函數和 $ 符號

3 . js中的DOM對象 和 jQuery對象 比較 ********

三 . jQuery 的選擇器

1 . jQuery 的基本選擇器

2 . 層級選擇器

3 . 基本過濾選擇器

4 . 屬性選擇器

5 . 篩選選擇器

四 . jQuery 的動畫效果

顯示動畫

隱藏動畫

開關式顯示隱藏動畫

滑入和滑出

淡入淡出動畫

自定義動畫 *********

中止動畫

五 . jQuery 的屬性操做

attr()

removeAttr()

prop()

關於 attr() 和 prop() 的區別

類樣式操做

值操做

　　1 . 使用jQuery 的基本步驟

　　2 . jQuery 的入口函數和 $ 符號

　　3 . js中的DOM對象和 jQuery對象比較 ********

　　1 . jQuery 的基本選擇器

　　2 . 層級選擇器

　　3 . 基本過濾選擇器

　　4 . 屬性選擇器

　　5 . 篩選選擇器

　　顯示動畫

　　隱藏動畫

　　開關式顯示隱藏動畫

　　滑入和滑出

　　淡入淡出動畫

　　自定義動畫 *********

　　中止動畫　　　

　　attr()

　　removeAttr()

　　prop()

　　關於 attr() 和 prop() 的區別

　　類樣式操做

　　值操做