前端筆記5 JQuery 語法及應用

原創 linyuancsdn 2019-08-28 22:12

JQuery 概念

jQuery是一個快速、簡潔的JavaScript框架 , (JavaScript代碼庫 )

	jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
	jQuery的核心特性可以總結爲：
	1- 具有獨特的鏈式語法和短小清晰的多功能接口；
	2- 具有高效靈活的css選擇器，並且可對CSS選擇器進行擴展；
	3- 擁有便捷的插件擴展機制和豐富的插件。
	4- jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

2006年1月14日，John正式宣佈以jQuery的名稱發佈自己的程序庫

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高開發效率

JQurey 基本語法

文件下載

JQuery的版本下載 (jquery下載所有版本（實時更新）)

http://www.jq22.com/jquery-info122

JQuery的版本 類似於 Inter 芯片版本號

jquery.js (開發版)和 jquery.min.js(發佈版) 區別
內容完全一致 , 區別在於文本格式
jquery.js 格式 良好的, 有利於程序員進行閱讀 適用於測試、學習和開發
jquery.min.js 省略了多餘的換行和空格 , 使文件儘量的做到體積最小
文件體積小, 有利於加快文件在網絡中的傳輸速度(適用於發佈的產品和項目)

文件引入

<!-- 引入外部JQuery 文件 -->
<script src="js/jquery.js" type="text/javascript"></script>

頁面加載函數

主要在頁面加載完畢之後, 再去執行函數中的內容

使用加載函數的原因

script 標籤 在對象標籤之前 , 獲取對象不起作用

<script>
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        alert(123);
    }
</script>
<button id="btn">測試</button>

script 標籤 在對象標籤之後,才起作用

<button id="btn">測試</button>
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        alert(123);
    }
</script>

出現這種情況的原因

程序從上到下開始解釋運行

對象標籤還未加載, 就是用 JS代碼 獲取該對象 , 失敗

window.onload JS原生頁面加載函數

// 使用window.onload 優化代碼
<script>
    // 頁面加載完畢之後, 執行該函數
    window.onload = function(){
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            alert(123);
        }
    }
</script>
<button id="btn">測試</button>

JQuery 的頁面加載函數

JQuery(document).ready(匿名函數);

$(document).ready(匿名函數);

$(匿名函數);

<!-- 引入外部JQuery 文件 -->
<script src="js/jquery.js"></script>
<script>
$(function(){
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        alert(123);
    }
});
</script>
<button id="btn">測試</button>

頁面加載函數對比

JQuery 和 window.onload

區別 JQuery window.onload
執行順序 先執行 後執行
執行時機 網頁中所有DOM文檔結構繪製完畢後即刻執行，可能與DOM元素關聯的內容（圖片、flash、視頻等）並沒有加載完 必須等待網頁中所有的內容加載完畢後（包括圖片、flash、視頻等）才能執行
編寫個數 可以書寫多個頁面加載函數, 按順序執行 只能書寫一個, 如果存在多個, 後寫的覆蓋之前的

語法

工廠函數

$() 具有多種用法

選擇器

selector $(“CSS選擇器”) 獲取指定的 DOM 元素

支持CSS 選擇器 $("#id") $(".class") $(“標籤”)

方法action()

核心方法
文檔處理
效果方法

事件方法

語法 和 DOM的區別 沒有 on 關鍵字

$("").click(function(){
    // 事件綁定的內容
});

操作樣式常用方法

addClass() 添加類名

css() 給元素設置樣式

// 給div 添加 一組樣式
$(".dv").css("height","300px");
// 添加多組樣式
$(".dv").css({"height":"300px","width":"300px"});

添加一組樣式

$("").css("a","a1")

添加多組樣式

$("").css({"a":"a1","b":"b1","c":"c1"})

jQuery代碼風格

“$”等同於“ jQuery ”

鏈式操作

對一個對象進行多重操作，並將操作結果返回給該對象

隱式迭代

通過 選擇器獲取對象之後, 如果獲取的是一個數組對象, 無需手動遍歷, 自行迭代

<ul>
    <li>宮駿騰來電話啦</li>
    <li>宮駿騰來電話啦</li>
    <li>宮駿騰來電話啦</li>
    <li>宮駿騰來電話啦</li>
    <li>宮駿騰來電話啦</li>
    <li>宮駿騰來電話啦</li>
</ul>
</body>
<script>
// 原始JS 的書寫方式
    var lis = document.getElementsByTagName("li");
    for(let i in lis){
        lis[i].style.backgroundColor = "green";
    }
// 使用JQ 的方式
	$("li").css("background-color","red");
</script>

DOM對象和jQuery對象

DOM對象和jQuery對象分別擁有一套獨立的方法，不能混用

命名的時候, 最好養成習慣如果一個對象是使用Jquery 的方式獲取的, 最好在變量前添加 $ , 表示這是一個JQuery對象

變量名取值
DOM對象  var p = document.getElememtById("pid");
JQuery   var $p = $("#pid");

$("#title").html( );
等同於
document.getElementById("title").innerHTML;

對象之間相互轉換

DOM 轉換爲JQ對象

$(Dom對象)  就成爲了 JQuery 對象

JQ 對象 轉換爲 DOM對象

$("p")[0]  就轉換成爲了 DOM對象
$("p").get(0);

JQuery 選擇器

CSS選擇器

基本

分類

標籤
類
id
全局
並集
交集

<script>
    $(function(){
        /*$("h1").css("background-color","red");
        $(".dv").css("background-color","green");
        $("#pid").css("background-color","blue");*/
        $(".dv,#pid").css("background-color","green");
        $("h1.dv").css("background-color","green");
    });
</script>
</head>
<body>
    <div class="dv">人間四月天</div>
    <p id="pid">人間四月天</p>
    <h1>人間四月天</h1>
    <h1 class="dv">人間四月天</h1>
</body>

層級

後代選擇器
子選擇器
相鄰元素選擇器
同輩元素選擇器

環境準備

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body>div,p{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            float: left;
            margin-left: 20px;
        }
        div>div,p>div{
            width: 40px;
            height: 40px;
            border: 1px solid blue;
            float: left;
            margin-left: 5px;
        }

    </style>

