Java Web(2)-jQuery下

山丘i發表於2020-07-24

一、jQuery的屬性操作

html() 它可以設定和獲取起始標籤和結束標籤中的內容，跟 dom 屬性 innerHTML 一樣。
text() 它可以設定和獲取起始標籤和結束標籤中的文字，跟 dom 屬性 innerText 一樣。
val() 它可以設定和獲取表單項的 value 屬性值，跟 dom 屬性 value 一樣

val 方法同時設定多個表單項的選中狀態：

<!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>

        $(function () {

       /*
            // 批量操作單選
            $(":radio").val(["radio2"]);
            // 批量操作帥選框的選中
            $(":checkbox").val(["checkbox1","checkbox2"]);
            // 批量多選下拉的選中狀態
            $("#multiple").val(["mul1","mul2"]);
            // 單選的下拉框選中狀態
            $("#single").val(["sin2"]);

            */
            $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","mul1","mul2","sin2"]);

        });

    </script>


</head>
<body>
單選： <input name="radio" type="radio" value="radio1"/>radio1
<input name="radio" type="radio" value="radio2"/>radio2
<br/>
多選：
<input name="checkbox" type="checkbox" value="checkbox1"/>checkbox1
<input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2
<input name="checkbox" type="checkbox" value="checkbox3"/>checkbox3
<br/>

下拉多選 ：
<select id="multiple" multiple="multiple" size="4">
    <option value="mul1">mul1</option>
    <option value="mul2">mul2</option>
    <option value="mul3">mul3</option>
    <option value="mul4">mul4</option>
</select>
<br/>
下拉單選 ：
<select id="single">
    <option value="sin1">sin1</option>
    <option value="sin2">sin2</option>
    <option value="sin3">sin3</option>
</select>

</body>
</html>

二、jQuery練習一

1. 全選、全不選、反選

<!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>
        $(function () {
            // 1. 給全選繫結事件
            $("#checkedAllBtn").click(function () {
                $(":checkbox").prop("checked",true);
            });
            // 2. 給全不選繫結事件
            $("#checkedNoBtn").click(function () {
                $(":checkbox").prop("checked",false);
            });

            // 3. 給反選繫結事件
            $("#checkedRevBtn").click(function () {
                // 在each遍歷的function函式中 ，有一個this物件。這個this物件是當前正在遍歷到的dom物件
                $(":checkbox[name='items']").each(function () {
                    this.checked = !this.checked;
                });
            });

            // 4. 檢測是否選滿
            // 先獲取總的個數
            var allCount = $(":checkbox[name='items']").length;
            // 再獲取選中的個數
            var checkedCount = $(":checkbox[name='items']:checked").length;
            // if (allCount == checkedCount){
            //     $("#checkbox").prop("checked",true);
            // } else{
            //     $("#checkbox").prop("checked",false);
            // }

            $("#checkbox").prop("checked",allCount == checkedCount);


            // 5. 提交事件
            $("#sendBtn").click(function () {
                // 獲取選中的球類
                $(":checkbox[name='items']:checked").each(function () {
                    alert(this.value);
                });
            });

            

        });

    </script>

</head>
<body>

    <form method="post" action="">
        你愛好的運動是？
        <input type="checkbox" id="checkAll"> 全選/全部選

        <br>

        <input type="checkbox" name="items" value="足球">足球
        <input type="checkbox" name="items" value="籃球">籃球
        <input type="checkbox" name="items" value="羽毛球">羽毛球
        <input type="checkbox" name="items" value="乒乓球">乒乓球

        <br>

        <input type="button" id="checkedAllBtn" value="全 選" />
        <input type="button" id="checkedNoBtn" value="全不選" />
        <input type="button" id="checkedRevBtn" value="反 選" />
        <input type="button" id="sendBtn" value="提 交" />

    </form>
</body>
</html>

三、DOM的增刪改

內部插入：

appendTo() a.appendTo(b) 把 a 插入到 b 子元素末尾，成為最後一個子元素
prependTo() a.prependTo(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 標籤裡的內容

四、jQuery練習二

1. 從左到右，從右到左

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        select{
            width: 100px;
            height: 140px;
        }

        div{
            width: 130px;
            float: left;
            text-align: center;
        }
    </style>



    <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").appendTo($("select:eq(1)"));
            });

            // 第三個按鈕，選中刪除到左邊
            $("button:eq(2)").click(function () {
                $("select:eq(1) option:selected").appendTo($("select:eq(0)"));
            });

            // 第四個按鈕，全部刪除到左邊
            $("button:eq(3)").click(function () {
                $("select:eq(1) option").appendTo($("select:eq(0)"));
            });


        });

    </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="rigth">
    <select multiple="multiple" name="sel02"> </select>
    <button>選中刪除到左邊</button>
    <button>全部刪除到左邊</button>
