前端(四)--jQuery

1、jQuery的基本用法

1.1 jQuery引入

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

1.2 第一個jQuery測試

<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    //jQuery的標準用法,只要記住：$就代表jQuery
    $(document).ready(function(){
        alert("今天是KH96班學習jQuery的第一天");
    });
</script>

1.3 $(document).ready()與window.onload的區別

<script type="text/javascript">
    function loadOne(){
        alert("LoadOne");
    }
    function loadTwo(){
        alert("loadTwo");
    }
    function loadThree(){
        alert("loadThree");
    }

    //onload的用法，頁面載入完成後，調用函數,只能執行一個，且是最後指定的那個，特點：必須要等待網頁元素全部載入才執行
    // window.onload = loadOne;
    // window.onload = loadTwo; //只有後面這個才有效

    //jQuery 的用法，頁面結構載入完成後，調用函數，可以定義多個，互相不影響,且都可以執行
    //三個都可以執行
    $(document).ready(function(){
        loadOne();
    });

    //簡化1
    $(document).ready(function(){
        loadTwo();
    });

    //簡化 2   我們常用這種簡化方式
    $(function(){
        loadThree();
    });

</script>

2、jQuery選擇器

基本選擇器的語法：$("選擇器").action();

2.1 基本選擇器

2.2 層次選擇器

2.3 屬性選擇器

$("標簽[屬性]")

2.4 過濾選擇器

標簽名:過濾選擇器；

作用：過濾指定標簽；

可見性選擇器

2.5 jQuery選擇器註意事項

選擇器的書寫規範很嚴格，多一個或少一個空格，都會影響選擇器的效果；

2.6 $("選擇器").css()

2.7 $(this).find("標簽名")

$(this)就是將這個dom對象轉換成jquery對象，就可以對這個對象進行操作；

可以查找當前元素下的子元素；

html

//當滑鼠訪問指定的li時，指定的li下的p標簽顯示，滑鼠移除後，對應的p消失
<ol>
     <li><span>3</span>三八線<p>加入看單</p></li>
    <li><span>4</span>吉詳天寶<p>加入看單</p></li>
    <li><span>5</span>親愛的翻譯官<p>加入看單</p></li>
    <li><span>6</span>仙劍雲之凡<p>加入看單</p></li>
    <li><span>7</span>權力的游戲第五季<p>加入看單</p></li>
    <li><span>8</span>琅琊榜<p>加入看單</p></li>
    <li><span>9</span>那年青春我們正好<p>加入看單</p></li>
    <li><span>10</span>鄉村受情8（上）<p>加入看單</p></li>
</ol>

javascript

$("#play ol li").mouseover(function(){
	$(this).find("p").css({"display":"block"});
});
$("#play ol li").mouseleave(function(){
	$(this).find("p").css({"display":"none"}); //查找到當前元素的子元素
});


//還可以是使用:hidden 和 :visible  可見選擇器
$("#play ol li").mouseover(function(){
    $(this).find("p:hidden").show();
});

$("#play ol li").mouseleave(function(){
    $(this).find("p:visible").hide();
});

$(this)表示當前元素，它還可以點出很多方法，需要的時候可以加個點看看有哪些；

常用方法

3、jQuery基本操作

3.1 樣式操作

3.2 內容操作

3.3屬性值操作

3.3.1獲取單選框的值

$('input:radio[name="IsAvail"]:checked').val()

3.4 節點操作

3.4.1 創造節點

$()用於獲取或創建節點

3.4.2 插入節點

1 元素內部插入子節點

註意：jq中已經創建好的同一節點，多次執行插入，只會執行一次

var $node2 = $("<li>上海新增本土54例</li>");
$node2.appendTo($("ul")); //執行
//jq中已經創建好的同一節點，多次執行插入，只會執行一次
$node2.appendTo($("ul")); //不執行

//只用每次創建新的節點，才會多次執行
$("<li>羅永浩：那火烤中學高有問題</li>").prependTo($("ul"));//執行
$("<li>羅永浩：那火烤中學高有問題</li>").prependTo($("ul"));//執行

2 元素外部插入同輩節點

3.4.3 刪除節點

3.4.4 替換節點

3.4.5 複製節點

3.5屬性操作

3.6 節點遍歷

3.6.1 遍歷子元素

