《女神異聞錄5S》IGN 8分:易上手的即時戰鬥引人入勝

阿新 • • 發佈：2021-02-13

技術標籤：javaweb

一、jQuery介紹

jQuery：javaScript和查詢(Query)，是輔助js開發的js類庫

核心思想：write less，do more(寫的更少，做的更多)，所以它實現了很多瀏覽器的相容問題

使用jQuery一定要引入jQuery庫；jQuery中的$是一個函式；

如何為按鈕新增單擊響應函式？

①使用jQuery查詢到標籤物件

②使用標籤物件.click(function())

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset= 
"UTF-8">
    <title>Title</title>
    <script type="text/javascript" src = "../script/jQuery-1.7.2.js"></script>
    <script type="text/javascript">
        /*window.onload = function () {
            var btnObj = document.getElementById("btnId");
            //alert(btnObj);//dom物件

            btnObj.onclick = function () {
                alert("js 原生的單擊事件");
            }
        }*/ 

        $(function () {//表示頁面載入完成之後，相當於window.onload = function(){}
            // var btnObj = document.getElementById("btnId");
            // alert(btnObj);
            var $btnObj = $("#btnId");//表示按id查詢標籤物件
            $btnObj.click(function () {//鎖定單擊事件
                alert("jQuery 單擊事件" 
);
            });
        });
    </script>
</head>
<body>
    <button id = "btnId">SayHello</button>
</body>
</html>

1.核心思想

$ 是 j Q u e r y 的核心函數，能完成 j Q u e r y 的很多功能，是jQuery的核心函式，能完成jQuery的很多功能，是jQuery的核心函數，能完成jQuery的很多功能，()就是呼叫$這個函式

①傳入引數[函式]時，表示頁面載入完成後，相當於window.onload = function(){}

②傳入引數[HTML字串]時，會幫我們建立這個html標籤物件

③傳入引數為[選擇器字串]時，$("#id屬性值")；//id選擇器，根據id查詢標籤物件

$(“標籤名”);//標籤名選擇器，根絕指定的標籤名查詢標籤物件

$(".class屬性值")；//型別選擇器，可以根據class屬性查詢標籤物件

④傳入引數為[DOM]物件時，會把dom物件轉換為jQuery物件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jQuery-1.7.2.js"></script>
    <script type="text/javascript">
        //核心函式
        $(function () {
            alert("頁面載入完之後，自動呼叫");

            $("<div>" +
                "        <span>div-span1</span>" +
                "        <span>div-span2</span>" +
                "    </div>").appendTo("body");

            alert($("button").length);

            var btnObj = document.getElementById("btn01");
            alert(btnObj);
            alert($(btnObj));
        });
    </script>
</head>
<body>
    <div>
        <span>div-span1</span>
        <span>div-span2</span>
    </div>
    <button id="btn01">按鈕1</button>
    <button>按鈕2</button>
    <button>按鈕3</button>
</body>
</html>

2.jQuery物件和dom物件的區分

Dom物件：

①通過getElementById()查詢出老的標籤物件是Dom物件

②通過getElementsByName()查詢出來的標籤物件

③通過getElementsByTagName()查詢出來的標籤物件

④通過createElement()方法建立的物件是Dom物件

Dom物件alert出來的效果是：[object HTMLxxxElement]

jQuery物件：

①通過jQuery提供的API建立的物件

②通過jQuery包裝的Dom物件

③通過jQuery提供的API查詢到的物件

jQuery物件alert出來的效果是：[object Object]

jQuery物件的本質是什麼？

jQuery物件是Dom物件的陣列 + jQuery提供的一系列功能函式

jQuery物件和Dom物件使用的區別？

jQuery物件不能使用Dom物件的屬性和方法

Dom物件也不能使用jQuery物件的屬性和方法

3.Dom物件和jQuery物件互轉

①dom物件轉化為jQuery物件(重點)

1)現有DOM物件

2)$(DOM物件)就可以轉換為jQuery物件

②jQuery物件轉為dom物件(重點)

1)先有jQuery物件

2)jQuery物件(下標取出相應的DOM物件)
在這裡插入圖片描述

4.基本選擇器(重點)

在這裡插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div,span,p{
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }

        dic.mini{
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size: 12px;
        }

        div.hide{
            display: none;
        }
    </style>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            //1.選擇id為one的元素“background.color”，“#bbffaa”
            $("#btn1").click(function () {
                alert("單擊事件");
            });

            //2.選擇class為mini的所有元素
            $("#btn2").click(function () {
                $(".mini").css("background.color","#bbffaa");
            });

            //3.選擇元素名是div的所有元素
            $("#btn3").click(function () {
                $(".div").css("background-color","#bbffaa");
            });

            //4.選擇所有元素
            $("#btn4").click(function () {
                $("*").css("background-color","#bbffaa");
            });

            //5.選擇所有的span元素為two的元素
            $("#btn5").click(function () {
                $("span,#two").css("background-color","#bbffaa");
            });
        });
    </script>