</head>
<body>
<br><br>
    <button id="btn1">後代選擇器</button>  &nbsp; &nbsp; &nbsp; &nbsp;
    <button id="btn2">子選擇器</button>  &nbsp; &nbsp; &nbsp; &nbsp;
    <button id="btn3">相鄰元素選擇器</button>  &nbsp; &nbsp; &nbsp; &nbsp;
    <button id="btn4">同輩元素選擇器</button>  &nbsp; &nbsp; &nbsp; &nbsp;
    <br><br>
    <hr>
    <br><br>
    <div class="father1">
        <div class="son11"></div>
        <div class="son12"></div>
    </div>
    <div class="father2">
        <div class="son21"></div>
        <div class="son22"></div>
    </div>
    <div class="father3">
        <div class="son31"></div>
        <div class="son32"></div>
    </div>
    <div class="father4">
        <div class="son41"></div>
        <div class="son42"></div>
    </div>

    <p class="father5">

    </p>
</body>

案例代碼


<script src="js/jquery.js"></script>
<script>
   $(function(){
       $("#btn1").click(function(){
           $("body div").css("background-color","gold");
       });
       $("#btn2").click(function(){
           $("div>div").css("background-color","gold");
       });
       $("#btn3").click(function(){
           $(".father1+div").css("background-color","gold");
       });
       $("#btn4").click(function(){
           $(".father2~div").css("background-color","gold");
       });
   });

屬性

環境準備

<br>
<button id="btn1">包含屬性</button>  &nbsp; &nbsp; &nbsp; &nbsp;
<button id="btn2">屬性以什麼開頭</button>  &nbsp; &nbsp; &nbsp; &nbsp;
<button id="btn3">屬性以什麼結尾</button>  &nbsp; &nbsp; &nbsp; &nbsp;
<button id="btn4">屬性包含什麼</button>  &nbsp; &nbsp; &nbsp; &nbsp;
<br><br>
<hr>
用戶 <input type="text" name="username"> <br><br>
密碼 <input type="password" name="userpassword">  <br><br>
郵箱 <input type="email" name="email">    <br><br>
電話 <input type="text">  <br><br>
地址 <input type="text">  <br><br>

案例代碼

    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("input[name]").css("background-color","red");
            });
            $("#btn2").click(function(){
                $("input[name^='user']").css("background-color","red");
            });
            $("#btn3").click(function(){
                $("input[name$='word']").css("background-color","red");
            });
            $("#btn4").click(function(){
                $("input[name*='a']").css("background-color","red");
            });

        });
    </script>
</head>
<body>
<br>
<button id="btn1">包含屬性</button>  &nbsp; &nbsp; &nbsp; &nbsp;
<button id="btn2">屬性以什麼開頭</button>  &nbsp; &nbsp; &nbsp; &nbsp;
<button id="btn3">屬性以什麼結尾</button>  &nbsp; &nbsp; &nbsp; &nbsp;
<button id="btn4">屬性包含什麼</button>  &nbsp; &nbsp; &nbsp; &nbsp;
<br><br>
<hr>
    用戶 <input type="text" name="username"> <br><br>
    密碼 <input type="password" name="userpassword">  <br><br>
    郵箱 <input type="email" name="email">    <br><br>
    電話 <input type="text" name="word">  <br><br>
    地址 <input type="text">  <br><br>
</body>

條件過濾選擇器

基本過濾

:first
:last
:even
:odd
:eq(index)
:gt(index)
:lt(index)
:not(選擇器)

環境準備

<style>
        *{
            margin: 0;
            padding: 0;
        }
        body>div,p{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            float: left;
            margin-left: 20px;
        }
        div>div,p>div{
            width: 40px;
            height: 40px;
            border: 1px solid blue;
            float: left;
            margin-left: 5px;
            background-color: blue;
        }
    </style>
<body>
<br><br>
    <button id="btn1">測試first last</button>&nbsp;&nbsp;
    <button id="btn2">指定位置 </button>&nbsp;&nbsp;
    <button id="btn3">取反</button>&nbsp;&nbsp;
    <button id="btn4">間隔</button>&nbsp;&nbsp;
    <br><br>
    <hr>
    <br><br>
    <div class="father1">
        <div class="son11"></div>
        <div class="son12"></div>
    </div>
    <div class="father2">
        <div class="son21"></div>
        <div class="son22"></div>
    </div>
    <div class="father3">
        <div class="son31"></div>
        <div class="son32"></div>
    </div>
    <div class="father4">
        <div class="son41"></div>
        <div class="son42"></div>
    </div>

    <p class="father5">

    </p>
</body>

代碼案例

<script src="js/jquery.js"></script>
<script>
   $(function(){
       $("#btn1").click(function(){
           // $("body div:first").css("background-color","gold");
           $("body div:last").css("background-color","gold");
       });
       $("#btn2").click(function(){
           // $("div:eq(8)").css("background-color","gold");
           // $("div:lt(8)").css("background-color","gold");
          $("div:gt(9)").css("background-color","gold");
       });
       $("#btn3").click(function(){
           $("div:not(.father3)").css("background-color","gold");
       });
       $("#btn4").click(function(){
           // $("div:even").css("background-color","gold");
           $("div:odd").css("background-color","gold");
       });
   });
</script>

可見性過濾

:visible
:hidden

表單元素選擇器

:input
:text
:enabled
:disabled
:checked
:selected

篩選方法

使用一些方法來替代 選擇器的使用

獲取子代元素

children(選擇器);

獲取同輩元素

next(選擇器);
prev(選擇器);
siblings(選擇器);

獲取父輩元素

parent(選擇器);

JQuery 事件

基礎事件

鼠標事件

click()
mouseover()
mouseout()
mouseenter()
mouseleave()

    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("ul>li").mouseover(function(){
                // 鼠標指向高亮顯示
                //  this 是dom 對象
                $(this).css("background-color","skyblue");
            });
            $("ul>li").mouseout(function(){
                // 鼠標指向高亮顯示
                //  this 是dom 對象
                $(this).css("background-color","#fff");
            });
        });
    </script>