3.6.2 遍歷同輩元素

3.6.3 遍歷前輩元素

3.6.4 each() 遍歷

例子

//遍歷所有的li元素
//隱式迭代:自動遍歷集合中的所有元素
$("li").each(function(index,elm){
    alert(index);
    alert($(elm).html());
});

$("li").each(function(){
//註意:elm時dom元素對象,不可以直接使用jQuery方法,必須是轉化為jQuery節點
    alert($(this).html()); //$(this)轉換為jQuery節點
});

3.6.5 end()

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

//end():結束當前的最後一次篩選,恢復到初始狀態
$(".gameList li").first().css("background-color","orange").end().last().css({"background-color":"pink"}); //可以選取到第一個li和最後一個li
//先選取第一個li，然後end()清除.first()的過濾，回到$(".gameList li")，在選取last()
//相當於兩條語句：
/*
$(".gameList li").first().css("background-color","orange");
$(".gameList li").last().css({"background-color":"pink"});
*/

4、jQuery事件與特效

4.1 基礎事件

4.1.1 滑鼠事件

滑鼠事件方法的區別

4.1.2 鍵盤事件

鍵盤按下靈活應用

//鍵盤按下事件，判斷是否是enter鍵，並手動提交表單
$(document).keydown(function(even){
    if(even.keyCode == 13){
        if(confirm("確定要提交登錄請求嗎？")){
            alert("登錄請求可以提交");
            //jQuery中手動提交表單
            $("form").submit();
        }else{
            alert("登錄請求取消")
        }
    }
});

4.1.3 瀏覽器事件(瞭解)

4.1.4 window事件(瞭解)

4.1.5 表單事件(瞭解)

4.2 綁定事件和移出事件

4.2.1 綁定事件

4.2.1.1 綁定單個事件

bind(事件類型名，事件處理函數)；

//對指定元素綁定mouseover事件
$(".on").bind("mouseover",function(){
    $(".topDown").show();
});
//對指定元素綁定mouseout事件
$(".on").bind("mouseout",function(){
    $(".topDown").hide();
});

4.2.1.2 綁定多個事件

bind({事件名稱：事件處理函數，事件處理名稱：事件處理函數。。。})

//對指定元素，綁定mouseover和mouseout事件
$(".on").bind({
    "mouseover":function(){
        $(".topDown").show();
    },
    "mouseout":function(){
        $(".topDown").hide();
    }
});

4.2.2 移除事件

4.3 複合事件

4.3.1 hover

//複合事件：hover,相當於mouseover和mouseout的集合，並支持切換
$(".on").hover(function(){ 
    $(".topDown").show();
},function(){
    $(".topDown").hide();
});

4.3.2 toggle 1.9版本之後，移除了toggle()複合事件方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>連續點擊，瞭解</title>
	</head>
	<body>
		<input type="button" value="切換顏色">
	</body>
	<script src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//連續點擊：toggle(function1,function2...),隨著滑鼠的點擊自動切換函數
			$("input[type=button]").toggle(
			function(){
				$("body").css("background-color","#f00");
			},
			function(){
				$("body").css("background-color","#0f0");
			},
			function(){
				$("body").css("background-color","#00f");
			}
			)
		});
	</script>
</html>

4.3.3 toggle(),toggle(函數),toggleClass()區別

4.4 jQuery 動畫效果

4.4.1 控制元素的顯示及隱藏

toggle() 方法等於這兩個方法

參數：可以為任意毫秒數或，slow,normal,fast;

4.4.2 改變元素的透明度(淡入淡出)

參數：可以為任意毫秒數或，slow,normal,fast;

4.4.3 改變元素高度(收縮)