</head>
<body>
<!--    <div>
            <h1>基本選擇器</h1>
        </div>-->
    <input type="button" value="選擇id為one的元素" id="btn1"/>
    <input type="button" value="選擇class為mini的所有元素" id="btn2"/>
    <input type="button" value="選擇元素名是div的所有元素" id="btn3"/>
    <input type="button" value="選擇所有元素" id="btn4"/>
    <input type="button" value="選擇所有的span元素為two的元素" id="btn5"/>
<br>
    <div class="one" id="one">
        id為one，class為one的div
        <div class="mini">class為mini</div>
    </div>
    <div class="one" id="two" title="test">
        id為two，class為one，title為test的div
        <div class="mini" title="other">class為mini，title為other</div>
        <div class="mini" title="test">class為mini，title為test</div>
    </div>
    <div class="one">
        <div class="mini">class為mini</div>
        <div class="mini">class為mini</div>
        <div class="mini">class為mini</div>
        <div class="mini"></div>
    </div>
    <div class="mini">
        <div class="mini">class為mini</div>
        <div class="mini">class為mini</div>
        <div class="mini">class為mini</div>
        <div class="mini" title="test">class為mini,title為test</div>
    </div>
    <div style="display: none" class="none">style的display為"none"的div</div>
    <div class="hide">class為“hide”的div</div>
    <div>
        包含input的type為“hidden”的div<input type="hidden" size="8">
    </div>
    <span class="one" id="span">^^span元素^^</span>
</body>
</html>

5.層級選擇器

6.基本過濾選擇器

在這裡插入圖片描述
:first 獲取第一個元素

:last 獲取最後一個元素

:not(selector) 去除所有與給定選擇器匹配的元素

:even 匹配所有索引值為偶數的元素，從0開始

:odd 匹配所有索引值為奇數的元素，從0開始

:eq(index) 匹配一個給定索引值的元素

:gt(index) 匹配所有大於給定索引值的元素

:lt(index) 匹配所有小於給定索引值的元素

:header 匹配如h1,h2,h3之類的標題元素

:animated 匹配所有正在執行動畫效果的元素

7.內容過濾器

內容：

:contains(text)

:empty

:has(selector)

:parent
在這裡插入圖片描述

8.屬性過濾器

在這裡插入圖片描述

9.表單過濾器

在這裡插入圖片描述

:input 匹配所有input，textarea，select和button元素

:text 匹配所有文字輸入框

:password 匹配所有的密碼輸入框

:radio 匹配所有的單選框

:checkbox 匹配所有的複選框

:submit 匹配所有提交按鈕

:image

:reset 匹配所有的重置按鈕

:button 重置所有按鈕

:file 匹配所有檔案域

:hidden 匹配所有不可見元素，或者type為hidden的元素

10.jQuery元素的篩選

在這裡插入圖片描述
eq() 獲取給定索尹的元素

first() 獲取第一個元素

last() 獲取最後一個元素

filter(exp) 留下匹配的元素

is() 判斷是否匹配給定的選擇器，只要有一個匹配就返回，true

has(exp) 返回包含有匹配選擇器的元素的元素

not(exp) 刪除匹配選擇器的元素

children(exp) 返回匹配給定選擇器的子元素

find(exp) 返回匹配給定選擇器的後代元素

next() 返回當前元素的下一個兄弟元素

nextAll() 返回當前元素後面的所有兄弟元素

nextUntil() 返回當前元素到指定匹配的元素位置的後面的元素

parent() 返回父元素

prev(exp) 返回當前元素的上一個兄弟元素

prevAll() 返回當前元素前面所有的兄弟元素

prevUntil(exp)返回當前元素到制定匹配的元素為止的前面元素

siblings(exp) 返回所有兄弟元素

add() 把add匹配的選擇器的元素新增到當前jquery物件中

二、jQuery的屬性操作

1.屬性

HTML程式碼/文字/值

html([val|fn])

text([val|fn])

val([val|fn|arr])

html()：它可以設定和獲取起始標籤和結束標籤中的內容，跟dom屬性innerHTML一樣

text()：。。。跟dom屬性中的innerText一樣

val()：可以設定和獲取表單項的value屬性值，跟dom屬性的value一樣

attr()：可以設定和獲取屬性的值，不推薦操作checked、readOnly、selected、disabled等

