今日內容概要

• 作業講解
• jQuery查詢標籤
• jQuery節點操作
• jQuery事件繫結
• Bootstrap頁面框架

今日內容詳細

作業講解

1.校驗使用者資料
	 let usernameEle = document.getElementById('d1');
    let passwordEle = document.getElementById('d2');
    let subBtn = document.getElementById('d3');
    subBtn.onclick = function () {
        if (usernameEle.value === 'jason'){
            usernameEle.nextElementSibling.innerText = '使用者名稱不能是jason'
        }
        if (passwordEle.value === '123'){
            passwordEle.nextElementSibling.innerText = '密碼不能是123'
        }
    }
    usernameEle.onfocus = function () {
        this.nextElementSibling.innerText = ''
    }
    passwordEle.onfocus = function () {
        this.nextElementSibling.innerText = ''
    }
    
2.頁面計時器
	// 先寫最簡單的起步>>>:點選開始按鈕 將那一刻的時間展示到input框中即可
   // 想讓展示時間的程式碼能夠根據時間的變化反覆的執行>>>:迴圈定時任務
   // 再建立結束按鈕點選即終止迴圈定時任務的執行>>>:結束定時任務
        let startBtnEle = document.getElementById('startBtn');
        let inputEle = document.getElementById('d1');
        let stopBtnEle = document.getElementById('stopBtn');

        function showTime() {
            let currentTime = new Date();
            inputEle.value = currentTime.toLocaleString()
        }
        // 全域性定義一個儲存計時器的變數名
        let t;
        startBtnEle.onclick = function () {
            if(!t){
                t = setInterval(showTime, 1000)
            }
        }

        stopBtnEle.onclick = function () {
            clearInterval(t)
            t = null;
        }
 

jQuery查詢標籤

1.基本選擇器
	$('#d1')	id選擇器
 	$('.c1')	class選擇器
 	$('div')	標籤選擇器
2.組合選擇器
	$('div#d1')			查詢id是d1的div標籤
 	$('span.c1') 		 查詢含有c1樣式類的span標籤
 	$('div,span,p')		 查詢div或者span或者p標籤
 	$('#d1,.c1,span')	 查詢id是d1的或者class含有c1的或者span標籤
3.層級選擇器
	$('div p')			查詢div裡面所有的後代p標籤
 	$('div>p')			查詢div裡面的兒子p標籤
 	$('div+p')			查詢div同級別下面緊挨著的p標籤
 	$('div~p')			查詢div同級別下面所有的p標籤
4.屬性選擇器
	$('[username]')			查詢含有username屬性名的標籤
 	$('[username="jason"]')	查詢含有username屬性名並且值等於jason的標籤
 	$('input[username="jason"]')
5.基本篩選器
	:first // 第一個
    :last // 最後一個
    :eq(index)// 索引等於index的那個元素
    :even // 匹配所有索引值為偶數的元素，從 0 開始計數
    :odd // 匹配所有索引值為奇數的元素，從 0 開始計數
    :gt(index)// 匹配所有大於給定索引值的元素
    :lt(index)// 匹配所有小於給定索引值的元素
    :not(元素選擇器)// 移除所有滿足not條件的標籤
    :has(元素選擇器)// 選取所有包含一個或多個標籤在其內的標籤(指的是從後代元素找)
    $('li:first')	優化   $('li').first()
        
        
6.表單篩選器
	$(':text')
 	$(':password')
   
	$(':checked')		checked與selected都會找到
 	$(':selected')		selected
7.篩選器方法
	 $("#id").next()
    $("#id").nextAll()
    $("#id").nextUntil("#i2")
	 $("#id").prev()
    $("#id").prevAll()
    $("#id").prevUntil("#i2")
    $("#id").parent()
    $("#id").parents()  // 查詢當前元素的所有的父輩元素
    $("#id").parentsUntil() // 查詢當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。
    $("#id").children();// 兒子們
    $("#id").siblings();// 兄弟們
 

操作標籤

1.class操作
	 addClass()							classList.add()
    removeClass() 						classList.remove()
    hasClass() 							classList.contains()
    toggleClass()						classList.toggle()
2.位置操作
	 $(window).scrollTop()
3.文字操作
	 text()					innerText
 	 html()					innerHTML
  	 val()					value
    jQuery物件[0].files	  files[0]
4.建立標籤
	document.createElement()  $('<a>')
5.屬性操作
	attr()/removeAttr()					 xxxAttribute()
	attr針對動態變化的屬性獲取會失真
 		prop('checked') prop('selected')
6.文件處理
	$(A).append(B)// 把B追加到A
	$(A).appendTo(B)// 把A追加到B
 	$(A).prepend(B)// 把B前置到A
	$(A).prependTo(B)// 把A前置到B
    
    $(A).after(B)// 把B放到A的後面
	$(A).insertAfter(B)// 把A放到B的後面
 	$(A).before(B)// 把B放到A的前面
	$(A).insertBefore(B)// 把A放到B的前面
    
    remove()// 從DOM中刪除所有匹配的元素。
	 empty()// 刪除匹配的元素集合中所有的子節點。
 

jQuery事件

JS繫結事件
	標籤物件.on事件名 = function(){}
jQuery事件繫結
	方式1:
		jQuery物件.事件名(function(){})
 	方式2:
    	jQuery物件.on('事件名稱',function(){})
 	ps:預設就用方式1 不行了再用方式2
ps:補充
    clone屬性
    	clone(true)  預設不克隆事件 加true就可以

事件相關補充

1.取消後續事件
取消後續所有還剩下的事件
	事件函式的最後return false即可
2.阻止事件冒泡
父盒子有點選事件，子盒子也有，點選子盒子也會觸發父盒子的，這就是事件冒泡
	事件函式的最後return false即可
3.等待頁面載入完畢再執行程式碼
	$(function(){})				   縮略寫法
 	$(document).ready(function(){})  完整寫法
4.事件委託
	主要針對動態建立的標籤也可以使用繫結的事件
 	$('body').on('click','button',function(){})
 	將body內所有的單擊事件委託給button標籤執行

jQuery動畫效果(瞭解)

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑動
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定義（瞭解即可）
animate(p,[s],[e],[fn])

Bootstrap頁面框架

別人已經提前寫好了一大堆css和js 我們只需要引入之後按照人家規定好的操作方式即可使用所有的樣式和功能

版本有很多 使用V3即可

檔案結構
	bootstrap.css
 	bootstrap.js
	ps:js部分是需要依賴於jQuery
  
CDN
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

pycharm自動提示問題
	最好本地匯入幾次

核心部分講解

使用bootstrap其實只需要操作標籤的樣式類即可

佈局容器
	class = "container"				有留白
 	class = "container-fluid"		 沒有留白
柵格系統
	class = "row"					一行均分12份
		class = "col-md-8"			 劃分一行的12份
螢幕引數
	col-md-6 col-xs-2 col-sm-3 col-lg-3
柵格偏移
	col-md-offset-3

重要樣式

1.表格樣式
	<table class="table table-hover table-striped">
	顏色
 	 <tr class="success">
2.表單標籤
	class = "form-control"
3.按鈕組
	class = "btn btn-primary btn-block"

元件

1.圖示
	<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
	https://fontawesome.com.cn/
2.導航條
	class="navbar navbar-inverse"
3.其他