參數：可以為任意毫秒數或，slow,normal,fast;

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>動畫-顯示，隱藏，淡入淡出，收索，拉伸</title>
	</head>
	<body>
		<p>
			<img src="img/img01.jpg" alt="" width="600px" height="300px">
		</p>
		<input type="button" value="顯示" id="showImg">
		<input type="button" value="隱藏" id="hideImg">
		
		<p>
			<img src="img/img02.jpg" alt="" width="600px" height="300px">
		</p>
		<input type="button" value="淡入" id="dadeIn">
		<input type="button" value="淡出" id="dadeOut">
		
		<p>
			<img src="img/img03.jpg" alt="" width="600px" height="300px">
		</p>
		<input type="button" value="延伸" id="slidedownImg">
		<input type="button" value="收縮" id="slideupImg">
		
	</body>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//顯示和隱藏：可以不帶，帶一個，帶兩個參數
			//第一個參數是執行顯示或隱藏的速度或者隱藏的時長，單位是毫秒,如果為0，立刻執行
			//也可以是：slow,normal,fast，
			//第二個參數是執行顯示或者隱藏效果完成後，需要執行的操作函數
			$("#showImg").click(function(){
				// $("img:eq(0)").show();//立刻顯示
				$("img:eq(0)").show(5000);//慢慢顯示，整個過程1秒，預設是從左上角顯示
				
			});
			
			$("#hideImg").click(function(){
				// $("img:eq(0)").hide();//立刻顯示
				$("img:eq(0)").hide(5000);
			});
			
			
			//淡入和淡出的動畫效果，通過改變元素的透明度，實現淡入和淡出，帶參數的效果和上面一樣
			$("#dadeIn").click(function(){
				// $("img:eq(1)").fadeIn();//立刻淡入
				$("img:eq(1)").fadeIn(5000);//淡入
				
			});
			
			$("#dadeOut").click(function(){
				// $("img:eq(1)").fadeOut();//立刻淡出
				$("img:eq(1)").fadeOut(5000);//淡出
			});
			
			//通過改變元素的高度
			$("#slidedownImg").click(function(){
				// $("img:eq(2)").slideDown();//立刻延伸
				$("img:eq(2)").slideDown(5000);//延伸
				
			});
			
			$("#slideupImg").click(function(){
				// $("img:eq(2)").slideUp();//立刻收縮
				$("img:eq(2)").slideUp(5000);//收縮
			});
			
		})
	</script>
</html>

4.4.4 自定義動畫(瞭解)

5、項目中常用的知識點

5.1 自定義表單驗證 required

自定義表單的input標簽必須添加required屬性，否則就不會觸發；

//自定義用戶名校驗提示語，對瀏覽器預設提示語，進行統一修改
$("input[type=submit]").click(function(){	
    var userName = document.getElementById("userName");
    if(userName.validity.valueMissing){
        userName.setCustomValidity("用戶名不能為空")
    }else if(userName.validity.patternMismatch){
        //正則校驗提示
        userName.setCustomValidity("用戶名不符合規則校驗")
    }else{
        userName.setCustomValidity("");
    }
    
});

5.2 return false 的理解和用法

當表單提交事件，接收到false的返回值不會再提交表單內容，可以實現去除表單的預設提交處理(讓from的action失敗)，包括超鏈接；

$("form").submit(function(){
    // alert("監聽表單提交事件");
    //提示是否確認登錄請求
    if(!confirm("確認要進行登錄嗎？")){
    //當表單提交事件，接收到false的返回值不會在提交表單內容，可以實現去除表單的預設提交處理(讓from的action失敗)，包括超鏈接
        return false;
    }
});

5.3 stop(true,true)

stop(true,true)停止匹配當前正在執行的動畫效果，解決快速移入移出導致的延遲效果;

//二級導航欄的下拉特效
$(".wel_rhelp").bind({
    "mouseenter":function(){
     //stop(true,true) 停止匹配當前正在執行的動畫效果，解決快速移入移出導致的延遲效果
      $(".wel_rhelp_ul").stop(true,true).slideDown(1000);
    },
    "mouseleave":function(){
        $(".wel_rhelp_ul").stop(true,true).slideUp(1000);
    }
});

5.4 輪播圖

html

<!--焦點圖-->
<div class="banner">
    <div class="top_slide_wrap">
        <ul class="slide_box ">
            <li class="active"><img src="img/ban1.jpg" width="700" height="401" /></li>
            <li><img src="img/ban2.jpg" width="700" height="401" /></li>
            <li><img src="img/ban3.jpg" width="700" height="401" /></li>
        </ul>
        <ul class="num">
            <li class="active">
                <a href="#">1</a>
            </li>
            <li class="">
                <a href="#">2</a>
            </li>
            <li>
                <a href="#">3</a>
            </li>
        </ul>
        <div class="op_btns">
            <div class="op_btns_1 clear">
                <a href="#" class="op_btn op_prev"></a>
                <a href="#" class="op_btn op_next"></a>
            </div>
        </div>
    </div>
