• jQuery查詢標籤
  • 1.基本選擇器
  • 2.組合選擇器
  • 3.後代選擇器
  • 4.屬性選擇器
  • 5.基本篩選器
  • 7.篩選器方法
• 鏈式操作的本質
• 操作標籤
  • 1.class操作
  • 2.位置操作
  • 3.文字操作
  • 4.建立標籤
  • 5.屬性操作
  • 6.新增標籤
  • 7.清空標籤
• jQuery事件
  • 事件繫結的兩種方法
  • 實時監聽事件
  • 克隆事件 clone
• 事件相關補充
  • 1.取消後續事件
    • 方式1
    • 方式2
  • 2.阻止事件冒泡
  • 3.等待頁面載入完畢再執行程式碼
  • 4.事件委託(重要)
• jquery動畫效果（瞭解）
• Bootstrap頁面框架
  • pycharm自動提示問題
  • bootstrap目錄結構
• 核心部分講解
  • 佈局容器
  • 柵格系統（重要）
  • 螢幕引數 響應式佈局
  • 柵格偏移
  • 證明一個row是12份
• 重要樣式
  • 1.表格樣式
  • 2.表單標籤
  • 3.按鈕組
• 元件
  • 1.圖示
  • 2.導航條
  • 3.其他
• Bootstrap JS外掛
  • 模態框
  • 輪播圖

jQuery查詢標籤

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.基本篩選器

相當於對jQuery列表中的物件做二次篩選。

:first // 第一個
:last // 最後一個
:eq(index)// 索引等於index的那個元素
:even // 匹配所有索引值為偶數的元素，從 0 開始計數
:odd // 匹配所有索引值為奇數的元素，從 0 開始計數
:gt(index)// 匹配所有大於給定索引值的元素
:lt(index)// 匹配所有小於給定索引值的元素
:not(元素選擇器)// 移除所有滿足not條件的標籤
:has(元素選擇器)// 選取所有包含一個或多個標籤在其內的標籤(指的是從後代元素找)
$('li:first')	優化   $('li').first()

為什麼要使用篩選器？為什麼不用索引取值？
其實不行，索引出來的值是標籤物件！

jQuery列表也支援索引：

使用not進行二次篩選，拿出不屬於c1樣式類的標籤：

找某個id=#d1的ul標籤:

6.表單篩選器
僅限於在表單標籤中使用。
通過表單標籤的某些屬性值查詢表單。（type selected checked）

$(':text')
$(':password')

$(':checked')		:checked會把表單中的包含selected的標籤也一併找到 這是一個小bug
$(':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();// 兄弟們

next() 找基準節點同級別下面的節點 until表示找到什麼標籤就停止：

prev()找基準節點同級別上面的節點
找父標籤、爺爺標籤：

找前輩：

找所有兒子、找所有兄弟（同級別上下的標籤：
）

鏈式操作的本質

為什麼可以不斷用點的方式呼叫jQuery？
用python程式碼演示：

正常情況下呼叫物件中的方法後，是不能繼續呼叫的。
鏈式操作的實質：呼叫之後返回當前物件

操作標籤

1.class操作

獲取標籤的樣式類列表

2.位置操作

 $(window).scrollTop()

獲取滾動條偏移量 還可以修改偏移量

3.文字操作

文件操作建議不要用jQuery。而是通過索引取出標籤物件。

4.建立標籤

document.createElement()  $('<a>')

標籤不在頁面上，在記憶體裡，需要你動態新增到頁面中：

5.屬性操作

attr()/removeAttr()					 xxxAttribute()
attr針對動態變化的屬性獲取會失真
	prop('checked') prop('selected')

attr針對動態獲取的屬性會失真，比如修改單選框，無法及時正確反饋，使用者是否已經勾選上了單選框。

prop可以判斷動態變化的屬性：

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的前面

7.清空標籤

remove()// 從DOM中刪除所有匹配的元素。
 empty()// 刪除匹配的元素集合中所有的子節點。

一個是連你也清掉 一個是你留著：

jQuery事件

事件繫結的兩種方法

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

對於js的陣列無法一鍵繫結事件：

jQuery可以陣列批量挨個繫結事件：
查詢button標籤，得到一個列表，給列表所有的jQuery物件繫結click事件:

實時監聽事件

示例：github登入文字框，沒有點提交按鈕，但是每次輸入都會提示你的輸入是否滿足要求。
相當於：每次修改文字框內容都會發送請求。（跟針對HTML下拉框的文字域變化事件onchange有點像）
程式碼示例：

用表單篩選器:text查詢到文字框，給input這個輸入事件繫結一個函式。
哪個標籤觸發事件，this就是哪個標籤物件，因為是標籤物件，所以需要包一包$(this)（這個很容易忘）。
也可以用js程式碼實現：

注意:this是標籤物件還是jq物件!

克隆事件 clone

示例：

每次點選按鈕，在body中新增一個被克隆的button標籤
請注意：clone是jq物件的方法 clone的物件都是假的（只有樣子） 只有原先寫button的具有click事件
如果想真正的克隆（具有事件）：
在clone裡面新增true。

事件相關補充

1.取消後續事件

方式1

事件函式的最後return false即可'

有些標籤本身含有功能，比如：
button submit 按下按鈕會重新整理頁面
這時候再給這個標籤繫結事件，誰會優先執行？

先執行click新增的事件 再執行按鈕自己的提交事件
然而我們通常希望，只執行我們新增的事件，原來的事件被覆蓋，不再執行,這就需要再時間繫結的匿名函式里加return false

可以取消後續事件 後續及時有自己繫結的更多事件也不執行了

方式2

事件函式都自帶一個形參e:
preventdefault 取消預設（事件）

2.阻止事件冒泡

事件函式的最後return false即可

什麼叫事件冒泡？以點選事件舉例：

div > p > span 巢狀關係 這三個標籤都綁定了點選事件。
思考一件事：
點了span是不是相當於點了p也點了div
標籤會一層一層往上彙報（父標籤有相同事件的情況下，會執行事件繫結的函式

）
取消冒泡只需要在每個事件的匿名函式中加：return false。即可以取消冒泡，有可以取消事件繫結，一箭雙鵰。

3.等待頁面載入完畢再執行程式碼

jQuery可以支援你在head寫js程式碼:

$(function(){})				   縮略寫法
$(document).ready(function(){})  完整寫法

4.事件委託(重要)

主要針對動態建立的標籤也可以使用繫結的事件
$('body').on('click','button',function(){})
將body內所有的單擊事件委託給button標籤執

js\jQ動態載入的標籤 預設是沒有事件的 比如這個按鈕：

所有需要事件委託，使用第二種JQ繫結事件的方法on(事件型別，選擇器，匿名函式)：
將body裡所有的點選事件委託給button（選擇器）按鈕

這樣body內原生按鈕、動態載入的按鈕都會繫結事件

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])