</head>
<body>
<ul>
    <li>今天是中伏第一天</li>
    <li>今天是中伏第一天</li>
    <li>今天是中伏第一天</li>
    <li>今天是中伏第一天</li>
    <li>今天是中伏第一天</li>
    <li>今天是中伏第一天</li>
    <li>今天是中伏第一天</li>
    <li>今天是中伏第一天</li>
</ul>
</body>

對比兩個方法

案例

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $(".father").mouseover(function(){
                alert("移入father");
            });

        });
    </script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

區別

mouseover : 在子父容器之間進行切換, 也可以觸發

mouseenter : 在子父容器之間進行切換, 不會觸發

鍵盤事件

使用瀏覽器的調試功能 查看如下圖片
在這裏插入圖片描述

window事件

resize() 調整頁面大小的時候觸發

scroll 當滾動軸滾動時觸發

表單事件

blur

focus

change

複合事件

鼠標光標懸停

hover 相當於鼠標移入和移除事件

語法: $() .hover( function(){鼠標移入操作},

​ function(){鼠標移除操作});

如果兩個方法完全一致, 可以省略其中一個

 $("ul>li").hover(function(){
     // 鼠標指向高亮顯示
     $(this).css("background-color","skyblue");
 },function(){
     // 鼠標移除恢復到原來顏色
     $(this).css("background-color","#fff");
 });

鼠標連續點擊

toggle() 1.9 版本之後失效

事件冒泡

案例

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $(".father").mouseover(function(){
                alert("移入father");
            });
            $(".son").mouseover(function(){
                alert("移入son");
            });
        });
    </script>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

子級容器有事件, 父級容器也有事件, 先執行子級容器的事件, 再執行父級容器的時間

防止事件冒泡 event.stopPropagation()

$("p").click(function(event){  // 把事件函數作爲參數傳遞到 function 中
    event.stopPropagation();    // do something
  });

綁定事件

bind

bind(事件類型,[可選數據],處理函數)

綁定單個事件

$("#btn").bind("click",function(){alert("單擊彈窗")});

綁定多個事件

// $("#btn").bind({事件1, 事件2});
$("#btn").bind({
    click:function(){
        alert("單擊彈窗");
    },
    mouseover:function(){
        alert("移入彈窗");
    }});

unbind

瀏覽器中, 雙擊標籤頁 是關閉標籤頁,

取消設置雙擊沒有任何作用, 就相當於解綁事件

   <script>
        $(function() {
            $("#bindTest").click(function(){
                $("#btn").bind("click",f1);
            });
            $("#unbindTest").click(function(){
                $("#btn").unbind("click",f1);
            });
        });
        function f1(){
            alert("彈窗");
        }
    </script>
</head>
<body>
<button id="bindTest">bindTest</button> <button id="unbindTest">unbindTest</button>
<hr>
    <button id="btn">測試按鈕</button>
</body>

事件委派 dalegate

事件的觸發> 當一些標籤元素, 在事件定義的時候還未出現, 事件綁定不能成功

語法 $(“父選擇器”).delegate(“子選擇器”,“事件”,函數);

1- 可以給還未出現在頁面上的 標籤添加事件

2- 把事件綁定在父容器上, 批量給子標籤添加事件 效率高

   <script>
        function f1(){
            alert("彈窗");
        }
        $(function(){
            // $(".btn").bind("click",f1);
            // 1- 選擇器, 父元素中的哪些子元素
            // 2- 事件
            // 3- 執行函數
            $("body").delegate(".btn","click",f1);

            $("#add").click(function(){
                // 1- 創建一個button 對象
                // 2- 把該對象添加到 body 中
                var $btn =  $("<button class=\"btn\">測試按鈕</button>");
                $("body").append($btn);

            });
        });

    </script>
</head>
<body>
    <button id="add">add</button>
    <hr>
    <button class="btn">測試按鈕</button>
</body>

on 最根本的綁定事件

看源碼, 以上所有方法都是建立在on上的

// $(".btn").bind("click",f1);
// $(".btn").on("click",f1);

// $("body").delegate(".btn","click",f1);
// on 和  delegate 參數順序不同
// 1- 事件 2- 子選擇器  3- 執行函數
$("body").on("click",".btn",f1);

on 和 delegate 參數順序不同

效果

顯示隱藏

show

show([speed],[callback]) 速度, 回調函數

speed:三種預定速度之一的字符串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)

fn:在動畫完成時執行的函數，每個元素執行一次。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("#btn").bind("click",function(){
                $("div").show(5000,function(){
                    // 顯示完成之後執行的內容
                    // alert("我完全顯示出來了");
                    $(this).hide(4000);
                });
            });
           /* $("#btn1").bind("click",function(){
                $("div").hide(5000);
            });*/

        });
    </script>
</head>
<body>
    <button id="btn">顯示圖片</button><button id="btn1">隱藏圖片</button>
    <hr>
    <div style="width: 500px;height: 400px;display: none;">
        <img src="img/1.jpg" alt="" style="height: 100%;width: 100%;">
    </div>
</body>

使用toggle 來優化代碼

當隱藏的時候 就顯示, 當顯示的時候就隱藏

fadeIn / out / to

淡入淡出

slideDown / up

滑動

animate 自定義動畫

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("#btn").bind("click",function(){
                $("div>img").animate({right:"0"},5000,function(){
                    $(this).animate({bottom:"0"},5000,function(){
                        $(this).animate({left:"0"},5000,function(){
                            $(this).animate({top:"0"},5000,function(){});
                        });
                    });
                });
            });
           /* $("#btn1").bind("click",function(){
                $("div").hide(5000);
            });*/
            
        });
    </script>
</head>
<body>
    <button id="btn">顯示圖片</button><button id="btn1">隱藏圖片</button>
    <hr>
    <div style="width: 500px;height: 400px;position: relative;border: 1px solid red;">
        <img src="img/1.jpg" alt="" style="height: 10%;width: 10%;position:absolute">
    </div>
</body>

導航欄滑動 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        .main{
            width: 500px;
            margin-top: 50px;
            margin-left: auto;
            margin-right: auto;
            font-size: 20px;
        }
        .main ul{
            background-color: pink;
            display: none;
        }
        .main>li{
            float: left;
            margin-left: 5px;
            background-color: skyblue;
        }

    </style>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            // 1- 給.main>li 添加鼠標移入和移除事件
            $(".main>li").mouseover(function(){
                $(this).children("ul").slideDown(1000);
            });
            $(".main>li").mouseout(function(){
                $(this).children("ul").slideUp(1000);
            });
            // 2- 當前的li 中ul 顯示出來

        });
    </script>