</div>

</body>
</html>

2. 動態新增、刪除表格記錄

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="style/css.css">
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>

    <script type="text/javascript">

        $(function () {

            // 建立一個用於複用的刪除的函式
            var deleteFun = function () {

                alert("刪除 操作 的function : " + this);
                //在事件響應的function函式中，有一個this物件。這個this物件是當前正在響應事件的dom物件
                var $trObj = $(this).parent().parent();

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

                /**
                 * confirm 是JavaScript語言提供的一個確認提示框函式。你給它傳什麼，它就提示什麼
                 * 當使用者點選了確定，就返回true。當使用者點選了取消，就返回false
                 */
                if( confirm("你確定要刪除[" + name +  "]嗎？") ){
                    $trObj.remove();
                }

                return false; //可以阻止 元素的預設行為。
            };


            // 給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?id=002\">Delete</a></td>"+
                        "</tr>") ;

                // 新增到表格中
                $trObj.appendTo($("#employeeTable"));

                // 給新增的行的a標籤繫結事件
                $trObj.find("a").click(deleteFun);

            });

            // 給刪除的a標籤繫結單擊事件
            $("a").click(deleteFun);
        });

    </script>
</head>
<body>
    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=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>

五、CSS 樣式操作

addClass() 新增樣式
removeClass() 刪除樣式
toggleClass() 有就刪除，沒有就新增樣式
offset() 獲取和設定元素的座標

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	
	div{
		width:100px;
		height:260px;
	}
	
	div.border{
		border: 2px white solid;
	}
	
	div.redDiv{
		background-color: red;
	}
	
	div.blackDiv{
		border: 5px blue solid;
	}
</style>

<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	

	$(function(){
		/*
CSS
css(name|pro|[,val|fn])       讀寫匹配元素的樣式屬性。 
								a.css('color')取出a元素的color
								a.css('color',"red")設定a元素的color為red

CSS 類

addClass(class|fn) 			為元素新增一個class值;<div class="mini big">
removeClass([class|fn]) 	刪除元素的class值；傳遞一個具體的class值，就會刪除具體的某個class
							a.removeClass()：移除所有的class值

**/
		
		var $divEle = $('div:first');
		
		$('#btn01').click(function(){
			//addClass() - 向被選元素新增一個或多個類
			$divEle.addClass("redDiv blackDiv");
		});
		
		$('#btn02').click(function(){
			//removeClass() - 從被選元素刪除一個或多個類 
			$divEle.removeClass()
		});

		
		$('#btn03').click(function(){
			//toggleClass() - 對被選元素進行新增/刪除類的切換操作 
			//切換就是如果具有該類那麼刪除，如果沒有那麼新增上
			$divEle.toggleClass("redDiv");
		});
		
		$('#btn04').click(function(){
			//offset() - 返回第一個匹配元素相對於文件的位置。
			var os = $divEle.offset();
			//注意通過offset獲取到的是一個物件，這個物件有兩個屬性top表示頂邊距，left表示左邊距
			alert("頂邊距："+os.top+" 左邊距："+os.left);
			
			//呼叫offset設定元素位置時，也需要傳遞一個js物件，物件有兩個屬性top和left
			//offset({ top: 10, left: 30 });
			 $divEle.offset({
				 top:50,
				 left:60
			 }); 
		});
		
	})
</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="toggleClass()" id="btn03"/>
					<input type="button" value="offset()" id="btn04"/>
				</div>
			</td>
		</tr>
	</table>
	
	<br /> <br />

	<br /> <br />
</body>
</html>

六、jQuery動畫

基本動畫：

show() 將隱藏的元素顯示
hide() 將可見的元素隱藏
toggle() 可見就隱藏，不可見就顯示。

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

第一個引數是動畫執行的時長，以毫秒為單位
第二個引數是動畫的回撥函式 (動畫完成後自動呼叫的函式)

淡入淡出動畫：

fadeIn() 淡入（慢慢可見）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定時長內慢慢的將透明度修改到指定的值。0 透明，1 完成可見，0.5 半透明
fadeToggle() 淡入/淡出切換

1. CSS_動畫品牌展示

需求：