prop()：可以設定和獲取屬性的值，只推薦操作checked、readOnly、selected、disabled等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //不傳引數是獲取，傳遞引數是設定
            /*alert($("div").html());//獲取
            $("div").html("<h1>我是div中的標題1</h1>");//設定*/

            alert($("div").text());
            $("div").text("<h1>我是div中的標題1</h1>");//設定
        });
    </script>
</head>
<body>
    <div>我是div標籤<span>我是div中的span</span></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //attr
            alert($(":checkbox:first").attr("name"));//獲取
            $(":checkbox:first").attr("name","abc");//設定
        });
    </script>
</head>
<body>
<body>
    <br/>
    多選：
    <input name="checkbox" type="checkbox" value="checkbox1"/>checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2
</body>
</body>
</html>

2.jQuery練習

DOM的增刪改查：

內部插入：

appenTo() a.appendTo(b)：把a插入到b子元素末尾，成為最後一個子元素

perpendTo() a.prepend(b)：把a插到b所有子元素前面，成為第一個子元素

外部插入：

insertAfter() a.insertAfter(b)：得到ba

insertBefore() a.insertBefore(b)：得到ab

替換：

replaceWith() a.replaceWith(b)：用b替換掉a

replaceAll() a.replaceAll(b)：用a替換掉所有的b

刪除：

remove() a.remove()：刪除a標籤

empty() a.empty()：清空a標籤中的內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        //頁面載入完成
        $(function () {
            //第一個按鈕【選中新增到右邊】
            $("button:eq(0)").click(function () {
                $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
            });

            //第二個按鈕【選中新增到右邊】
            $("button:eq(1)").click(function () {
                $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
            });

            //第三個按鈕【選中新增到右邊】
            $("button:eq(2)").click(function () {
                $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
            });

        });
    </script>
</head>
<body>

    <div id="left">
        <select multiple = "multiple" name="sel01">
            <option value="opt01">選項1</option>
            <option value="opt02">選項2</option>
            <option value="opt03">選項3</option>
            <option value="opt04">選項4</option>
            <option value="opt05">選項5</option>
            <option value="opt06">選項6</option>
            <option value="opt07">選項7</option>
            <option value="opt08">選項8</option>
        </select>

        <button>選中新增到右邊</button>
        <button>選中新增到左邊</button>
    </div>
    <div id="right">
        <select multiple = "multiple" name="sel02">
        </select>
        <button>選中刪除到左邊</button>
        <button>選中刪除到右邊</button>
    </div>
</body>
</html>

動態新增和刪除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {


            //給submit按鈕鎖定單擊事件
            $("#addEmpButton").click(function () {
                //獲取輸入框，姓名、郵箱、工資的內容
                var name = $("#empName").val();
                var email = $("#email").val();
                var salary = $("#salary").val();


                //建立一個行標籤物件，新增到顯示資料的表格中
                var $trObj = $("<tr>" +
                    "<td>" +name + "</td>" +
                    "<td>" + email + "</td>" +
                    "<td>" + salary + "</td>" +
                    "<td><a href=\"deleteEmp?is-002\">Delete</a></td>" +
                    "</tr>");
                //新增到顯示資料的表格中
                $trObj.appendTo($("#employeeTable"));

                //給新增的行的a標籤幫上事件
                $trObj.find("a").click();
            });


            //給刪除的標籤繫結單擊事件
            $('a').click(function () {
                //alert(1);

                var $trObj = $(this).parent().parent();
                var name = $trObj.find("td:first").text();

                /**
                 * confirm是js語言提供的一個確認提示框函式，給它傳什麼它就提示什麼
                 */
                if (confirm("你確定要刪除[" + name + "]嗎？")) {
                    $trObj.remove();
                }

                //可以阻止元素的預設行為
                return false;
            });
        });
    </script>
</head>
<body>

    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th> </th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>[email protected].com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id-001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>[email protected].com</td>
            <td>8000</td>
            <td><a href="deleteEmp?is-002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>[email protected].com</td>
            <td>8000</td>
            <td><a href="deleteEmp?is-003">Delete</a></td>
        </tr>
    </table>

    <div id="formDiv">
        <h4>新增新員工</h4>
        <table>
            <tr>
                <td class = "word">name：</td>
                <td class="inp">
                    <input type="text" name="empName" id="empName"/>
                </td>
            </tr>
            <tr>
                <td class="word">email：</td>
                <td class="inp">
                    <input type="text" name="email" id="email"/>
                </td>
            </tr>
            <tr>
                <td class="word">salary：</td>
                <td class="inp">
                    <input type="text" name="salary" id="salary"/>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        Submit
                    </button>
                </td>
            </tr>
        </table>
    </div>