</head>
<body>
<ul class="main">
    <li>李白的詩
        <ul>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
        </ul>
    </li>
    <li>李白的詩
        <ul>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
        </ul>
    </li>
    <li>李白的詩
        <ul>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
        </ul>
    </li>
    <li>李白的詩
        <ul>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
        </ul>
    </li>
    <li>李白的詩
        <ul>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
            <li>靜夜思</li>
        </ul>
    </li>
</ul>
</body>
</html>

動畫排隊機制

stop()

停止所有在指定元素上正在運行的動畫。
如果隊列中有等待執行的動畫(並且clearQueue沒有設爲true)，他們將被馬上執行

$(function(){
    // 1- 給.main>li 添加鼠標移入和移除事件
    $(".main>li").mouseover(function(){
        $(this).children("ul").stop().slideDown(1000);
    });
    $(".main>li").mouseout(function(){
        $(this).children("ul").stop().slideUp(1000);
    });
});

代碼優化

第一次優化

$(".main>li").hover(function(){
    $(this).children("ul").stop().slideDown(500);
},function(){
    $(this).children("ul").stop().slideUp(500);
});

第二次優化

$(".main>li").hover(function() {
    $(this).children("ul").stop().slideToggle(500);
});

DOM操作

樣式操作

css() 給元素設置樣式

添加一組樣式

$("").css("a","a1")

添加多組樣式

$("").css({"a":"a1","b":"b1","c":"c1"})

// 給div 添加 一組樣式
$(".dv").css("height","300px");
// 添加多組樣式
$(".dv").css({"height":"300px","width":"300px"});

樣式類 class 的操作

addClass()  添加類名
removeClass() 移除類名
hasClass( ) 
toggleClass() 自動切換

#團購模塊案例
 /* $(".box").mouseover(function(){
	    $(this).addClass("hoverstyle");
	});
	$(".box").mouseout(function(){
	    $(this).removeClass("hoverstyle");
	});*/
 簡化
$(".box").hover(function(){
    $(this).toggleClass("hoverstyle");
});

內容和value值操作

HTML 內容操作

html() 可以對HTML代碼進行操作，類似於JS中的innerHTML
html() 如果沒有參數是  獲取選擇器標籤中所有的代碼文本, 包括標籤
	獲取的是 第一個匹配元素的內容
html(字符串參數) 如果有參數 設置選擇器中的所有代碼 爲參數的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
        // 查看標籤內容
        // var s =  $("ul").html();
        // 設置標籤內容
           var s =  $("ul").html("<li>hello</li>");
           console.log(s);
        });
    </script>
</head>
<body>
    <ul>
        <li>今天0802</li>
        <li>今天0802</li>
        <li>今天0802</li>
        <li>今天0802</li>
        <li>今天0802</li>
        <li>今天0802</li>
    </ul>
</body>
</html>

text()

text() 如果沒有參數是  獲取選擇器標籤中所有的代碼文本, 不包括標籤
	獲取的是 所有匹配元素的內容
text(字符串參數) 如果有參數 設置選擇器中的所有代碼 爲參數的值

val()

val()可以獲取或設置元素的value屬性值
有參數 爲設置值
沒有參數 爲獲取值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            // 在鼠標移除文本行的時候, 獲取輸入框中的內容
            $("input").blur(function(){
                // 獲取 input\ 對象的 val屬性值
                // $(this).val()
                // 如果用戶輸入的內容超過 6 個字符, 在文本框中提示, 不能超過6 個字符
                var value = $(this).val();
                if(value.length <= 6){
                    alert(value);
                }else{
                    $(this).val("不能超過6位");
                }
            });
        });
    </script>
</head>
<body>
    用戶名 : <input type="text" >
</body>
</html>

節點操作

查找

根據CSS 選擇器 獲取指定對象

創建

工廠函數$() 的三個作用:

$(css選擇器) 獲取指定對象

$(DOM對象) 把DOM 對象轉換爲 JQery 對象

$(Html 標籤文本) 創建該標籤對象

$("<button class='add'>新增的按鈕</button>");

插入

內部插入子節點

$("A").append($("B"))   將B 標籤添加到 A 標籤的尾部
$("A").appendTO($("B"))	將A 標籤添加到 B 標籤的尾部
$("A").prepend($("B"))	將B 標籤添加到 A 標籤的頭部
$("A").prependTO($("B"))將A 標籤添加到 B 標籤的頭部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
               // $(".sup").append($(".sub"));
              //  $(".sup").prepend($(".sub"));
              //  $(".sub").appendTo($(".sup"));
                $(".sub").prependTo($(".sup"));
            });
        });
    </script>
</head>
<body>
    <button id="btn">添加按鈕</button>
    <hr>
    <div class="sup" style="height: 200px;width: 200px;background-color: skyblue; ">
        <p style="height: 30px;width: 100%;background-color: pink; ">我就是來湊數的</p>
    </div>
    <div class="sub" style="height: 100px;width: 100px;background-color: gold; "></div>
</body>
</html>
元素外部插入節點
$(A).after (B) 將B 添加到A之後
$(A).before(B) 將B 添加到A之前
$(A).insertAfter (B) 將A添加到B之後
$(A).insertBefore (B) 將A添加到B之前 
$(function(){
    $("#btn").click(function(){
       // 1- 創建新的div 對象
        var $dv = $("<div></div>");
        $dv.css({"height": "100px","width": "100px","background-color": "blue"});
       // 將新建的 div 塊添加到 sub 之後
        // $(".sup").after($dv);
        // 主從調換 方法 由 after  切換爲 insertAfter
        //  $dv.insertAfter($(".sup"));
        // 將新建的 div 塊添加到 sup 之前
        // $(".sup").before($dv);
    });
});

刪除

方法名
empty() 空的 刪除匹配的元素集合中所有的子節點。
remove() 從DOM中刪除所有匹配的元素。
detach() 從DOM中刪除所有匹配的元素。

detach()與remove()不同的是，