點選按鈕的時候，隱藏和顯示卡西歐之後的品牌。
當顯示全部內容的時候，按鈕文字為“顯示精簡品牌” 然後，小三角形向上。所有品牌產品為預設顏色。
當只顯示精簡品牌的時候，要隱藏卡西歐之後的品牌，按鈕文字為“顯示全部品牌” 然後小三形向下。並且把佳能，尼康的品牌顏色改為紅色（給 li 標籤新增 promoted 樣式即可）

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

        body {
            font-size: 12px;
            text-align: center;
        }

        a {
            color: #04D;
            text-decoration: none;
        }

        a:hover {
            color: #F50;
            text-decoration: underline;
        }

        .SubCategoryBox {
            width: 600px;
            margin: 0 auto;
            text-align: center;
            margin-top: 40px;
        }

        .SubCategoryBox ul {
            list-style: none;
        }

        .SubCategoryBox ul li {
            display: block;
            float: left;
            width: 200px;
            line-height: 20px;
        }

        .showmore , .showless{
            clear: both;
            text-align: center;
            padding-top: 10px;
        }

        .showmore a , .showless a{
            display: block;
            width: 120px;
            margin: 0 auto;
            line-height: 24px;
            border: 1px solid #AAA;
        }

        .showmore a span {
            padding-left: 15px;
            background: url(img/down.gif) no-repeat 0 0;
        }

        .showless a span {
            padding-left: 15px;
            background: url(img/up.gif) no-repeat 0 0;
        }

        .promoted a {
            color: #F50;
        }
    </style>

    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>

    <script type="text/javascript">

        $(function () {

            // 1. 初始狀態
            var categoty = $("li:gt(5):not(:last)");
            categoty.hide();

            var $promoptedCategory = $("ul:first li").filter(":contains('佳能'), :contains('尼康'), :contains('奧林巴斯')");

            // 2. 給按鈕繫結單擊事件
            $(".showmore a").click(function () {
                // 3. 顯示或隱藏
                // 4. 判斷當前的品牌是否可見
                if (categoty.is(":hidden")) {
                    categoty.show();
                    
                    $(".showmore a span").text("顯示精簡品牌")
                        .css("background","url(img/up.gif) no-repeat 0 0");
                    // 加高亮
                    $promoptedCategory.addClass("promoted");
                }else {
                    categoty.hide();

                    $(".showmore a span").text("顯示全部品牌")
                        .css("background","url(img/down.gif) no-repeat 0 0");

                    $promoptedCategory.removeClass("promoted");

                }

                return false;
            });

        });
    </script>


</head>
<body>
<div class="SubCategoryBox">
    <ul>
        <li><a href="#">佳能</a><i>(30440) </i></li>
        <li><a href="#">索尼</a><i>(27220) </i></li>
        <li><a href="#">三星</a><i>(20808) </i></li>
        <li><a href="#">尼康</a><i>(17821) </i></li>
        <li><a href="#">松下</a><i>(12289) </i></li>
        <li><a href="#">卡西歐</a><i>(8242) </i></li>
        <li><a href="#">富士</a><i>(14894) </i></li>
        <li><a href="#">柯達</a><i>(9520) </i></li>
        <li><a href="#">賓得</a><i>(2195) </i></li>
        <li><a href="#">理光</a><i>(4114) </i></li>
        <li><a href="#">奧林巴斯</a><i>(12205) </i></li>
        <li><a href="#">明基</a><i>(1466) </i></li>
        <li><a href="#">愛國者</a><i>(3091) </i></li>
        <li><a href="#">其它品牌相機</a><i>(7275) </i></li>
    </ul>
    <div class="showmore">
        <a href="more.html"><span>顯示全部品牌</span></a>
    </div>
</div>
</body>
</html>

七、jQuery事件操作

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

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

jQuery 的頁面載入完成之後是瀏覽器的核心解析完頁面的標籤建立好 DOM 物件之後就會馬上執行
原生 js 的頁面載入完成之後，除了要等瀏覽器核心解析完標籤建立好 DOM 物件，還要等標籤顯示時需要的內容載入完成

他們觸發的順序？

jQuery 頁面載入完成之後先執行
原生 js 的頁面載入完成之後

他們執行的次數？

原生 js 的頁面載入完成之後，只會執行最後一次的賦值函式
jQuery 的頁面載入完成之後是全部把註冊的 function 函式，依次順序全部執行

2. jQuery 中其他的事件處理方法

click() 它可以繫結單擊事件，以及觸發單擊事件 mouseover() 滑鼠移入事件
mouseout() 滑鼠移出事件
bind() 可以給元素一次性繫結一個或多個事件
one() 使用上跟 bind 一樣。但是 one 方法繫結的事件只會響應一次。
unbind() 跟 bind 方法相反的操作，解除事件的繫結
live() 也是用來繫結事件。它可以用來繫結選擇器匹配的所有元素的事件。哪怕這個元素是後面動態建立出來的也有效

3. 事件的冒泡

什麼是事件的冒泡？

事件的冒泡是指，父子元素同時監聽同一個事件。當觸發子元素的事件的時候，同一個事件也被傳遞到了父元素的事件裡去響應。
那麼如何阻止事件冒泡呢？

在子元素事件函式體內，returnfalse; 可以阻止事件的冒泡傳遞。