卷軸效果：3000是時間單位毫秒

淡入淡出：0.4是透明度

點讚的動態效果：

Bootstrap頁面框架

Bootstrap V3中文: https://v3.bootcss.com/
bootcdn: https://www.bootcdn.cn/twitter-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自動提示問題

使用cdn，pycharm不進行程式碼補全：

先下載一個本地Bootstrap的匯入pycharm，載入一下，讓pycharm熟悉一下。

bootstrap目錄結構

下載的話檔案目錄有三個資料夾：

1. css:只有這兩個有用 其餘用不到可以刪掉
   
2. fonts:字型檔案不要修改
3. js: npms可刪
   檢視js程式碼檔案可得知：
   
   Bootstrap的js程式碼是基於jQuery的！

核心部分講解

1. 如果只想用bootstrap靜態效果 只用導css
2. 想用動態效果 需要匯入jq和bootstrap-js程式碼檔案
3. bootstrap提前寫好了很多樣式 只要你寫好了樣式類名就可以直接用

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

佈局容器

網頁的左右兩側通常會進行留白處理，使網頁看起來不太突兀。

class = "container"				有留白
class = "container-fluid"		 沒有留白

留白和不留白的區別：

柵格系統（重要）

class = "row"					一行均分12份
	class = "col-md-8"			 劃分一行的12份

留白之後還是可以調整網頁佈局
將佈局容器繼續精準劃分區域 給div新增樣式類row

這個div會均分成12份 （border 3px）
，
在row裡面在巢狀div，這些div可以通過樣式類申明自己要用的'份數'，如上圖兩個div都要6份，對應下圖的左右兩個紅色區域。

再要一行row（同級再建立一個div標籤 使用樣式類row）：

row裡面寫超過了12份會自動換行：

另外一種情況（多寫了一份導致被迫換行）：

ps：col-md-13不存在 因為沒寫這樣的樣式類

螢幕引數 響應式佈局

在電腦上設定好的佈局，在手機顯示很容發生變形，導致有內容無法顯示出來。
是電腦的時候採取6:6佈局 是手機的時候 採取紅框中的2:10佈局：

通過這種方式來適配 手機 電腦 平板 ，而適配都需要新增樣式類的引數。

引數：col-md-6 col-xs-2 col-sm-3 col-lg-3

柵格偏移

有些時候我們只想用一部分柵格，並且需要調整柵格的位置
col-md-offset-3
只想用6份：

將這6份右移3份柵格的距離：

證明一個row是12份

在6份柵格里套一個row:

會基於這六份柵格，再進行12等分：

重要樣式

1.表格樣式

 table基本樣式  table-hover懸浮樣式  table-striped table-border表格邊框樣式
 disabled禁用
<table class="table table-hover table-striped table-border">
'text-center' 居中
顏色
 <tr class="success">

2.表單標籤

新增表單樣式forn-control
class = "form-control"

不能加form-control的標籤：

修改顏色：

3.按鈕組

btn-block按鈕填充滿整個區域
class = "btn btn-primary btn-block"

各種樣式：

調大小：

元件

1.圖示

bootstrap是給span標籤加樣式 變成圖示 可以根據文字調色

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

更多圖示的網站：https://fontawesome.com.cn/
這個網站的圖示樣式 不會與bootstrap衝突

2.導航條

寫在最上面 且不要寫在div c容器裡面

class="navbar navbar-inverse" navbar-inverse反色導航條

想擴充套件導航條的功能 就找到相應的程式碼 多寫一點
導航條固定 新增fixed定位！！

3.其他

1. 分頁
   
2. 巨幕
   搭建網站首頁
   
3. 頁頭
   在巨幕上面加
4. 縮圖
   
   展示效果：
   
   5.進度條
   動態效果的進度條
   堆疊效果的進度條
   後期可以通過js程式碼修改進度條的style屬性以控制：
   

Bootstrap JS外掛

官方網站：https://v3.bootcss.com/javascript/

模態框

模態框是動態效果需要bootstrap 和jquery

輪播圖

調整輪播圖速度：應該在js程式碼裡
新增圖片只需新增標籤：