remove()但除了這個元素本身得以保留之外，其他的比如綁定的事件，附加的數據等都會被移除。detach()所有綁定的事件、附加的數據等都會保留下來。

演示案例 detach() 保留事件函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        var $sup;
        $(function(){
            $(".sup").bind("click",function(){
                alert("這是 sup 的點擊事件");
            });

            $("#btn1").click(function(){
                $(".sup").empty();
            });
            $("#btn2").click(function(){
                // 會把綁定的事件 移除 , 即使恢復對象, 事件無法恢復
                $sup =  $(".sup").remove();
            });
            $("#btn3").click(function(){
                // 不會把綁定的事件移除 , 恢復對象, 事件一併恢復
                $sup = $(".sup").detach();
            });
            $("#btn4").click(function(){
                $("body").append($sup);
            });

        });
    </script>
</head>
<body>
<button id="btn1">刪除按鈕</button>
<button id="btn2">remove按鈕</button>
<button id="btn3">detach按鈕</button>
<button id="btn4">恢復按鈕</button>
<hr>
<div class="sup" style="height: 100px;width: 100px;background-color: skyblue; ">
</div>
</body>
</html>

替換

方法名
A.replaceWith(B) 使用 B 替換 A
A.replaceAll(B) 使用 A 替換 B 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                var $li = $("<li>你好 畢吉倫</li>");
               //  $("ul li:eq(3)").replaceWith($li);
                $li.replaceAll($("ul li:lt(3)"));
            });
        });
    </script>
</head>
<body>
<button id="btn">替換按鈕</button>
<hr>
<ul>
    <li>你好 中國</li>
    <li>你好 中國</li>
    <li>你好 中國</li>
    <li>你好 中國</li>
    <li>你好 中國</li>
</ul>
</body>
</html>

複製

clone() 沒有參數 和參數爲false 相同 只複製 標籤本身

clone() 參數爲true 除了複製 標籤本身外, 還複製標籤的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $(".clone").click(function(){
                alert(123);
            });
            $("#btn").click(function(){
                $(".clone:first").clone(true).appendTo($("body"));
            });
        });
    </script>
</head>
<body>
<button id="btn">複製按鈕</button>
<hr>
<button class="clone">按鈕測試</button>
</body>
</html>

節點屬性操作

方法名
attr() 只有一個參數, 獲取指定屬性的值
有兩個參數, 設置指定屬性的值
prop() 只有一個參數, 獲取指定屬性的值
有兩個參數, 設置指定屬性的值
1.8.3 版本之後 新設計的
removeAttr() 移除指定屬性 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                // 一個參數爲查看
               // var s =  $("img").attr("src");
               // alert(s);
                // l兩個參數爲修改
                // $("img").attr("src","img/2.jpg");
                $("img").prop("src","img/2.jpg");
            });
        });
    </script>
</head>
<body>
    <button id="btn">修改屬性按鈕</button>
    <hr>
    <img src="img/1.jpg" alt="" style="height: 200px;">
</body>
</html>

節點遍歷

each()

each( ) ：規定爲每個匹配元素運行的函數

以每一個匹配的元素作爲上下文來執行一個函數。

意味着，每次執行傳遞進來的函數時，函數中的this關鍵字都指向一個不同的DOM元素（每次都是一個不同的匹配元素）。而且，在每次執行函數時，都會給函數傳遞一個表示作爲執行環境的元素在匹配的元素集合中所處位置的數字值作爲參數（從零開始的整型）。 返回 ‘false’ 將停止循環 (就像在普通的循環中使用 ‘break’)。返回 ‘true’ 跳至下一個循環(就像在普通的循環中使用’continue’)。

function(一個參數){} i 意思爲 下標

function(兩個參數){} i 意思爲 下標 e 爲 每一個遍歷到的 對象 (this)

// 隔兩行換色案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            width: 200px;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            // 使用原生 JS的 方式
            /*var lis = document.getElementsByTagName("li");
            for(let i = 0 ; i < lis.length ; i++){
                if(i % 3 == 0){
                    lis[i].style.backgroundColor = "blue";
                }
            }*/
            // 使用 JQ
            $("ul>li").each(function(i){
                // i 是 下標   this 指代當前對象
                if(i % 3 == 0){
                    $(this).css("background-color","skyblue");
                }
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>又有颱風要過境啦</li>
        <li>又有颱風要過境啦</li>
        <li>又有颱風要過境啦</li>
        <li>又有颱風要過境啦</li>
        <li>又有颱風要過境啦</li>
        <li>又有颱風要過境啦</li>
        <li>又有颱風要過境啦</li>
        <li>又有颱風要過境啦</li>
        <li>又有颱風要過境啦</li>
        <li>又有颱風要過境啦</li>
        <li>又有颱風要過境啦</li>
        <li>又有颱風要過境啦</li>
        <li>又有颱風要過境啦</li>
        <li>又有颱風要過境啦</li>
        <li>又有颱風要過境啦</li>
    </ul>
</body>
</html>

返回false

// 使用 JQ
$("ul>li").each(function(i){
    // i 是 下標   this 指代當前對象
    if(i % 3 == 0){
        $(this).css("background-color","skyblue");
    }
    if( i == 9){
    	// 當 i = 9 的時候 , 循環停止運行
        return false;
    }
});

index

子元素數組.index(子元素) 子元素在數組中的下標

get

獲取指定下標的元素, 注意 會把 JQuery 對象轉換爲 DOM 對象

end()

結束當前鏈條中的最近的篩選操作，並將匹配元素集還原爲之前的狀態

JQuery 可以支持 鏈式編程

案例 : 把ul 列表中 的 第一個li 和 最後一個li 都改變樣式爲XXX

想要表達的意思爲 
我的電腦的顏色 和 我的鍵盤的顏色
我的電腦的鍵盤的顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            width: 200px;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            // 使用兩條語句
            // $("ul li").first().css("background-color","skyblue");
            // $("ul li").last().css("background-color","gold");
            // $("ul li").first().css("background-color","skyblue").last().css("background-color","gold");

            // .end 可以讓主語 迴歸到原始狀態, 結束當前鏈條中的最近的篩選操作，並將匹配元素集還原爲之前的狀態
            $("ul li").first().css("background-color","skyblue").end().last().css("background-color","gold");
        });
    </script>
