• 前端學習最後一天
  • 一、jQuery查詢標籤
    • 1.基本選擇器
    • 2.組合選擇器
    • 3.層級選擇器
    • 4.屬性選擇器
    • 5.基本篩選器
    • 6.表單篩選器
    • 7.篩選器方法
  • 二、jQuery節點操作
    • 1.class操作
    • 2.位置操作
    • 3.文字操作
    • 4.建立標籤
    • 5.屬性操作
    • 6.文件處理
  • 三、jQuery事件繫結
    • 1.jQuery事件
    • 2.事件相關補充
    • 3.jQuery動畫效果(瞭解)
  • 四、Bootstrap框架
    • 1.基本知識
    • 2.核心部分
    • 3.重要樣式
    • 4.重要元件

前端學習最後一天

一、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="almira"]') 	 查詢含有username屬性名且值等於almira的標籤
$('input[username="almira"]') 最精準的查詢方式
 

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();// 兄弟們

二、jQuery節點操作

1.class操作

jQuery程式碼			JavaScript程式碼
addClass()			  classlist.add()
removeClass()		  classlist.remove()
hasClass()   		  classlist.contains()
toggleClass()		  classlist.toggle()

2.位置操作

$(window).scrollTop()

3.文字操作

jQuery程式碼		   JavaScript程式碼
text()				innerText
html()				innerHTML
val()				value

4.建立標籤

document.createElement()

5.屬性操作

jQuery程式碼		   		 JavaScript程式碼
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事件繫結

1.jQuery事件

# JavaScript繫結事件
	標籤物件.on事件名 = function (){}

# jQuery事件繫結(預設是方式一，不行再試方式二)
    方式一：jQuery物件.事件名(function(){})
    方式二：jQuery物件.('事件名'，function(){})
    
clone屬性(補充知識)
	clone(true)  # 預設不克隆 家true就可以

2.事件相關補充

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

3.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框架

1.基本知識

1.Bootstrap框架
	別人已經寫好了的css和js 只需要按規定cv即可實現大部分需求
    
2.關於版本
	版本有好多 使用V3即可
    
3.檔案結構
	bootstrap.css
    bootstrap.js
    
4.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>

2.核心部分

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

1.佈局容器
    class = "container"          有留白
    class = "container-fluid"    沒有留白

2.柵格系統
    class = "row"         一行均分12份
    class = "col-md-8"    劃分一行的12份

3.螢幕引數
	col-md-6 col-xs-2 col-sm-3 col-lg-3   響應式佈局
4.柵格偏移
	col-md-offset-3    可以做居中

3.重要樣式

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

4.重要元件

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