4. javaScript 事件物件

事件物件，是封裝有觸發的事件資訊的一個 javascript 物件。

我們重點關心的是怎麼拿到這個 javascript 的事件物件。以及使用。
如何獲取呢 javascript 事件物件呢？

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

// 1. 原生javascript獲取事件物件
window.onload = function () { 
	document.getElementById("areaDiv").onclick = function (event) { 
		console.log(event); 
	}	
} 

// 2. jQuery程式碼獲取事件物件
$(function () { 
	$("#areaDiv").click(function (event) { 
		console.log(event); 
	}); 
});

// 3. 使用 bind 同時對多個事件繫結同一個函式。怎麼獲取當前操作是什麼事件使用 bind 同時對多個事件繫結同一個函式。怎麼獲取當前操作是什麼事件
$("#areaDiv").bind("mouseover mouseout",function (event) { 
	if (event.type == "mouseover") { 
		console.log("滑鼠移入"); 
	} else if (event.type == "mouseout") { 
		console.log("滑鼠移出"); 
	} 
});

5. 練習圖片跟隨

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            text-align: center;
        }
        #small {
            margin-top: 150px;
        }
        #showBig {
            position: absolute;
            display: none;
        }
    </style>

    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
           $("#small").bind("mouseover mouseout mousemove",function (event) {
              if (event.type == "mouseover"){
                  $("#showBig").show();
              }  else if(event.type == "mousemove"){
                  console.log(event);
                  $("#showBig").offset({
                     left : event.pageX + 10,
                     top: event.pageY + 10
                  });
              } else if(event.type == "mouseout"){
                  $("#showBig").hide();
              }
           });

        });

    </script>

</head>
<body>
    <img id="small" src="img/small.jpg"/>

    <div id="showBig">
        <img src="img/big.jpg">
    </div>
</body>
</html>

Java Web(2)-jQuery上
2020-07-23
JavaWebjQuery
JAVA學習筆記—JAVA WEB（二）JAVA WEB核心（下）
2020-12-16
Java筆記Web
Java Web(5)-Servlet詳解(下)
2020-07-28
JavaWebServlet
jQuery基礎2
2020-10-18
jQuery
java web開發之上機指導（2）
2018-08-03
JavaWeb
Web前端JQuery面試題（一）
2020-11-05
Web前端jQuery面試題
【更新】Kendo UI for jQuery釋出R2 2018|附下載
2018-07-24
UIjQuery
jQuery選擇器(下)
2020-11-05
jQuery
java web
2020-12-12
JavaWeb
在vue下引入jquery bootstrap
2019-02-16
VuejQueryboot
04_jQuery的2把利器
2018-07-24
jQuery
JQuery Plugin 2 - Passing Options into Your Plugin
2020-04-07
jQueryPlugin
jQuery 基礎樣式篇（2）
2021-09-09
jQuery
web2
2018-07-24
Web
從零開始學Web之jQuery（一）jQuery的概念，頁面載入事件
2018-07-04
WebjQuery事件
web前端javascript+jquery知識點總結
2020-02-17
Web前端JavaScriptjQuery
jquery選擇div下的ul下的li下的a
2018-08-21
jQuery
JQuery版本選擇與下載
2018-06-08
jQuery
web專案技術必備-------jQuery快速入門
2020-10-11
WebjQuery
[java web]Idea+maven+spring4+hibernate5+struts2整合過程
2018-06-09
JavaWebIdeaMavenSpring
【輕知識】phper回顧下jquery
2018-06-29
PHPjQuery
Java Web UI框架
2018-08-06
JavaWebUI框架
Java Web-JSP
2020-10-14
JavaWebJS
Java Web 拾遺
2024-09-25
JavaWeb
基於Python+Django+Jquery架構的Web開發
2018-06-30
PythonDjangojQuery架構Web
JQuery基礎28_選擇器2
2024-06-18
jQuery
攻防世界-web2
2020-10-23
Web
Java學習-18 簡潔高效的jQuery
2020-11-29
JavajQuery
web基礎學習筆記(二十)之jquery動畫操作
2020-10-01
Web筆記jQuery動畫
IDEA建立Java WEB工程
2020-10-18
IdeaJavaWeb
JAVA Web07——Ajax
2020-10-23
JavaWeb
java web 中文亂碼
2020-04-04
JavaWeb
Java（2）
2024-08-04
Java
【web前端】面題整理（2）
2019-05-20
Web前端
HGAME-week2-web-wp
2022-02-17
GAMWeb
Java 208 道面試題 · （六）Java Web
2020-12-14
Java面試題Web
[譯]介紹一下漸進式 Web App(即時載入) – Part 2
2019-02-25
WebAPP
JQuery2：節點選取與節點插入
2018-11-14
jQuery