</head>
<body>
    <ul>
        <li>又有颱風要過境啦</li>
        <li>又有颱風要過境啦</li>
        <li>又有颱風要過境啦</li>
        <li>又有颱風要過境啦</li>
    </ul>
</body>
</html>

Css-Dom操作

語法
css() 設置或返回匹配元素的樣式屬性
height() 設置或返回匹配元素的高度
width() 設置或返回匹配元素的寬度
offset() 返回以像素爲單位的top和left座標。僅對可見元素有效 (返回的是一個對象)
設置座標 對象.offset({left:20,right:30})
offsetParent() 返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被設置爲relative、absolute或fixed的元素
position() 返回第一個匹配元素相對於父元素的位置
scrollLeft() 參數可選。設置或返回匹配元素相對滾動條左側的偏移
scrollTop() 參數可選。設置或返回匹配元素相對滾動條頂 ect

案例

鼠標移入高亮顯示功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            width: 200px;
        }
        .gold{
            background-color:gold;
        }
    </style>
    <script src="js/jquery.js"></script>
    
</head>
<body>
<ul>
    <li>電腦鼠標鍵盤音響</li>
    <li>電腦鼠標鍵盤音響</li>
    <li>電腦鼠標鍵盤音響</li>
    <li>電腦鼠標鍵盤音響</li>
    <li>電腦鼠標鍵盤音響</li>
    <li>電腦鼠標鍵盤音響</li>
    <li>電腦鼠標鍵盤音響</li>
    <li>電腦鼠標鍵盤音響</li>
    <li>電腦鼠標鍵盤音響</li>
    <li>電腦鼠標鍵盤音響</li>
</ul>
</body>
</html>

五種方式 完成案例功能

<script>
        $(function(){
            // 第一種方式
           /* $("ul>li").mouseover(function(){
                $(this).css("background-color","gold");
            });
            $("ul>li").mouseout(function(){
                $(this).css("background-color","#fff");
            });*/
            // 第二種方式
           /* $("ul>li").mouseover(function(){
                $(this).css("background-color","gold").siblings().css("background-color","#fff");
            });*/
           // 第三種方式
            /*$("ul>li").mouseover(function(){
                $(this).addClass("gold");
            });
            $("ul>li").mouseout(function(){
                $(this).removeClass("gold");
            });*/
            // 第四種方式
            /*$("ul>li").mouseover(function(){
                $(this).toggleClass("gold");
            });
            $("ul>li").mouseout(function(){
                $(this).toggleClass("gold");
            });*/
            // 第五種方式
            $("ul>li").hover(function(){
                $(this).toggleClass("gold");
            });
        });
    </script>

圖片輪播器

帶有 小圓點切換功能的 輪播器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 600px;
            height: 400px;
            margin: 30px auto ;
            position: relative;
        }
        .main img{
            width: 100%;
            height: 100%;
        }
        .main ul{
            width: 100px;
            height: 20px;
            position: absolute;
            left: 250px;
            bottom: 50px;
            background-color: skyblue;
            list-style: none;
        }
        .main ul>li{
            width: 12px;
            height: 12px;
            float: left;
            margin: 4px 4px;
            background-color: #ccc;
            border-radius: 10px;
            text-align: center;
        }
    </style>

    <script src="js/jquery.js"></script>
    <script>
        $(function(){
            // 第一張圖片顯示 其他隱藏
            $(".main img").first().siblings("img").hide();

            //給ul中的 所有li 添加 鼠標移入事件
            $(".main ul>li").mouseover(function(){
                // 獲取鼠標移入的小圓點的下標
                var index1 = $(".main ul>li").index(this);
                // 指定該下標位置的img 顯示, 其它隱藏
                // alert(index1);
                $(".main img").eq(index1).show().siblings("img").hide();
               
               // 當前小圓點 樣式改變
                $(this).css("background-color","orange").siblings().css("background-color","#ccc");
            });
        });
    </script>
</head>
<body>
    <div class="main">
        <img src="img/1.jpg" alt="">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
        <img src="img/4.jpg" alt="">
        <img src="img/5.jpg" alt="">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

二級聯動

基礎數據 pro_city.js 文件