</body>
</html>

3.CSS樣式操作

addClass()：新增樣式

removeClass()：刪除樣式

toggleClass()：有就刪除，沒有就新增

offset()：獲取和設定元素的座標

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 260px;
        }

        div.whiteorder{
            border: 2px white solid;
        }

        div.redDiv{
            background-color: red;
        }

        div.blueBorder{
            border: 5px blue solid;
        }

    </style>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            var $dicEle = $('div:first');

            $('#btn01').click(function () {
                //addClass()--向被選元素新增一個或多個類
                $dicEle.addClass("redDiv blueBorder");
            });

            $('#btn02').click(function () {
                //removeClass()--從被選元素刪除一個或多個類
                $dicEle.removeClass();
            });

            $('#btn03').click(function () {
                //toggleClass()--對被選元素進行新增/刪除類的切換操作
                $dicEle.toggleClass('redDiv')
            });

            $('#btn04').click(function () {
                //offset()--返回第一個匹配元素相對於文件的位置
                var pos = $divEle.offset();
                //console.log(pos);

                /*$divEle.offset(){
                    top:100px;
                    left:50px;
                }*/
            });
        });
    </script>
</head>
<body>
    <table align="center">
        <tr>
            <td>
                <div class="border">
                </div>
            </td>

            <td>
                <div class="btn">
                    <input type="button" value="addClass()" id="btn01"/>
                    <input type="button" value="removeClass()" id="btn02"/>
                    <input type="button" value="toogleClass()" id="btn03"/>
                    <input type="button" value="offset()" id="btn04"/>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

4.jQuery動畫

基本動畫：

show()：將隱藏的元素顯示

hide()：將可見的元素隱藏

toggle()：可見就隱藏，不可見就顯示

以上動畫方法都可以新增引數：

①第一個引數是動畫執行的時長，以毫秒為單位

②第二個引數是動畫的回撥函式(動畫完成後自動呼叫的函式)

淡入淡出動畫：

fadeln()：淡入(慢慢可見)

fadeOut()：淡出(慢慢消失)

fadeTo()：在指定時長內慢慢的將透明度修改到指定的值，0透明，1完全透明，0.5半透明

fadeToggle()：淡入/淡出切換

5.jQuery事件操作

$(function()){};和window.onload = function(){}的區別？

他們分別在什麼時候觸發？

①jQuery的頁面載入完成後是瀏覽器的核心解析完頁面的標籤建立好DOM物件之後就會馬上執行

②原生js的頁面載入完成後，除了要等瀏覽器核心解析完標籤建立好DOM物件，還要等標籤顯示時需要的內容載入完成

他們觸發的順序？

①jQuery頁面載入完成後先執行

②原生js的頁面載入完成之後

他們執行的次數？

①原生js的頁面載入完成後，只會執行最後一次的賦值函式

②jQuery的頁面載入完成後，是全部把註冊的function函式，依次順序全部執行

jQuery中其他的事件處理方法：

click()：可以繫結單擊事件，可以觸發單擊事件

mouseover()：滑鼠移入事件

mouseout()：滑鼠移出事件

bind()：可以給元素一次性繫結一個或多個事件

one()：使用上跟bind一樣，但one方法繫結的事件只會響應一次

unbind()：跟bind相反的操作，解除事件的繫結

live()：也是用來繫結事件，可以用來繫結選擇器匹配的所有元素的事件，哪怕這個元素是後面動態規劃創建出來的也有效

6.事件的冒泡

事件的冒泡：父子元素同時監聽同一個事件，當觸發子元素的事件的時候，同一個事件也被傳遞到了父元素的事件裡去響應

如何阻止事件冒泡？

在事件函式體內，return false；可以阻止事件的冒泡傳遞

javaScript事件物件

事件物件：是封裝有觸發的事件資訊的一個javaScript物件

如何獲取javaScript事件物件？

在給元素繫結時，在事件的function(event)引數列表中新增一個引數，這個引數名，取名為event，這就是js傳遞事件處理函式的事件物件

如：

①原生js獲取事件物件

window.onload = function(){
	document.getElementById("areaDiv").onclick = function(event){
		console.log(event);
	}
}

②jQuery程式碼獲取事件物件

$(function(){
	$("#areaDiv").click(function(event){
		console.log(event);
	});
});

③使用bind同時對多個事件繫結同一個函式，怎麼獲取當前操作是什麼事件？

$(function(){
	$("#areaDiv").bind("mouseover mouseout",function(event){
		if(event.typr == "mousepver"){
			console.log("滑鼠移入");
		}else if(event.type == "mouseout"){
			console.log("滑鼠移出");
		}
	});
});