####★技巧★
####★技巧★
####★技巧★
####★技巧★
####★技巧★???
單詞：????trigger??觸發
####★技巧★???圖片按需加載
?$('img.lazy').load();
####★技巧★
fast:600ms
normal:400ms
slow:200ms
####★技巧★
let point = $('.point').get(0)
相當于 point = $('.point')[0]
####★技巧★????css
div[class = input]{ 樣式 }
####★技巧★???p標簽不能嵌套其他標簽
p標簽作為最內層的標簽
####★技巧★??注意有沒括號 ()
a.height()?
####★技巧★??獲取div
let box = $('div')
????let box = $(':empty')
????let box = $('div:first-child')
####★技巧★
兼容 + webkit
####★技巧★
常改的圖片用???img,不改的用背景圖片，圖片精靈
####★技巧★
wamp
www??目錄
把文件放進去
localhost/wui1611/index.html
手機電腦連相同的網
手機輸入 192.168.1.1
####★技巧★????添加類名??移除類名
????lis.addClass('active')
????lis.removeClass('active')
####★技巧★
<marquee scrolldelay="100">高婧太厲害了666</marquee>
<marquee scrollamount="15" > 給高婧送個別墅(^-^)</marquee>
<marquee>再送輛跑車</marquee>
<marquee scrollamount="30" > 999朵鮮花+一個火箭</marquee>
####★技巧★??隊列
????入隊???出隊
??1??2??3??4??5??6??7??8??9??0
####★技巧★
####★技巧★
####★技巧★???獲取$('.box')???注意??.??[0]?
####★技巧★???CSS布局
height:auto;
高度自動，靠內部元素撐開
####★技巧★???清除默認行為
?$(document).mousedown(false);
####★技巧★????JS移動端調用
/
*UI設計師給的尺寸*/
????設計尺寸?????????????設備尺寸????????????????????????????????????????????????font-size(倍數=設備尺寸÷設計尺寸*100)
????750px??????375px??????7.50rem*倍數??????????????????????????50px
????300px??????150px??????3.0rem*倍數?????????????????50px
html{
????font-size: 50px;/*(設備尺寸÷設計尺寸*100)*/
}
.box{
????width: 2rem ;
????height: 2rem;
????background: red;
????font-size: 12px;
????}
##★技巧★???const a = 750;???聲明變量
*????值不能改
*????必須同時賦值
????const??A = 'a'??不能改
????const??arr = [1,2,3,4]??數組能改
????arr.push[5,6,7]
PC端事件會比移動端延遲300ms
click??要比 touch 延遲300ms
##????點透
????在box上面放一個 a鏈接， 點擊a鏈接時，a鏈接執行跳轉，如果長按a鏈接，再放開，a鏈接不會跳轉
e.toucher???
????當前事件觸發時，屏幕上檢測到幾個手指頭。??記錄幾個手指頭在屏幕上
targetTouches
????當前事件觸發時，這個元素上檢測到幾個手指頭。??記錄幾個手指頭在元素上
changeToucher
????當前事件觸發時，幾個手指頭執行了這個事件。??記錄幾個手指頭涉及到當前事件
###??事件：
*????touchstart:?????//手指放到屏幕上時觸發
*????touchmove:??????//手指在屏幕上滑動式觸發
*????touch
*????:????//手指離開屏幕時觸發
*????touchcancel:?????//系統取消touch事件的時候觸發，這個好像比較少用
###??跟蹤觸摸的屬性
*????touches:?????//當前屏幕上所有手指的列表
*????targetTouches:??????//當前dom元素上手指的列表，盡量使用這個代替touches
*????changedTouches:?????//涉及當前事件的手指的列表，盡量使用這個代替touches
*????
`let ev = e.changedTouches[0];`
###??觸摸事件的屬性
*????clientX / clientY:??????//觸摸點相對瀏覽器窗口的位置
*????pageX / pageY:???????//觸摸點相對于頁面的位置
*????screenX??/??screenY:????//觸摸點相對于屏幕的位置
*????identifier:????????//touch對象的ID
*????target:???????//當前的DOM元素
*????
##????移動端布局規范：
????<header>頂部</header>
????<main>主體</main>
????<footer>底部</footer>
#???Jquery
##????支持鏈式調用、隱式循環
不停的點下去
##***選擇器***
###???ancestor descendant??
在給定的祖先元素下匹配所有的后代元素
????$("form input")???找form下多有的Input
###???parent > child
????$("form > input")???找form的子元素中的input。input是form的子元素
?
###???prev + next
????$("label + input")???找在label后邊的input。同級關系
###???prev ~ siblings
????$("form ~ input")??找與form同輩的所有input.同級關系
###???:not(selector)
除selector以外的
????$("input:not(:checked)")
###???:eq(index)????匹配一個給定索引值的元素??從0開始
????$("tr:eq(1)")????查找第二行
###???:gt(index)????大于index的????從 0 開始計數
###???:lt(index)????????????????????從 0 開始計數
????$("tr:gt(0)")
###???:header????匹配如 h1, h2, h3之類的標題元素
????$(":header").css("background", "#EEE");
###???:animated????????匹配所有正在執行動畫效果的元素
###???
###???
###???
###???
###???
###???p標簽里沒出現過套用p標簽
###???:first????獲取第一個元素????
????$('li:first');????????li必須是ul中的第一個子元素，否則無法獲得
###??????:first-of-type?????找同類中的第一個
*????結構化偽類，匹配E的父元素的第一個E類型的孩子。
*????等價于:nth-of-type(1) 選擇器
$("span:first-of-type");??????找第一個span。可以不是第一個子元素
###???
###???
###???
###???
##??篩選
### 過濾：
$("p").eq(1)
### <1>??eq(index|-index)???可以是負數，倒數第一?????從0開始
????$('li').eq(0)???先選所有的li,再選li中的第一個
????$('li').eq(-1)???倒數第一個
### <2>??hasClass(class)?????是否有指定類名，返回 true // false
????$(this).hasClass("protected")
????$(this).is('.one')???類名是不是one。返回 true // false
### <3>??filter(expr|obj|ele|fn)?????（字符串\對象\DOM元素\function函數）
篩選出與指定表達式匹配的元素集合。
這個方法用于縮小匹配的范圍。用逗號分隔多個表達式
### <4>??is(expr|obj|ele|fn)
其中至少有一個元素符合要求，返回true
### <5>??map(callback)
將一組元素轉換成其他數組（不論是否是元素數組）
callback：給每個元素執行的函數
????let arr=[1,2,3,4];
????????let result = arr.map(function(value,index){
????????????return value*2;
????????});
????console.log(arr)????????//[1,2,3,4]
????console.log(result)?????//[5,6,7,8]
### <6>??has(expr|ele)????檢測包含有特定子元素?
保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.has()方法將會從給定的jQuery對象中重新創建一組匹配的對象。提供的選擇器會一一測試原先那些對象的后代，含有匹配后代的對象將得以保留。
$('one').has('span')????檢測one下包含span元素
### <7>??not(expr|ele|fn)???刪掉選中的元素
### <8>??slice(start, [end])???選取一個匹配的子集
????$('li').slice(0,2).css('color','red');
### <9>??first
### <10>??last
##????查找
###??<1>??children([expr])?????查找子元素
????$("div").children()???找到div所有的子元素
????$("div").children(".selected")????找div中類名為.selected的子元素
###??<2>??parent([expr])???查找指定元素的父元素
????$("p").parent()???查找p的父元素
????$("p").parent(".selected")????查找p的父元素中類名為selected的父元素。
###??<3>??parents([expr])???篩選祖先元素的表達式
????$("span").parents()???找span所有的父輩元素
###??<4>??parentsUntil([expr|element][,filter])????當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。
找某個范圍之內的父元素
###??<5>??offsetParent()????查找最近的具有定位屬性的父元素
???
###??<6> next([expr])
????$("p").next()???找緊鄰p的元素??同級
###??<7> nextAll([expr])
###??<8> nextUntil([exp|ele][,fil])
###??<9> find(expr|obj|ele)???找他里面的子元素
????$("p").find("span")
????與$("p span")相同。
###??<10>??closest(expr|object|element)?????從元素本身開始，逐級向上級元素匹配，并返回最先匹配的元素。
返回0或1個元素。若本身符合，返回本身。
????li.closest('div')????找li最近的一個div（從父輩中找）
????li.closest('p')????找p，若沒有，就找不到
*????事件委派
###??<11>??prev([expr])
????$("p").prev()????p前邊的一個元素
###??<12>??prevAll([expr])
查找當前元素之前所有的同輩元素
###??<13>??prevUntil([exp|ele][,fil])
###??<14>???$("div").siblings()???找同輩元素
找到每個div的所有同輩元素。??????同級當中 除div以外的其他元素
????$("div").siblings().slideup();???收起來
????$("div").siblings().slidedown();???放下
????$("div").siblings().slidetoggle();???與之前狀態相反
##????串聯
###??<1>??add(expr|ele|html|obj[,con])???????????????？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？
把與表達式匹配的元素添加到jQuery對象中。這個函數可以用于連接分別與兩個表達式匹配的元素結果集。
????$('li').add('p').css('color','blue');????????// 串聯屬性
原來只選的 li ，對li操作，add后，把li 和 p 一起操作
????
###??<2>??andSelf()???已刪
###??<3>??addBack()?????添加堆棧中元素集合到當前集合，一個選擇性的過濾選擇器??？？？？？？？？？？？？？？？？？？？？？？？
$('ul').ep(0).next().addBack().css('color','blue')
????原來只操作ep(1)，加addBack()之后，ep(0)和ep(1)一起操作，把之前的那個也選上。
###??<4>??contents()??查找匹配元素內部所有的子節點（包括文本節點）。 子元素
相當于???childNodes
###??<5>??end()???回到最近的一個"破壞性"操作之前。即，將匹配的元素列表變為前一次的狀態。
*????"破壞性"操作:
????'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'
##???事件
###??<0>??ready(fn)
在DOM加載完成時運行的代碼，可以這樣寫：
????$(document).ready(function(){
??????// 在這里寫你的代碼...
###??<1> button.on('click mouselave',function(){???//事件委派
????????box.slideToggle();
????})
$('box').on('click','li',function(){???//事件委派
????$(this).css('background','red');
})
###??<2>??button.off();//干掉所有事件
????button.off('click');//移除掉點擊事件
????
###??<3> bind??添加???不支持事件委派????為每個匹配元素的特定事件綁定事件處理函數。
????unbind??刪????不支持事件委派
點p時，彈出1
????$("p").bind("click", function(){
??????alert( 1);
????});
###??<4> one?????為每一個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數
在每個對象上，這個事件處理函數只會被執行一次。
????$("p").one("click", function(){??????、、當所有段落被第一次點擊的時候，顯示所有其文本。
??????alert( $(this).text() );
????});
###??<4>??trigger（）???自動檢測到的時候自動觸發???集合
###??<5>??triggerHandler???
*????li.trigger('click')??所有的li都會執行觸發????有瀏覽器默認行為
*????li.triggerHandler('click')??只有第一個li會觸發('click')???沒有瀏覽器默認行為
###??<6> button.hover(function(){????//事件切換
????????$(this).css('background','red');
????},function(){
????????$(this).css('background','blue');
????})
##???事件
blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])????當調整瀏覽器窗口的大小時，發生 resize 事件。
????$(window).resize(function(){
??????alert("Stop it!");
????});
scroll([[data],fn])
select([[data],fn])????
????當 textarea 或文本類型的 input 元素中的文本被選擇時，會發生 select 事件。
submit([[data],fn])
????當提交表單時，會發生 submit 事件。?????該事件只適用于表單元素。
unload([[data],fn])
????在當用戶離開頁面時，會發生 unload 事件。
###??<>??????index()???????搜索匹配的元素，并返回相應元素的索引值，從0開始計數。
$(this).index();??//當前它的下標
?
has返回的是不是bull值？
$(this)??打包成JQuery
$() 中可以傳（函數??選擇器??原生的JQuery/html對象）
$('.one')??是對象
$('.one')??
$('.one')??
是不同的對象
###??<>?
###??<> ??????????????????????????????????????????????????
###??<>?
## 屬性 ##
attr和prop的區別：
attr??-->???attribute???set get????操作自定義屬性
prop??-->???porptype????obj.???????操作標準屬性
###??<1>??attr(name|properties|key,value|fn)???操作自定義屬性
設置或返回被選元素的屬性值。
###??<2>??prop(name|properties|key,value|fn)???操作標準屬性
獲取時： 獲取它的第一個元素的屬性值????獲取第一個
設置時： 設置這類所有的元素屬性值??????設置全部
*????返回屬性的值：
????$(selector).prop(property)
*????設置屬性和值：
????$(selector).prop(property,value)
*????使用函數設置屬性和值：
????$(selector).prop(property,function(index,currentvalue))
*????設置多個屬性和值：
????$(selector).prop({property:value, property:value,...})
let nowsrc = $(this).find('img').prop('src');???獲取這個的src
picimg.prop('src',nowsrc);??????????????????????設置src
###??<3>??removeAttr(name)?????刪除img的name屬性
$("img").removeAttr("src");
###??<4>??removeProp(name)
##??CSS 類?
###??<1> addClass(class|fn)
$("p").addClass("selected");
????box.addClass(function(index,value){
??????return value + 'one'; //最后輸出 class='box boxone'
????})
###??<2> removeClass([class|fn])
###??<3> toggleClass(class|fn[,sw])
??如果存在???--> 刪除
??如果不存在 --> 添加
##??HTML代碼/文本/值????????????????????????????????????????????
###??<1>??html([val|fn])
###??<2>??text([val|fn])
###??<3>??val([val|fn|arr])
##???效果?
基本
###??<1>??show([speed,[easing],[fn]])
speed:slow,normal,fast????1000 毫秒
easing:??默認'swing'???linear
function(){}
###??<2>??hide([s,[e],[fn]])
###??<3>??toggle([s],[e],[fn])
滑動
###??<1>??slideDown([s],[e],[fn])??????????????????????????????????????????????????????????
只調整元素的高度
###??<2>??slideUp([s,[e],[fn]])
###??<3>??slideToggle([s],[e],[fn])
淡入淡出
###??<1>??fadeIn([s],[e],[fn])
###??<2>??fadeOut([s],[e],[fn])
###??<3>??fadeTo([[s],o,[e],[fn]])
opacity：一個0至1之間表示透明度的數字。
###??<4>??fadeToggle([s,[e],[fn]])
自定義
###??<1>??animate(p,[s],[e],[fn])
box.animate({left:'300',width:'+=400'})
###??<2>??stop([c],[j])
clearQueue:如果設置成true，則清空隊列。可以立即結束動畫。
gotoEnd:讓當前正在執行的動畫立即完成，并且重設show和hide的原始樣式，調用回調函數等。
.stop();
????begin.click(function(){
????????box.animate({width:'+=50',left:'+=300'},'slow').animate({top:'+=300'},'slow')
????})
????stop.click(function(){
????????box.stop()
????//????box.stop(true,true)
????})
###??<3>??delay(d,[q])
duration:延時時間，單位：毫秒
queueName:隊列名詞，默認是Fx，動畫隊列。
###??<4>??finish([queue])
停止當前正在運行的動畫，刪除所有排隊的動畫，并完成匹配元素所有的動畫。
設置
###??<1>??jQuery.fx.off
開啟頁面內的動畫
###??<2>??jQuery.fx.interval
設置動畫的幀率
##???CSS
CSS
###??<>???css(name|pro|[,val|fn])
###??<>???jQuery.cssHooks
位置
###??<1>???offset([coordinates])????在當前視口的相對偏移
????var offset = p.offset();
????p.html( "left: " + offset.left + ", top: " + offset.top );
###??<2>???position()????獲取位置，只獲取
###??<3>???scrollTop([val])
元素相對滾動條頂部的偏移。
###??<4>???scrollLeft([val])
尺寸
###??<1>???height([val|fn])??獲取元素當前計算的高度值（px）。
###??<2>???width([val|fn])????box的寬 width
????$("p").height();???????獲取高????獲取第一個
????$("p").height(20);?????設置高????設置所有的高
###??<3>???innerHeight()????box的寬 width + padding
###??<4>???innerWidth()
獲取第一個匹配元素內部區域高度（包括補白、不包括邊框）。
###??<5>???outerHeight([soptions])
###??<6>???outerWidth([options])??????width + padding + border
第一個匹配元素外部高度（默認包括補白和邊框）。
box.width()???????????//300??box的寬 width
box.innerWidth()??????//316??box的寬 width + padding
box.outerWidth()??????//326??box的寬 width + padding + border值?
box.outerWidth(true)??//426??box的寬 width + padding + border + margin
文檔處理
內部插入??-->???子元素
###??<1>???append(content|fn)???主動往父元素中插入一個子元素?????父元素.span(子元素)
????let span = $('<span>').html('我是span')
????box.append(span)
????$('.box').append('<span>直接創建span</span>').css('')??css操作的是box.前邊的
????$('.box').append(function(index,value){
????????return `<p>函數創建的p</p>`
????})
###??<2>???appendTo(content)
子元素.appendTo(父元素).css('')????css操作的是 子元素 前邊的?????????????
###??<3>???prepend(content|fn)?????用法同上
$('.box').prepend('<span>插入到最前面</span>')
###??<4>???prependTo(content)
外部插入
###??<1>???after(content|fn)???在每個匹配的元素之后插入內容。
###??<2>???before(content|fn)???在每個匹配的元素之前插入內容
box.after($('<h1>插入到后面</h1>'))
box.before($('<h1>插入到前面</h1>'))
###??<3>???insertAfter(content)???順序和上面的相反
###??<4>???insertBefore(content)
$('<h1>插入到前面</h1>').insertBefore(box)
包裹
###??<1>???wrap(html|ele|fn)??????
給每個p標簽外包一個 div .box
$('p').wrap('.box')????
###??<2>???unwrap()
$('p').unwrap???拆包
###??<3>???wrapAll(html|ele)
將所有匹配的元素用單個元素包裹起來
$('p').wrapAll('<div>')
###??<4>???wrapInner(html|ele|fn)
$('p').wrapInner('<p>')
替換
###??<1>replaceWith(content|fn)
$('p').replaceWith('<span>替換后的內容</span>')
$('p').replaceWith('box')
$('p').replaceWith($('.box'))
###??<2>replaceAll(selector)
$('.box').replaceAll($('p'))????box被p標簽替換
刪除
###??<>???empty()???刪除子元素
????$("p").empty();???清空p中所有的子元素
###??<>???remove([expr])???刪除自己本身
????$("p").remove();???刪除p標簽????把自己刪除
不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。但除了這個元素本身得以保留之外，其他的比如綁定的事件，附加的數據等都會被移除。
###??<>???detach([expr])
????$("p").detach();??刪除p標簽????把自己刪除
這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。與remove()不同的是，所有綁定的事件、附加的數據等都會保留下來。
從頁面中刪除，
區別：把他原有的事件、屬性保存下來
復制
###??<>??clone([Even[,deepEven]])
會把子元素一起克隆過來
lis.clone()?????可以把子元素一起復制過來
lis.clone(true)?????true會把子元素、數據、事件一起克隆過來
把事件一起復制
????let clone = lis.clone();
????$('ol').append(clone)
拷貝??值 的是 “ 深拷貝 ”
###??<>???queue
###??<>???dequeue
//????定義的隊列名字。
????$(document).queue('myqueue',aa)
????$(document).delay(2000,'myqueue').queue('myqueue',bb)
????$(document).dequeue('myqueue')
###??<>??
###??<>??
###??<>??
###??<>??$(document).queue
?
###??<>???$('div',box)????????????????????????????????????????
###??<> box.slideToggle();
###??<> box.slideUp;
###??<>???加下標編程原生對象
?????$('button');
????let mask = $('.mask')[0];
###??<>???不加下標，是JQuery
?$(this).find(img)[0].src;
?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 1.rem -->
rem是相對于根元素<html>的字體大小
rem是CSS3新引進來的一個度量單位
<!-- 2.視口 -->
視口:就是瀏覽器顯示頁面內容的屏幕區域
布局視口:==視覺視口
視覺視口:手機窗口的大小
理想視口:通常是我們說的屏幕分辨率
像素比=物理像素/邏輯像素 ? ? ? ? ? ? iphone6 ?物理像素750*1334 ? 邏輯像素375*667
<!-- 3.css3 變形 -->
transform:
旋轉rotate(30deg)?
順時針旋轉30度
斜切skew(30deg,0deg)
水平方向上傾斜30度，垂直方向保持不變
縮放scale(0.8,1)
水平方向上縮小了20%，垂直方向上不縮放
移動translate(50px,50px)
水平方向和垂直方向上分別垂直移動50像素
<!-- 4.css3 動畫 -->
@keyframes
@keyframes mymove{
from {top:0px;}
to?
{top:200px;}
}
@keyframes mymove{
0% ? {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
animation
animation 屬性是一個簡寫屬性，用于設置六個動畫屬性
animation-name
規定需要綁定到選擇器的 keyframe 名稱
animation-duration
規定完成動畫所花費的時間，以秒或毫秒計
animation-timing-function
規定動畫的速度曲線
animation-delay
規定在動畫開始之前的延遲
animation-iteration-count
規定動畫應該播放的次數
animation-direction
規定是否應該輪流反向播放動畫
<!-- 5.響應式 @melia -->
當屏幕尺寸小于600px時，應用下面的CSS樣式
screen?
是媒體類型里的一種
and?
為關鍵字
@media screen and (max-width: 600px) {?
? .class {
? ? background: #ccc;
? }
}
<!-- 6.css3 背景 -->
background-size?
屬性規定背景圖片的尺寸
background-origin?
屬性規定背景圖片的定位區域
background-clip
規定背景的繪制區域
<!-- 7.css3 陰影
-->
box-shadow ?添加一個或多個陰影
h-shadow
水平陰影的位置 可以是負值
v-shadow
垂直陰影的位置 可以是負值
blur
模糊距離
spread
陰影的尺寸
color
陰影的顏色
inset
將外部陰影 (outset) 改為內部陰影
<!-- 8.aodiu -->
屬性：
autoplay
如果出現該屬性，則音頻在就緒后馬上播放
controls
如果出現該屬性，則向用戶顯示控件，比如播放按鈕
loop
如果出現該屬性，則每當音頻結束時重新開始播放
preload
如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放。如果使用 "autoplay"，則忽略該屬性
src
url
要播放的音頻的 URL
方法：
canPlayType()
檢查瀏覽器是否能夠播放指定的音頻類型
fastSeek()
在音頻播放器中指定播放時間
getStartDate()
返回新的 Date 對象，表示當前時間線偏移量
load()
重新加載音頻元素
play()
開始播放音頻
pause()
暫停當前播放的音頻
requestFullscreen()?
全屏
document.exitFullscreen 退出全屏
<!-- 9.canvas -->
var ctx=c.getContext("2d");?
繪圖環境
屬性：
fillStyle
設置或返回用于填充繪畫的顏色、漸變或模式
strokeStyle
設置或返回用于筆觸的顏色、漸變或模式
shadowColor
設置或返回用于陰影的顏色
shadowBlur
設置或返回用于陰影的模糊級別
shadowOffsetX
設置或返回陰影距形狀的水平距離
shadowOffsetY
設置或返回陰影距形狀的垂直距離
方法：
rect()
創建矩形
fillRect()
繪制“被填充”的矩形
strokeRect()
繪制矩形（無填充）
clearRect()
在給定的矩形內清除指定的像素
fill()
填充當前繪圖（路徑）
stroke()
繪制已定義的路徑
beginPath()
起始一條路徑，或重置當前路徑
moveTo()
把路徑移動到畫布中的指定點，不創建線條
closePath()
創建從當前點回到起始點的路徑
lineTo()
添加一個新點，然后在畫布中創建從該點到最后指定點的線條
clip()
從原始畫布剪切任意形狀和尺寸的區域
quadraticCurveTo()
創建二次貝塞爾曲線
bezierCurveTo()
創建三次方貝塞爾曲線
arc()
創建弧/曲線（用于創建圓形或部分圓）
<!-- 10.事件 -->
事件：偵測到用戶的一些操作
事件源：事件發生在誰身上
事件處理程序：對事件處理的函數
事件對象：記錄事件發生時的一些信息
獲取事件對象：e||window.event
事件流：頁面中的一個元素事件觸發時，整個頁面都會按照特定是的順序響應該元素的觸發事件
事件流分類：
冒泡型：明確->不明確 依次向上觸發
false
捕獲型：相反
true
阻止事件流：事件對象.stopPropagation();
獲取事件源的對象：事件對象.target
阻止瀏覽器默認行為：事件對象.preventDefault();
<!-- 11.Dom -->
對元素的樣式 內容 屬性 的操作
方法：
獲取元素的4種
<!-- 12.數據類型 -->
變量可以是任意的數據類型
初始類型：
String
Number
undefined
null
boolean
引用類型：
Object
<!-- 13.鏈式調用 隱式循環 -->
鏈式調用：返回的是jquery對象才可以鏈式調用
隱式循環：在方法的內部會把匹配到的元素進行遍歷
<!-- 14.閉包 -->
函數發生嵌套 內部函數訪問外部變量并返回內部函數 當調用這個函數時就發生了閉包
</body>
</html>
<script>
375 ?物理像素
邏輯像素 --> 設計尺寸
視口?
</script>