// 創建省份數組
var province = ["請選擇", "北京", "上海", "天津", "重慶", "山東", "河南", "湖北", "湖南", "廣東", "河北", "山西", "遼寧", "吉林", "內蒙古", "黑龍江", "江蘇", "浙江", "安微", "福建", "江西", "四川", "貴州", "雲南", "陝西", "甘肅", "青海", "廣西", "西藏", "寧夏", "新疆", "海南", "香港", "澳門", "臺灣"];
var city = [[],
    ["", "東城", "西城", "海淀", "朝陽", "豐臺", "石景山", "通州", "順義", "房山", "大興", "昌平", "懷柔", "平谷", "門頭溝", "密雲", "延慶"],
    ["", "黃浦", "浦東", "徐匯", "長寧", "靜安", "普陀", "閘北", "虹口", "楊浦", "閔行", "寶山", "嘉定", "金山", "松江", "青浦", "奉賢", "崇明"],
    ["", "和平", "河西", "南開", "河東", "河北", "紅橋", "東麗", "津南", "西青", "北辰", "濱海新區"],
    ["", "萬州", "黔江", "涪陵", "渝中", "大渡口", "江北", "沙坪壩", "九龍陂", "南岸", "北碚", "渝北", "巴南", "長區", "江津", "合川", "永川", "南川", "綦江", "大足", "銅梁"],
    ["", "濟南", "青島", "淄博", "棗莊", "東營", "煙臺", "濰坊", "濟寧", "泰安", "威海", "日照", "濱州", "德州", "聊城", "臨沂", "菏澤", "萊蕪"],
    ["", "鄭州", "開封", "洛陽", "平頂山", "安陽", "鶴壁", "新鄉", "焦作", "濮陽", "許昌", "漯河", "三門峽", "商丘", "周口", "駐馬店", "南陽", "信陽", "濟源"],
    ["", "武漢", "黃石", "十堰", "荊州", "宜昌", "襄陽", "鄂州", "荊門", "黃岡", "孝感", "咸寧", "仙桃", "潛江", "恩施", "神農架", "天門", "隨州"],
    ["", "長沙", "株洲", "湘潭", "衡陽", "邵陽", "岳陽", "常德", "張家界", "益陽", "婁底", "郴州", "永州", "懷化", "湘西"],
    ["", "廣州", "深圳", "珠海", "汕頭", "佛山", "東莞", "中山", "潮州", "惠州", "湛江", "肇慶", "江門", "茂名", "韶關", "揭陽", "雲浮", "梅州", "汕尾", "河源", "陽江", "清遠"],
    ["", "石家莊", "保定", "滄州", "衡水", "邢臺", "邯鄲", "張家口", "廊坊", "唐山", "秦皇島", "承德"],
    ["", "太原", "大同", "陽泉", "長治", "晉城", "朔州", "晉中", "運城", "忻州", "臨汾", "呂梁"],
    ["", "瀋陽", "大連", "鞍山", "撫順", "本溪", "丹東", "錦州", "營口", "阜新", "遼陽", "盤錦", "鐵嶺", "朝陽", "葫蘆島"],
    ["", "長春", "吉林", "四平", "遼源", "通化", "白山", "白城", "松原", "延邊", "長白山", "梅河口", "公主嶺"],
    ["", "呼和浩特", "包頭", "烏海", "赤峯", "通遼", "鄂爾多斯", "呼倫貝爾", "巴彥淖爾", "烏蘭察布", "興安盟", "錫林郭勒", "阿拉善"],
    ["", "哈爾濱", "齊齊哈爾", "雞西", "鶴崗", "雙鴨山", "大慶", "伊春", "佳木斯", "七臺河", "牡丹江", "黑河", "綏化", "大興安嶺"],
    ["", "南京", "無錫", "徐州", "常州", "蘇州", "南通", "連雲港", "淮安", "鹽城", "揚州", "鎮江", "秦州", "宿州"],
    ["", "杭州", "寧波", "溫州", "紹興", "湖州", "嘉興", "金華", "衢州", "舟山", "台州", "麗水"],
    ["", "合肥", "蕪湖", "蚌埠", "馬鞍山", "宿州", "安慶", "淮南", "銅陵", "黃山", "宣城", "池州", "滁州", "淮北", "阜陽", "六安", "毫州"],
    ["", "福州", "廈門", "漳州", "泉州", "三明", "莆田", "南平", "龍巖", "寧德", "平潭"],
    ["", "南昌", "九江", "上饒", "撫州", "宜春", "吉安", "贛州", "景德鎮", "萍鄉", "新餘", "鷹潭"],
    ["", "成都", "綿陽", "自貢", "攀枝花", "瀘州", "德陽", "廣元", "遂寧", "內江", "樂山", "資陽", "宜賓", "南充", "達州", "雅安", "阿壩", "甘孜", "涼山", "廣安", "巴中", "眉山"],
    ["", "貴陽", "六盤水", "遵義", "銅仁", "黔西", "畢節", "安順", "黔東", "黔南"],
    ["", "昆明", "曲靖", "玉溪", "保山", "昭通", "麗江", "普洱", "臨滄", "德宏", "怒江", "迪慶", "大理", "楚雄", "紅河", "文山", "西雙版納"],
    ["", "西安", "寶雞", "咸陽", "渭南", "銅川", "治中", "安康", "商洛", "榆林", "延安", "漢中", "楊陵"],
    ["", "蘭州", "嘉峪關", "金昌", "白銀", "天水", "酒泉", "張掖", "武威", "定西", "隴南", "平涼", "慶陽", "臨夏", "甘南"],
    ["", "西寧", "海東", "海北", "黃南", "海南", "果洛", "玉樹", "海西"],
    ["", "南寧", "柳州", "桂林", "梧州", "北海", "防城港", "欽州", "貴港", "玉林", "百色", "賀州", "河池", "來賓", "崇左"],
    ["", "拉薩", "昌都", "日喀則", "山南", "那曲", "阿里", "林芝"], ["", "銀川", "石嘴山", "吳忠市", "固原市", "中衛"],
    ["", "烏魯木齊", "克拉瑪依", "吐魯番", "哈密", "昌吉", "博爾塔", "巴音郭楞", "阿克蘇", "克孜勒蘇柯爾克", "喀什", "和田", "伊犁", "塔城", "阿勒泰", "石河子", "阿拉爾", "圖木舒克", "五家渠", "北屯", "鐵門關", "雙河市"],
    ["", "海口", "三亞", "三沙"],
    ["", "中西區", "灣仔區", "東區", "南區", "油尖旺", "深水埗", "九龍城", "黃大仙", "觀塘", "葵青", "荃灣", "屯門", "元朗", "北區", "大埔", "沙田", "西貢", "離島"],
    ["", "花地瑪堂", "聖安多尼堂", "大堂", "望德堂", "風順堂", "嘉模堂", "聖方濟各堂"], ["", "臺北", "新北", "桃園", "臺中", "臺南", "高雄", "基隆", "新竹", "嘉義"]
];

html 頁面數據

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/pro_city.js"></script>

</head>
<body>
    省份: <select id="province"></select> &nbsp;&nbsp;&nbsp;&nbsp; 
    城市 : <select id="city"></select>
</body>

</html>

添加 JQuery 支持

<script src="js/pro_city.js"></script>
<script src="js/jquery.js"></script>
<script>
    $(function(){
        // 1- 獲取數組中的每一個數據
        for(let i in province){
            // 創建數據對象
            // 2- 使用pro對象 添加所有數據對象
            $("<option value='"+i+"'>"+province[i]+"</option>").appendTo($("#province"));
        }
        // 切換事件
        $("#province").change(function(){
            // 清空標籤 內的 所有內容
            $("#city").empty();
            var index1 = $(this).val();
            for(let i in city[index1]){
                $("<option value='"+i+"'>"+city[index1][i]+"</option>").appendTo($("#city"));
            }
        });
    });
</script>

廣告跟隨 滾動軸案例

案例準備

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 200px;
            height: 600px;
            position: absolute;
        }
        #leftImg{

            top: 60px;
            left: 0;
        }
        #rightImg{
            top: 60px;
            right: 0;
        }
        body{
            text-align: center;
            font-size: 20px;
            line-height: 30px;
        }
    </style>
    