</div>

javaScript

$(function(){
    //調用輪播函數
    playBanner();
});


//自定義輪播圖播放函數
function playBanner(){
    //初始化圖片序號變數
    var bannerIndex = 0;

    //初始化標識，當滑鼠移入到輪播圖數字上，暫停輪播
    var bannerFlog = false; //預設不暫停，當為true才暫停

    //獲取要輪播的圖片對象集合
    var $bannerImgs = $(".slide_box").children("li");
    //獲取要輪播的圖片對應數字集合
    var $bannerNums = $(".num").children("li");

    //1.當滑鼠移入輪播圖移入到對應的數字上，顯示對應的輪播圖
    $bannerNums.mouseover(function(){
        //確定移入的是哪個數字
        bannerIndex = $bannerNums.index($(this));
        // alert(bannerIndex);

        //讓對應輪播圖數字的圖片進行淡入
        $bannerImgs.eq(bannerIndex).fadeIn();

        //所有當前輪播圖數字外其他圖片都要淡出
        $bannerImgs.eq(bannerIndex).siblings().fadeOut();

        //當前輪播圖的數字要高亮 actice類是讓數字高亮
        $(this).addClass("active");

        //所有當前輪播圖數字外其他的數字都要取消高亮
        $(this).siblings().removeClass("active");

        //修改輪播圖true,暫停
        bannerFlog = true;

    }).mouseout(function(){
        //修改輪播標識為false,繼續自動輪播
        bannerFlog = false;
    });

    //開啟自動輪播
    setInterval(function(){

        // 判斷當前是不是滑鼠在某個輪播圖片的數字上，如果是，不可以切換圖片，否則繼續
        if(bannerFlog){
            return;
        }

        //預設從第一個圖片開始輪播，輪播到最後一個圖片，如果滑鼠移入到某個圖片，從當前的圖片開始輪播
        bannerIndex++;

        //如果輪播圖片序號大於輪播圖片總數，代表輪播到最後，要從頭開始
        if(bannerIndex >= $bannerImgs.length){
            bannerIndex = 0;
        }
        
        //切換輪播圖片
        $bannerImgs.eq(bannerIndex).stop(true,true).fadeIn().siblings().fadeOut();
        
        //切換對應的輪播數字
        $bannerNums.eq(bannerIndex).stop(true,true).addClass("active").siblings().removeClass("active");

    },3000);
}

5.5 jQuery 判斷checked的三種方法:

賦值

5.6 prop()方法的應用

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

prop(參數1，參數2)：

1. 參數1用於設置屬性
2. 參數2設置屬性值
   下麵一個簡單的案例來應用一下這個方法：

head部分

<script src="lib/jquery/jquery-3.4.1.min.js"></script>
	<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
	<style>
	.wrap {
		width: 500px;
		height: 300px;
		margin: 50px auto;
	}
	th {
		text-align: center;
	}
    </style>

body部分

<div class="wrap">
		<table class="table table-striped table-bordered table-hover text-center">
			<thead>
				<tr class="success">
					<th><input type="checkbox" id="min_check"></th>
					<th>語文</th>
					<th>數學</th>
					<th>英語</th>
				</tr>
			</thead>
			<tbody id="t_body">
				<tr>
					<td><input type="checkbox"></td>
					<td>55</td>
					<td>66</td>
					<td>61</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>68</td>
					<td>23</td>
					<td>58</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>35</td>
					<td>35</td>
					<td>88</td>
				</tr>
				<tr>
					<td><input type="checkbox"></td>
					<td>36</td>
					<td>58</td>
					<td>21</td>
				</tr>
			</tbody>
		</table>
	</div>
	<script>
		$(function(){
			// 需求1：當點擊全選按鈕的時候，下麵的四個按鈕也被選中
			$("#min_check").click(function(){
				$("#t_body input:checkbox").prop("checked",$(this).prop("checked"));
			});
			//需求2：當下麵按鈕有一個沒被選中，上面的全選按鈕也取消選中狀態
			$("#t_body input:checkbox").click(function(){
				if($("#t_body input:checkbox").length === $("#t_body input:checked").length){
					$("#min_check").prop("checked",true);
				}else {
					$("#min_check").prop("checked",false);
				}
			});
		});
	</script>