</head>
<body>
<img src="img/豎圖.png" id="leftImg">
<img src="img/豎圖.png" id="rightImg">

<br>誰敢橫刀立馬, 唯我彭大將軍
<br>誰敢橫刀立馬, 唯我彭大將軍
<br>誰敢橫刀立馬, 唯我彭大將軍
<br>誰敢橫刀立馬, 唯我彭大將軍
<br>誰敢橫刀立馬, 唯我彭大將軍
<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬,
唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬,
唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬,
唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬,
唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬,
唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬,
唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬,
唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬,
唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬,
唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬,
唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬,
唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬,
唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬,
唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬,
唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍<br>誰敢橫刀立馬, 唯我彭大將軍
</body>
</html>

JQuery代碼實現

<script>
    $(function(){
        // 滾動軸滾動的事件
        $(window).scroll(function(){
            // 獲取 滾動軸 離頂部的距離
            var top1 = $(this).scrollTop();
            // 圖片 使用動畫效果 向下滾動
            $("img").stop().animate({"top":(top1+60)+"px"},1000);
        });
    });
</script>

優化

var offset = $("#rightImg").offset();
// 滾動軸滾動的事件
$(window).scroll(function(){
    // 獲取 滾動軸 離頂部的距離
    var top1 = $(this).scrollTop();
    // 圖片 使用動畫效果 向下滾動
    $("img").stop().animate({"top":(top1+offset.top)+"px"},1000);
});

圖片跟隨鼠標案例

當鼠標移動的時候 一張圖片需要跟隨鼠標移動

案例準備

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width: 40px;
            height: 40px;
            position: absolute;
        }
    </style>
</head>
<body>
<img src="img/笑臉.jpg" alt="">
</body>
</html>

Event對象

event.pageX

event.pageY

JQuery 代碼實現

<script src="js/jquery.js"></script>
<script>
    $(function(){
        // 鼠標移動 圖片也移動, 鼠標移動觸發事件
        // 綁定一個事件, 事件對象就會 自動生成, 可以作爲方法的參數 傳入到方法中
        $(document).mousemove(function(eve){
            // 獲取鼠標的當前位置
            var x = eve.pageX;
            var y = eve.pageY;
            // 根據鼠標位置 設置 圖片位置
            $("img").offset({left:x-20,top:y-20});
        });
    });
</script>

新聞向上滾動案例

環境準備

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .news{
            width: 650px;
            margin: 100px auto;
        }
        .news .title{
            background-color: skyblue;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .news .content{
            font-size: 22px;
            line-height: 30px;
        }
        .news .content ul{
            list-style-position: inside;
        }
    </style>

</head>
<body>
    <div class="news">
        <div class="title">
            <h3>熱點新聞</h3>
        </div>
        <div class="content">
            <ul>
                <li>國家遠程會診及互聯網中心肝膽專家委員會湖南分會成立..</li>
                <li>支付寶：全國5省市上線電子結婚證</li>
                <li>人人車聯合創始人王清翔卸任法定代表人及執行董事</li>
                <li>知存科技完成近億元A輪融資，用於存算一體AI芯片量..</li>
                <li>達能內地首個跨境電商自有倉南沙開張</li>
                <li>支付寶錦鯉信小呆刷爆信用卡，一年過去錦鯉真的那麼美..</li>
                <li>濱州48個村入選淘寶村、9個鄉鎮入選淘寶鎮</li>
                <li>攜程生死符</li>
                <li>消息稱騰訊投資快手金額將在10至15億美元</li>
                <li>當代互聯網造車術：用愛發電？</li>
            </ul>
        </div>
    </div>
</body>
</html>

JQuery代碼實現


 $(function(){
     /*
     1- 第一個li 動畫效果 慢慢向 上 隱藏
     2- 當完全隱藏之後 把第一個li 樣式迴歸到原始狀態
     3- 把已經完全看不見的該li 添加到 ul的末尾
     4- 讓該過程循環執行
      */
     // 獲取當前 li的高度
     window.setInterval("myScroll()",50);
 });
 // 第一行li 的margin-top的值
 var marginTop1 = 0;
function myScroll(){
     $(".content ul li").first().animate({"margin-top":marginTop1--},0,function(){
         var $first=$(this);
         if ((-marginTop1) >= $first.height()) {
             // 當動畫完成之後 執行的代碼
             $(this).css("margin-top", 0).appendTo($(this).parent());
             marginTop1 = 0;
         }
     });
 }

添加鼠標移入移除效果

 $(function(){
     // 獲取當前 li的高度
     window.setInterval("myScroll()",50);
     // 給大的 main div 添加事件
     $(".news").mouseover(function(){
         stop1 = true;
     }).mouseout(function(){
         stop1 = false;
     });
 });
 // 第一行li 的margin-top的值
 var marginTop1 = 0;
 var stop1 = false;
function myScroll(){
    if(stop1) return;
     $(".content ul li").first().animate({"margin-top":marginTop1--},0,function(){
         var $first=$(this);
         if ((-marginTop1) >= $first.height()) {
             // 當動畫完成之後 執行的代碼
             $(this).css("margin-top", 0).appendTo($(this).parent());
             marginTop1 = 0;
         }
     });
 }

設置 div 遮蓋之下的文字

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

前端筆記6 表單校驗與正則表達式

linyuancsdn 2019-08-28 22:12:59

前端筆記4 JS BOM&DOM

linyuancsdn 2019-07-30 22:19:44

JavaScript-day02

CXY_ZPH 2018-08-20 20:44:04

jQuery01

CXY_ZPH 2018-08-20 20:44:04

JavaScript-day01

CXY_ZPH 2018-08-20 20:44:04

JavaScript04

CXY_ZPH 2018-08-20 20:44:04

HTML02

CXY_ZPH 2018-08-20 20:43:53

HTML03

CXY_ZPH 2018-08-20 20:43:53

Jquery02

CXY_ZPH 2018-08-20 20:43:53

HTML-day01

CXY_ZPH 2018-08-20 20:43:17

JavaScript03

CXY_ZPH 2018-08-20 20:43:16